@bygd/nc-report-ui 0.1.33 → 0.1.35

package/dist/default/esm/index.js

@@ -7,12 +7,13 @@ 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 Link from '@material-ui/core/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 { 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$2, 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';
@@ -21,7 +22,21 @@ 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 Box$1 from '@material-ui/core/Box';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
 import Container from '@material-ui/core/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';
@@ -100,7 +115,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 = {
@@ -457,23 +472,51 @@ const Api = {
 const useStyles = makeStyles(theme => ({
   headerRow: {
     fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize
+    fontSize: 13
+  },
+  headerCell: {
+    backgroundColor: "#ffffff !important",
+    padding: "12px 16px !important",
+    borderBottom: "1px solid #e5e7eb !important",
+    borderRight: "none !important",
+    fontWeight: "600 !important",
+    color: "#6b7280 !important",
+    textAlign: "left !important",
+    whiteSpace: "nowrap"
   },
   tableRow: {
     fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize
+    fontSize: 14,
+    backgroundColor: "#ffffff",
+    "& a": {
+      color: "#468682",
+      textDecoration: "underline"
+    },
+    "& a:hover": {
+      color: "#305f5c"
+    }
   },
   oddTableRow: {
     fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize
+    fontSize: 14,
+    backgroundColor: "#ffffff",
+    "& a": {
+      color: "#468682",
+      textDecoration: "underline"
+    },
+    "& a:hover": {
+      color: "#305f5c"
+    }
   },
-  headerCell: {
-    backgroundColor: "white",
-    padding: "4px !important"
+  hoverTableRow: {
+    backgroundColor: "#f9fafb !important"
+  },
+  tableCell: {
+    padding: "12px 16px !important",
+    borderBottom: "1px solid #f1f2f4 !important",
+    borderRight: "none !important",
+    color: "#1f2937"
   }
-  // tableCell:{
-  //     // padding:"4px !important"
-  // },
 }));
 const dateRangeFormats = {
   none: "YYYY-MM-dd",
@@ -489,7 +532,8 @@ function GoogleChart({
   report,
   schema,
   dashboard,
-  query
+  query,
+  params
 }) {
   const [data, setData] = React__default.useState([]);
   const classes = useStyles();
@@ -514,7 +558,8 @@ function GoogleChart({
     if (chart?.doc.chart?.type === "Table") {
       return {
         ...chart?.doc.chart?.options,
-        cssClassNames: classes
+        cssClassNames: classes,
+        allowHtml: true
       };
     } else if (chart?.doc.chart?.type === "AreaChart") {
       const hAxisFromChart = chart?.doc.chart?.options?.hAxis || {};
@@ -550,16 +595,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 +678,8 @@ function LabelChart({
   source,
   view,
   report,
-  schema
+  schema,
+  onNavigate
 }) {
   const [data, setData] = React__default.useState([]);
   const [value, setValue] = React__default.useState();
@@ -592,18 +704,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 +1209,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 +1293,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 +1423,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",
@@ -1428,6 +1568,87 @@ 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$1, {
+      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, {
+      item: true,
+      xs: 12,
+      md: 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, {
+    item: true,
+    xs: 12,
+    md: 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 +1697,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);
     }
@@ -1551,37 +1775,27 @@ function Dashboard({
       }, /*#__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
-      }))));
+      })));
     })))
   );
 }
@@ -1849,45 +2063,45 @@ const ReportDefinitionsList = ({
     disableColumnMenu: true,
     renderCell: params => {
       const isUserOverride = params.row.source === "user-override";
-      return /*#__PURE__*/React__default.createElement(Box$1, {
+      return /*#__PURE__*/React__default.createElement(Box$2, {
         sx: {
           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)
@@ -1906,7 +2120,7 @@ const ReportDefinitionsList = ({
     onSelectReport(params.row.id);
   };
   if (loading) {
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(Box$2, {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -1914,7 +2128,7 @@ const ReportDefinitionsList = ({
     }, /*#__PURE__*/React__default.createElement(CircularProgress$1, null));
   }
   if (error) {
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(Box$2, {
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
@@ -1929,14 +2143,14 @@ const ReportDefinitionsList = ({
       onClick: loadReportDefinitions
     }, "Retry"));
   }
-  return /*#__PURE__*/React__default.createElement(Box$1, {
+  return /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       p: 3,
       display: "flex",
       flexDirection: "column",
       fontFamily: "system-ui"
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       justifyContent: "flex-end",
@@ -1956,7 +2170,7 @@ const ReportDefinitionsList = ({
     },
     startIcon: /*#__PURE__*/React__default.createElement(AddIcon, null),
     onClick: onAddNew
-  }, "Add New Report")), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Add New Report")), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       flex: 1,
       width: "100%",
@@ -2105,7 +2319,7 @@ const ProviderSelection = ({
         disabled: disabled,
         disabledReason: disabledReason
       };
-    });
+    }).sort((a, b) => a.value.localeCompare(b.value));
   };
 
   // Handle selection at a specific level
@@ -2198,11 +2412,11 @@ const ProviderSelection = ({
     }
     return dropdowns;
   };
-  return /*#__PURE__*/React__default.createElement(Box$1, null, selectionChain.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
+  return /*#__PURE__*/React__default.createElement(Box$2, null, selectionChain.length > 0 && /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       marginBottom: 2
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -2385,7 +2599,7 @@ const SortableChip$1 = ({
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: setNodeRef,
     style: style
-  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, attributes), /*#__PURE__*/React__default.createElement(Box$2, {
     ref: containerRef,
     sx: {
       display: "flex",
@@ -2402,7 +2616,7 @@ const SortableChip$1 = ({
         opacity: 1 // show icons on hover
       }
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
+  }, /*#__PURE__*/React__default.createElement(Box$2, _extends({}, listeners, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -2416,11 +2630,11 @@ const SortableChip$1 = ({
       cursor: "grab",
       color: "rgba(110, 110, 110, 0.62)"
     }
-  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
+  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       minWidth: 0
     }
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: fullLabel || displayLabel,
     arrow: true,
     placement: "top"
@@ -2435,7 +2649,7 @@ const SortableChip$1 = ({
       overflow: "hidden",
       textOverflow: "ellipsis"
     }
-  }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$2, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -2443,30 +2657,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",
@@ -2475,11 +2689,11 @@ const SortableChip$1 = ({
     }
   }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
     fontSize: "small"
-  })))), /*#__PURE__*/React__default.createElement(Box$1, {
+  })))), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       flex: 1
     }
-  }), /*#__PURE__*/React__default.createElement(Box$1, {
+  }), /*#__PURE__*/React__default.createElement(Box$2, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -2487,14 +2701,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,
@@ -2511,46 +2725,46 @@ const SortableChip$1 = ({
       minWidth: '200px',
       maxWidth: '400px'
     }
-  }), /*#__PURE__*/React__default.createElement(Box$1, {
+  }), /*#__PURE__*/React__default.createElement(Box$2, {
     className: "hover-icons",
     sx: {
       display: "flex",
       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",
     "aria-label": "reset title"
   }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
     fontSize: "small"
-  })))), /*#__PURE__*/React__default.createElement(Box$1, {
+  })))), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       flex: 1
     }
@@ -2677,7 +2891,7 @@ const Dimensions = ({
         });
       });
     });
-    return items;
+    return items.sort((a, b) => a.value.localeCompare(b.value));
   };
   const handleAddClick = () => {
     setIsAdding(true);
@@ -2805,7 +3019,7 @@ const Dimensions = ({
     }
     return pathParts.join(" → ");
   };
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       justifyContent: "flex-start",
@@ -2847,7 +3061,7 @@ const Dimensions = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       mb: 3
     }
@@ -2865,7 +3079,7 @@ const Dimensions = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Dimension"), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Select Dimension"), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -2881,11 +3095,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",
@@ -2901,7 +3115,7 @@ const Dimensions = ({
         opacity: 0.5
       }
     }
-  }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       justifyContent: "flex-end",
@@ -2944,7 +3158,7 @@ const Dimensions = ({
         boxShadow: "none"
       }
     }
-  }, "Save Dimension"))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Save Dimension"))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       marginTop: 0
     }
@@ -2969,7 +3183,7 @@ const Dimensions = ({
   }, /*#__PURE__*/React__default.createElement(SortableContext, {
     items: savedDimensions.map((_, index) => index),
     strategy: verticalListSortingStrategy
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       flexDirection: "column",
@@ -3002,7 +3216,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 +3228,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 +3240,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"
@@ -3137,7 +3351,7 @@ const SortableChip = ({
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: setNodeRef,
     style: style
-  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, attributes), /*#__PURE__*/React__default.createElement(Box$2, {
     ref: containerRef,
     sx: {
       display: "flex",
@@ -3154,7 +3368,7 @@ const SortableChip = ({
         opacity: 1 // show icons on hover
       }
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
+  }, /*#__PURE__*/React__default.createElement(Box$2, _extends({}, listeners, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -3168,7 +3382,7 @@ const SortableChip = ({
       cursor: "grab",
       color: "rgba(110, 110, 110, 0.62)"
     }
-  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, source && /*#__PURE__*/React__default.createElement(Box$1, {
+  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, source && /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: 'flex',
       alignItems: 'center',
@@ -3176,11 +3390,11 @@ const SortableChip = ({
     }
   }, /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
     source: source
-  })), /*#__PURE__*/React__default.createElement(Box$1, {
+  })), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       minWidth: 0
     }
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: fullLabel || displayLabel,
     arrow: true,
     placement: "top"
@@ -3195,7 +3409,7 @@ const SortableChip = ({
       overflow: "hidden",
       textOverflow: "ellipsis"
     }
-  }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$2, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -3203,21 +3417,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",
@@ -3226,11 +3440,11 @@ const SortableChip = ({
     }
   }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
     fontSize: "small"
-  })))), /*#__PURE__*/React__default.createElement(Box$1, {
+  })))), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       flex: 1
     }
-  }), /*#__PURE__*/React__default.createElement(Box$1, {
+  }), /*#__PURE__*/React__default.createElement(Box$2, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -3238,14 +3452,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,
@@ -3262,46 +3476,46 @@ const SortableChip = ({
       minWidth: '200px',
       maxWidth: '400px'
     }
-  }), /*#__PURE__*/React__default.createElement(Box$1, {
+  }), /*#__PURE__*/React__default.createElement(Box$2, {
     className: "hover-icons",
     sx: {
       display: "flex",
       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",
     "aria-label": "reset title"
   }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
     fontSize: "small"
-  })))), /*#__PURE__*/React__default.createElement(Box$1, {
+  })))), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       flex: 1
     }
@@ -3414,7 +3628,7 @@ const Metrics = ({
         }) : undefined
       };
     });
-    return items;
+    return items.sort((a, b) => a.value.localeCompare(b.value));
   };
   const handleAddClick = () => {
     setIsAdding(true);
@@ -3542,7 +3756,7 @@ const Metrics = ({
     }
     return pathParts.join(' → ');
   };
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       justifyContent: "flex-start",
@@ -3584,7 +3798,7 @@ const Metrics = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       mb: 3
     }
@@ -3602,7 +3816,7 @@ const Metrics = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Metric"), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Select Metric"), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: 'flex',
       alignItems: 'center',
@@ -3618,11 +3832,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",
@@ -3638,7 +3852,7 @@ const Metrics = ({
         opacity: 0.5
       }
     }
-  }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       justifyContent: "flex-end",
@@ -3681,7 +3895,7 @@ const Metrics = ({
         boxShadow: "none"
       }
     }
-  }, "Save Metric"))), savedMetrics.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Save Metric"))), savedMetrics.length > 0 && /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       marginTop: 0
     }
@@ -3700,7 +3914,7 @@ const Metrics = ({
   }, /*#__PURE__*/React__default.createElement(SortableContext, {
     items: savedMetrics.map((_, index) => index),
     strategy: verticalListSortingStrategy
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: 'flex',
       flexDirection: 'column',
@@ -3810,7 +4024,7 @@ const Filters = ({
         }
       });
     });
-    return items;
+    return items.sort((a, b) => a.value.localeCompare(b.value));
   };
   const handleAddClick = () => {
     setIsAdding(true);
@@ -4321,7 +4535,7 @@ const Filters = ({
 
   // Convert savedFilters object to array for display
   const filterEntries = Object.entries(savedFilters);
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       justifyContent: "flex-start",
@@ -4384,7 +4598,7 @@ const Filters = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       mb: 3
     }
@@ -4402,7 +4616,7 @@ const Filters = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Dimension for Filter"), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Select Dimension for Filter"), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       mb: 3
     }
@@ -4429,7 +4643,7 @@ const Filters = ({
       }
     }, isDate ? 'Select Date Range' : 'Select Filter Values'), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
       dateAdapter: AdapterDayjs
-    }, /*#__PURE__*/React__default.createElement(Box$1, {
+    }, /*#__PURE__*/React__default.createElement(Box$2, {
       sx: {
         display: 'flex',
         gap: 2,
@@ -4461,7 +4675,7 @@ const Filters = ({
           clearable: true
         }
       }
-    }))) : /*#__PURE__*/React__default.createElement(Box$1, {
+    }))) : /*#__PURE__*/React__default.createElement(Box$2, {
       sx: {
         width: '400px'
       }
@@ -4478,7 +4692,7 @@ const Filters = ({
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
     })));
-  })(), /*#__PURE__*/React__default.createElement(Box$1, {
+  })(), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       justifyContent: "flex-end",
@@ -4546,7 +4760,7 @@ const Filters = ({
       mb: 1.5,
       color: "rgb(37, 37, 37)"
     }
-  }, "Select Dimension from Report"), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Select Dimension from Report"), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       mb: 3
     }
@@ -4554,7 +4768,7 @@ const Filters = ({
     items: existingDimensions.map(dim => ({
       key: dim.fullPath,
       value: dimensionTitleOverrides[dim.fullPath] || dim.dimensionTitle
-    })),
+    })).sort((a, b) => a.value.localeCompare(b.value)),
     value: selectedExistingDimension,
     label: "Choose Dimension",
     onChange: handleExistingDimensionChange,
@@ -4575,7 +4789,7 @@ const Filters = ({
       }
     }, isDate ? 'Select Date Range' : 'Select Filter Values'), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
       dateAdapter: AdapterDayjs
-    }, /*#__PURE__*/React__default.createElement(Box$1, {
+    }, /*#__PURE__*/React__default.createElement(Box$2, {
       sx: {
         display: 'flex',
         gap: 2,
@@ -4607,7 +4821,7 @@ const Filters = ({
           clearable: true
         }
       }
-    }))) : /*#__PURE__*/React__default.createElement(Box$1, {
+    }))) : /*#__PURE__*/React__default.createElement(Box$2, {
       sx: {
         width: '400px'
       }
@@ -4624,7 +4838,7 @@ const Filters = ({
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
     })));
-  })(), /*#__PURE__*/React__default.createElement(Box$1, {
+  })(), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       justifyContent: "flex-end",
@@ -4673,7 +4887,7 @@ const Filters = ({
         boxShadow: "none"
       }
     }
-  }, "Save Filter"))), filterEntries.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Save Filter"))), filterEntries.length > 0 && /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       marginTop: 0
     }
@@ -4685,7 +4899,7 @@ const Filters = ({
       marginBottom: 1,
       color: "rgb(37, 37, 37)"
     }
-  }, "Saved Filters"), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Saved Filters"), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: 'flex',
       flexDirection: 'column',
@@ -4718,9 +4932,9 @@ const Filters = ({
     // Use filter title override if exists, otherwise use dimension title override, otherwise use default dimension title
     const displayLabel = titleOverrides[fullPath] || dimensionTitleOverrides[fullPath] || filter.dimensionTitle;
     const hasCustomTitle = !!titleOverrides[fullPath];
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(Box$2, {
       key: fullPath
-    }, /*#__PURE__*/React__default.createElement(Box$1, {
+    }, /*#__PURE__*/React__default.createElement(Box$2, {
       sx: {
         display: "flex",
         alignItems: "center",
@@ -4736,7 +4950,7 @@ const Filters = ({
           opacity: 1
         }
       }
-    }, !isEditingTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
+    }, !isEditingTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$2, {
       sx: {
         display: 'flex',
         alignItems: 'center',
@@ -4752,7 +4966,7 @@ const Filters = ({
         color: "#1a1a1a",
         fontSize: "14px"
       }
-    }, displayLabel), /*#__PURE__*/React__default.createElement(Box$1, {
+    }, displayLabel), /*#__PURE__*/React__default.createElement(Box$2, {
       className: "hover-icons",
       sx: {
         display: "flex",
@@ -4760,28 +4974,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 +5003,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, {
@@ -4811,32 +5025,32 @@ const Filters = ({
       sx: {
         flex: 1
       }
-    }), /*#__PURE__*/React__default.createElement(Box$1, {
+    }), /*#__PURE__*/React__default.createElement(Box$2, {
       sx: {
         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"
@@ -4860,7 +5074,7 @@ const Filters = ({
       }
     }, "Edit ", isDate ? 'Date Range' : 'Values', " for: ", dimensionTitleOverrides[fullPath] || filter.dimensionTitle), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
       dateAdapter: AdapterDayjs
-    }, /*#__PURE__*/React__default.createElement(Box$1, {
+    }, /*#__PURE__*/React__default.createElement(Box$2, {
       sx: {
         display: 'flex',
         gap: 2,
@@ -4893,7 +5107,7 @@ const Filters = ({
           clearable: true
         }
       }
-    }))) : /*#__PURE__*/React__default.createElement(Box$1, {
+    }))) : /*#__PURE__*/React__default.createElement(Box$2, {
       sx: {
         width: '400px',
         marginBottom: 2
@@ -4910,7 +5124,7 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
-    })), /*#__PURE__*/React__default.createElement(Box$1, {
+    })), /*#__PURE__*/React__default.createElement(Box$2, {
       sx: {
         display: 'flex',
         gap: 1,
@@ -5047,7 +5261,7 @@ const ReportDataGrid = ({
         flex: 1,
         minWidth: 150,
         type: metricDef?.type === 'integer' || metricDef?.type === 'currency' ? 'number' : 'string',
-        renderHeader: () => /*#__PURE__*/React__default.createElement(Box$1, {
+        renderHeader: () => /*#__PURE__*/React__default.createElement(Box$2, {
           sx: {
             display: 'flex',
             alignItems: 'center',
@@ -5102,7 +5316,7 @@ const ReportDataGrid = ({
     }
   };
   if (loading) {
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(Box$2, {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -5110,7 +5324,7 @@ const ReportDataGrid = ({
     }, /*#__PURE__*/React__default.createElement(CircularProgress$1, null));
   }
   if (!reportData || reportData.length === 0) {
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(Box$2, {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -5120,7 +5334,7 @@ const ReportDataGrid = ({
       color: "textSecondary"
     }, "No data available. Run a report to see results."));
   }
-  return /*#__PURE__*/React__default.createElement(Box$1, {
+  return /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       height: 600,
       width: '100%'
@@ -5158,7 +5372,7 @@ function TabPanel({
     hidden: value !== index,
     id: `report-tabpanel-${index}`,
     "aria-labelledby": `report-tab-${index}`
-  }, value === index && /*#__PURE__*/React__default.createElement(Box$1, {
+  }, value === index && /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       py: 3
     }
@@ -6015,12 +6229,12 @@ const ReportBuilder = ({
     }
   };
   const canSaveReport = selectedProvider && reportTitle.trim() && (report.dimensions.length > 0 || report.metrics.length > 0);
-  return /*#__PURE__*/React__default.createElement(Box$1, {
+  return /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       p: 3,
       fontFamily: "system-ui"
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       justifyContent: "space-between",
@@ -6033,7 +6247,7 @@ const ReportBuilder = ({
     variant: "outlined",
     startIcon: /*#__PURE__*/React__default.createElement(ArrowBackIcon, null),
     onClick: onBackToList
-  }, "Back to List")), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Back to List")), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       mt: 2,
       p: 3,
@@ -6046,7 +6260,7 @@ const ReportBuilder = ({
       gap: 3,
       boxShadow: "0px 2px 4px rgba(0,0,0,0.02)"
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       gap: 4,
@@ -6089,7 +6303,7 @@ const ReportBuilder = ({
       fontFamily: "system-ui"
     },
     disabled: !!reportDefinitionId
-  }))), /*#__PURE__*/React__default.createElement(Box$1, {
+  }))), /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       display: "flex",
       gap: 2,
@@ -6157,7 +6371,7 @@ const ReportBuilder = ({
         backgroundColor: "rgba(46, 125, 50, 0.04)"
       }
     }
-  }, saving ? "Saving..." : reportDefinitionId ? "Update Report" : "Save Report"))), selectedProvider && /*#__PURE__*/React__default.createElement(Box$1, {
+  }, saving ? "Saving..." : reportDefinitionId ? "Update Report" : "Save Report"))), selectedProvider && /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       mt: 2,
       fontFamily: "system-ui",
@@ -6166,7 +6380,7 @@ const ReportBuilder = ({
       py: 2,
       borderRadius: "8px"
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
     sx: {
       borderBottom: 1,
       borderColor: "rgba(70, 134, 127, 0.27)"