@bygd/nc-report-ui 0.1.34 → 0.1.36

package/dist/default/esm/index.js

@@ -1,27 +1,37 @@
 import * as React from 'react';
 import React__default, { useEffect, useMemo, useState, useRef, useContext, createContext } from 'react';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
-import { CircularProgress } from '@material-ui/core';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
 import { Chart as Chart$1 } from 'react-google-charts';
 import numeral from 'numeral';
 import axios from 'axios';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
 import nunjucks from 'nunjucks';
-import FormControl$2 from '@material-ui/core/FormControl';
-import Select$1 from '@material-ui/core/Select';
-import MenuItem$1 from '@material-ui/core/MenuItem';
+import FormControl$1 from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
 import { useInView } from 'react-intersection-observer';
-import { FormControl, Autocomplete, TextField, CircularProgress as CircularProgress$1, Chip, Checkbox, FormHelperText, Snackbar, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Box as Box$1, Typography as Typography$1, Tooltip, IconButton, Paper as Paper$1, Tabs, Tab, Badge } from '@mui/material';
+import { FormControl, Autocomplete, TextField, CircularProgress as CircularProgress$1, Chip, Checkbox, FormHelperText, Snackbar, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Box as Box$1, Typography as Typography$1, Tooltip as Tooltip$1, IconButton as IconButton$1, Paper as Paper$1, Tabs, Tab, Badge } from '@mui/material';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import Box from '@mui/material/Box';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl$1 from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
 import EventEmitter from 'eventemitter3';
-import Grid from '@material-ui/core/Grid';
-import Container from '@material-ui/core/Container';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Container from '@mui/material/Container';
+import InsertChartOutlinedIcon from '@mui/icons-material/InsertChartOutlined';
+import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import PieChartOutlineIcon from '@mui/icons-material/PieChartOutline';
+import DonutLargeIcon from '@mui/icons-material/DonutLarge';
+import ShowChartIcon from '@mui/icons-material/ShowChart';
+import StackedLineChartIcon from '@mui/icons-material/StackedLineChart';
+import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
+import PinOutlinedIcon from '@mui/icons-material/PinOutlined';
+import QueryStatsIcon from '@mui/icons-material/QueryStats';
 import { DataGrid, GridAddIcon, GridDeleteIcon } from '@mui/x-data-grid';
 import AddIcon from '@mui/icons-material/Add';
 import EditIcon from '@mui/icons-material/Edit';
@@ -64,19 +74,16 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-const useStyles$1 = makeStyles(theme => ({
-  root: {
-    width: "100%",
-    "& > * + *": {
-      marginTop: theme.spacing(2)
-    }
-  }
-}));
 function LinearIndeterminate(props) {
-  const classes = useStyles$1();
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classes.root
-  }, props), /*#__PURE__*/React__default.createElement(CircularProgress, {
+  return /*#__PURE__*/React__default.createElement(Box, _extends({}, props, {
+    sx: {
+      width: "100%",
+      "& > * + *": {
+        mt: 2
+      },
+      ...(props?.sx || {})
+    }
+  }), /*#__PURE__*/React__default.createElement(CircularProgress, {
     style: {
       color: "rgb(70, 134, 128)"
     } // custom color
@@ -100,7 +107,7 @@ function ValuePicker(view, schema, outputFormat = 'array') {
       const value = row[item.name];
       const ref = mapped[item.name];
       let formatted = value;
-      if (ref.type === 'timestamp') formatted = new Date(value);else if (!ref.format) formatted = value;else if (ref.format && ref.prefix) formatted = {
+      if (!ref) formatted = value;else if (ref.type === 'timestamp') formatted = new Date(value);else if (!ref.format) formatted = value;else if (ref.format && ref.prefix) formatted = {
         v: +value,
         f: ref.prefix + " " + numeral(value).format(ref.format)
       };else if (ref.format) formatted = {
@@ -454,27 +461,44 @@ const Api = {
   }
 };
 
-const useStyles = makeStyles(theme => ({
-  headerRow: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize
-  },
-  tableRow: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize
-  },
-  oddTableRow: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize
-  },
-  headerCell: {
-    backgroundColor: "white",
-    padding: "4px !important"
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
   }
-  // tableCell:{
-  //     // padding:"4px !important"
-  // },
-}));
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "/* Google Charts Table styling — class names here are referenced from\n * GoogleChart.js via the `cssClassNames` option and must stay in sync. */\n\n.ncGcHeaderRow {\n  font-size: 13px;\n}\n\n.ncGcHeaderCell {\n  background-color: #ffffff !important;\n  padding: 12px 16px !important;\n  border-bottom: 1px solid #e5e7eb !important;\n  border-right: none !important;\n  font-weight: 600 !important;\n  color: #6b7280 !important;\n  text-align: left !important;\n  white-space: nowrap;\n}\n\n.ncGcTableRow,\n.ncGcOddTableRow {\n  font-size: 14px;\n  background-color: #ffffff;\n}\n\n.ncGcTableRow a,\n.ncGcOddTableRow a {\n  color: #468682;\n  text-decoration: underline;\n}\n\n.ncGcTableRow a:hover,\n.ncGcOddTableRow a:hover {\n  color: #305f5c;\n}\n\n.ncGcHoverTableRow {\n  background-color: #f9fafb !important;\n}\n\n.ncGcTableCell {\n  padding: 12px 16px !important;\n  border-bottom: 1px solid #f1f2f4 !important;\n  border-right: none !important;\n  color: #1f2937;\n}\n";
+styleInject(css_248z);
+
+const tableClassNames = {
+  headerRow: "ncGcHeaderRow",
+  headerCell: "ncGcHeaderCell",
+  tableRow: "ncGcTableRow",
+  oddTableRow: "ncGcOddTableRow",
+  hoverTableRow: "ncGcHoverTableRow",
+  tableCell: "ncGcTableCell"
+};
 const dateRangeFormats = {
   none: "YYYY-MM-dd",
   day: "MMM dd",
@@ -489,10 +513,10 @@ function GoogleChart({
   report,
   schema,
   dashboard,
-  query
+  query,
+  params
 }) {
   const [data, setData] = React__default.useState([]);
-  const classes = useStyles();
   const [dateRanges, setDateRanges] = React__default.useState([]);
   useEffect(() => {
     (async () => {
@@ -514,7 +538,8 @@ function GoogleChart({
     if (chart?.doc.chart?.type === "Table") {
       return {
         ...chart?.doc.chart?.options,
-        cssClassNames: classes
+        cssClassNames: tableClassNames,
+        allowHtml: true
       };
     } else if (chart?.doc.chart?.type === "AreaChart") {
       const hAxisFromChart = chart?.doc.chart?.options?.hAxis || {};
@@ -550,16 +575,82 @@ function GoogleChart({
     });
     source?.length ? setData(result) : setData();
   }, [chart, source, view, report, schema]);
+  const hidden = (view?.columns || []).filter(c => c.hidden).map(c => c.name);
+  const visibleIndexes = (view?.columns || []).map((col, i) => hidden.includes(col.name) ? -1 : i).filter(i => i !== -1);
+  const getRaw = cell => cell && typeof cell === "object" && "v" in cell ? cell.v : cell;
+  const getDisplay = cell => cell && typeof cell === "object" && "f" in cell ? cell.f : cell;
+  const escapeHtml = s => String(s ?? "").replace(/[&<>"']/g, c => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  })[c]);
+  const paramAliases = {
+    client_id: params?.client
+  };
+  const renderLink = (template, fullRow) => template.replace(/\{\{([\w.]+)\}\}/g, (_, key) => {
+    if (key.startsWith("params.")) {
+      const k = key.slice("params.".length);
+      return encodeURIComponent(params?.[k] ?? "");
+    }
+    const idx = (view?.columns || []).findIndex(c => c.name === key);
+    if (idx >= 0) return encodeURIComponent(getRaw(fullRow[idx]) ?? "");
+    if (key in paramAliases) return encodeURIComponent(paramAliases[key] ?? "");
+    if (params && key in params) return encodeURIComponent(params[key] ?? "");
+    return "";
+  });
+  const displayData = data?.length ? data.map((row, rowIdx) => {
+    if (rowIdx === 0) return visibleIndexes.map(i => row[i]);
+    return visibleIndexes.map(i => {
+      const col = view.columns[i];
+      const cell = row[i];
+      if (!col?.link) return cell;
+      const url = renderLink(col.link, row);
+      const display = escapeHtml(getDisplay(cell));
+      return {
+        v: getRaw(cell),
+        f: `<a href="${url}" target="blank">${display}</a>`
+      };
+    });
+  }) : data;
+  const maxHeight = chart?.doc?.chart?.options?.maxHeight;
+  const containerStyle = maxHeight ? {
+    maxHeight,
+    overflow: "auto"
+  } : {};
   return data ? /*#__PURE__*/React__default.createElement("div", {
-    style: {}
+    style: containerStyle
   }, /*#__PURE__*/React__default.createElement(Chart$1, _extends({
     width: chart?.doc.size?.width || "100%"
     //height={dashboard ? (chart?.doc.size?.height || '300px') : '100%'}
     ,
     chartType: chart?.doc.chart?.type,
-    data: data,
+    data: displayData,
     options: getOptions(data)
-  }, chart?.doc.chart?.props))) : /*#__PURE__*/React__default.createElement("div", null);
+  }, chart?.doc.chart?.props, {
+    chartEvents: [{
+      eventName: "select",
+      callback: ({
+        chartWrapper
+      }) => {
+        const selection = chartWrapper.getChart().getSelection();
+        if (!selection.length) return;
+        const {
+          row
+        } = selection[0];
+        const values = data[row + 1];
+        const rowObject = (view?.columns || []).reduce((acc, col, i) => {
+          const v = values[i];
+          acc[col.name] = v && typeof v === "object" && "v" in v ? v.v : v;
+          return acc;
+        }, {});
+
+        //const url = https://dev.netcapital.pro/client/financing-order/applications/bdc1a65c-808a-425a-97d9-587b5f6bc003?clientId=7774bcad-05dc-48cf-a52b-9a8a56168818
+        console.log("clicked row:", row, rowObject);
+      }
+    }]
+  }))) : /*#__PURE__*/React__default.createElement("div", null);
 }
 
 function LabelChart({
@@ -567,7 +658,8 @@ function LabelChart({
   source,
   view,
   report,
-  schema
+  schema,
+  onNavigate
 }) {
   const [data, setData] = React__default.useState([]);
   const [value, setValue] = React__default.useState();
@@ -592,18 +684,34 @@ function LabelChart({
       setSubText(subTextRendered);
     }
   }, [chart, source, view, report, schema]);
+  const nextView = chart?.doc?.chart?.options?.nextView;
+  const canNavigate = typeof nextView === "number" && typeof onNavigate === "function";
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: "flex",
       justifyContent: "center",
       alignContent: "center",
-      //alignItems: "center", 
+      //alignItems: "center",
       height: "100%",
       flexDirection: "column"
     }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8
+    }
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h6"
-  }, value?.f || value), /*#__PURE__*/React__default.createElement(Typography, {
+  }, value?.f || value), canNavigate && /*#__PURE__*/React__default.createElement(Link, {
+    component: "button",
+    variant: "h6",
+    onClick: () => onNavigate(nextView),
+    style: {
+      lineHeight: 1,
+      fontSize: "2rem"
+    }
+  }, "\xBB")), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "caption"
   }, subText));
 }
@@ -1081,6 +1189,11 @@ var Chart = ({
     value: props?.filter
   });
   const [currentQuery, setCurrentQuery] = React__default.useState({});
+  useEffect(() => {
+    console.log('CHART', {
+      id
+    });
+  }, [id]);
 
   // sample label 
   // if(id!=='financing_applications') return null;
@@ -1160,7 +1273,9 @@ var Chart = ({
       report: report,
       schema: schema,
       dashboard: dashboard,
-      query: currentQuery
+      query: currentQuery,
+      params: props.params,
+      onNavigate: props.onNavigate
     }));
   };
   const onViewChanged = React__default.useCallback(event => {
@@ -1288,19 +1403,24 @@ var Chart = ({
       gap: "12px",
       height: "100%"
     }
-  }, chart && /*#__PURE__*/React__default.createElement("div", {
+  }, (chart || props?.headerActions) && /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: "flex",
       alignItems: "center",
       lineHeight: 0
     }
-  }, /*#__PURE__*/React__default.createElement(Typography, {
+  }, chart && /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle2",
     style: {
       fontWeight: 600,
       color: "#252525"
     }
-  }, props?.title || chart.doc.name, " ")), loading ? /*#__PURE__*/React__default.createElement(LinearIndeterminate, {
+  }, props?.title || chart.doc.name, " "), props?.headerActions && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginLeft: "auto",
+      lineHeight: "normal"
+    }
+  }, props.headerActions)), loading ? /*#__PURE__*/React__default.createElement(LinearIndeterminate, {
     style: {
       display: "flex",
       justifyContent: "center",
@@ -1316,7 +1436,10 @@ var Chart = ({
     style: {
       flexGrow: 1
     }
-  }), /*#__PURE__*/React__default.createElement("div", null, chart?.doc?.view?.length > 1 && /*#__PURE__*/React__default.createElement(FormControl$2, null, /*#__PURE__*/React__default.createElement(Select$1, {
+  }), /*#__PURE__*/React__default.createElement("div", null, chart?.doc?.view?.length > 1 && /*#__PURE__*/React__default.createElement(FormControl$1, {
+    variant: "standard"
+  }, /*#__PURE__*/React__default.createElement(Select, {
+    variant: "standard",
     labelId: "date-range-select-label",
     id: "date-range-select",
     value: activeViewIndex,
@@ -1325,7 +1448,7 @@ var Chart = ({
       fontSize: "12px"
     },
     disableUnderline: true
-  }, chart.doc.view.map((item, index) => /*#__PURE__*/React__default.createElement(MenuItem$1, {
+  }, chart.doc.view.map((item, index) => /*#__PURE__*/React__default.createElement(MenuItem, {
     key: index,
     value: index
   }, item.title)))))), /*#__PURE__*/React__default.createElement("div", {
@@ -1428,6 +1551,89 @@ const useReportingContextOptional = () => {
   return useContext(ReportingContext);
 };
 
+const VIEW_ICONS = {
+  count: PinOutlinedIcon,
+  list: FormatListBulletedIcon,
+  table: TableChartOutlinedIcon,
+  bar: BarChartIcon,
+  pie: PieChartOutlineIcon,
+  donut: DonutLargeIcon,
+  line: ShowChartIcon,
+  area: StackedLineChartIcon,
+  map: MapOutlinedIcon,
+  stats: QueryStatsIcon
+};
+const resolveViewIcon = icon => VIEW_ICONS[icon] || InsertChartOutlinedIcon;
+function ColumnItem({
+  column,
+  md,
+  api,
+  cache,
+  dashboard,
+  schema,
+  params
+}) {
+  const views = Array.isArray(column.views) ? column.views : null;
+  const [activeIndex, setActiveIndex] = React__default.useState(0);
+  if (views && views.length > 0) {
+    const safeIndex = Math.min(activeIndex, views.length - 1);
+    const active = views[safeIndex];
+    const toolbar = /*#__PURE__*/React__default.createElement(Box, {
+      display: "flex"
+    }, views.map((v, i) => {
+      const Icon = resolveViewIcon(v.icon);
+      const selected = i === safeIndex;
+      return /*#__PURE__*/React__default.createElement(Tooltip, {
+        key: v.id || i,
+        title: v.name || v.id || ""
+      }, /*#__PURE__*/React__default.createElement(IconButton, {
+        size: "small",
+        onClick: () => setActiveIndex(i),
+        "aria-label": v.name || v.id,
+        "aria-pressed": selected,
+        style: {
+          color: selected ? "#468682" : "#9ca3af"
+        }
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        fontSize: "small"
+      })));
+    }));
+    return /*#__PURE__*/React__default.createElement(Grid, {
+      size: {
+        xs: 12,
+        md
+      }
+    }, /*#__PURE__*/React__default.createElement(Chart, {
+      api: api,
+      cache: cache,
+      id: active.id,
+      dashboard: dashboard,
+      schema: schema,
+      title: column.name || active.title,
+      filter: active.filter,
+      params: params,
+      headerActions: toolbar,
+      onNavigate: i => {
+        if (typeof i === "number" && i >= 0 && i < views.length) setActiveIndex(i);
+      }
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    size: {
+      xs: 12,
+      md
+    }
+  }, /*#__PURE__*/React__default.createElement(Chart, {
+    api: api,
+    cache: cache,
+    id: column.id,
+    dashboard: dashboard,
+    schema: schema,
+    title: column.title,
+    filter: column.filter,
+    params: params
+  }));
+}
 function Dashboard({
   id,
   api,
@@ -1476,18 +1682,21 @@ function Dashboard({
   const create_rows_and_columns = async entity => {
     const srcRows = entity?.doc?.rows || [];
     const targetRows = [];
+    const resolveFilter = entity => {
+      if (entity?.override?.filter?.length) {
+        const filter = {};
+        entity.override.filter.forEach(item => {
+          if (item.hasOwnProperty("value")) filter[item.field] = [item.value];
+          // else filter[item.field] = [sourceDataRow[item.field]];
+        });
+        entity.filter = filter;
+      }
+    };
     for (let i = 0; i < srcRows.length; i++) {
       const row = srcRows[i];
       row.columns?.forEach(column => {
-        // filter
-        if (column.override?.filter?.length) {
-          const filter = {};
-          column.override.filter.forEach(item => {
-            if (item.hasOwnProperty("value")) filter[item.field] = [item.value];
-            // else filter[item.field] = [sourceDataRow[item.field]];
-          });
-          column.filter = filter;
-        }
+        resolveFilter(column);
+        column.views?.forEach(resolveFilter);
       });
       targetRows.push(row);
     }
@@ -1546,42 +1755,33 @@ function Dashboard({
       /*#__PURE__*/
       // Row 2 is special: nested grid inside a full-width container
       React__default.createElement(Grid, {
-        item: true,
-        xs: 12
+        size: {
+          xs: 12
+        }
       }, /*#__PURE__*/React__default.createElement(Grid, {
         container: true,
         spacing: 3
-      }, row.columns.map((column, i) => /*#__PURE__*/React__default.createElement(Grid, {
+      }, row.columns.map((column, i) => /*#__PURE__*/React__default.createElement(ColumnItem, {
         key: i,
-        item: true,
-        xs: 12,
-        md: md
-      }, /*#__PURE__*/React__default.createElement(Chart, {
+        column: column,
+        md: md,
         api: finalApi,
         cache: cache.current,
-        id: column.id,
         dashboard: dashboard,
         schema: schema,
-        title: column.title,
-        filter: column.filter,
         params: finalParams
-      }))))) :
+      })))) :
       // All other rows behave normally
-      row.columns.map((column, i) => /*#__PURE__*/React__default.createElement(Grid, {
+      row.columns.map((column, i) => /*#__PURE__*/React__default.createElement(ColumnItem, {
         key: i,
-        item: true,
-        xs: 12,
-        md: md
-      }, /*#__PURE__*/React__default.createElement(Chart, {
+        column: column,
+        md: md,
         api: finalApi,
         cache: cache.current,
-        id: column.id,
         dashboard: dashboard,
         schema: schema,
-        title: column.title,
-        filter: column.filter,
         params: finalParams
-      }))));
+      })));
     })))
   );
 }
@@ -1854,40 +2054,40 @@ const ReportDefinitionsList = ({
           display: "flex",
           gap: 1
         }
-      }, /*#__PURE__*/React__default.createElement(Tooltip, {
+      }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
         title: "Run"
-      }, /*#__PURE__*/React__default.createElement(IconButton, {
+      }, /*#__PURE__*/React__default.createElement(IconButton$1, {
         size: "small",
         color: "success",
         onClick: e => handleRun(params.row.id, e)
       }, /*#__PURE__*/React__default.createElement(PlayArrowIcon, {
         fontSize: "small"
-      }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+      }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
         title: "Edit"
-      }, /*#__PURE__*/React__default.createElement(IconButton, {
+      }, /*#__PURE__*/React__default.createElement(IconButton$1, {
         size: "small",
         color: "primary",
         onClick: e => handleEdit(params.row.id, e)
       }, /*#__PURE__*/React__default.createElement(EditIcon, {
         fontSize: "small"
-      }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+      }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
         title: "Clone"
-      }, /*#__PURE__*/React__default.createElement(IconButton, {
+      }, /*#__PURE__*/React__default.createElement(IconButton$1, {
         size: "small",
         onClick: e => handleClone(params.row.id, e)
       }, /*#__PURE__*/React__default.createElement(ContentCopyIcon, {
         fontSize: "small"
-      }))), isUserOverride ? /*#__PURE__*/React__default.createElement(Tooltip, {
+      }))), isUserOverride ? /*#__PURE__*/React__default.createElement(Tooltip$1, {
         title: "Revert to the system report"
-      }, /*#__PURE__*/React__default.createElement(IconButton, {
+      }, /*#__PURE__*/React__default.createElement(IconButton$1, {
         size: "small",
         color: "warning",
         onClick: e => handleDelete(params.row.id, e)
       }, /*#__PURE__*/React__default.createElement(RestoreIcon, {
         fontSize: "small"
-      }))) : /*#__PURE__*/React__default.createElement(Tooltip, {
+      }))) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
         title: "Delete"
-      }, /*#__PURE__*/React__default.createElement(IconButton, {
+      }, /*#__PURE__*/React__default.createElement(IconButton$1, {
         size: "small",
         color: "error",
         onClick: e => handleDelete(params.row.id, e)
@@ -2420,7 +2620,7 @@ const SortableChip$1 = ({
     sx: {
       minWidth: 0
     }
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: fullLabel || displayLabel,
     arrow: true,
     placement: "top"
@@ -2443,30 +2643,30 @@ const SortableChip$1 = ({
       opacity: 0,
       transition: "opacity 0.2s"
     }
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Edit title",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: handleEditClick,
     "aria-label": "edit title"
   }, /*#__PURE__*/React__default.createElement(EditIcon, {
     fontSize: "small"
-  }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: sortOrder === null ? "No sort" : sortOrder === "asc" ? "Ascending" : "Descending",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: handleSortToggle,
     "aria-label": "toggle sort order",
     color: sortOrder ? "primary" : "default"
-  }, getSortIcon())), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, getSortIcon())), /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Delete",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: onDelete,
     "aria-label": "delete",
@@ -2487,14 +2687,14 @@ const SortableChip$1 = ({
       opacity: 0,
       transition: "opacity 0.2s"
     }
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: onMoveUp,
     disabled: isFirst,
     "aria-label": "move up"
   }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
     fontSize: "small"
-  })), /*#__PURE__*/React__default.createElement(IconButton, {
+  })), /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: onMoveDown,
     disabled: isLast,
@@ -2518,32 +2718,32 @@ const SortableChip$1 = ({
       gap: 0.5,
       opacity: 1
     }
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Save",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: handleSave,
     color: "primary",
     "aria-label": "save title"
   }, /*#__PURE__*/React__default.createElement(CheckIcon, {
     fontSize: "small"
-  }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Cancel",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: handleCancel,
     "aria-label": "cancel edit"
   }, /*#__PURE__*/React__default.createElement(CloseIcon, {
     fontSize: "small"
-  }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip, {
+  }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Reset to default",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: handleReset,
     color: "warning",
@@ -2881,11 +3081,11 @@ const Dimensions = ({
       width: "400px",
       fontFamily: "system-ui"
     }
-  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Add all available dimensions",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton$1, {
     onClick: handleAddAll,
     disabled: getDimensionItems().filter(item => !item.disabled).length === 0,
     "aria-label": "add all dimensions",
@@ -3002,7 +3202,7 @@ const MetricSourceIcon = ({
     fontSize: '15px'
   };
   if (source === 'kpi') {
-    return /*#__PURE__*/React__default.createElement(Tooltip, {
+    return /*#__PURE__*/React__default.createElement(Tooltip$1, {
       title: "KPI Metric",
       arrow: true,
       placement: "top"
@@ -3014,7 +3214,7 @@ const MetricSourceIcon = ({
     }));
   }
   if (source === 'dynamic') {
-    return /*#__PURE__*/React__default.createElement(Tooltip, {
+    return /*#__PURE__*/React__default.createElement(Tooltip$1, {
       title: "Dynamic Metric",
       arrow: true,
       placement: "top"
@@ -3026,7 +3226,7 @@ const MetricSourceIcon = ({
     }));
   }
   if (source === 'provider') {
-    return /*#__PURE__*/React__default.createElement(Tooltip, {
+    return /*#__PURE__*/React__default.createElement(Tooltip$1, {
       title: "Provider Metric",
       arrow: true,
       placement: "top"
@@ -3180,7 +3380,7 @@ const SortableChip = ({
     sx: {
       minWidth: 0
     }
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: fullLabel || displayLabel,
     arrow: true,
     placement: "top"
@@ -3203,21 +3403,21 @@ const SortableChip = ({
       opacity: 0,
       transition: "opacity 0.2s"
     }
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Edit title",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: handleEditClick,
     "aria-label": "edit title"
   }, /*#__PURE__*/React__default.createElement(EditIcon, {
     fontSize: "small"
-  }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Delete",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: onDelete,
     "aria-label": "delete",
@@ -3238,14 +3438,14 @@ const SortableChip = ({
       opacity: 0,
       transition: "opacity 0.2s"
     }
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: onMoveUp,
     disabled: isFirst,
     "aria-label": "move up"
   }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
     fontSize: "small"
-  })), /*#__PURE__*/React__default.createElement(IconButton, {
+  })), /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: onMoveDown,
     disabled: isLast,
@@ -3269,32 +3469,32 @@ const SortableChip = ({
       gap: 0.5,
       opacity: 1
     }
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Save",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: handleSave,
     color: "primary",
     "aria-label": "save title"
   }, /*#__PURE__*/React__default.createElement(CheckIcon, {
     fontSize: "small"
-  }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Cancel",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: handleCancel,
     "aria-label": "cancel edit"
   }, /*#__PURE__*/React__default.createElement(CloseIcon, {
     fontSize: "small"
-  }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip, {
+  }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Reset to default",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
     size: "small",
     onClick: handleReset,
     color: "warning",
@@ -3618,11 +3818,11 @@ const Metrics = ({
       width: '400px',
       fontFamily: "system-ui"
     }
-  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "Add all available metrics",
     arrow: true,
     placement: "top"
-  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton$1, {
     onClick: handleAddAll,
     disabled: getMetricItems().filter(item => !item.disabled).length === 0,
     "aria-label": "add all metrics",
@@ -4760,28 +4960,28 @@ const Filters = ({
         opacity: 0,
         transition: "opacity 0.2s"
       }
-    }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
       title: "Rename filter",
       arrow: true
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
+    }, /*#__PURE__*/React__default.createElement(IconButton$1, {
       size: "small",
       onClick: () => handleStartEditTitle(fullPath, dimensionTitleOverrides[fullPath] || filter.dimensionTitle),
       disabled: isEditing
     }, /*#__PURE__*/React__default.createElement(EditIcon, {
       fontSize: "small"
-    }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+    }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
       title: "Edit filter values",
       arrow: true
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
+    }, /*#__PURE__*/React__default.createElement(IconButton$1, {
       size: "small",
       onClick: () => handleEditFilter(fullPath, filter),
       disabled: isEditing
     }, /*#__PURE__*/React__default.createElement(FilterAltIcon, {
       fontSize: "small"
-    }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+    }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
       title: "Remove filter",
       arrow: true
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
+    }, /*#__PURE__*/React__default.createElement(IconButton$1, {
       size: "small",
       onClick: () => onRemoveFilter(fullPath),
       sx: {
@@ -4789,11 +4989,11 @@ const Filters = ({
       }
     }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
       fontSize: "small"
-    }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+    }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
       title: /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("strong", null, "Path:"), " ", formatProviderPath(filter), " \u2192 ", dimensionTitleOverrides[fullPath] || filter.dimensionTitle), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("strong", null, "Full Path:"), " ", fullPath), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("strong", null, isDate ? 'Date Range' : `Values (${valueCount})`, ":"), " ", valuesList)),
       arrow: true,
       placement: "right"
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
+    }, /*#__PURE__*/React__default.createElement(IconButton$1, {
       size: "small",
       disabled: isEditing
     }, /*#__PURE__*/React__default.createElement(InfoOutlinedIcon, {
@@ -4816,27 +5016,27 @@ const Filters = ({
         display: "flex",
         gap: 0.5
       }
-    }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
       title: "Save",
       arrow: true
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
+    }, /*#__PURE__*/React__default.createElement(IconButton$1, {
       size: "small",
       onClick: () => handleSaveTitle(fullPath),
       color: "primary"
     }, /*#__PURE__*/React__default.createElement(CheckIcon, {
       fontSize: "small"
-    }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+    }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
       title: "Cancel",
       arrow: true
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
+    }, /*#__PURE__*/React__default.createElement(IconButton$1, {
       size: "small",
       onClick: handleCancelEditTitle
     }, /*#__PURE__*/React__default.createElement(CloseIcon, {
       fontSize: "small"
-    }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip, {
+    }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip$1, {
       title: "Reset to default",
       arrow: true
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
+    }, /*#__PURE__*/React__default.createElement(IconButton$1, {
       size: "small",
       onClick: () => handleResetTitle(fullPath),
       color: "warning"