@bygd/nc-report-ui 0.1.24 → 0.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/default/cjs/index.cjs +1 -1
  2. package/dist/default/esm/index.js +1113 -429
  3. package/dist/default/iife/index.js +41 -41
  4. package/package.json +1 -1
package/dist/default/esm/index.js CHANGED
@@ -12,18 +12,17 @@ import FormControl$2 from '@material-ui/core/FormControl';
12
12
  import Select$1 from '@material-ui/core/Select';
13
13
  import MenuItem$1 from '@material-ui/core/MenuItem';
14
14
  import { useInView } from 'react-intersection-observer';
15
- 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, Badge, Tabs, Tab } from '@mui/material';
15
+ 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';
16
16
  import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
17
17
  import CheckBoxIcon from '@mui/icons-material/CheckBox';
18
18
  import Box from '@mui/material/Box';
19
- import InputLabel from '@mui/material/InputLabel';
20
19
  import MenuItem from '@mui/material/MenuItem';
21
20
  import FormControl$1 from '@mui/material/FormControl';
22
21
  import Select from '@mui/material/Select';
23
22
  import EventEmitter from 'eventemitter3';
24
23
  import Grid from '@material-ui/core/Grid';
25
24
  import Container from '@material-ui/core/Container';
26
- import { DataGrid } from '@mui/x-data-grid';
25
+ import { DataGrid, GridAddIcon, GridDeleteIcon } from '@mui/x-data-grid';
27
26
  import AddIcon from '@mui/icons-material/Add';
28
27
  import EditIcon from '@mui/icons-material/Edit';
29
28
  import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -48,6 +47,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
48
47
  import { DatePicker } from '@mui/x-date-pickers/DatePicker';
49
48
  import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
50
49
  import dayjs from 'dayjs';
50
+ import { ThemeProvider, createTheme } from '@mui/material/styles';
51
51
 
52
52
  function _extends() {
53
53
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -802,40 +802,65 @@ const ChartFilterMultiSelect = ({
802
802
  })));
803
803
  };
804
804
 
805
+ const formatLabel = key => {
806
+ return key?.replace(/([a-z])([A-Z])/g, "$1 $2") // insert space before capital letters
807
+ ?.replace(/_/g, " ")?.replace(/-/g, " ") // replace underscores with spaces (optional)
808
+ .replace(/\b\w/g, char => char.toUpperCase()); // capitalize each word
809
+ };
805
810
  function SingleSelect({
806
811
  items,
807
812
  value,
808
- label,
809
813
  onChange,
810
814
  sx = {
811
- width: '100%'
815
+ width: "100%"
812
816
  },
813
- disabled = false
817
+ disabled = false,
818
+ label
814
819
  }) {
815
820
  // Check if the current value exists in items, otherwise use empty string
816
- const validValue = items.some(itm => itm.key === value) ? value : '';
821
+ const validValue = items.some(itm => itm.key === value) ? value : "";
817
822
  return /*#__PURE__*/React__default.createElement(Box, {
818
823
  sx: sx
819
824
  }, /*#__PURE__*/React__default.createElement(FormControl$1, {
820
- fullWidth: true
821
- }, /*#__PURE__*/React__default.createElement(InputLabel, {
822
- id: "demo-simple-select-label"
823
- }, label), /*#__PURE__*/React__default.createElement(Select, {
824
- labelId: "demo-simple-select-label",
825
- id: "demo-simple-select",
825
+ fullWidth: true,
826
+ size: "small"
827
+ }, /*#__PURE__*/React__default.createElement(Select, {
826
828
  value: validValue,
827
- label: label,
828
829
  onChange: onChange,
829
830
  disabled: disabled,
831
+ displayEmpty: true,
830
832
  MenuProps: {
831
833
  style: {
832
- maxHeight: '300px'
834
+ maxHeight: 300
835
+ }
836
+ },
837
+ sx: {
838
+ height: "40px",
839
+ borderRadius: "8px",
840
+ fontFamily: "system-ui",
841
+ backgroundColor: "white",
842
+ "& .MuiSelect-select": {
843
+ display: "flex",
844
+ alignItems: "center",
845
+ padding: "8px 12px"
846
+ },
847
+ "& fieldset": {
848
+ borderColor: "rgba(0,0,0,0.23)" // default border
849
+ },
850
+ "&:hover fieldset": {
851
+ borderColor: "rgb(70, 134, 128) !important" // green on hover
852
+ },
853
+ "&.Mui-focused fieldset": {
854
+ borderColor: "rgb(70, 134, 128) !important" // green on focus
833
855
  }
834
856
  }
835
- // sx={{height:'40px'}}
836
- ,
837
- size: "small"
838
- }, items.map(itm => {
857
+ }, /*#__PURE__*/React__default.createElement(MenuItem, {
858
+ value: "",
859
+ disabled: true,
860
+ sx: {
861
+ color: "rgba(37, 37, 37, 0.58)"
862
+ }
863
+ }, formatLabel(label)), items.map(itm => {
839
864
  const {
840
865
  key,
841
866
  value,
@@ -844,8 +869,12 @@ function SingleSelect({
844
869
  return /*#__PURE__*/React__default.createElement(MenuItem, {
845
870
  key: key,
846
871
  value: key,
847
- disabled: disabled
848
- }, value);
872
+ disabled: disabled,
873
+ sx: {
874
+ fontFamily: "system-ui",
875
+ minHeight: "36px"
876
+ }
877
+ }, formatLabel(value));
849
878
  }))));
850
879
  }
851
880
 
@@ -1216,6 +1245,20 @@ const ReportingProvider = ({
1216
1245
  };
1217
1246
  const [parameters, setParameters] = useState(initialParameters);
1218
1247
  const [api, setApi] = useState(defaultApi);
1248
+
1249
+ // Update parameters when defaultParameters prop changes
1250
+ useEffect(() => {
1251
+ const updatedParameters = {
1252
+ base_currency: 'EUR',
1253
+ ...defaultParameters
1254
+ };
1255
+ setParameters(updatedParameters);
1256
+ }, [defaultParameters]);
1257
+
1258
+ // Update api when defaultApi prop changes
1259
+ useEffect(() => {
1260
+ setApi(defaultApi);
1261
+ }, [defaultApi]);
1219
1262
  const value = {
1220
1263
  parameters,
1221
1264
  setParameters: newParams => {
@@ -1592,8 +1635,8 @@ const ReportDefinitionsList = ({
1592
1635
  const data = await Api.getReportDefinitions();
1593
1636
  setReportDefinitions(data);
1594
1637
  } catch (err) {
1595
- console.error('Error loading report definitions:', err);
1596
- const errorMessage = 'Failed to load report definitions: ' + (err.message || 'Unknown error');
1638
+ console.error("Error loading report definitions:", err);
1639
+ const errorMessage = "Failed to load report definitions: " + (err.message || "Unknown error");
1597
1640
  setError(errorMessage);
1598
1641
  notify.error(errorMessage);
1599
1642
  } finally {
@@ -1625,8 +1668,8 @@ const ReportDefinitionsList = ({
1625
1668
  // Pass the cloned report data to the parent
1626
1669
  onCloneReport(clonedReport);
1627
1670
  } catch (error) {
1628
- console.error('Error cloning report:', error);
1629
- notify.error('Failed to clone report: ' + (error.message || 'Unknown error'));
1671
+ console.error("Error cloning report:", error);
1672
+ notify.error("Failed to clone report: " + (error.message || "Unknown error"));
1630
1673
  }
1631
1674
  };
1632
1675
  const handleDelete = (id, event) => {
@@ -1651,8 +1694,8 @@ const ReportDefinitionsList = ({
1651
1694
  // Reload the report definitions list
1652
1695
  loadReportDefinitions();
1653
1696
  } catch (error) {
1654
- console.error('Error deleting report:', error);
1655
- notify.error('Failed to delete report: ' + (error.response?.data?.message || error.message || 'Unknown error'));
1697
+ console.error("Error deleting report:", error);
1698
+ notify.error("Failed to delete report: " + (error.response?.data?.message || error.message || "Unknown error"));
1656
1699
  setDeleteDialogOpen(false);
1657
1700
  setReportToDelete(null);
1658
1701
  }
@@ -1662,25 +1705,25 @@ const ReportDefinitionsList = ({
1662
1705
  setReportToDelete(null);
1663
1706
  };
1664
1707
  const columns = [{
1665
- field: 'title',
1666
- headerName: 'Title',
1708
+ field: "title",
1709
+ headerName: "Title",
1667
1710
  flex: 1,
1668
1711
  minWidth: 200
1669
1712
  }, {
1670
- field: 'provider',
1671
- headerName: 'Provider',
1713
+ field: "provider",
1714
+ headerName: "Provider",
1672
1715
  flex: 1,
1673
1716
  minWidth: 200
1674
1717
  }, {
1675
- field: 'actions',
1676
- headerName: 'Actions',
1718
+ field: "actions",
1719
+ headerName: "Actions",
1677
1720
  width: 200,
1678
1721
  sortable: false,
1679
1722
  filterable: false,
1680
1723
  disableColumnMenu: true,
1681
1724
  renderCell: params => /*#__PURE__*/React__default.createElement(Box$1, {
1682
1725
  sx: {
1683
- display: 'flex',
1726
+ display: "flex",
1684
1727
  gap: 1
1685
1728
  }
1686
1729
  }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -1750,27 +1793,38 @@ const ReportDefinitionsList = ({
1750
1793
  }
1751
1794
  return /*#__PURE__*/React__default.createElement(Box$1, {
1752
1795
  sx: {
1753
- p: 3
1796
+ p: 3,
1797
+ display: "flex",
1798
+ flexDirection: "column",
1799
+ fontFamily: "system-ui"
1754
1800
  }
1755
1801
  }, /*#__PURE__*/React__default.createElement(Box$1, {
1756
1802
  sx: {
1757
- display: 'flex',
1758
- justifyContent: 'space-between',
1759
- alignItems: 'center',
1760
- mb: 3
1803
+ display: "flex",
1804
+ justifyContent: "flex-end",
1805
+ alignItems: "center",
1806
+ mb: 2,
1807
+ fontFamily: "system-ui"
1761
1808
  }
1762
- }, /*#__PURE__*/React__default.createElement(Typography$1, {
1763
- variant: "h4",
1764
- component: "h1"
1765
- }, "Report Definitions"), /*#__PURE__*/React__default.createElement(Button, {
1809
+ }, /*#__PURE__*/React__default.createElement(Button, {
1766
1810
  variant: "contained",
1767
- color: "primary",
1811
+ sx: {
1812
+ backgroundColor: " rgb(70, 134, 128)",
1813
+ // green
1814
+ borderRadius: "0.5rem",
1815
+ // rounded-lg
1816
+ boxShadow: "none",
1817
+ textTransform: "none"
1818
+ },
1768
1819
  startIcon: /*#__PURE__*/React__default.createElement(AddIcon, null),
1769
1820
  onClick: onAddNew
1770
1821
  }, "Add New Report")), /*#__PURE__*/React__default.createElement(Box$1, {
1771
1822
  sx: {
1772
- height: 600,
1773
- width: '100%'
1823
+ flex: 1,
1824
+ width: "100%",
1825
+ borderRadius: "0.5rem",
1826
+ overflow: "hidden",
1827
+ fontFamily: "system-ui"
1774
1828
  }
1775
1829
  }, /*#__PURE__*/React__default.createElement(DataGrid, {
1776
1830
  rows: rows,
@@ -1780,21 +1834,36 @@ const ReportDefinitionsList = ({
1780
1834
  disableSelectionOnClick: true,
1781
1835
  onRowClick: handleRowClick,
1782
1836
  sx: {
1783
- '& .MuiDataGrid-row': {
1784
- cursor: 'pointer'
1837
+ height: "100%",
1838
+ borderRadius: "0.5rem",
1839
+ overflow: "hidden",
1840
+ fontFamily: "system-ui",
1841
+ "& .MuiDataGrid-columnHeaders": {
1842
+ backgroundColor: "#ffff"
1785
1843
  },
1786
- '& .MuiDataGrid-row:hover': {
1787
- backgroundColor: '#f5f5f5'
1844
+ "& .MuiDataGrid-columnHeaderTitle": {
1845
+ fontWeight: "600 !important",
1846
+ // bold
1847
+ fontSize: "0.875rem !important" // smaller (~14px)
1788
1848
  },
1789
- '& .MuiDataGrid-columnHeader': {
1790
- backgroundColor: '#f5f5f5',
1791
- fontWeight: 'bold'
1849
+ "& .MuiDataGrid-columnHeader:first-of-type": {
1850
+ borderTopLeftRadius: "0.5rem"
1851
+ },
1852
+ "& .MuiDataGrid-columnHeader:last-of-type": {
1853
+ borderTopRightRadius: "0.5rem"
1854
+ },
1855
+ "& .MuiDataGrid-row": {
1856
+ cursor: "pointer",
1857
+ fontSize: "0.875rem !important"
1858
+ },
1859
+ "& .MuiDataGrid-row:hover": {
1860
+ backgroundColor: "#f6f5f5ff"
1792
1861
  }
1793
1862
  }
1794
1863
  })), /*#__PURE__*/React__default.createElement(ConfirmDialog, {
1795
1864
  open: deleteDialogOpen,
1796
1865
  title: "Delete Report Definition",
1797
- message: reportToDelete ? `Are you sure you want to delete "${reportToDelete.title}"? This action cannot be undone.` : '',
1866
+ message: reportToDelete ? `Are you sure you want to delete "${reportToDelete.title}"? This action cannot be undone.` : "",
1798
1867
  onConfirm: handleConfirmDelete,
1799
1868
  onCancel: handleCancelDelete,
1800
1869
  confirmText: "Delete",
@@ -1921,7 +1990,7 @@ const ProviderSelection = ({
1921
1990
  targetKey: selectedItem.targetKey // The actual provider this points to
1922
1991
  });
1923
1992
  setSelectionChain(newChain);
1924
- console.log('Selection chain:', newChain);
1993
+ console.log("Selection chain:", newChain);
1925
1994
 
1926
1995
  // Notify parent of selection change
1927
1996
  if (onSelectionChange) {
@@ -1952,15 +2021,15 @@ const ProviderSelection = ({
1952
2021
  dropdowns.push(/*#__PURE__*/React__default.createElement("div", {
1953
2022
  key: "level-0",
1954
2023
  style: {
1955
- marginRight: '16px'
2024
+ marginRight: "16px"
1956
2025
  }
1957
2026
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
1958
2027
  items: rootRelationItems,
1959
- value: selectionChain[0]?.providerKey || '',
2028
+ value: selectionChain[0]?.providerKey || "",
1960
2029
  label: `Related to ${rootProvider}`,
1961
2030
  onChange: e => handleSelectionChange(0, e),
1962
2031
  sx: {
1963
- width: '300px'
2032
+ width: "300px"
1964
2033
  }
1965
2034
  })));
1966
2035
  }
@@ -1976,15 +2045,15 @@ const ProviderSelection = ({
1976
2045
  dropdowns.push(/*#__PURE__*/React__default.createElement("div", {
1977
2046
  key: `level-${i + 1}`,
1978
2047
  style: {
1979
- marginRight: '16px'
2048
+ marginRight: "16px"
1980
2049
  }
1981
2050
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
1982
2051
  items: relationItems,
1983
- value: nextSelection?.providerKey || '',
2052
+ value: nextSelection?.providerKey || "",
1984
2053
  label: `Related to ${currentSelection.targetKey}`,
1985
2054
  onChange: e => handleSelectionChange(i + 1, e),
1986
2055
  sx: {
1987
- width: '300px'
2056
+ width: "300px"
1988
2057
  }
1989
2058
  })));
1990
2059
  }
@@ -1995,45 +2064,56 @@ const ProviderSelection = ({
1995
2064
  sx: {
1996
2065
  marginBottom: 2
1997
2066
  }
1998
- }, /*#__PURE__*/React__default.createElement(Typography$1, {
1999
- variant: "subtitle2",
2067
+ }, /*#__PURE__*/React__default.createElement(Box$1, {
2000
2068
  sx: {
2001
- marginBottom: 1,
2002
- color: 'text.secondary'
2069
+ display: "flex",
2070
+ alignItems: "center",
2071
+ gap: 1.5,
2072
+ flexWrap: "wrap"
2003
2073
  }
2004
- }, "Selected Path:"), /*#__PURE__*/React__default.createElement(Box$1, {
2074
+ }, /*#__PURE__*/React__default.createElement(Chip, {
2075
+ label: formatLabel(rootProvider),
2076
+ size: "medium",
2077
+ variant: "outlined",
2005
2078
  sx: {
2006
- display: 'flex',
2007
- alignItems: 'center',
2008
- gap: 1,
2009
- flexWrap: 'wrap'
2079
+ fontWeight: 600,
2080
+ borderColor: "rgb(70, 134, 128)",
2081
+ color: "rgb(70, 134, 128)",
2082
+ backgroundColor: "white",
2083
+ height: "32px",
2084
+ fontFamily: "system-ui"
2010
2085
  }
2011
- }, /*#__PURE__*/React__default.createElement(Chip, {
2012
- label: rootProvider,
2013
- size: "small",
2014
- color: "primary",
2015
- variant: "outlined"
2016
2086
  }), selectionChain.map((selection, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
2017
2087
  key: index
2018
2088
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
2019
2089
  variant: "body2",
2020
2090
  sx: {
2021
- color: 'text.secondary'
2091
+ color: "#9e9e9e",
2092
+ fontWeight: "bold"
2022
2093
  }
2023
2094
  }, "\u2192"), /*#__PURE__*/React__default.createElement(Chip, {
2024
- label: selection.targetKey,
2025
- size: "small",
2026
- color: "primary",
2095
+ label: formatLabel(selection.targetKey),
2096
+ size: "medium",
2027
2097
  onDelete: () => handleRemoveFromChain(index),
2028
2098
  sx: {
2029
- fontWeight: 500
2099
+ fontWeight: 500,
2100
+ backgroundColor: "rgb(70, 134, 128)",
2101
+ color: "white",
2102
+ height: "32px",
2103
+ fontFamily: "system-ui",
2104
+ "& .MuiChip-deleteIcon": {
2105
+ color: "rgba(255, 255, 255, 0.7)",
2106
+ "&:hover": {
2107
+ color: "white"
2108
+ }
2109
+ }
2030
2110
  }
2031
2111
  }))))), /*#__PURE__*/React__default.createElement("div", {
2032
2112
  style: {
2033
- display: 'flex',
2034
- flexWrap: 'wrap',
2035
- alignItems: 'flex-start',
2036
- gap: '8px'
2113
+ display: "flex",
2114
+ flexWrap: "wrap",
2115
+ alignItems: "flex-start",
2116
+ gap: "16px" // Increased gap for better spacing
2037
2117
  }
2038
2118
  }, renderSelectionChain()));
2039
2119
  };
@@ -2057,7 +2137,7 @@ const SortableChip$1 = ({
2057
2137
  onResetTitle
2058
2138
  }) => {
2059
2139
  const [isEditing, setIsEditing] = useState(false);
2060
- const [editValue, setEditValue] = useState('');
2140
+ const [editValue, setEditValue] = useState("");
2061
2141
  const inputRef = useRef(null);
2062
2142
  const containerRef = useRef(null);
2063
2143
  const {
@@ -2074,9 +2154,9 @@ const SortableChip$1 = ({
2074
2154
  transform: CSS.Transform.toString(transform),
2075
2155
  transition,
2076
2156
  opacity: isDragging ? 0.5 : 1,
2077
- display: 'flex',
2078
- alignItems: 'center',
2079
- width: '100%'
2157
+ display: "flex",
2158
+ alignItems: "center",
2159
+ width: "100%"
2080
2160
  };
2081
2161
 
2082
2162
  // Focus input when entering edit mode
@@ -2095,9 +2175,9 @@ const SortableChip$1 = ({
2095
2175
  }
2096
2176
  };
2097
2177
  if (isEditing) {
2098
- document.addEventListener('mousedown', handleClickOutside);
2178
+ document.addEventListener("mousedown", handleClickOutside);
2099
2179
  return () => {
2100
- document.removeEventListener('mousedown', handleClickOutside);
2180
+ document.removeEventListener("mousedown", handleClickOutside);
2101
2181
  };
2102
2182
  }
2103
2183
  }, [isEditing]);
@@ -2105,9 +2185,9 @@ const SortableChip$1 = ({
2105
2185
  // Cycle through sort states: null -> 'asc' -> 'desc' -> null
2106
2186
  const handleSortToggle = () => {
2107
2187
  if (sortOrder === null) {
2108
- onSortOrderChange('asc');
2109
- } else if (sortOrder === 'asc') {
2110
- onSortOrderChange('desc');
2188
+ onSortOrderChange("asc");
2189
+ } else if (sortOrder === "asc") {
2190
+ onSortOrderChange("desc");
2111
2191
  } else {
2112
2192
  onSortOrderChange(null);
2113
2193
  }
@@ -2115,11 +2195,11 @@ const SortableChip$1 = ({
2115
2195
 
2116
2196
  // Determine which icon to show
2117
2197
  const getSortIcon = () => {
2118
- if (sortOrder === 'asc') {
2198
+ if (sortOrder === "asc") {
2119
2199
  return /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2120
2200
  fontSize: "small"
2121
2201
  });
2122
- } else if (sortOrder === 'desc') {
2202
+ } else if (sortOrder === "desc") {
2123
2203
  return /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2124
2204
  fontSize: "small"
2125
2205
  });
@@ -2138,7 +2218,7 @@ const SortableChip$1 = ({
2138
2218
  };
2139
2219
  const handleSave = () => {
2140
2220
  const trimmedValue = editValue.trim();
2141
- if (trimmedValue === '') {
2221
+ if (trimmedValue === "") {
2142
2222
  // Empty string validation - treat as cancel
2143
2223
  handleCancel();
2144
2224
  return;
@@ -2148,17 +2228,17 @@ const SortableChip$1 = ({
2148
2228
  };
2149
2229
  const handleCancel = () => {
2150
2230
  setIsEditing(false);
2151
- setEditValue('');
2231
+ setEditValue("");
2152
2232
  };
2153
2233
  const handleReset = () => {
2154
2234
  onResetTitle(fullPath);
2155
2235
  setIsEditing(false);
2156
- setEditValue('');
2236
+ setEditValue("");
2157
2237
  };
2158
2238
  const handleKeyDown = e => {
2159
- if (e.key === 'Enter') {
2239
+ if (e.key === "Enter") {
2160
2240
  handleSave();
2161
- } else if (e.key === 'Escape') {
2241
+ } else if (e.key === "Escape") {
2162
2242
  handleCancel();
2163
2243
  }
2164
2244
  };
@@ -2170,38 +2250,62 @@ const SortableChip$1 = ({
2170
2250
  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
2171
2251
  ref: containerRef,
2172
2252
  sx: {
2173
- display: 'flex',
2174
- alignItems: 'center',
2175
- width: '100%',
2176
- gap: 1
2253
+ display: "flex",
2254
+ alignItems: "center",
2255
+ width: "100%",
2256
+ gap: 1,
2257
+ backgroundColor: "white",
2258
+ border: "1px solid #e0e0e0",
2259
+ borderRadius: 2,
2260
+ padding: 1,
2261
+ transition: "transform 0.2s ease, box-shadow 0.2s ease",
2262
+ // smoother drag
2263
+ "&:hover .hover-icons": {
2264
+ opacity: 1 // show icons on hover
2265
+ }
2177
2266
  }
2178
2267
  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
2179
2268
  sx: {
2180
- display: 'flex',
2181
- alignItems: 'center',
2182
- cursor: 'grab',
2183
- '&:active': {
2184
- cursor: 'grabbing'
2269
+ display: "flex",
2270
+ alignItems: "center",
2271
+ cursor: "grab",
2272
+ "&:active": {
2273
+ cursor: "grabbing"
2185
2274
  }
2186
2275
  }
2187
2276
  }), /*#__PURE__*/React__default.createElement(DragIndicatorIcon, {
2188
2277
  sx: {
2189
- cursor: 'grab'
2278
+ cursor: "grab",
2279
+ color: "rgba(110, 110, 110, 0.62)"
2280
+ }
2281
+ })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
2282
+ sx: {
2283
+ minWidth: 0
2190
2284
  }
2191
- })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
2192
- title: fullLabel,
2285
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
2286
+ title: fullLabel || displayLabel,
2193
2287
  arrow: true,
2194
2288
  placement: "top"
2195
- }, /*#__PURE__*/React__default.createElement(Chip, {
2196
- label: displayLabel,
2197
- onDelete: onDelete,
2198
- color: "primary",
2199
- variant: "outlined",
2289
+ }, /*#__PURE__*/React__default.createElement(Typography$1, {
2290
+ variant: "h6",
2291
+ sx: {
2292
+ fontWeight: hasCustomTitle ? 600 : 500,
2293
+ fontStyle: hasCustomTitle ? "italic" : "normal",
2294
+ color: "#1a1a1a",
2295
+ fontSize: "14px",
2296
+ whiteSpace: "nowrap",
2297
+ overflow: "hidden",
2298
+ textOverflow: "ellipsis"
2299
+ }
2300
+ }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$1, {
2301
+ className: "hover-icons",
2200
2302
  sx: {
2201
- fontWeight: hasCustomTitle ? 'bold' : 'normal',
2202
- fontStyle: hasCustomTitle ? 'italic' : 'normal'
2303
+ display: "flex",
2304
+ gap: 0.5,
2305
+ opacity: 0,
2306
+ transition: "opacity 0.2s"
2203
2307
  }
2204
- })), /*#__PURE__*/React__default.createElement(Tooltip, {
2308
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
2205
2309
  title: "Edit title",
2206
2310
  arrow: true,
2207
2311
  placement: "top"
@@ -2211,6 +2315,54 @@ const SortableChip$1 = ({
2211
2315
  "aria-label": "edit title"
2212
2316
  }, /*#__PURE__*/React__default.createElement(EditIcon, {
2213
2317
  fontSize: "small"
2318
+ }))), /*#__PURE__*/React__default.createElement(Tooltip, {
2319
+ title: sortOrder === null ? "No sort" : sortOrder === "asc" ? "Ascending" : "Descending",
2320
+ arrow: true,
2321
+ placement: "top"
2322
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
2323
+ size: "small",
2324
+ onClick: handleSortToggle,
2325
+ "aria-label": "toggle sort order",
2326
+ color: sortOrder ? "primary" : "default"
2327
+ }, getSortIcon())), /*#__PURE__*/React__default.createElement(Tooltip, {
2328
+ title: "Delete",
2329
+ arrow: true,
2330
+ placement: "top"
2331
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
2332
+ size: "small",
2333
+ onClick: onDelete,
2334
+ "aria-label": "delete",
2335
+ sx: {
2336
+ color: "#ef5350"
2337
+ }
2338
+ }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
2339
+ fontSize: "small"
2340
+ })))), /*#__PURE__*/React__default.createElement(Box$1, {
2341
+ sx: {
2342
+ flex: 1
2343
+ }
2344
+ }), /*#__PURE__*/React__default.createElement(Box$1, {
2345
+ className: "hover-icons",
2346
+ sx: {
2347
+ display: "flex",
2348
+ gap: 0.5,
2349
+ opacity: 0,
2350
+ transition: "opacity 0.2s"
2351
+ }
2352
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
2353
+ size: "small",
2354
+ onClick: onMoveUp,
2355
+ disabled: isFirst,
2356
+ "aria-label": "move up"
2357
+ }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2358
+ fontSize: "small"
2359
+ })), /*#__PURE__*/React__default.createElement(IconButton, {
2360
+ size: "small",
2361
+ onClick: onMoveDown,
2362
+ disabled: isLast,
2363
+ "aria-label": "move down"
2364
+ }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2365
+ fontSize: "small"
2214
2366
  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
2215
2367
  inputRef: inputRef,
2216
2368
  value: editValue,
@@ -2218,9 +2370,17 @@ const SortableChip$1 = ({
2218
2370
  onKeyDown: handleKeyDown,
2219
2371
  size: "small",
2220
2372
  sx: {
2221
- width: '200px'
2373
+ minWidth: '200px',
2374
+ maxWidth: '400px'
2222
2375
  }
2223
- }), /*#__PURE__*/React__default.createElement(Tooltip, {
2376
+ }), /*#__PURE__*/React__default.createElement(Box$1, {
2377
+ className: "hover-icons",
2378
+ sx: {
2379
+ display: "flex",
2380
+ gap: 0.5,
2381
+ opacity: 1
2382
+ }
2383
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
2224
2384
  title: "Save",
2225
2385
  arrow: true,
2226
2386
  placement: "top"
@@ -2252,39 +2412,11 @@ const SortableChip$1 = ({
2252
2412
  "aria-label": "reset title"
2253
2413
  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
2254
2414
  fontSize: "small"
2255
- })))), !isEditing && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
2256
- title: sortOrder === null ? 'No sort' : sortOrder === 'asc' ? 'Ascending' : 'Descending',
2257
- arrow: true,
2258
- placement: "top"
2259
- }, /*#__PURE__*/React__default.createElement(IconButton, {
2260
- size: "small",
2261
- onClick: handleSortToggle,
2262
- "aria-label": "toggle sort order",
2263
- color: sortOrder ? 'primary' : 'default'
2264
- }, getSortIcon())), /*#__PURE__*/React__default.createElement(Box$1, {
2415
+ })))), /*#__PURE__*/React__default.createElement(Box$1, {
2265
2416
  sx: {
2266
2417
  flex: 1
2267
2418
  }
2268
- }), /*#__PURE__*/React__default.createElement(Box$1, {
2269
- sx: {
2270
- display: 'flex',
2271
- gap: 0.5
2272
- }
2273
- }, /*#__PURE__*/React__default.createElement(IconButton, {
2274
- size: "small",
2275
- onClick: onMoveUp,
2276
- disabled: isFirst,
2277
- "aria-label": "move up"
2278
- }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2279
- fontSize: "small"
2280
- })), /*#__PURE__*/React__default.createElement(IconButton, {
2281
- size: "small",
2282
- onClick: onMoveDown,
2283
- disabled: isLast,
2284
- "aria-label": "move down"
2285
- }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2286
- fontSize: "small"
2287
- }))))));
2419
+ }))));
2288
2420
  };
2289
2421
  const Dimensions = ({
2290
2422
  providersData,
@@ -2301,7 +2433,7 @@ const Dimensions = ({
2301
2433
  }) => {
2302
2434
  const [isAdding, setIsAdding] = useState(false);
2303
2435
  const [dimensionSelectionChain, setDimensionSelectionChain] = useState([]);
2304
- const [selectedDimension, setSelectedDimension] = useState('');
2436
+ const [selectedDimension, setSelectedDimension] = useState("");
2305
2437
 
2306
2438
  // Setup drag and drop sensors
2307
2439
  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
@@ -2392,7 +2524,7 @@ const Dimensions = ({
2392
2524
  const dimension = dimensionsForAlias[dimKey];
2393
2525
 
2394
2526
  // Construct the fullPath for this dimension
2395
- const fullPath = `${aliasPath.join('_')}.${dimKey}`;
2527
+ const fullPath = `${aliasPath.join("_")}.${dimKey}`;
2396
2528
 
2397
2529
  // Check if this dimension is already selected
2398
2530
  const isAlreadySelected = selectedFullPaths.has(fullPath);
@@ -2412,12 +2544,12 @@ const Dimensions = ({
2412
2544
  const handleAddClick = () => {
2413
2545
  setIsAdding(true);
2414
2546
  setDimensionSelectionChain([]);
2415
- setSelectedDimension('');
2547
+ setSelectedDimension("");
2416
2548
  };
2417
2549
  const handleCancel = () => {
2418
2550
  setIsAdding(false);
2419
2551
  setDimensionSelectionChain([]);
2420
- setSelectedDimension('');
2552
+ setSelectedDimension("");
2421
2553
  };
2422
2554
  const handleSave = () => {
2423
2555
  if (!selectedDimension) return;
@@ -2452,7 +2584,7 @@ const Dimensions = ({
2452
2584
  relations.forEach(rel => {
2453
2585
  aliasPath.push(rel.alias);
2454
2586
  });
2455
- const fullPath = `${aliasPath.join('_')}.${selectedItem.dimensionKey}`;
2587
+ const fullPath = `${aliasPath.join("_")}.${selectedItem.dimensionKey}`;
2456
2588
  const dimensionData = {
2457
2589
  // Complete dimension object from the final provider
2458
2590
  dimension: selectedItem.dimension,
@@ -2509,7 +2641,7 @@ const Dimensions = ({
2509
2641
 
2510
2642
  // Create dimension data for each available dimension
2511
2643
  availableItems.forEach(item => {
2512
- const fullPath = `${aliasPath.join('_')}.${item.dimensionKey}`;
2644
+ const fullPath = `${aliasPath.join("_")}.${item.dimensionKey}`;
2513
2645
  const dimensionData = {
2514
2646
  // Complete dimension object from the final provider
2515
2647
  dimension: item.dimension,
@@ -2533,53 +2665,74 @@ const Dimensions = ({
2533
2665
  if (dim.relationNames && dim.relationNames.length > 0) {
2534
2666
  pathParts.push(...dim.relationNames);
2535
2667
  }
2536
- return pathParts.join(' → ');
2668
+ return pathParts.join(" → ");
2537
2669
  };
2538
2670
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
2539
2671
  sx: {
2540
- display: 'flex',
2541
- alignItems: 'center',
2542
- gap: 2,
2543
- marginBottom: 2
2672
+ display: "flex",
2673
+ justifyContent: "flex-start",
2674
+ mb: 2
2544
2675
  }
2545
- }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
2676
+ }, !isAdding && /*#__PURE__*/React__default.createElement(Button, {
2546
2677
  variant: "contained",
2547
- onClick: handleAddClick
2548
- }, "Add Dimension") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
2549
- variant: "outlined",
2550
- onClick: handleCancel
2551
- }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
2552
- variant: "contained",
2553
- onClick: handleSave,
2554
- disabled: !selectedDimension
2555
- }, "Save Dimension"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
2678
+ startIcon: /*#__PURE__*/React__default.createElement(GridAddIcon, null),
2679
+ onClick: handleAddClick,
2556
2680
  sx: {
2557
- padding: 3,
2558
- marginBottom: 3
2681
+ height: "40px",
2682
+ fontFamily: "system-ui",
2683
+ fontSize: "14px",
2684
+ fontWeight: 500,
2685
+ borderRadius: "8px",
2686
+ textTransform: "none",
2687
+ backgroundColor: "rgb(70, 134, 128)",
2688
+ boxShadow: "none",
2689
+ "&:hover": {
2690
+ backgroundColor: "rgb(50, 114, 108)",
2691
+ boxShadow: "none"
2692
+ }
2693
+ }
2694
+ }, "Add Dimension")), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
2695
+ elevation: 0,
2696
+ sx: {
2697
+ p: 3,
2698
+ mb: 3,
2699
+ border: "1px solid #e0e0e0",
2700
+ borderRadius: "12px",
2701
+ backgroundColor: "white",
2702
+ boxShadow: "0px 2px 4px rgba(0,0,0,0.02)",
2703
+ fontFamily: "system-ui"
2559
2704
  }
2560
2705
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
2561
- variant: "h6",
2562
2706
  sx: {
2563
- marginBottom: 2
2707
+ fontSize: "14px",
2708
+ fontWeight: 600,
2709
+ mb: 1.5,
2710
+ color: "rgb(37, 37, 37)"
2711
+ }
2712
+ }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
2713
+ sx: {
2714
+ mb: 3
2564
2715
  }
2565
- }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
2716
+ }, /*#__PURE__*/React__default.createElement(ProviderSelection, {
2566
2717
  providersData: providersData,
2567
2718
  rootProvider: rootProvider,
2568
2719
  onSelectionChange: setDimensionSelectionChain,
2569
2720
  existingDimensions: savedDimensions,
2570
2721
  existingMetrics: existingMetrics,
2571
2722
  existingFilters: existingFilters
2572
- }), /*#__PURE__*/React__default.createElement(Typography$1, {
2573
- variant: "h6",
2723
+ })), /*#__PURE__*/React__default.createElement(Typography$1, {
2574
2724
  sx: {
2575
- marginTop: 3,
2576
- marginBottom: 2
2725
+ fontSize: "14px",
2726
+ fontWeight: 600,
2727
+ mb: 1.5,
2728
+ color: "rgb(37, 37, 37)"
2577
2729
  }
2578
2730
  }, "Select Dimension"), /*#__PURE__*/React__default.createElement(Box$1, {
2579
2731
  sx: {
2580
- display: 'flex',
2581
- alignItems: 'center',
2582
- gap: 1
2732
+ display: "flex",
2733
+ alignItems: "center",
2734
+ gap: 2,
2735
+ mb: 3
2583
2736
  }
2584
2737
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
2585
2738
  items: getDimensionItems(),
@@ -2587,27 +2740,91 @@ const Dimensions = ({
2587
2740
  label: "Choose Dimension",
2588
2741
  onChange: handleDimensionChange,
2589
2742
  sx: {
2590
- width: '400px'
2743
+ width: "400px",
2744
+ fontFamily: "system-ui"
2591
2745
  }
2592
2746
  }), /*#__PURE__*/React__default.createElement(Tooltip, {
2593
2747
  title: "Add all available dimensions",
2594
2748
  arrow: true,
2595
2749
  placement: "top"
2596
2750
  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton, {
2597
- color: "primary",
2598
2751
  onClick: handleAddAll,
2599
2752
  disabled: getDimensionItems().filter(item => !item.disabled).length === 0,
2600
- "aria-label": "add all dimensions"
2601
- }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null)))))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
2753
+ "aria-label": "add all dimensions",
2602
2754
  sx: {
2603
- marginTop: 3
2755
+ color: "rgb(70, 134, 128)",
2756
+ border: "1px solid #e0e0e0",
2757
+ borderRadius: "8px",
2758
+ padding: "8px",
2759
+ "&:hover": {
2760
+ backgroundColor: "#f5f5f5"
2761
+ },
2762
+ "&.Mui-disabled": {
2763
+ opacity: 0.5
2764
+ }
2765
+ }
2766
+ }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$1, {
2767
+ sx: {
2768
+ display: "flex",
2769
+ justifyContent: "flex-end",
2770
+ gap: 2,
2771
+ mt: 3
2772
+ }
2773
+ }, /*#__PURE__*/React__default.createElement(Button, {
2774
+ variant: "outlined",
2775
+ onClick: handleCancel,
2776
+ sx: {
2777
+ height: "40px",
2778
+ fontFamily: "system-ui",
2779
+ fontSize: "14px",
2780
+ fontWeight: 500,
2781
+ borderRadius: "8px",
2782
+ boxShadow: "none",
2783
+ borderColor: "#e0e0e0",
2784
+ color: "rgb(37, 37, 37)",
2785
+ textTransform: "none",
2786
+ "&:hover": {
2787
+ backgroundColor: "#f5f5f5",
2788
+ borderColor: "#d0d0d0"
2789
+ }
2790
+ }
2791
+ }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
2792
+ variant: "contained",
2793
+ onClick: handleSave,
2794
+ disabled: !selectedDimension,
2795
+ sx: {
2796
+ height: "40px",
2797
+ fontFamily: "system-ui",
2798
+ fontSize: "14px",
2799
+ fontWeight: 500,
2800
+ borderRadius: "8px",
2801
+ boxShadow: "none",
2802
+ textTransform: "none",
2803
+ backgroundColor: "rgb(70, 134, 128)",
2804
+ "&:hover": {
2805
+ backgroundColor: "rgb(50, 114, 108)",
2806
+ boxShadow: "none"
2807
+ }
2808
+ }
2809
+ }, "Save Dimension"))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
2810
+ sx: {
2811
+ marginTop: 0
2604
2812
  }
2605
2813
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
2606
2814
  variant: "h6",
2607
2815
  sx: {
2816
+ fontSize: "16px",
2817
+ fontWeight: 600,
2818
+ marginTop: 2,
2819
+ color: "rgb(37, 37, 37)"
2820
+ }
2821
+ }, "Saved Dimensions"), /*#__PURE__*/React__default.createElement(Typography$1, {
2822
+ sx: {
2823
+ fontSize: "13px",
2824
+ color: "#666",
2608
2825
  marginBottom: 2
2609
2826
  }
2610
- }, "Saved Dimensions (Drag to reorder or use arrows)"), /*#__PURE__*/React__default.createElement(DndContext, {
2827
+ }, "Drag to reorder or use arrows"), /*#__PURE__*/React__default.createElement(DndContext, {
2611
2828
  sensors: sensors,
2612
2829
  collisionDetection: closestCenter,
2613
2830
  onDragEnd: handleDragEnd
@@ -2616,8 +2833,8 @@ const Dimensions = ({
2616
2833
  strategy: verticalListSortingStrategy
2617
2834
  }, /*#__PURE__*/React__default.createElement(Box$1, {
2618
2835
  sx: {
2619
- display: 'flex',
2620
- flexDirection: 'column',
2836
+ display: "flex",
2837
+ flexDirection: "column",
2621
2838
  gap: 1
2622
2839
  }
2623
2840
  }, savedDimensions.map((dim, index) => /*#__PURE__*/React__default.createElement(SortableChip$1, {
@@ -2739,46 +2956,109 @@ const SortableChip = ({
2739
2956
  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
2740
2957
  ref: containerRef,
2741
2958
  sx: {
2742
- display: 'flex',
2743
- alignItems: 'center',
2744
- width: '100%',
2745
- gap: 1
2959
+ display: "flex",
2960
+ alignItems: "center",
2961
+ width: "100%",
2962
+ gap: 1,
2963
+ backgroundColor: "white",
2964
+ border: "1px solid #e0e0e0",
2965
+ borderRadius: 2,
2966
+ padding: 1,
2967
+ transition: "transform 0.2s ease, box-shadow 0.2s ease",
2968
+ // smoother drag
2969
+ "&:hover .hover-icons": {
2970
+ opacity: 1 // show icons on hover
2971
+ }
2746
2972
  }
2747
2973
  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
2748
2974
  sx: {
2749
- display: 'flex',
2750
- alignItems: 'center',
2751
- cursor: 'grab',
2752
- '&:active': {
2753
- cursor: 'grabbing'
2975
+ display: "flex",
2976
+ alignItems: "center",
2977
+ cursor: "grab",
2978
+ "&:active": {
2979
+ cursor: "grabbing"
2754
2980
  }
2755
2981
  }
2756
2982
  }), /*#__PURE__*/React__default.createElement(DragIndicatorIcon, {
2757
2983
  sx: {
2758
- cursor: 'grab'
2984
+ cursor: "grab",
2985
+ color: "rgba(110, 110, 110, 0.62)"
2986
+ }
2987
+ })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
2988
+ sx: {
2989
+ minWidth: 0
2759
2990
  }
2760
- })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
2761
- title: fullLabel,
2991
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
2992
+ title: fullLabel || displayLabel,
2762
2993
  arrow: true,
2763
2994
  placement: "top"
2764
- }, /*#__PURE__*/React__default.createElement(Chip, {
2765
- label: displayLabel,
2766
- onDelete: onDelete,
2767
- color: "secondary",
2768
- variant: "outlined",
2995
+ }, /*#__PURE__*/React__default.createElement(Typography$1, {
2996
+ variant: "h6",
2997
+ sx: {
2998
+ fontWeight: hasCustomTitle ? 600 : 500,
2999
+ fontStyle: hasCustomTitle ? "italic" : "normal",
3000
+ color: "#1a1a1a",
3001
+ fontSize: "14px",
3002
+ whiteSpace: "nowrap",
3003
+ overflow: "hidden",
3004
+ textOverflow: "ellipsis"
3005
+ }
3006
+ }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$1, {
3007
+ className: "hover-icons",
2769
3008
  sx: {
2770
- fontWeight: hasCustomTitle ? 'bold' : 'normal',
2771
- fontStyle: hasCustomTitle ? 'italic' : 'normal'
3009
+ display: "flex",
3010
+ gap: 0.5,
3011
+ opacity: 0,
3012
+ transition: "opacity 0.2s"
2772
3013
  }
2773
- })), /*#__PURE__*/React__default.createElement(Tooltip, {
3014
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
2774
3015
  title: "Edit title",
2775
3016
  arrow: true,
2776
3017
  placement: "top"
2777
3018
  }, /*#__PURE__*/React__default.createElement(IconButton, {
2778
3019
  size: "small",
2779
- onClick: handleEditClick,
2780
- "aria-label": "edit title"
2781
- }, /*#__PURE__*/React__default.createElement(EditIcon, {
3020
+ onClick: handleEditClick,
3021
+ "aria-label": "edit title"
3022
+ }, /*#__PURE__*/React__default.createElement(EditIcon, {
3023
+ fontSize: "small"
3024
+ }))), /*#__PURE__*/React__default.createElement(Tooltip, {
3025
+ title: "Delete",
3026
+ arrow: true,
3027
+ placement: "top"
3028
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
3029
+ size: "small",
3030
+ onClick: onDelete,
3031
+ "aria-label": "delete",
3032
+ sx: {
3033
+ color: "#ef5350"
3034
+ }
3035
+ }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
3036
+ fontSize: "small"
3037
+ })))), /*#__PURE__*/React__default.createElement(Box$1, {
3038
+ sx: {
3039
+ flex: 1
3040
+ }
3041
+ }), /*#__PURE__*/React__default.createElement(Box$1, {
3042
+ className: "hover-icons",
3043
+ sx: {
3044
+ display: "flex",
3045
+ gap: 0.5,
3046
+ opacity: 0,
3047
+ transition: "opacity 0.2s"
3048
+ }
3049
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
3050
+ size: "small",
3051
+ onClick: onMoveUp,
3052
+ disabled: isFirst,
3053
+ "aria-label": "move up"
3054
+ }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
3055
+ fontSize: "small"
3056
+ })), /*#__PURE__*/React__default.createElement(IconButton, {
3057
+ size: "small",
3058
+ onClick: onMoveDown,
3059
+ disabled: isLast,
3060
+ "aria-label": "move down"
3061
+ }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2782
3062
  fontSize: "small"
2783
3063
  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
2784
3064
  inputRef: inputRef,
@@ -2787,9 +3067,17 @@ const SortableChip = ({
2787
3067
  onKeyDown: handleKeyDown,
2788
3068
  size: "small",
2789
3069
  sx: {
2790
- width: '200px'
3070
+ minWidth: '200px',
3071
+ maxWidth: '400px'
2791
3072
  }
2792
- }), /*#__PURE__*/React__default.createElement(Tooltip, {
3073
+ }), /*#__PURE__*/React__default.createElement(Box$1, {
3074
+ className: "hover-icons",
3075
+ sx: {
3076
+ display: "flex",
3077
+ gap: 0.5,
3078
+ opacity: 1
3079
+ }
3080
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
2793
3081
  title: "Save",
2794
3082
  arrow: true,
2795
3083
  placement: "top"
@@ -2821,30 +3109,11 @@ const SortableChip = ({
2821
3109
  "aria-label": "reset title"
2822
3110
  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
2823
3111
  fontSize: "small"
2824
- })))), !isEditing && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
3112
+ })))), /*#__PURE__*/React__default.createElement(Box$1, {
2825
3113
  sx: {
2826
3114
  flex: 1
2827
3115
  }
2828
- }), /*#__PURE__*/React__default.createElement(Box$1, {
2829
- sx: {
2830
- display: 'flex',
2831
- gap: 0.5
2832
- }
2833
- }, /*#__PURE__*/React__default.createElement(IconButton, {
2834
- size: "small",
2835
- onClick: onMoveUp,
2836
- disabled: isFirst,
2837
- "aria-label": "move up"
2838
- }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2839
- fontSize: "small"
2840
- })), /*#__PURE__*/React__default.createElement(IconButton, {
2841
- size: "small",
2842
- onClick: onMoveDown,
2843
- disabled: isLast,
2844
- "aria-label": "move down"
2845
- }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2846
- fontSize: "small"
2847
- }))))));
3116
+ }))));
2848
3117
  };
2849
3118
  const Metrics = ({
2850
3119
  providersData,
@@ -3080,49 +3349,70 @@ const Metrics = ({
3080
3349
  };
3081
3350
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
3082
3351
  sx: {
3083
- display: 'flex',
3084
- alignItems: 'center',
3085
- gap: 2,
3086
- marginBottom: 2
3352
+ display: "flex",
3353
+ justifyContent: "flex-start",
3354
+ mb: 2
3087
3355
  }
3088
- }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
3089
- variant: "contained",
3090
- onClick: handleAddClick
3091
- }, "Add Metric") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
3092
- variant: "outlined",
3093
- onClick: handleCancel
3094
- }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3356
+ }, !isAdding && /*#__PURE__*/React__default.createElement(Button, {
3095
3357
  variant: "contained",
3096
- onClick: handleSave,
3097
- disabled: !selectedMetric
3098
- }, "Save Metric"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
3358
+ startIcon: /*#__PURE__*/React__default.createElement(GridAddIcon, null),
3359
+ onClick: handleAddClick,
3360
+ sx: {
3361
+ height: "40px",
3362
+ fontFamily: "system-ui",
3363
+ fontSize: "14px",
3364
+ fontWeight: 500,
3365
+ borderRadius: "8px",
3366
+ textTransform: "none",
3367
+ backgroundColor: "rgb(70, 134, 128)",
3368
+ boxShadow: "none",
3369
+ "&:hover": {
3370
+ backgroundColor: "rgb(50, 114, 108)",
3371
+ boxShadow: "none"
3372
+ }
3373
+ }
3374
+ }, "Add Metric")), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
3375
+ elevation: 0,
3099
3376
  sx: {
3100
- padding: 3,
3101
- marginBottom: 3
3377
+ p: 3,
3378
+ mb: 3,
3379
+ border: "1px solid #e0e0e0",
3380
+ borderRadius: "12px",
3381
+ backgroundColor: "white",
3382
+ boxShadow: "0px 2px 4px rgba(0,0,0,0.02)",
3383
+ fontFamily: "system-ui"
3102
3384
  }
3103
3385
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3104
- variant: "h6",
3105
3386
  sx: {
3106
- marginBottom: 2
3387
+ fontSize: "14px",
3388
+ fontWeight: 600,
3389
+ mb: 1.5,
3390
+ color: "rgb(37, 37, 37)"
3391
+ }
3392
+ }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
3393
+ sx: {
3394
+ mb: 3
3107
3395
  }
3108
- }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
3396
+ }, /*#__PURE__*/React__default.createElement(ProviderSelection, {
3109
3397
  providersData: providersData,
3110
3398
  rootProvider: rootProvider,
3111
3399
  onSelectionChange: setMetricSelectionChain,
3112
3400
  existingDimensions: existingDimensions,
3113
3401
  existingMetrics: savedMetrics,
3114
3402
  existingFilters: existingFilters
3115
- }), /*#__PURE__*/React__default.createElement(Typography$1, {
3116
- variant: "h6",
3403
+ })), /*#__PURE__*/React__default.createElement(Typography$1, {
3117
3404
  sx: {
3118
- marginTop: 3,
3119
- marginBottom: 2
3405
+ fontSize: "14px",
3406
+ fontWeight: 600,
3407
+ mb: 1.5,
3408
+ color: "rgb(37, 37, 37)"
3120
3409
  }
3121
3410
  }, "Select Metric"), /*#__PURE__*/React__default.createElement(Box$1, {
3122
3411
  sx: {
3123
3412
  display: 'flex',
3124
3413
  alignItems: 'center',
3125
- gap: 1
3414
+ gap: 2,
3415
+ mb: 3
3126
3416
  }
3127
3417
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
3128
3418
  items: getMetricItems(),
@@ -3130,27 +3420,85 @@ const Metrics = ({
3130
3420
  label: "Choose Metric",
3131
3421
  onChange: handleMetricChange,
3132
3422
  sx: {
3133
- width: '400px'
3423
+ width: '400px',
3424
+ fontFamily: "system-ui"
3134
3425
  }
3135
3426
  }), /*#__PURE__*/React__default.createElement(Tooltip, {
3136
3427
  title: "Add all available metrics",
3137
3428
  arrow: true,
3138
3429
  placement: "top"
3139
3430
  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton, {
3140
- color: "primary",
3141
3431
  onClick: handleAddAll,
3142
3432
  disabled: getMetricItems().filter(item => !item.disabled).length === 0,
3143
- "aria-label": "add all metrics"
3144
- }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null)))))), savedMetrics.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
3433
+ "aria-label": "add all metrics",
3434
+ sx: {
3435
+ color: "rgb(70, 134, 128)",
3436
+ border: "1px solid #e0e0e0",
3437
+ borderRadius: "8px",
3438
+ padding: "8px",
3439
+ "&:hover": {
3440
+ backgroundColor: "#f5f5f5"
3441
+ },
3442
+ "&.Mui-disabled": {
3443
+ opacity: 0.5
3444
+ }
3445
+ }
3446
+ }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$1, {
3447
+ sx: {
3448
+ display: "flex",
3449
+ justifyContent: "flex-end",
3450
+ gap: 2,
3451
+ mt: 3
3452
+ }
3453
+ }, /*#__PURE__*/React__default.createElement(Button, {
3454
+ variant: "outlined",
3455
+ onClick: handleCancel,
3456
+ sx: {
3457
+ height: "40px",
3458
+ fontFamily: "system-ui",
3459
+ fontSize: "14px",
3460
+ fontWeight: 500,
3461
+ borderRadius: "8px",
3462
+ boxShadow: "none",
3463
+ borderColor: "#e0e0e0",
3464
+ color: "rgb(37, 37, 37)",
3465
+ textTransform: "none",
3466
+ "&:hover": {
3467
+ backgroundColor: "#f5f5f5",
3468
+ borderColor: "#d0d0d0"
3469
+ }
3470
+ }
3471
+ }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3472
+ variant: "contained",
3473
+ onClick: handleSave,
3474
+ disabled: !selectedMetric,
3475
+ sx: {
3476
+ height: "40px",
3477
+ fontFamily: "system-ui",
3478
+ fontSize: "14px",
3479
+ fontWeight: 500,
3480
+ borderRadius: "8px",
3481
+ boxShadow: "none",
3482
+ textTransform: "none",
3483
+ backgroundColor: "rgb(70, 134, 128)",
3484
+ "&:hover": {
3485
+ backgroundColor: "rgb(50, 114, 108)",
3486
+ boxShadow: "none"
3487
+ }
3488
+ }
3489
+ }, "Save Metric"))), savedMetrics.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
3145
3490
  sx: {
3146
- marginTop: 3
3491
+ marginTop: 0
3147
3492
  }
3148
3493
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3149
3494
  variant: "h6",
3150
3495
  sx: {
3151
- marginBottom: 2
3496
+ fontSize: "16px",
3497
+ fontWeight: 600,
3498
+ marginBottom: 1,
3499
+ color: "rgb(37, 37, 37)"
3152
3500
  }
3153
- }, "Saved Metrics (Drag to reorder or use arrows)"), /*#__PURE__*/React__default.createElement(DndContext, {
3501
+ }, "Saved Metrics"), /*#__PURE__*/React__default.createElement(DndContext, {
3154
3502
  sensors: sensors,
3155
3503
  collisionDetection: closestCenter,
3156
3504
  onDragEnd: handleDragEnd
@@ -3609,68 +3957,88 @@ const Filters = ({
3609
3957
  const filterEntries = Object.entries(savedFilters);
3610
3958
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
3611
3959
  sx: {
3612
- display: 'flex',
3613
- alignItems: 'center',
3614
- gap: 2,
3615
- marginBottom: 2
3960
+ display: "flex",
3961
+ justifyContent: "flex-start",
3962
+ mb: 2
3616
3963
  }
3617
- }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
3618
- variant: "contained",
3619
- onClick: handleAddClick
3620
- }, "Add Filter") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
3621
- variant: "outlined",
3622
- onClick: handleCancel
3623
- }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3964
+ }, !isAdding && /*#__PURE__*/React__default.createElement(Button, {
3624
3965
  variant: "contained",
3625
- onClick: handleSave,
3626
- disabled: (() => {
3627
- if (!selectedDimension) return true;
3628
- const dimensionItems = getDimensionItems();
3629
- const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
3630
- if (!selectedItem) return true;
3631
- const isDate = isDateDimension(selectedItem.dimension);
3632
- return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
3633
- })()
3634
- }, "Save Filter"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
3966
+ startIcon: /*#__PURE__*/React__default.createElement(GridAddIcon, null),
3967
+ onClick: handleAddClick,
3968
+ sx: {
3969
+ height: "40px",
3970
+ fontFamily: "system-ui",
3971
+ fontSize: "14px",
3972
+ fontWeight: 500,
3973
+ borderRadius: "8px",
3974
+ textTransform: "none",
3975
+ backgroundColor: "rgb(70, 134, 128)",
3976
+ boxShadow: "none",
3977
+ "&:hover": {
3978
+ backgroundColor: "rgb(50, 114, 108)",
3979
+ boxShadow: "none"
3980
+ }
3981
+ }
3982
+ }, "Add Filter")), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
3983
+ elevation: 0,
3635
3984
  sx: {
3636
- padding: 3,
3637
- marginBottom: 3
3985
+ p: 3,
3986
+ mb: 3,
3987
+ border: "1px solid #e0e0e0",
3988
+ borderRadius: "12px",
3989
+ backgroundColor: "white",
3990
+ boxShadow: "0px 2px 4px rgba(0,0,0,0.02)",
3991
+ fontFamily: "system-ui"
3638
3992
  }
3639
3993
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3640
- variant: "h6",
3641
3994
  sx: {
3642
- marginBottom: 2
3995
+ fontSize: "14px",
3996
+ fontWeight: 600,
3997
+ mb: 1.5,
3998
+ color: "rgb(37, 37, 37)"
3999
+ }
4000
+ }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
4001
+ sx: {
4002
+ mb: 3
3643
4003
  }
3644
- }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
4004
+ }, /*#__PURE__*/React__default.createElement(ProviderSelection, {
3645
4005
  providersData: providersData,
3646
4006
  rootProvider: rootProvider,
3647
4007
  onSelectionChange: setDimensionSelectionChain,
3648
4008
  existingDimensions: existingDimensions,
3649
4009
  existingMetrics: existingMetrics,
3650
4010
  existingFilters: savedFilters
3651
- }), /*#__PURE__*/React__default.createElement(Typography$1, {
3652
- variant: "h6",
4011
+ })), /*#__PURE__*/React__default.createElement(Typography$1, {
3653
4012
  sx: {
3654
- marginTop: 3,
3655
- marginBottom: 2
4013
+ fontSize: "14px",
4014
+ fontWeight: 600,
4015
+ mb: 1.5,
4016
+ color: "rgb(37, 37, 37)"
4017
+ }
4018
+ }, "Select Dimension for Filter"), /*#__PURE__*/React__default.createElement(Box$1, {
4019
+ sx: {
4020
+ mb: 3
3656
4021
  }
3657
- }, "Select Dimension for Filter"), /*#__PURE__*/React__default.createElement(SingleSelect, {
4022
+ }, /*#__PURE__*/React__default.createElement(SingleSelect, {
3658
4023
  items: getDimensionItems(),
3659
4024
  value: selectedDimension,
3660
4025
  label: "Choose Dimension",
3661
4026
  onChange: handleDimensionChange,
3662
4027
  sx: {
3663
- width: '400px'
4028
+ width: '400px',
4029
+ fontFamily: "system-ui"
3664
4030
  }
3665
- }), selectedDimension && (() => {
4031
+ })), selectedDimension && (() => {
3666
4032
  const dimensionItems = getDimensionItems();
3667
4033
  const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
3668
4034
  const isDate = selectedItem && isDateDimension(selectedItem.dimension);
3669
4035
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
3670
- variant: "h6",
3671
4036
  sx: {
3672
- marginTop: 3,
3673
- marginBottom: 2
4037
+ fontSize: "14px",
4038
+ fontWeight: 600,
4039
+ mb: 1.5,
4040
+ mt: 3,
4041
+ color: "rgb(37, 37, 37)"
3674
4042
  }
3675
4043
  }, isDate ? 'Select Date Range' : 'Select Filter Values'), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
3676
4044
  dateAdapter: AdapterDayjs
@@ -3719,20 +4087,73 @@ const Filters = ({
3719
4087
  loading: loadingFilterValues,
3720
4088
  helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value'
3721
4089
  })));
3722
- })()), filterEntries.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
4090
+ })(), /*#__PURE__*/React__default.createElement(Box$1, {
4091
+ sx: {
4092
+ display: "flex",
4093
+ justifyContent: "flex-end",
4094
+ gap: 2,
4095
+ mt: 3
4096
+ }
4097
+ }, /*#__PURE__*/React__default.createElement(Button, {
4098
+ variant: "outlined",
4099
+ onClick: handleCancel,
4100
+ sx: {
4101
+ height: "40px",
4102
+ fontFamily: "system-ui",
4103
+ fontSize: "14px",
4104
+ fontWeight: 500,
4105
+ borderRadius: "8px",
4106
+ boxShadow: "none",
4107
+ borderColor: "#e0e0e0",
4108
+ color: "rgb(37, 37, 37)",
4109
+ textTransform: "none",
4110
+ "&:hover": {
4111
+ backgroundColor: "#f5f5f5",
4112
+ borderColor: "#d0d0d0"
4113
+ }
4114
+ }
4115
+ }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
4116
+ variant: "contained",
4117
+ onClick: handleSave,
4118
+ disabled: (() => {
4119
+ if (!selectedDimension) return true;
4120
+ const dimensionItems = getDimensionItems();
4121
+ const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
4122
+ if (!selectedItem) return true;
4123
+ const isDate = isDateDimension(selectedItem.dimension);
4124
+ return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
4125
+ })(),
3723
4126
  sx: {
3724
- marginTop: 3
4127
+ height: "40px",
4128
+ fontFamily: "system-ui",
4129
+ fontSize: "14px",
4130
+ fontWeight: 500,
4131
+ borderRadius: "8px",
4132
+ boxShadow: "none",
4133
+ textTransform: "none",
4134
+ backgroundColor: "rgb(70, 134, 128)",
4135
+ "&:hover": {
4136
+ backgroundColor: "rgb(50, 114, 108)",
4137
+ boxShadow: "none"
4138
+ }
4139
+ }
4140
+ }, "Save Filter"))), filterEntries.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
4141
+ sx: {
4142
+ marginTop: 0
3725
4143
  }
3726
4144
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3727
4145
  variant: "h6",
3728
4146
  sx: {
3729
- marginBottom: 2
4147
+ fontSize: "16px",
4148
+ fontWeight: 600,
4149
+ marginBottom: 1,
4150
+ color: "rgb(37, 37, 37)"
3730
4151
  }
3731
4152
  }, "Saved Filters"), /*#__PURE__*/React__default.createElement(Box$1, {
3732
4153
  sx: {
3733
4154
  display: 'flex',
3734
4155
  flexDirection: 'column',
3735
- gap: 2
4156
+ gap: 1
3736
4157
  }
3737
4158
  }, filterEntries.map(([fullPath, filter]) => {
3738
4159
  const isDate = isDateDimension(filter.dimension);
@@ -3740,7 +4161,7 @@ const Filters = ({
3740
4161
  const isEditingTitle = editingTitlePath === fullPath;
3741
4162
 
3742
4163
  // Format display values based on filter type
3743
- let valueCount, valuesList, badgeContent;
4164
+ let valueCount, valuesList;
3744
4165
  if (isDate && filter.values && typeof filter.values === 'object' && !Array.isArray(filter.values)) {
3745
4166
  // Date range filter - handle cases where only one date is provided
3746
4167
  if (filter.values.gte && filter.values.lte) {
@@ -3752,47 +4173,77 @@ const Filters = ({
3752
4173
  } else {
3753
4174
  valuesList = 'No dates';
3754
4175
  }
3755
- badgeContent = '📅'; // Calendar emoji for date filters
3756
4176
  } else {
3757
4177
  // Regular filter
3758
4178
  valueCount = filter.values?.length || 0;
3759
4179
  valuesList = filter.values?.join(', ') || 'No values';
3760
- badgeContent = valueCount;
3761
4180
  }
3762
4181
  const displayLabel = titleOverrides[fullPath] || filter.dimensionTitle;
3763
4182
  const hasCustomTitle = !!titleOverrides[fullPath];
3764
4183
  return /*#__PURE__*/React__default.createElement(Box$1, {
3765
4184
  key: fullPath
4185
+ }, /*#__PURE__*/React__default.createElement(Box$1, {
4186
+ sx: {
4187
+ display: "flex",
4188
+ alignItems: "center",
4189
+ width: "100%",
4190
+ gap: 1,
4191
+ backgroundColor: "white",
4192
+ border: "1px solid #e0e0e0",
4193
+ borderRadius: 2,
4194
+ padding: 2,
4195
+ transition: "box-shadow 0.2s ease",
4196
+ "&:hover .hover-icons": {
4197
+ opacity: 1
4198
+ }
4199
+ }
4200
+ }, !isEditingTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
4201
+ sx: {
4202
+ flex: 1,
4203
+ minWidth: 0
4204
+ }
3766
4205
  }, /*#__PURE__*/React__default.createElement(Box$1, {
3767
4206
  sx: {
3768
4207
  display: 'flex',
3769
4208
  alignItems: 'center',
3770
- gap: 1,
3771
- marginBottom: isEditing ? 2 : 0
4209
+ gap: 1
4210
+ }
4211
+ }, /*#__PURE__*/React__default.createElement(Typography$1, {
4212
+ variant: "h6",
4213
+ sx: {
4214
+ fontWeight: hasCustomTitle ? 600 : 500,
4215
+ fontStyle: hasCustomTitle ? "italic" : "normal",
4216
+ color: "#1a1a1a",
4217
+ fontSize: "14px"
3772
4218
  }
3773
- }, !isEditingTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
4219
+ }, displayLabel), /*#__PURE__*/React__default.createElement(Tooltip, {
3774
4220
  title: /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("strong", null, "Path:"), " ", formatProviderPath(filter), " \u2192 ", 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)),
3775
4221
  arrow: true,
3776
4222
  placement: "top"
3777
- }, /*#__PURE__*/React__default.createElement(Badge, {
3778
- badgeContent: badgeContent,
3779
- color: "secondary"
3780
4223
  }, /*#__PURE__*/React__default.createElement(Chip, {
3781
- label: displayLabel,
3782
- onDelete: () => onRemoveFilter(fullPath),
3783
- color: "secondary",
4224
+ size: "small",
4225
+ label: isDate ? valuesList : `${valueCount} values`,
4226
+ color: "default",
3784
4227
  variant: "outlined",
3785
4228
  sx: {
3786
- fontWeight: hasCustomTitle ? 'bold' : 'normal',
3787
- fontStyle: hasCustomTitle ? 'italic' : 'normal'
4229
+ marginLeft: 1,
4230
+ height: '20px',
4231
+ fontSize: '14px'
3788
4232
  }
3789
- }))), /*#__PURE__*/React__default.createElement(Tooltip, {
4233
+ })))), /*#__PURE__*/React__default.createElement(Box$1, {
4234
+ className: "hover-icons",
4235
+ sx: {
4236
+ display: "flex",
4237
+ gap: 0.5,
4238
+ opacity: 0,
4239
+ transition: "opacity 0.2s"
4240
+ }
4241
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
3790
4242
  title: "Rename filter",
3791
4243
  arrow: true
3792
4244
  }, /*#__PURE__*/React__default.createElement(IconButton, {
3793
4245
  size: "small",
3794
4246
  onClick: () => handleStartEditTitle(fullPath, filter.dimensionTitle),
3795
- color: "primary",
3796
4247
  disabled: isEditing
3797
4248
  }, /*#__PURE__*/React__default.createElement(EditIcon, {
3798
4249
  fontSize: "small"
@@ -3802,11 +4253,21 @@ const Filters = ({
3802
4253
  }, /*#__PURE__*/React__default.createElement(IconButton, {
3803
4254
  size: "small",
3804
4255
  onClick: () => handleEditFilter(fullPath, filter),
3805
- color: "primary",
3806
4256
  disabled: isEditing
3807
4257
  }, /*#__PURE__*/React__default.createElement(FilterAltIcon, {
3808
4258
  fontSize: "small"
3809
- })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
4259
+ }))), /*#__PURE__*/React__default.createElement(Tooltip, {
4260
+ title: "Remove filter",
4261
+ arrow: true
4262
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
4263
+ size: "small",
4264
+ onClick: () => onRemoveFilter(fullPath),
4265
+ sx: {
4266
+ color: "#ef5350"
4267
+ }
4268
+ }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
4269
+ fontSize: "small"
4270
+ }))))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
3810
4271
  value: editTitleValue,
3811
4272
  onChange: e => setEditTitleValue(e.target.value),
3812
4273
  onKeyDown: e => handleKeyDown(e, fullPath),
@@ -3814,9 +4275,14 @@ const Filters = ({
3814
4275
  autoFocus: true,
3815
4276
  placeholder: "Enter custom title",
3816
4277
  sx: {
3817
- width: '300px'
4278
+ flex: 1
4279
+ }
4280
+ }), /*#__PURE__*/React__default.createElement(Box$1, {
4281
+ sx: {
4282
+ display: "flex",
4283
+ gap: 0.5
3818
4284
  }
3819
- }), /*#__PURE__*/React__default.createElement(Tooltip, {
4285
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
3820
4286
  title: "Save",
3821
4287
  arrow: true
3822
4288
  }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -3830,8 +4296,7 @@ const Filters = ({
3830
4296
  arrow: true
3831
4297
  }, /*#__PURE__*/React__default.createElement(IconButton, {
3832
4298
  size: "small",
3833
- onClick: handleCancelEditTitle,
3834
- color: "default"
4299
+ onClick: handleCancelEditTitle
3835
4300
  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
3836
4301
  fontSize: "small"
3837
4302
  }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -3843,17 +4308,23 @@ const Filters = ({
3843
4308
  color: "warning"
3844
4309
  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
3845
4310
  fontSize: "small"
3846
- }))))), isEditing && /*#__PURE__*/React__default.createElement(Paper$1, {
4311
+ })))))), isEditing && /*#__PURE__*/React__default.createElement(Paper$1, {
4312
+ elevation: 0,
3847
4313
  sx: {
3848
- padding: 2,
3849
- marginLeft: 2
4314
+ p: 2,
4315
+ mt: 1,
4316
+ ml: 2,
4317
+ border: "1px solid #e0e0e0",
4318
+ borderRadius: "8px",
4319
+ backgroundColor: "#fafafa"
3850
4320
  }
3851
4321
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3852
4322
  variant: "subtitle2",
3853
4323
  sx: {
3854
- marginBottom: 1
4324
+ marginBottom: 1.5,
4325
+ fontWeight: 600
3855
4326
  }
3856
- }, "Edit Filter ", isDate ? 'Date Range' : 'Values', " for: ", filter.dimensionTitle), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
4327
+ }, "Edit ", isDate ? 'Date Range' : 'Values', " for: ", filter.dimensionTitle), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
3857
4328
  dateAdapter: AdapterDayjs
3858
4329
  }, /*#__PURE__*/React__default.createElement(Box$1, {
3859
4330
  sx: {
@@ -3904,17 +4375,32 @@ const Filters = ({
3904
4375
  })), /*#__PURE__*/React__default.createElement(Box$1, {
3905
4376
  sx: {
3906
4377
  display: 'flex',
3907
- gap: 1
4378
+ gap: 1,
4379
+ justifyContent: 'flex-end'
3908
4380
  }
3909
4381
  }, /*#__PURE__*/React__default.createElement(Button, {
3910
4382
  variant: "outlined",
3911
4383
  size: "small",
3912
- onClick: handleCancelEdit
4384
+ onClick: handleCancelEdit,
4385
+ sx: {
4386
+ textTransform: 'none',
4387
+ borderRadius: '6px'
4388
+ }
3913
4389
  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3914
4390
  variant: "contained",
3915
4391
  size: "small",
3916
4392
  onClick: () => handleSaveEditedFilter(fullPath),
3917
- disabled: isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0
4393
+ disabled: isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0,
4394
+ sx: {
4395
+ textTransform: 'none',
4396
+ borderRadius: '6px',
4397
+ backgroundColor: "rgb(70, 134, 128)",
4398
+ boxShadow: "none",
4399
+ "&:hover": {
4400
+ backgroundColor: "rgb(50, 114, 108)",
4401
+ boxShadow: "none"
4402
+ }
4403
+ }
3918
4404
  }, "Save Changes"))));
3919
4405
  }))));
3920
4406
  };
@@ -4124,8 +4610,8 @@ const ReportBuilder = ({
4124
4610
  const notify = useNotify();
4125
4611
  const reportingContext = useReportingContextOptional();
4126
4612
  const [providersData, setProvidersData] = useState(null);
4127
- const [selectedProvider, setSelectedProvider] = useState('');
4128
- const [reportTitle, setReportTitle] = useState('');
4613
+ const [selectedProvider, setSelectedProvider] = useState("");
4614
+ const [reportTitle, setReportTitle] = useState("");
4129
4615
  const [report, setReport] = useState({
4130
4616
  dimensions: [],
4131
4617
  metrics: [],
@@ -4179,8 +4665,8 @@ const ReportBuilder = ({
4179
4665
  const reconstructDimensionFromPath = (fullPath, providersData, rootProvider) => {
4180
4666
  try {
4181
4667
  // Parse: "ft_sa_db_pc.legal_name" -> ["ft", "sa", "db", "pc"], "legal_name"
4182
- const [aliasPath, fieldKey] = fullPath.split('.');
4183
- const aliases = aliasPath.split('_');
4668
+ const [aliasPath, fieldKey] = fullPath.split(".");
4669
+ const aliases = aliasPath.split("_");
4184
4670
 
4185
4671
  // Walk the chain to build relations array
4186
4672
  let currentProvider = rootProvider;
@@ -4244,8 +4730,8 @@ const ReportBuilder = ({
4244
4730
  const reconstructMetricFromPath = (fullPath, providersData, rootProvider) => {
4245
4731
  try {
4246
4732
  // Parse: "ft_sa.financing_internal" -> ["ft", "sa"], "financing_internal"
4247
- const [aliasPath, metricName] = fullPath.split('.');
4248
- const aliases = aliasPath.split('_');
4733
+ const [aliasPath, metricName] = fullPath.split(".");
4734
+ const aliases = aliasPath.split("_");
4249
4735
 
4250
4736
  // Walk the chain to build relations array
4251
4737
  let currentProvider = rootProvider;
@@ -4303,17 +4789,17 @@ const ReportBuilder = ({
4303
4789
  };
4304
4790
  const loadReportDefinition = async id => {
4305
4791
  try {
4306
- console.log('Loading report definition:', id);
4792
+ console.log("Loading report definition:", id);
4307
4793
  const reportDef = await Api.getReportDefinition({
4308
4794
  id
4309
4795
  });
4310
- console.log('Loaded report definition:', reportDef);
4796
+ console.log("Loaded report definition:", reportDef);
4311
4797
 
4312
4798
  // Set the provider
4313
4799
  setSelectedProvider(reportDef.provider);
4314
4800
 
4315
4801
  // Set the title
4316
- setReportTitle(reportDef.title || '');
4802
+ setReportTitle(reportDef.title || "");
4317
4803
 
4318
4804
  // Reconstruct dimensions
4319
4805
  const reconstructedDimensions = [];
@@ -4323,9 +4809,9 @@ const ReportBuilder = ({
4323
4809
  if (reportDef.definition?.doc?.query?.order_by) {
4324
4810
  for (const orderItem of reportDef.definition.doc.query.order_by) {
4325
4811
  if (orderItem.desc === true) {
4326
- orderByMap[orderItem.name] = 'desc';
4812
+ orderByMap[orderItem.name] = "desc";
4327
4813
  } else {
4328
- orderByMap[orderItem.name] = 'asc';
4814
+ orderByMap[orderItem.name] = "asc";
4329
4815
  }
4330
4816
  }
4331
4817
  }
@@ -4405,26 +4891,26 @@ const ReportBuilder = ({
4405
4891
 
4406
4892
  // Mark report as loaded
4407
4893
  setReportLoaded(true);
4408
- console.log('Reconstructed report:', {
4894
+ console.log("Reconstructed report:", {
4409
4895
  dimensions: reconstructedDimensions,
4410
4896
  metrics: reconstructedMetrics,
4411
4897
  filters: loadedFilters,
4412
4898
  titleOverrides: loadedTitleOverrides
4413
4899
  });
4414
4900
  } catch (error) {
4415
- console.error('Error loading report definition:', error);
4416
- notify.error('Error loading report definition: ' + (error.message || 'Unknown error'));
4901
+ console.error("Error loading report definition:", error);
4902
+ notify.error("Error loading report definition: " + (error.message || "Unknown error"));
4417
4903
  }
4418
4904
  };
4419
4905
  const loadClonedReport = reportDef => {
4420
4906
  try {
4421
- console.log('Loading cloned report:', reportDef);
4907
+ console.log("Loading cloned report:", reportDef);
4422
4908
 
4423
4909
  // Set the provider
4424
4910
  setSelectedProvider(reportDef.provider);
4425
4911
 
4426
4912
  // Set the title (already modified with " (Copy)" suffix)
4427
- setReportTitle(reportDef.title || '');
4913
+ setReportTitle(reportDef.title || "");
4428
4914
 
4429
4915
  // Reconstruct dimensions
4430
4916
  const reconstructedDimensions = [];
@@ -4434,9 +4920,9 @@ const ReportBuilder = ({
4434
4920
  if (reportDef.definition?.doc?.query?.order_by) {
4435
4921
  for (const orderItem of reportDef.definition.doc.query.order_by) {
4436
4922
  if (orderItem.desc === true) {
4437
- orderByMap[orderItem.name] = 'desc';
4923
+ orderByMap[orderItem.name] = "desc";
4438
4924
  } else {
4439
- orderByMap[orderItem.name] = 'asc';
4925
+ orderByMap[orderItem.name] = "asc";
4440
4926
  }
4441
4927
  }
4442
4928
  }
@@ -4512,15 +4998,15 @@ const ReportBuilder = ({
4512
4998
 
4513
4999
  // Set title overrides
4514
5000
  setTitleOverrides(loadedTitleOverrides);
4515
- console.log('Loaded cloned report:', {
5001
+ console.log("Loaded cloned report:", {
4516
5002
  dimensions: reconstructedDimensions,
4517
5003
  metrics: reconstructedMetrics,
4518
5004
  filters: loadedFilters,
4519
5005
  titleOverrides: loadedTitleOverrides
4520
5006
  });
4521
5007
  } catch (error) {
4522
- console.error('Error loading cloned report:', error);
4523
- notify.error('Error loading cloned report: ' + (error.message || 'Unknown error'));
5008
+ console.error("Error loading cloned report:", error);
5009
+ notify.error("Error loading cloned report: " + (error.message || "Unknown error"));
4524
5010
  }
4525
5011
  };
4526
5012
 
@@ -4547,7 +5033,7 @@ const ReportBuilder = ({
4547
5033
  metrics: {},
4548
5034
  filters: {}
4549
5035
  });
4550
- console.log('Selected root provider:', event.target.value);
5036
+ console.log("Selected root provider:", event.target.value);
4551
5037
  };
4552
5038
  const handleUpdateDimensionTitle = (fullPath, customTitle) => {
4553
5039
  setTitleOverrides(prev => ({
@@ -4618,8 +5104,8 @@ const ReportBuilder = ({
4618
5104
  ...prev,
4619
5105
  dimensions: [...prev.dimensions, dimensionData]
4620
5106
  };
4621
- console.log('Dimension saved:', dimensionData);
4622
- console.log('Complete report:', newReport);
5107
+ console.log("Dimension saved:", dimensionData);
5108
+ console.log("Complete report:", newReport);
4623
5109
  return newReport;
4624
5110
  });
4625
5111
  };
@@ -4641,8 +5127,8 @@ const ReportBuilder = ({
4641
5127
  ...prev,
4642
5128
  metrics: [...prev.metrics, metricData]
4643
5129
  };
4644
- console.log('Metric saved:', metricData);
4645
- console.log('Complete report:', newReport);
5130
+ console.log("Metric saved:", metricData);
5131
+ console.log("Complete report:", newReport);
4646
5132
  return newReport;
4647
5133
  });
4648
5134
  };
@@ -4667,11 +5153,11 @@ const ReportBuilder = ({
4667
5153
  [fullPath]: filterData
4668
5154
  }
4669
5155
  };
4670
- console.log('Filter saved:', {
5156
+ console.log("Filter saved:", {
4671
5157
  fullPath,
4672
5158
  filterData
4673
5159
  });
4674
- console.log('Complete report:', newReport);
5160
+ console.log("Complete report:", newReport);
4675
5161
  return newReport;
4676
5162
  });
4677
5163
  };
@@ -4695,7 +5181,7 @@ const ReportBuilder = ({
4695
5181
  const orderItem = {
4696
5182
  name: dim.fullPath
4697
5183
  };
4698
- if (dim.sortOrder === 'desc') {
5184
+ if (dim.sortOrder === "desc") {
4699
5185
  orderItem.desc = true;
4700
5186
  }
4701
5187
  // For 'asc' or null, just include { name: fullPath } without desc property
@@ -4720,7 +5206,7 @@ const ReportBuilder = ({
4720
5206
  [fullPath]: filterData.values
4721
5207
  });
4722
5208
  }
4723
- } else if (typeof filterData.values === 'object') {
5209
+ } else if (typeof filterData.values === "object") {
4724
5210
  // Date range filter - add the object as-is
4725
5211
  conditions.push({
4726
5212
  [fullPath]: filterData.values
@@ -4780,11 +5266,11 @@ const ReportBuilder = ({
4780
5266
  try {
4781
5267
  setLoading(true);
4782
5268
  const apiReport = convertReportToApiFormat(page, size);
4783
- console.log('Running report with:', apiReport);
5269
+ console.log("Running report with:", apiReport);
4784
5270
  const result = await Api.runAdHocReport({
4785
5271
  report: apiReport
4786
5272
  });
4787
- console.log('Report result:', result);
5273
+ console.log("Report result:", result);
4788
5274
  setReportData(result);
4789
5275
  // Note: The API should ideally return total count, but for now we'll use the result length
4790
5276
  // If the API returns fewer rows than the limit, we know we're at the end
@@ -4795,8 +5281,8 @@ const ReportBuilder = ({
4795
5281
  setTotalRows((page + 2) * size);
4796
5282
  }
4797
5283
  } catch (error) {
4798
- console.error('Error running report:', error);
4799
- notify.error('Error running report: ' + (error.message || 'Unknown error'));
5284
+ console.error("Error running report:", error);
5285
+ notify.error("Error running report: " + (error.message || "Unknown error"));
4800
5286
  setReportData(null);
4801
5287
  } finally {
4802
5288
  setLoading(false);
@@ -4812,20 +5298,20 @@ const ReportBuilder = ({
4812
5298
  try {
4813
5299
  setLoading(true);
4814
5300
  const apiReport = convertReportToApiFormat();
4815
- console.log('Downloading report with:', apiReport);
5301
+ console.log("Downloading report with:", apiReport);
4816
5302
 
4817
5303
  // Generate filename from report title and current date
4818
- const date = new Date().toISOString().split('T')[0]; // Format: YYYY-MM-DD
4819
- const sanitizedTitle = (reportTitle || 'report').replace(/[^a-z0-9]/gi, '_').toLowerCase();
5304
+ const date = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
5305
+ const sanitizedTitle = (reportTitle || "report").replace(/[^a-z0-9]/gi, "_").toLowerCase();
4820
5306
  const filename = `${sanitizedTitle}_${date}.csv`;
4821
5307
  await Api.downloadAdHocReport({
4822
5308
  report: apiReport,
4823
5309
  filename
4824
5310
  });
4825
- notify.success('Report downloaded successfully!');
5311
+ notify.success("Report downloaded successfully!");
4826
5312
  } catch (error) {
4827
- console.error('Error downloading report:', error);
4828
- notify.error('Error downloading report: ' + (error.message || 'Unknown error'));
5313
+ console.error("Error downloading report:", error);
5314
+ notify.error("Error downloading report: " + (error.message || "Unknown error"));
4829
5315
  } finally {
4830
5316
  setLoading(false);
4831
5317
  }
@@ -4843,15 +5329,15 @@ const ReportBuilder = ({
4843
5329
  };
4844
5330
  const handleSaveReport = async () => {
4845
5331
  if (!selectedProvider) {
4846
- notify.warning('Please select a provider first');
5332
+ notify.warning("Please select a provider first");
4847
5333
  return;
4848
5334
  }
4849
5335
  if (!reportTitle.trim()) {
4850
- notify.warning('Please enter a report title');
5336
+ notify.warning("Please enter a report title");
4851
5337
  return;
4852
5338
  }
4853
5339
  if (report.dimensions.length === 0 && report.metrics.length === 0) {
4854
- notify.warning('Please add at least one dimension or metric');
5340
+ notify.warning("Please add at least one dimension or metric");
4855
5341
  return;
4856
5342
  }
4857
5343
  try {
@@ -4862,7 +5348,7 @@ const ReportBuilder = ({
4862
5348
  const orderItem = {
4863
5349
  name: dim.fullPath
4864
5350
  };
4865
- if (dim.sortOrder === 'desc') {
5351
+ if (dim.sortOrder === "desc") {
4866
5352
  orderItem.desc = true;
4867
5353
  }
4868
5354
  // For 'asc' or null, just include { name: fullPath } without desc property
@@ -4905,7 +5391,7 @@ const ReportBuilder = ({
4905
5391
  [fullPath]: filterData.values
4906
5392
  });
4907
5393
  }
4908
- } else if (typeof filterData.values === 'object') {
5394
+ } else if (typeof filterData.values === "object") {
4909
5395
  // Date range filter - add the object as-is
4910
5396
  conditions.push({
4911
5397
  [fullPath]: filterData.values
@@ -4935,20 +5421,20 @@ const ReportBuilder = ({
4935
5421
  }
4936
5422
  }
4937
5423
  };
4938
- console.log('Saving report definition:', payload);
5424
+ console.log("Saving report definition:", payload);
4939
5425
  if (reportDefinitionId) {
4940
5426
  // Update existing report definition
4941
5427
  await Api.updateReportDefinition({
4942
5428
  id: reportDefinitionId,
4943
5429
  reportDefinition: payload
4944
5430
  });
4945
- notify.success('Report definition updated successfully!');
5431
+ notify.success("Report definition updated successfully!");
4946
5432
  } else {
4947
5433
  // Create new report definition
4948
5434
  await Api.createReportDefinition({
4949
5435
  reportDefinition: payload
4950
5436
  });
4951
- notify.success('Report definition created successfully!');
5437
+ notify.success("Report definition created successfully!");
4952
5438
  }
4953
5439
 
4954
5440
  // Navigate back to list
@@ -4956,8 +5442,8 @@ const ReportBuilder = ({
4956
5442
  onBackToList();
4957
5443
  }
4958
5444
  } catch (error) {
4959
- console.error('Error saving report definition:', error);
4960
- notify.error('Error saving report definition: ' + (error.message || 'Unknown error'));
5445
+ console.error("Error saving report definition:", error);
5446
+ notify.error("Error saving report definition: " + (error.message || "Unknown error"));
4961
5447
  } finally {
4962
5448
  setSaving(false);
4963
5449
  }
@@ -4965,121 +5451,273 @@ const ReportBuilder = ({
4965
5451
  const canSaveReport = selectedProvider && reportTitle.trim() && (report.dimensions.length > 0 || report.metrics.length > 0);
4966
5452
  return /*#__PURE__*/React__default.createElement(Box$1, {
4967
5453
  sx: {
4968
- p: 3
5454
+ p: 3,
5455
+ fontFamily: "system-ui"
4969
5456
  }
4970
5457
  }, /*#__PURE__*/React__default.createElement(Box$1, {
4971
5458
  sx: {
4972
- display: 'flex',
4973
- justifyContent: 'space-between',
4974
- alignItems: 'center',
4975
- mb: 2
5459
+ display: "flex",
5460
+ justifyContent: "space-between",
5461
+ alignItems: "center",
5462
+ mb: 2,
5463
+ backgroundColor: "transparent",
5464
+ fontFamily: "system-ui"
4976
5465
  }
4977
- }, /*#__PURE__*/React__default.createElement("h1", null, reportDefinitionId ? 'Edit Report' : 'Create New Report'), onBackToList && /*#__PURE__*/React__default.createElement(Button, {
5466
+ }, /*#__PURE__*/React__default.createElement("h1", null, reportDefinitionId ? "Edit Report" : "Create New Report"), onBackToList && /*#__PURE__*/React__default.createElement(Button, {
4978
5467
  variant: "outlined",
4979
5468
  startIcon: /*#__PURE__*/React__default.createElement(ArrowBackIcon, null),
4980
5469
  onClick: onBackToList
4981
5470
  }, "Back to List")), /*#__PURE__*/React__default.createElement(Box$1, {
4982
5471
  sx: {
4983
5472
  mt: 2,
4984
- display: 'flex',
4985
- gap: 2,
4986
- alignItems: 'flex-start',
4987
- flexWrap: 'wrap'
5473
+ p: 3,
5474
+ backgroundColor: "white",
5475
+ borderRadius: "12px",
5476
+ border: "1px solid #e0e0e0",
5477
+ fontFamily: "system-ui",
5478
+ display: "flex",
5479
+ flexDirection: "column",
5480
+ gap: 3,
5481
+ boxShadow: "0px 2px 4px rgba(0,0,0,0.02)"
5482
+ }
5483
+ }, /*#__PURE__*/React__default.createElement(Box$1, {
5484
+ sx: {
5485
+ display: "flex",
5486
+ gap: 4,
5487
+ alignItems: "flex-start",
5488
+ flexWrap: "wrap"
5489
+ }
5490
+ }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Typography$1, {
5491
+ sx: {
5492
+ fontSize: "14px",
5493
+ fontWeight: 600,
5494
+ mb: 1,
5495
+ color: "rgb(37, 37, 37)"
4988
5496
  }
4989
- }, /*#__PURE__*/React__default.createElement(TextField, {
4990
- label: "Report Title",
5497
+ }, "Report Title"), /*#__PURE__*/React__default.createElement(TextField, {
4991
5498
  value: reportTitle,
4992
5499
  onChange: e => setReportTitle(e.target.value),
4993
5500
  placeholder: "Enter report title",
4994
5501
  sx: {
4995
- width: '300px'
5502
+ width: "400px",
5503
+ fontFamily: "system-ui",
5504
+ "& .MuiOutlinedInput-root": {
5505
+ backgroundColor: "white",
5506
+ borderRadius: "8px"
5507
+ }
4996
5508
  },
4997
5509
  size: "small"
4998
- }), /*#__PURE__*/React__default.createElement(SingleSelect, {
5510
+ })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Typography$1, {
5511
+ sx: {
5512
+ fontSize: "14px",
5513
+ fontWeight: 600,
5514
+ mb: 1,
5515
+ color: "rgb(37, 37, 37)"
5516
+ }
5517
+ }, "Select Root Provider"), /*#__PURE__*/React__default.createElement(SingleSelect, {
4999
5518
  items: getProviderItems(),
5000
5519
  value: selectedProvider,
5001
- label: "Select Root Provider",
5002
5520
  onChange: handleProviderChange,
5003
5521
  sx: {
5004
- width: '300px'
5522
+ width: "300px",
5523
+ fontFamily: "system-ui"
5005
5524
  },
5006
5525
  disabled: !!reportDefinitionId
5007
- }), /*#__PURE__*/React__default.createElement(Button, {
5526
+ }))), /*#__PURE__*/React__default.createElement(Box$1, {
5527
+ sx: {
5528
+ display: "flex",
5529
+ gap: 2,
5530
+ alignItems: "center"
5531
+ }
5532
+ }, /*#__PURE__*/React__default.createElement(Button, {
5008
5533
  variant: "contained",
5009
5534
  onClick: handleRunReport,
5010
5535
  disabled: !canRunReport,
5536
+ startIcon: /*#__PURE__*/React__default.createElement(PlayArrowIcon, null),
5011
5537
  sx: {
5012
- height: '40px'
5538
+ height: "40px",
5539
+ fontFamily: "system-ui",
5540
+ borderRadius: "8px",
5541
+ boxShadow: "none",
5542
+ textTransform: "none",
5543
+ backgroundColor: "rgb(70, 134, 128)",
5544
+ // Bright blue
5545
+ fontWeight: 500,
5546
+ padding: "0 20px",
5547
+ "&:hover": {
5548
+ backgroundColor: "rgb(46, 102, 98)",
5549
+ boxShadow: "none"
5550
+ }
5013
5551
  }
5014
5552
  }, "Run Report"), /*#__PURE__*/React__default.createElement(Button, {
5015
- variant: "contained",
5016
- color: "secondary",
5553
+ variant: "outlined",
5017
5554
  startIcon: /*#__PURE__*/React__default.createElement(DownloadIcon, null),
5018
5555
  onClick: handleDownloadReport,
5019
5556
  disabled: !canRunReport || loading,
5020
5557
  sx: {
5021
- height: '40px'
5558
+ height: "40px",
5559
+ fontFamily: "system-ui",
5560
+ borderRadius: "8px",
5561
+ boxShadow: "none",
5562
+ textTransform: "none",
5563
+ color: "#9c27b0",
5564
+ // Purple
5565
+ borderColor: "#e1bee7",
5566
+ fontWeight: 500,
5567
+ padding: "0 20px",
5568
+ "&:hover": {
5569
+ borderColor: "#9c27b0",
5570
+ backgroundColor: "rgba(156, 39, 176, 0.04)"
5571
+ }
5022
5572
  }
5023
5573
  }, "Download CSV"), /*#__PURE__*/React__default.createElement(Button, {
5024
- variant: "contained",
5025
- color: "success",
5574
+ variant: "outlined",
5026
5575
  startIcon: /*#__PURE__*/React__default.createElement(SaveIcon, null),
5027
5576
  onClick: handleSaveReport,
5028
5577
  disabled: !canSaveReport || saving,
5029
5578
  sx: {
5030
- height: '40px'
5579
+ height: "40px",
5580
+ fontFamily: "system-ui",
5581
+ borderRadius: "8px",
5582
+ boxShadow: "none",
5583
+ textTransform: "none",
5584
+ color: "#2e7d32",
5585
+ // Green
5586
+ borderColor: "#a5d6a7",
5587
+ fontWeight: 500,
5588
+ padding: "0 20px",
5589
+ "&:hover": {
5590
+ borderColor: "#2e7d32",
5591
+ backgroundColor: "rgba(46, 125, 50, 0.04)"
5592
+ }
5031
5593
  }
5032
- }, saving ? 'Saving...' : reportDefinitionId ? 'Update Report' : 'Save Report')), selectedProvider && /*#__PURE__*/React__default.createElement(Box$1, {
5594
+ }, saving ? "Saving..." : reportDefinitionId ? "Update Report" : "Save Report"))), selectedProvider && /*#__PURE__*/React__default.createElement(Box$1, {
5033
5595
  sx: {
5034
- mt: 4
5596
+ mt: 2,
5597
+ fontFamily: "system-ui",
5598
+ backgroundColor: "white",
5599
+ px: 3,
5600
+ py: 2,
5601
+ borderRadius: "8px"
5035
5602
  }
5036
5603
  }, /*#__PURE__*/React__default.createElement(Box$1, {
5037
5604
  sx: {
5038
5605
  borderBottom: 1,
5039
- borderColor: 'divider'
5606
+ borderColor: "rgba(70, 134, 127, 0.27)"
5040
5607
  }
5041
5608
  }, /*#__PURE__*/React__default.createElement(Tabs, {
5042
5609
  value: activeTab,
5043
5610
  onChange: handleTabChange,
5044
- "aria-label": "report builder tabs"
5611
+ "aria-label": "report builder tabs",
5612
+ sx: {
5613
+ "& .MuiTabs-indicator": {
5614
+ display: "flex",
5615
+ justifyContent: "center",
5616
+ backgroundColor: "rgb(70, 134, 128)"
5617
+ },
5618
+ "& .MuiTabs-indicatorSpan": {
5619
+ backgroundColor: "rgb(70, 134, 128)"
5620
+ }
5621
+ }
5045
5622
  }, /*#__PURE__*/React__default.createElement(Tab, {
5046
5623
  label: /*#__PURE__*/React__default.createElement(Badge, {
5047
5624
  badgeContent: report.dimensions.length,
5048
- color: "primary"
5625
+ sx: {
5626
+ "& .MuiBadge-badge": {
5627
+ backgroundColor: "rgb(70, 134, 128)",
5628
+ // green badge bg
5629
+ color: "#fff" // badge text color
5630
+ }
5631
+ }
5049
5632
  }, /*#__PURE__*/React__default.createElement("span", {
5050
5633
  style: {
5051
- marginRight: report.dimensions.length > 0 ? '12px' : '0'
5634
+ marginRight: report.dimensions.length > 0 ? "12px" : "0"
5052
5635
  }
5053
5636
  }, "Dimensions")),
5054
5637
  id: "report-tab-0",
5055
- "aria-controls": "report-tabpanel-0"
5638
+ "aria-controls": "report-tabpanel-0",
5639
+ sx: {
5640
+ height: "41px",
5641
+ fontFamily: "system-ui",
5642
+ borderRadius: "0.5rem",
5643
+ boxShadow: "none",
5644
+ textTransform: "none",
5645
+ color: "rgb(37, 37, 37)",
5646
+ // green text
5647
+ "&.Mui-selected": {
5648
+ color: "rgb(70, 134, 128)" // keep green when selected
5649
+ }
5650
+ }
5056
5651
  }), /*#__PURE__*/React__default.createElement(Tab, {
5057
5652
  label: /*#__PURE__*/React__default.createElement(Badge, {
5058
5653
  badgeContent: report.metrics.length,
5059
- color: "primary"
5654
+ sx: {
5655
+ "& .MuiBadge-badge": {
5656
+ backgroundColor: "rgb(70, 134, 128)",
5657
+ color: "#fff"
5658
+ }
5659
+ }
5060
5660
  }, /*#__PURE__*/React__default.createElement("span", {
5061
5661
  style: {
5062
- marginRight: report.metrics.length > 0 ? '12px' : '0'
5662
+ marginRight: report.metrics.length > 0 ? "12px" : "0"
5063
5663
  }
5064
5664
  }, "Metrics")),
5065
5665
  id: "report-tab-1",
5066
- "aria-controls": "report-tabpanel-1"
5666
+ "aria-controls": "report-tabpanel-1",
5667
+ sx: {
5668
+ height: "41px",
5669
+ fontFamily: "system-ui",
5670
+ borderRadius: "0.5rem",
5671
+ boxShadow: "none",
5672
+ textTransform: "none",
5673
+ color: "rgb(37, 37, 37)",
5674
+ "&.Mui-selected": {
5675
+ color: "rgb(70, 134, 128)"
5676
+ }
5677
+ }
5067
5678
  }), /*#__PURE__*/React__default.createElement(Tab, {
5068
5679
  label: /*#__PURE__*/React__default.createElement(Badge, {
5069
5680
  badgeContent: Object.keys(report.filters).length,
5070
- color: "secondary"
5681
+ sx: {
5682
+ "& .MuiBadge-badge": {
5683
+ backgroundColor: "rgb(70, 134, 128)",
5684
+ color: "#fff"
5685
+ }
5686
+ }
5071
5687
  }, /*#__PURE__*/React__default.createElement("span", {
5072
5688
  style: {
5073
- marginRight: Object.keys(report.filters).length > 0 ? '12px' : '0'
5689
+ marginRight: Object.keys(report.filters).length > 0 ? "12px" : "0"
5074
5690
  }
5075
5691
  }, "Filters")),
5076
5692
  id: "report-tab-2",
5077
- "aria-controls": "report-tabpanel-2"
5693
+ "aria-controls": "report-tabpanel-2",
5694
+ sx: {
5695
+ height: "41px",
5696
+ fontFamily: "system-ui",
5697
+ borderRadius: "0.5rem",
5698
+ boxShadow: "none",
5699
+ textTransform: "none",
5700
+ color: "rgb(37, 37, 37)",
5701
+ "&.Mui-selected": {
5702
+ color: "rgb(70, 134, 128)"
5703
+ }
5704
+ }
5078
5705
  }), /*#__PURE__*/React__default.createElement(Tab, {
5079
5706
  label: reportData ? "Results" : "Results (Run report first)",
5080
5707
  id: "report-tab-3",
5081
5708
  "aria-controls": "report-tabpanel-3",
5082
- disabled: !reportData
5709
+ disabled: !reportData,
5710
+ sx: {
5711
+ height: "41px",
5712
+ fontFamily: "system-ui",
5713
+ borderRadius: "0.5rem",
5714
+ boxShadow: "none",
5715
+ textTransform: "none",
5716
+ color: "rgb(37, 37, 37)",
5717
+ "&.Mui-selected": {
5718
+ color: "rgb(70, 134, 128)"
5719
+ }
5720
+ }
5083
5721
  }))), /*#__PURE__*/React__default.createElement(TabPanel, {
5084
5722
  value: activeTab,
5085
5723
  index: 0
@@ -5213,7 +5851,53 @@ const ReportApp = ({
5213
5851
  return /*#__PURE__*/React__default.createElement(NotifyProvider, null, /*#__PURE__*/React__default.createElement(ReportingProvider, {
5214
5852
  defaultParameters: params,
5215
5853
  defaultApi: api
5216
- }, /*#__PURE__*/React__default.createElement(ReportDefinitionsManager, null)));
5854
+ }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
5855
+ theme: createTheme({
5856
+ palette: {
5857
+ primary: {
5858
+ main: "rgb(70, 134, 128)"
5859
+ }
5860
+ },
5861
+ components: {
5862
+ MuiButton: {
5863
+ styleOverrides: {
5864
+ root: {
5865
+ borderRadius: 8,
5866
+ textTransform: "none",
5867
+ boxShadow: "none",
5868
+ "&:hover": {
5869
+ boxShadow: "none"
5870
+ }
5871
+ }
5872
+ }
5873
+ },
5874
+ MuiTooltip: {
5875
+ styleOverrides: {
5876
+ tooltip: {
5877
+ fontSize: "0.875rem",
5878
+ backgroundColor: "rgba(97, 97, 97, 0.95)",
5879
+ maxWidth: 500
5880
+ },
5881
+ arrow: {
5882
+ color: "rgba(97, 97, 97, 0.95)"
5883
+ }
5884
+ },
5885
+ defaultProps: {
5886
+ arrow: true,
5887
+ enterDelay: 300,
5888
+ leaveDelay: 200
5889
+ }
5890
+ },
5891
+ MuiPopper: {
5892
+ defaultProps: {
5893
+ style: {
5894
+ zIndex: 1500
5895
+ }
5896
+ }
5897
+ }
5898
+ }
5899
+ })
5900
+ }, /*#__PURE__*/React__default.createElement(ReportDefinitionsManager, null))));
5217
5901
  };
5218
5902
 
5219
5903
  var index = {