@bygd/nc-report-ui 0.1.23 → 0.1.25

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 +1075 -444
  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
 
@@ -1209,11 +1238,37 @@ const ReportingProvider = ({
1209
1238
  defaultApi = {},
1210
1239
  children
1211
1240
  }) => {
1212
- const [parameters, setParameters] = useState(defaultParameters);
1241
+ // Ensure base_currency has a default value of 'EUR' if not provided
1242
+ const initialParameters = {
1243
+ base_currency: 'EUR',
1244
+ ...defaultParameters
1245
+ };
1246
+ const [parameters, setParameters] = useState(initialParameters);
1213
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]);
1214
1262
  const value = {
1215
1263
  parameters,
1216
- setParameters,
1264
+ setParameters: newParams => {
1265
+ // Ensure base_currency defaults to 'EUR' if not provided
1266
+ const paramsWithDefaults = {
1267
+ base_currency: 'EUR',
1268
+ ...newParams
1269
+ };
1270
+ setParameters(paramsWithDefaults);
1271
+ },
1217
1272
  api,
1218
1273
  setApi,
1219
1274
  // Convenience method to update both at once
@@ -1222,7 +1277,12 @@ const ReportingProvider = ({
1222
1277
  api: newApi
1223
1278
  }) => {
1224
1279
  if (newParams !== undefined) {
1225
- setParameters(newParams);
1280
+ // Ensure base_currency defaults to 'EUR' if not provided
1281
+ const paramsWithDefaults = {
1282
+ base_currency: 'EUR',
1283
+ ...newParams
1284
+ };
1285
+ setParameters(paramsWithDefaults);
1226
1286
  }
1227
1287
  if (newApi !== undefined) {
1228
1288
  setApi(newApi);
@@ -1575,8 +1635,8 @@ const ReportDefinitionsList = ({
1575
1635
  const data = await Api.getReportDefinitions();
1576
1636
  setReportDefinitions(data);
1577
1637
  } catch (err) {
1578
- console.error('Error loading report definitions:', err);
1579
- 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");
1580
1640
  setError(errorMessage);
1581
1641
  notify.error(errorMessage);
1582
1642
  } finally {
@@ -1608,8 +1668,8 @@ const ReportDefinitionsList = ({
1608
1668
  // Pass the cloned report data to the parent
1609
1669
  onCloneReport(clonedReport);
1610
1670
  } catch (error) {
1611
- console.error('Error cloning report:', error);
1612
- 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"));
1613
1673
  }
1614
1674
  };
1615
1675
  const handleDelete = (id, event) => {
@@ -1634,8 +1694,8 @@ const ReportDefinitionsList = ({
1634
1694
  // Reload the report definitions list
1635
1695
  loadReportDefinitions();
1636
1696
  } catch (error) {
1637
- console.error('Error deleting report:', error);
1638
- 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"));
1639
1699
  setDeleteDialogOpen(false);
1640
1700
  setReportToDelete(null);
1641
1701
  }
@@ -1645,25 +1705,25 @@ const ReportDefinitionsList = ({
1645
1705
  setReportToDelete(null);
1646
1706
  };
1647
1707
  const columns = [{
1648
- field: 'title',
1649
- headerName: 'Title',
1708
+ field: "title",
1709
+ headerName: "Title",
1650
1710
  flex: 1,
1651
1711
  minWidth: 200
1652
1712
  }, {
1653
- field: 'provider',
1654
- headerName: 'Provider',
1713
+ field: "provider",
1714
+ headerName: "Provider",
1655
1715
  flex: 1,
1656
1716
  minWidth: 200
1657
1717
  }, {
1658
- field: 'actions',
1659
- headerName: 'Actions',
1718
+ field: "actions",
1719
+ headerName: "Actions",
1660
1720
  width: 200,
1661
1721
  sortable: false,
1662
1722
  filterable: false,
1663
1723
  disableColumnMenu: true,
1664
1724
  renderCell: params => /*#__PURE__*/React__default.createElement(Box$1, {
1665
1725
  sx: {
1666
- display: 'flex',
1726
+ display: "flex",
1667
1727
  gap: 1
1668
1728
  }
1669
1729
  }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -1733,27 +1793,38 @@ const ReportDefinitionsList = ({
1733
1793
  }
1734
1794
  return /*#__PURE__*/React__default.createElement(Box$1, {
1735
1795
  sx: {
1736
- p: 3
1796
+ p: 3,
1797
+ display: "flex",
1798
+ flexDirection: "column",
1799
+ fontFamily: "system-ui"
1737
1800
  }
1738
1801
  }, /*#__PURE__*/React__default.createElement(Box$1, {
1739
1802
  sx: {
1740
- display: 'flex',
1741
- justifyContent: 'space-between',
1742
- alignItems: 'center',
1743
- mb: 3
1803
+ display: "flex",
1804
+ justifyContent: "flex-end",
1805
+ alignItems: "center",
1806
+ mb: 2,
1807
+ fontFamily: "system-ui"
1744
1808
  }
1745
- }, /*#__PURE__*/React__default.createElement(Typography$1, {
1746
- variant: "h4",
1747
- component: "h1"
1748
- }, "Report Definitions"), /*#__PURE__*/React__default.createElement(Button, {
1809
+ }, /*#__PURE__*/React__default.createElement(Button, {
1749
1810
  variant: "contained",
1750
- 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
+ },
1751
1819
  startIcon: /*#__PURE__*/React__default.createElement(AddIcon, null),
1752
1820
  onClick: onAddNew
1753
1821
  }, "Add New Report")), /*#__PURE__*/React__default.createElement(Box$1, {
1754
1822
  sx: {
1755
- height: 600,
1756
- width: '100%'
1823
+ flex: 1,
1824
+ width: "100%",
1825
+ borderRadius: "0.5rem",
1826
+ overflow: "hidden",
1827
+ fontFamily: "system-ui"
1757
1828
  }
1758
1829
  }, /*#__PURE__*/React__default.createElement(DataGrid, {
1759
1830
  rows: rows,
@@ -1763,21 +1834,36 @@ const ReportDefinitionsList = ({
1763
1834
  disableSelectionOnClick: true,
1764
1835
  onRowClick: handleRowClick,
1765
1836
  sx: {
1766
- '& .MuiDataGrid-row': {
1767
- cursor: 'pointer'
1837
+ height: "100%",
1838
+ borderRadius: "0.5rem",
1839
+ overflow: "hidden",
1840
+ fontFamily: "system-ui",
1841
+ "& .MuiDataGrid-columnHeaders": {
1842
+ backgroundColor: "#ffff"
1768
1843
  },
1769
- '& .MuiDataGrid-row:hover': {
1770
- backgroundColor: '#f5f5f5'
1844
+ "& .MuiDataGrid-columnHeaderTitle": {
1845
+ fontWeight: "600 !important",
1846
+ // bold
1847
+ fontSize: "0.875rem !important" // smaller (~14px)
1771
1848
  },
1772
- '& .MuiDataGrid-columnHeader': {
1773
- backgroundColor: '#f5f5f5',
1774
- 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"
1775
1861
  }
1776
1862
  }
1777
1863
  })), /*#__PURE__*/React__default.createElement(ConfirmDialog, {
1778
1864
  open: deleteDialogOpen,
1779
1865
  title: "Delete Report Definition",
1780
- 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.` : "",
1781
1867
  onConfirm: handleConfirmDelete,
1782
1868
  onCancel: handleCancelDelete,
1783
1869
  confirmText: "Delete",
@@ -1904,7 +1990,7 @@ const ProviderSelection = ({
1904
1990
  targetKey: selectedItem.targetKey // The actual provider this points to
1905
1991
  });
1906
1992
  setSelectionChain(newChain);
1907
- console.log('Selection chain:', newChain);
1993
+ console.log("Selection chain:", newChain);
1908
1994
 
1909
1995
  // Notify parent of selection change
1910
1996
  if (onSelectionChange) {
@@ -1935,15 +2021,15 @@ const ProviderSelection = ({
1935
2021
  dropdowns.push(/*#__PURE__*/React__default.createElement("div", {
1936
2022
  key: "level-0",
1937
2023
  style: {
1938
- marginRight: '16px'
2024
+ marginRight: "16px"
1939
2025
  }
1940
2026
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
1941
2027
  items: rootRelationItems,
1942
- value: selectionChain[0]?.providerKey || '',
2028
+ value: selectionChain[0]?.providerKey || "",
1943
2029
  label: `Related to ${rootProvider}`,
1944
2030
  onChange: e => handleSelectionChange(0, e),
1945
2031
  sx: {
1946
- width: '300px'
2032
+ width: "300px"
1947
2033
  }
1948
2034
  })));
1949
2035
  }
@@ -1959,15 +2045,15 @@ const ProviderSelection = ({
1959
2045
  dropdowns.push(/*#__PURE__*/React__default.createElement("div", {
1960
2046
  key: `level-${i + 1}`,
1961
2047
  style: {
1962
- marginRight: '16px'
2048
+ marginRight: "16px"
1963
2049
  }
1964
2050
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
1965
2051
  items: relationItems,
1966
- value: nextSelection?.providerKey || '',
2052
+ value: nextSelection?.providerKey || "",
1967
2053
  label: `Related to ${currentSelection.targetKey}`,
1968
2054
  onChange: e => handleSelectionChange(i + 1, e),
1969
2055
  sx: {
1970
- width: '300px'
2056
+ width: "300px"
1971
2057
  }
1972
2058
  })));
1973
2059
  }
@@ -1978,45 +2064,56 @@ const ProviderSelection = ({
1978
2064
  sx: {
1979
2065
  marginBottom: 2
1980
2066
  }
1981
- }, /*#__PURE__*/React__default.createElement(Typography$1, {
1982
- variant: "subtitle2",
2067
+ }, /*#__PURE__*/React__default.createElement(Box$1, {
1983
2068
  sx: {
1984
- marginBottom: 1,
1985
- color: 'text.secondary'
2069
+ display: "flex",
2070
+ alignItems: "center",
2071
+ gap: 1.5,
2072
+ flexWrap: "wrap"
1986
2073
  }
1987
- }, "Selected Path:"), /*#__PURE__*/React__default.createElement(Box$1, {
2074
+ }, /*#__PURE__*/React__default.createElement(Chip, {
2075
+ label: formatLabel(rootProvider),
2076
+ size: "medium",
2077
+ variant: "outlined",
1988
2078
  sx: {
1989
- display: 'flex',
1990
- alignItems: 'center',
1991
- gap: 1,
1992
- 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"
1993
2085
  }
1994
- }, /*#__PURE__*/React__default.createElement(Chip, {
1995
- label: rootProvider,
1996
- size: "small",
1997
- color: "primary",
1998
- variant: "outlined"
1999
2086
  }), selectionChain.map((selection, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
2000
2087
  key: index
2001
2088
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
2002
2089
  variant: "body2",
2003
2090
  sx: {
2004
- color: 'text.secondary'
2091
+ color: "#9e9e9e",
2092
+ fontWeight: "bold"
2005
2093
  }
2006
2094
  }, "\u2192"), /*#__PURE__*/React__default.createElement(Chip, {
2007
- label: selection.targetKey,
2008
- size: "small",
2009
- color: "primary",
2095
+ label: formatLabel(selection.targetKey),
2096
+ size: "medium",
2010
2097
  onDelete: () => handleRemoveFromChain(index),
2011
2098
  sx: {
2012
- 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
+ }
2013
2110
  }
2014
2111
  }))))), /*#__PURE__*/React__default.createElement("div", {
2015
2112
  style: {
2016
- display: 'flex',
2017
- flexWrap: 'wrap',
2018
- alignItems: 'flex-start',
2019
- gap: '8px'
2113
+ display: "flex",
2114
+ flexWrap: "wrap",
2115
+ alignItems: "flex-start",
2116
+ gap: "16px" // Increased gap for better spacing
2020
2117
  }
2021
2118
  }, renderSelectionChain()));
2022
2119
  };
@@ -2040,7 +2137,7 @@ const SortableChip$1 = ({
2040
2137
  onResetTitle
2041
2138
  }) => {
2042
2139
  const [isEditing, setIsEditing] = useState(false);
2043
- const [editValue, setEditValue] = useState('');
2140
+ const [editValue, setEditValue] = useState("");
2044
2141
  const inputRef = useRef(null);
2045
2142
  const containerRef = useRef(null);
2046
2143
  const {
@@ -2057,9 +2154,9 @@ const SortableChip$1 = ({
2057
2154
  transform: CSS.Transform.toString(transform),
2058
2155
  transition,
2059
2156
  opacity: isDragging ? 0.5 : 1,
2060
- display: 'flex',
2061
- alignItems: 'center',
2062
- width: '100%'
2157
+ display: "flex",
2158
+ alignItems: "center",
2159
+ width: "100%"
2063
2160
  };
2064
2161
 
2065
2162
  // Focus input when entering edit mode
@@ -2078,9 +2175,9 @@ const SortableChip$1 = ({
2078
2175
  }
2079
2176
  };
2080
2177
  if (isEditing) {
2081
- document.addEventListener('mousedown', handleClickOutside);
2178
+ document.addEventListener("mousedown", handleClickOutside);
2082
2179
  return () => {
2083
- document.removeEventListener('mousedown', handleClickOutside);
2180
+ document.removeEventListener("mousedown", handleClickOutside);
2084
2181
  };
2085
2182
  }
2086
2183
  }, [isEditing]);
@@ -2088,9 +2185,9 @@ const SortableChip$1 = ({
2088
2185
  // Cycle through sort states: null -> 'asc' -> 'desc' -> null
2089
2186
  const handleSortToggle = () => {
2090
2187
  if (sortOrder === null) {
2091
- onSortOrderChange('asc');
2092
- } else if (sortOrder === 'asc') {
2093
- onSortOrderChange('desc');
2188
+ onSortOrderChange("asc");
2189
+ } else if (sortOrder === "asc") {
2190
+ onSortOrderChange("desc");
2094
2191
  } else {
2095
2192
  onSortOrderChange(null);
2096
2193
  }
@@ -2098,11 +2195,11 @@ const SortableChip$1 = ({
2098
2195
 
2099
2196
  // Determine which icon to show
2100
2197
  const getSortIcon = () => {
2101
- if (sortOrder === 'asc') {
2198
+ if (sortOrder === "asc") {
2102
2199
  return /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2103
2200
  fontSize: "small"
2104
2201
  });
2105
- } else if (sortOrder === 'desc') {
2202
+ } else if (sortOrder === "desc") {
2106
2203
  return /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2107
2204
  fontSize: "small"
2108
2205
  });
@@ -2121,7 +2218,7 @@ const SortableChip$1 = ({
2121
2218
  };
2122
2219
  const handleSave = () => {
2123
2220
  const trimmedValue = editValue.trim();
2124
- if (trimmedValue === '') {
2221
+ if (trimmedValue === "") {
2125
2222
  // Empty string validation - treat as cancel
2126
2223
  handleCancel();
2127
2224
  return;
@@ -2131,17 +2228,17 @@ const SortableChip$1 = ({
2131
2228
  };
2132
2229
  const handleCancel = () => {
2133
2230
  setIsEditing(false);
2134
- setEditValue('');
2231
+ setEditValue("");
2135
2232
  };
2136
2233
  const handleReset = () => {
2137
2234
  onResetTitle(fullPath);
2138
2235
  setIsEditing(false);
2139
- setEditValue('');
2236
+ setEditValue("");
2140
2237
  };
2141
2238
  const handleKeyDown = e => {
2142
- if (e.key === 'Enter') {
2239
+ if (e.key === "Enter") {
2143
2240
  handleSave();
2144
- } else if (e.key === 'Escape') {
2241
+ } else if (e.key === "Escape") {
2145
2242
  handleCancel();
2146
2243
  }
2147
2244
  };
@@ -2153,38 +2250,56 @@ const SortableChip$1 = ({
2153
2250
  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
2154
2251
  ref: containerRef,
2155
2252
  sx: {
2156
- display: 'flex',
2157
- alignItems: 'center',
2158
- width: '100%',
2159
- 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
+ }
2160
2266
  }
2161
2267
  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
2162
2268
  sx: {
2163
- display: 'flex',
2164
- alignItems: 'center',
2165
- cursor: 'grab',
2166
- '&:active': {
2167
- cursor: 'grabbing'
2269
+ display: "flex",
2270
+ alignItems: "center",
2271
+ cursor: "grab",
2272
+ "&:active": {
2273
+ cursor: "grabbing"
2168
2274
  }
2169
2275
  }
2170
2276
  }), /*#__PURE__*/React__default.createElement(DragIndicatorIcon, {
2171
2277
  sx: {
2172
- cursor: 'grab'
2278
+ cursor: "grab",
2279
+ color: "rgba(110, 110, 110, 0.62)"
2173
2280
  }
2174
- })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
2175
- title: fullLabel,
2176
- arrow: true,
2177
- placement: "top"
2178
- }, /*#__PURE__*/React__default.createElement(Chip, {
2179
- label: displayLabel,
2180
- onDelete: onDelete,
2181
- color: "primary",
2182
- variant: "outlined",
2281
+ })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
2183
2282
  sx: {
2184
- fontWeight: hasCustomTitle ? 'bold' : 'normal',
2185
- fontStyle: hasCustomTitle ? 'italic' : 'normal'
2283
+ flex: 1,
2284
+ minWidth: 0
2186
2285
  }
2187
- })), /*#__PURE__*/React__default.createElement(Tooltip, {
2286
+ }, /*#__PURE__*/React__default.createElement(Typography$1, {
2287
+ variant: "h6",
2288
+ sx: {
2289
+ fontWeight: hasCustomTitle ? 600 : 500,
2290
+ fontStyle: hasCustomTitle ? "italic" : "normal",
2291
+ color: "#1a1a1a",
2292
+ fontSize: "14px"
2293
+ }
2294
+ }, displayLabel)), /*#__PURE__*/React__default.createElement(Box$1, {
2295
+ className: "hover-icons",
2296
+ sx: {
2297
+ display: "flex",
2298
+ gap: 0.5,
2299
+ opacity: 0,
2300
+ transition: "opacity 0.2s"
2301
+ }
2302
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
2188
2303
  title: "Edit title",
2189
2304
  arrow: true,
2190
2305
  placement: "top"
@@ -2194,16 +2309,59 @@ const SortableChip$1 = ({
2194
2309
  "aria-label": "edit title"
2195
2310
  }, /*#__PURE__*/React__default.createElement(EditIcon, {
2196
2311
  fontSize: "small"
2197
- })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
2312
+ }))), /*#__PURE__*/React__default.createElement(Tooltip, {
2313
+ title: sortOrder === null ? "No sort" : sortOrder === "asc" ? "Ascending" : "Descending",
2314
+ arrow: true,
2315
+ placement: "top"
2316
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
2317
+ size: "small",
2318
+ onClick: handleSortToggle,
2319
+ "aria-label": "toggle sort order",
2320
+ color: sortOrder ? "primary" : "default"
2321
+ }, getSortIcon())), /*#__PURE__*/React__default.createElement(IconButton, {
2322
+ size: "small",
2323
+ onClick: onMoveUp,
2324
+ disabled: isFirst,
2325
+ "aria-label": "move up"
2326
+ }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2327
+ fontSize: "small"
2328
+ })), /*#__PURE__*/React__default.createElement(IconButton, {
2329
+ size: "small",
2330
+ onClick: onMoveDown,
2331
+ disabled: isLast,
2332
+ "aria-label": "move down"
2333
+ }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2334
+ fontSize: "small"
2335
+ })), /*#__PURE__*/React__default.createElement(Tooltip, {
2336
+ title: "Delete",
2337
+ arrow: true,
2338
+ placement: "top"
2339
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
2340
+ size: "small",
2341
+ onClick: onDelete,
2342
+ "aria-label": "delete",
2343
+ sx: {
2344
+ color: "#ef5350"
2345
+ }
2346
+ }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
2347
+ fontSize: "small"
2348
+ }))))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
2198
2349
  inputRef: inputRef,
2199
2350
  value: editValue,
2200
2351
  onChange: e => setEditValue(e.target.value),
2201
2352
  onKeyDown: handleKeyDown,
2202
2353
  size: "small",
2203
2354
  sx: {
2204
- width: '200px'
2355
+ flex: 1
2205
2356
  }
2206
- }), /*#__PURE__*/React__default.createElement(Tooltip, {
2357
+ }), /*#__PURE__*/React__default.createElement(Box$1, {
2358
+ className: "hover-icons",
2359
+ sx: {
2360
+ display: "flex",
2361
+ gap: 0.5,
2362
+ opacity: 1
2363
+ }
2364
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
2207
2365
  title: "Save",
2208
2366
  arrow: true,
2209
2367
  placement: "top"
@@ -2235,39 +2393,7 @@ const SortableChip$1 = ({
2235
2393
  "aria-label": "reset title"
2236
2394
  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
2237
2395
  fontSize: "small"
2238
- })))), !isEditing && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
2239
- title: sortOrder === null ? 'No sort' : sortOrder === 'asc' ? 'Ascending' : 'Descending',
2240
- arrow: true,
2241
- placement: "top"
2242
- }, /*#__PURE__*/React__default.createElement(IconButton, {
2243
- size: "small",
2244
- onClick: handleSortToggle,
2245
- "aria-label": "toggle sort order",
2246
- color: sortOrder ? 'primary' : 'default'
2247
- }, getSortIcon())), /*#__PURE__*/React__default.createElement(Box$1, {
2248
- sx: {
2249
- flex: 1
2250
- }
2251
- }), /*#__PURE__*/React__default.createElement(Box$1, {
2252
- sx: {
2253
- display: 'flex',
2254
- gap: 0.5
2255
- }
2256
- }, /*#__PURE__*/React__default.createElement(IconButton, {
2257
- size: "small",
2258
- onClick: onMoveUp,
2259
- disabled: isFirst,
2260
- "aria-label": "move up"
2261
- }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2262
- fontSize: "small"
2263
- })), /*#__PURE__*/React__default.createElement(IconButton, {
2264
- size: "small",
2265
- onClick: onMoveDown,
2266
- disabled: isLast,
2267
- "aria-label": "move down"
2268
- }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2269
- fontSize: "small"
2270
- }))))));
2396
+ })))))));
2271
2397
  };
2272
2398
  const Dimensions = ({
2273
2399
  providersData,
@@ -2284,7 +2410,7 @@ const Dimensions = ({
2284
2410
  }) => {
2285
2411
  const [isAdding, setIsAdding] = useState(false);
2286
2412
  const [dimensionSelectionChain, setDimensionSelectionChain] = useState([]);
2287
- const [selectedDimension, setSelectedDimension] = useState('');
2413
+ const [selectedDimension, setSelectedDimension] = useState("");
2288
2414
 
2289
2415
  // Setup drag and drop sensors
2290
2416
  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
@@ -2375,7 +2501,7 @@ const Dimensions = ({
2375
2501
  const dimension = dimensionsForAlias[dimKey];
2376
2502
 
2377
2503
  // Construct the fullPath for this dimension
2378
- const fullPath = `${aliasPath.join('_')}.${dimKey}`;
2504
+ const fullPath = `${aliasPath.join("_")}.${dimKey}`;
2379
2505
 
2380
2506
  // Check if this dimension is already selected
2381
2507
  const isAlreadySelected = selectedFullPaths.has(fullPath);
@@ -2395,12 +2521,12 @@ const Dimensions = ({
2395
2521
  const handleAddClick = () => {
2396
2522
  setIsAdding(true);
2397
2523
  setDimensionSelectionChain([]);
2398
- setSelectedDimension('');
2524
+ setSelectedDimension("");
2399
2525
  };
2400
2526
  const handleCancel = () => {
2401
2527
  setIsAdding(false);
2402
2528
  setDimensionSelectionChain([]);
2403
- setSelectedDimension('');
2529
+ setSelectedDimension("");
2404
2530
  };
2405
2531
  const handleSave = () => {
2406
2532
  if (!selectedDimension) return;
@@ -2435,7 +2561,7 @@ const Dimensions = ({
2435
2561
  relations.forEach(rel => {
2436
2562
  aliasPath.push(rel.alias);
2437
2563
  });
2438
- const fullPath = `${aliasPath.join('_')}.${selectedItem.dimensionKey}`;
2564
+ const fullPath = `${aliasPath.join("_")}.${selectedItem.dimensionKey}`;
2439
2565
  const dimensionData = {
2440
2566
  // Complete dimension object from the final provider
2441
2567
  dimension: selectedItem.dimension,
@@ -2492,7 +2618,7 @@ const Dimensions = ({
2492
2618
 
2493
2619
  // Create dimension data for each available dimension
2494
2620
  availableItems.forEach(item => {
2495
- const fullPath = `${aliasPath.join('_')}.${item.dimensionKey}`;
2621
+ const fullPath = `${aliasPath.join("_")}.${item.dimensionKey}`;
2496
2622
  const dimensionData = {
2497
2623
  // Complete dimension object from the final provider
2498
2624
  dimension: item.dimension,
@@ -2516,53 +2642,74 @@ const Dimensions = ({
2516
2642
  if (dim.relationNames && dim.relationNames.length > 0) {
2517
2643
  pathParts.push(...dim.relationNames);
2518
2644
  }
2519
- return pathParts.join(' → ');
2645
+ return pathParts.join(" → ");
2520
2646
  };
2521
2647
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
2522
2648
  sx: {
2523
- display: 'flex',
2524
- alignItems: 'center',
2525
- gap: 2,
2526
- marginBottom: 2
2649
+ display: "flex",
2650
+ justifyContent: "flex-start",
2651
+ mb: 2
2527
2652
  }
2528
- }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
2653
+ }, !isAdding && /*#__PURE__*/React__default.createElement(Button, {
2529
2654
  variant: "contained",
2530
- onClick: handleAddClick
2531
- }, "Add Dimension") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
2532
- variant: "outlined",
2533
- onClick: handleCancel
2534
- }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
2535
- variant: "contained",
2536
- onClick: handleSave,
2537
- disabled: !selectedDimension
2538
- }, "Save Dimension"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
2655
+ startIcon: /*#__PURE__*/React__default.createElement(GridAddIcon, null),
2656
+ onClick: handleAddClick,
2657
+ sx: {
2658
+ height: "40px",
2659
+ fontFamily: "system-ui",
2660
+ fontSize: "14px",
2661
+ fontWeight: 500,
2662
+ borderRadius: "8px",
2663
+ textTransform: "none",
2664
+ backgroundColor: "rgb(70, 134, 128)",
2665
+ boxShadow: "none",
2666
+ "&:hover": {
2667
+ backgroundColor: "rgb(50, 114, 108)",
2668
+ boxShadow: "none"
2669
+ }
2670
+ }
2671
+ }, "Add Dimension")), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
2672
+ elevation: 0,
2539
2673
  sx: {
2540
- padding: 3,
2541
- marginBottom: 3
2674
+ p: 3,
2675
+ mb: 3,
2676
+ border: "1px solid #e0e0e0",
2677
+ borderRadius: "12px",
2678
+ backgroundColor: "white",
2679
+ boxShadow: "0px 2px 4px rgba(0,0,0,0.02)",
2680
+ fontFamily: "system-ui"
2542
2681
  }
2543
2682
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
2544
- variant: "h6",
2545
2683
  sx: {
2546
- marginBottom: 2
2684
+ fontSize: "14px",
2685
+ fontWeight: 600,
2686
+ mb: 1.5,
2687
+ color: "rgb(37, 37, 37)"
2688
+ }
2689
+ }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
2690
+ sx: {
2691
+ mb: 3
2547
2692
  }
2548
- }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
2693
+ }, /*#__PURE__*/React__default.createElement(ProviderSelection, {
2549
2694
  providersData: providersData,
2550
2695
  rootProvider: rootProvider,
2551
2696
  onSelectionChange: setDimensionSelectionChain,
2552
2697
  existingDimensions: savedDimensions,
2553
2698
  existingMetrics: existingMetrics,
2554
2699
  existingFilters: existingFilters
2555
- }), /*#__PURE__*/React__default.createElement(Typography$1, {
2556
- variant: "h6",
2700
+ })), /*#__PURE__*/React__default.createElement(Typography$1, {
2557
2701
  sx: {
2558
- marginTop: 3,
2559
- marginBottom: 2
2702
+ fontSize: "14px",
2703
+ fontWeight: 600,
2704
+ mb: 1.5,
2705
+ color: "rgb(37, 37, 37)"
2560
2706
  }
2561
2707
  }, "Select Dimension"), /*#__PURE__*/React__default.createElement(Box$1, {
2562
2708
  sx: {
2563
- display: 'flex',
2564
- alignItems: 'center',
2565
- gap: 1
2709
+ display: "flex",
2710
+ alignItems: "center",
2711
+ gap: 2,
2712
+ mb: 3
2566
2713
  }
2567
2714
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
2568
2715
  items: getDimensionItems(),
@@ -2570,27 +2717,91 @@ const Dimensions = ({
2570
2717
  label: "Choose Dimension",
2571
2718
  onChange: handleDimensionChange,
2572
2719
  sx: {
2573
- width: '400px'
2720
+ width: "400px",
2721
+ fontFamily: "system-ui"
2574
2722
  }
2575
2723
  }), /*#__PURE__*/React__default.createElement(Tooltip, {
2576
2724
  title: "Add all available dimensions",
2577
2725
  arrow: true,
2578
2726
  placement: "top"
2579
2727
  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton, {
2580
- color: "primary",
2581
2728
  onClick: handleAddAll,
2582
2729
  disabled: getDimensionItems().filter(item => !item.disabled).length === 0,
2583
- "aria-label": "add all dimensions"
2584
- }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null)))))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
2730
+ "aria-label": "add all dimensions",
2731
+ sx: {
2732
+ color: "rgb(70, 134, 128)",
2733
+ border: "1px solid #e0e0e0",
2734
+ borderRadius: "8px",
2735
+ padding: "8px",
2736
+ "&:hover": {
2737
+ backgroundColor: "#f5f5f5"
2738
+ },
2739
+ "&.Mui-disabled": {
2740
+ opacity: 0.5
2741
+ }
2742
+ }
2743
+ }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$1, {
2744
+ sx: {
2745
+ display: "flex",
2746
+ justifyContent: "flex-end",
2747
+ gap: 2,
2748
+ mt: 3
2749
+ }
2750
+ }, /*#__PURE__*/React__default.createElement(Button, {
2751
+ variant: "outlined",
2752
+ onClick: handleCancel,
2753
+ sx: {
2754
+ height: "40px",
2755
+ fontFamily: "system-ui",
2756
+ fontSize: "14px",
2757
+ fontWeight: 500,
2758
+ borderRadius: "8px",
2759
+ boxShadow: "none",
2760
+ borderColor: "#e0e0e0",
2761
+ color: "rgb(37, 37, 37)",
2762
+ textTransform: "none",
2763
+ "&:hover": {
2764
+ backgroundColor: "#f5f5f5",
2765
+ borderColor: "#d0d0d0"
2766
+ }
2767
+ }
2768
+ }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
2769
+ variant: "contained",
2770
+ onClick: handleSave,
2771
+ disabled: !selectedDimension,
2585
2772
  sx: {
2586
- marginTop: 3
2773
+ height: "40px",
2774
+ fontFamily: "system-ui",
2775
+ fontSize: "14px",
2776
+ fontWeight: 500,
2777
+ borderRadius: "8px",
2778
+ boxShadow: "none",
2779
+ textTransform: "none",
2780
+ backgroundColor: "rgb(70, 134, 128)",
2781
+ "&:hover": {
2782
+ backgroundColor: "rgb(50, 114, 108)",
2783
+ boxShadow: "none"
2784
+ }
2785
+ }
2786
+ }, "Save Dimension"))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
2787
+ sx: {
2788
+ marginTop: 0
2587
2789
  }
2588
2790
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
2589
2791
  variant: "h6",
2590
2792
  sx: {
2793
+ fontSize: "16px",
2794
+ fontWeight: 600,
2795
+ marginTop: 2,
2796
+ color: "rgb(37, 37, 37)"
2797
+ }
2798
+ }, "Saved Dimensions"), /*#__PURE__*/React__default.createElement(Typography$1, {
2799
+ sx: {
2800
+ fontSize: "13px",
2801
+ color: "#666",
2591
2802
  marginBottom: 2
2592
2803
  }
2593
- }, "Saved Dimensions (Drag to reorder or use arrows)"), /*#__PURE__*/React__default.createElement(DndContext, {
2804
+ }, "Drag to reorder or use arrows"), /*#__PURE__*/React__default.createElement(DndContext, {
2594
2805
  sensors: sensors,
2595
2806
  collisionDetection: closestCenter,
2596
2807
  onDragEnd: handleDragEnd
@@ -2599,8 +2810,8 @@ const Dimensions = ({
2599
2810
  strategy: verticalListSortingStrategy
2600
2811
  }, /*#__PURE__*/React__default.createElement(Box$1, {
2601
2812
  sx: {
2602
- display: 'flex',
2603
- flexDirection: 'column',
2813
+ display: "flex",
2814
+ flexDirection: "column",
2604
2815
  gap: 1
2605
2816
  }
2606
2817
  }, savedDimensions.map((dim, index) => /*#__PURE__*/React__default.createElement(SortableChip$1, {
@@ -2722,57 +2933,109 @@ const SortableChip = ({
2722
2933
  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
2723
2934
  ref: containerRef,
2724
2935
  sx: {
2725
- display: 'flex',
2726
- alignItems: 'center',
2727
- width: '100%',
2728
- gap: 1
2936
+ display: "flex",
2937
+ alignItems: "center",
2938
+ width: "100%",
2939
+ gap: 1,
2940
+ backgroundColor: "white",
2941
+ border: "1px solid #e0e0e0",
2942
+ borderRadius: 2,
2943
+ padding: 1,
2944
+ transition: "transform 0.2s ease, box-shadow 0.2s ease",
2945
+ // smoother drag
2946
+ "&:hover .hover-icons": {
2947
+ opacity: 1 // show icons on hover
2948
+ }
2729
2949
  }
2730
2950
  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
2731
2951
  sx: {
2732
- display: 'flex',
2733
- alignItems: 'center',
2734
- cursor: 'grab',
2735
- '&:active': {
2736
- cursor: 'grabbing'
2952
+ display: "flex",
2953
+ alignItems: "center",
2954
+ cursor: "grab",
2955
+ "&:active": {
2956
+ cursor: "grabbing"
2737
2957
  }
2738
2958
  }
2739
2959
  }), /*#__PURE__*/React__default.createElement(DragIndicatorIcon, {
2740
2960
  sx: {
2741
- cursor: 'grab'
2961
+ cursor: "grab",
2962
+ color: "rgba(110, 110, 110, 0.62)"
2742
2963
  }
2743
- })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
2744
- title: fullLabel,
2745
- arrow: true,
2746
- placement: "top"
2747
- }, /*#__PURE__*/React__default.createElement(Chip, {
2748
- label: displayLabel,
2749
- onDelete: onDelete,
2750
- color: "secondary",
2751
- variant: "outlined",
2964
+ })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
2752
2965
  sx: {
2753
- fontWeight: hasCustomTitle ? 'bold' : 'normal',
2754
- fontStyle: hasCustomTitle ? 'italic' : 'normal'
2966
+ flex: 1,
2967
+ minWidth: 0
2755
2968
  }
2969
+ }, /*#__PURE__*/React__default.createElement(Typography$1, {
2970
+ variant: "h6",
2971
+ sx: {
2972
+ fontWeight: hasCustomTitle ? 600 : 500,
2973
+ fontStyle: hasCustomTitle ? "italic" : "normal",
2974
+ color: "#1a1a1a",
2975
+ fontSize: "14px"
2976
+ }
2977
+ }, displayLabel)), /*#__PURE__*/React__default.createElement(Box$1, {
2978
+ className: "hover-icons",
2979
+ sx: {
2980
+ display: "flex",
2981
+ gap: 0.5,
2982
+ opacity: 0,
2983
+ transition: "opacity 0.2s"
2984
+ }
2985
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
2986
+ title: "Edit title",
2987
+ arrow: true,
2988
+ placement: "top"
2989
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
2990
+ size: "small",
2991
+ onClick: handleEditClick,
2992
+ "aria-label": "edit title"
2993
+ }, /*#__PURE__*/React__default.createElement(EditIcon, {
2994
+ fontSize: "small"
2995
+ }))), /*#__PURE__*/React__default.createElement(IconButton, {
2996
+ size: "small",
2997
+ onClick: onMoveUp,
2998
+ disabled: isFirst,
2999
+ "aria-label": "move up"
3000
+ }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
3001
+ fontSize: "small"
3002
+ })), /*#__PURE__*/React__default.createElement(IconButton, {
3003
+ size: "small",
3004
+ onClick: onMoveDown,
3005
+ disabled: isLast,
3006
+ "aria-label": "move down"
3007
+ }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
3008
+ fontSize: "small"
2756
3009
  })), /*#__PURE__*/React__default.createElement(Tooltip, {
2757
- title: "Edit title",
3010
+ title: "Delete",
2758
3011
  arrow: true,
2759
3012
  placement: "top"
2760
3013
  }, /*#__PURE__*/React__default.createElement(IconButton, {
2761
3014
  size: "small",
2762
- onClick: handleEditClick,
2763
- "aria-label": "edit title"
2764
- }, /*#__PURE__*/React__default.createElement(EditIcon, {
3015
+ onClick: onDelete,
3016
+ "aria-label": "delete",
3017
+ sx: {
3018
+ color: "#ef5350"
3019
+ }
3020
+ }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
2765
3021
  fontSize: "small"
2766
- })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
3022
+ }))))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
2767
3023
  inputRef: inputRef,
2768
3024
  value: editValue,
2769
3025
  onChange: e => setEditValue(e.target.value),
2770
3026
  onKeyDown: handleKeyDown,
2771
3027
  size: "small",
2772
3028
  sx: {
2773
- width: '200px'
3029
+ flex: 1
2774
3030
  }
2775
- }), /*#__PURE__*/React__default.createElement(Tooltip, {
3031
+ }), /*#__PURE__*/React__default.createElement(Box$1, {
3032
+ className: "hover-icons",
3033
+ sx: {
3034
+ display: "flex",
3035
+ gap: 0.5,
3036
+ opacity: 1
3037
+ }
3038
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
2776
3039
  title: "Save",
2777
3040
  arrow: true,
2778
3041
  placement: "top"
@@ -2804,30 +3067,7 @@ const SortableChip = ({
2804
3067
  "aria-label": "reset title"
2805
3068
  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
2806
3069
  fontSize: "small"
2807
- })))), !isEditing && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
2808
- sx: {
2809
- flex: 1
2810
- }
2811
- }), /*#__PURE__*/React__default.createElement(Box$1, {
2812
- sx: {
2813
- display: 'flex',
2814
- gap: 0.5
2815
- }
2816
- }, /*#__PURE__*/React__default.createElement(IconButton, {
2817
- size: "small",
2818
- onClick: onMoveUp,
2819
- disabled: isFirst,
2820
- "aria-label": "move up"
2821
- }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2822
- fontSize: "small"
2823
- })), /*#__PURE__*/React__default.createElement(IconButton, {
2824
- size: "small",
2825
- onClick: onMoveDown,
2826
- disabled: isLast,
2827
- "aria-label": "move down"
2828
- }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2829
- fontSize: "small"
2830
- }))))));
3070
+ })))))));
2831
3071
  };
2832
3072
  const Metrics = ({
2833
3073
  providersData,
@@ -3063,49 +3303,70 @@ const Metrics = ({
3063
3303
  };
3064
3304
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
3065
3305
  sx: {
3066
- display: 'flex',
3067
- alignItems: 'center',
3068
- gap: 2,
3069
- marginBottom: 2
3306
+ display: "flex",
3307
+ justifyContent: "flex-start",
3308
+ mb: 2
3070
3309
  }
3071
- }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
3310
+ }, !isAdding && /*#__PURE__*/React__default.createElement(Button, {
3072
3311
  variant: "contained",
3073
- onClick: handleAddClick
3074
- }, "Add Metric") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
3075
- variant: "outlined",
3076
- onClick: handleCancel
3077
- }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3078
- variant: "contained",
3079
- onClick: handleSave,
3080
- disabled: !selectedMetric
3081
- }, "Save Metric"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
3312
+ startIcon: /*#__PURE__*/React__default.createElement(GridAddIcon, null),
3313
+ onClick: handleAddClick,
3082
3314
  sx: {
3083
- padding: 3,
3084
- marginBottom: 3
3315
+ height: "40px",
3316
+ fontFamily: "system-ui",
3317
+ fontSize: "14px",
3318
+ fontWeight: 500,
3319
+ borderRadius: "8px",
3320
+ textTransform: "none",
3321
+ backgroundColor: "rgb(70, 134, 128)",
3322
+ boxShadow: "none",
3323
+ "&:hover": {
3324
+ backgroundColor: "rgb(50, 114, 108)",
3325
+ boxShadow: "none"
3326
+ }
3327
+ }
3328
+ }, "Add Metric")), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
3329
+ elevation: 0,
3330
+ sx: {
3331
+ p: 3,
3332
+ mb: 3,
3333
+ border: "1px solid #e0e0e0",
3334
+ borderRadius: "12px",
3335
+ backgroundColor: "white",
3336
+ boxShadow: "0px 2px 4px rgba(0,0,0,0.02)",
3337
+ fontFamily: "system-ui"
3085
3338
  }
3086
3339
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3087
- variant: "h6",
3088
3340
  sx: {
3089
- marginBottom: 2
3341
+ fontSize: "14px",
3342
+ fontWeight: 600,
3343
+ mb: 1.5,
3344
+ color: "rgb(37, 37, 37)"
3345
+ }
3346
+ }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
3347
+ sx: {
3348
+ mb: 3
3090
3349
  }
3091
- }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
3350
+ }, /*#__PURE__*/React__default.createElement(ProviderSelection, {
3092
3351
  providersData: providersData,
3093
3352
  rootProvider: rootProvider,
3094
3353
  onSelectionChange: setMetricSelectionChain,
3095
3354
  existingDimensions: existingDimensions,
3096
3355
  existingMetrics: savedMetrics,
3097
3356
  existingFilters: existingFilters
3098
- }), /*#__PURE__*/React__default.createElement(Typography$1, {
3099
- variant: "h6",
3357
+ })), /*#__PURE__*/React__default.createElement(Typography$1, {
3100
3358
  sx: {
3101
- marginTop: 3,
3102
- marginBottom: 2
3359
+ fontSize: "14px",
3360
+ fontWeight: 600,
3361
+ mb: 1.5,
3362
+ color: "rgb(37, 37, 37)"
3103
3363
  }
3104
3364
  }, "Select Metric"), /*#__PURE__*/React__default.createElement(Box$1, {
3105
3365
  sx: {
3106
3366
  display: 'flex',
3107
3367
  alignItems: 'center',
3108
- gap: 1
3368
+ gap: 2,
3369
+ mb: 3
3109
3370
  }
3110
3371
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
3111
3372
  items: getMetricItems(),
@@ -3113,27 +3374,85 @@ const Metrics = ({
3113
3374
  label: "Choose Metric",
3114
3375
  onChange: handleMetricChange,
3115
3376
  sx: {
3116
- width: '400px'
3377
+ width: '400px',
3378
+ fontFamily: "system-ui"
3117
3379
  }
3118
3380
  }), /*#__PURE__*/React__default.createElement(Tooltip, {
3119
3381
  title: "Add all available metrics",
3120
3382
  arrow: true,
3121
3383
  placement: "top"
3122
3384
  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton, {
3123
- color: "primary",
3124
3385
  onClick: handleAddAll,
3125
3386
  disabled: getMetricItems().filter(item => !item.disabled).length === 0,
3126
- "aria-label": "add all metrics"
3127
- }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null)))))), savedMetrics.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
3387
+ "aria-label": "add all metrics",
3388
+ sx: {
3389
+ color: "rgb(70, 134, 128)",
3390
+ border: "1px solid #e0e0e0",
3391
+ borderRadius: "8px",
3392
+ padding: "8px",
3393
+ "&:hover": {
3394
+ backgroundColor: "#f5f5f5"
3395
+ },
3396
+ "&.Mui-disabled": {
3397
+ opacity: 0.5
3398
+ }
3399
+ }
3400
+ }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null))))), /*#__PURE__*/React__default.createElement(Box$1, {
3401
+ sx: {
3402
+ display: "flex",
3403
+ justifyContent: "flex-end",
3404
+ gap: 2,
3405
+ mt: 3
3406
+ }
3407
+ }, /*#__PURE__*/React__default.createElement(Button, {
3408
+ variant: "outlined",
3409
+ onClick: handleCancel,
3410
+ sx: {
3411
+ height: "40px",
3412
+ fontFamily: "system-ui",
3413
+ fontSize: "14px",
3414
+ fontWeight: 500,
3415
+ borderRadius: "8px",
3416
+ boxShadow: "none",
3417
+ borderColor: "#e0e0e0",
3418
+ color: "rgb(37, 37, 37)",
3419
+ textTransform: "none",
3420
+ "&:hover": {
3421
+ backgroundColor: "#f5f5f5",
3422
+ borderColor: "#d0d0d0"
3423
+ }
3424
+ }
3425
+ }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3426
+ variant: "contained",
3427
+ onClick: handleSave,
3428
+ disabled: !selectedMetric,
3429
+ sx: {
3430
+ height: "40px",
3431
+ fontFamily: "system-ui",
3432
+ fontSize: "14px",
3433
+ fontWeight: 500,
3434
+ borderRadius: "8px",
3435
+ boxShadow: "none",
3436
+ textTransform: "none",
3437
+ backgroundColor: "rgb(70, 134, 128)",
3438
+ "&:hover": {
3439
+ backgroundColor: "rgb(50, 114, 108)",
3440
+ boxShadow: "none"
3441
+ }
3442
+ }
3443
+ }, "Save Metric"))), savedMetrics.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
3128
3444
  sx: {
3129
- marginTop: 3
3445
+ marginTop: 0
3130
3446
  }
3131
3447
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3132
3448
  variant: "h6",
3133
3449
  sx: {
3134
- marginBottom: 2
3450
+ fontSize: "16px",
3451
+ fontWeight: 600,
3452
+ marginBottom: 1,
3453
+ color: "rgb(37, 37, 37)"
3135
3454
  }
3136
- }, "Saved Metrics (Drag to reorder or use arrows)"), /*#__PURE__*/React__default.createElement(DndContext, {
3455
+ }, "Saved Metrics"), /*#__PURE__*/React__default.createElement(DndContext, {
3137
3456
  sensors: sensors,
3138
3457
  collisionDetection: closestCenter,
3139
3458
  onDragEnd: handleDragEnd
@@ -3592,68 +3911,88 @@ const Filters = ({
3592
3911
  const filterEntries = Object.entries(savedFilters);
3593
3912
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
3594
3913
  sx: {
3595
- display: 'flex',
3596
- alignItems: 'center',
3597
- gap: 2,
3598
- marginBottom: 2
3914
+ display: "flex",
3915
+ justifyContent: "flex-start",
3916
+ mb: 2
3599
3917
  }
3600
- }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
3601
- variant: "contained",
3602
- onClick: handleAddClick
3603
- }, "Add Filter") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
3604
- variant: "outlined",
3605
- onClick: handleCancel
3606
- }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3918
+ }, !isAdding && /*#__PURE__*/React__default.createElement(Button, {
3607
3919
  variant: "contained",
3608
- onClick: handleSave,
3609
- disabled: (() => {
3610
- if (!selectedDimension) return true;
3611
- const dimensionItems = getDimensionItems();
3612
- const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
3613
- if (!selectedItem) return true;
3614
- const isDate = isDateDimension(selectedItem.dimension);
3615
- return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
3616
- })()
3617
- }, "Save Filter"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
3920
+ startIcon: /*#__PURE__*/React__default.createElement(GridAddIcon, null),
3921
+ onClick: handleAddClick,
3618
3922
  sx: {
3619
- padding: 3,
3620
- marginBottom: 3
3923
+ height: "40px",
3924
+ fontFamily: "system-ui",
3925
+ fontSize: "14px",
3926
+ fontWeight: 500,
3927
+ borderRadius: "8px",
3928
+ textTransform: "none",
3929
+ backgroundColor: "rgb(70, 134, 128)",
3930
+ boxShadow: "none",
3931
+ "&:hover": {
3932
+ backgroundColor: "rgb(50, 114, 108)",
3933
+ boxShadow: "none"
3934
+ }
3935
+ }
3936
+ }, "Add Filter")), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
3937
+ elevation: 0,
3938
+ sx: {
3939
+ p: 3,
3940
+ mb: 3,
3941
+ border: "1px solid #e0e0e0",
3942
+ borderRadius: "12px",
3943
+ backgroundColor: "white",
3944
+ boxShadow: "0px 2px 4px rgba(0,0,0,0.02)",
3945
+ fontFamily: "system-ui"
3621
3946
  }
3622
3947
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3623
- variant: "h6",
3624
3948
  sx: {
3625
- marginBottom: 2
3949
+ fontSize: "14px",
3950
+ fontWeight: 600,
3951
+ mb: 1.5,
3952
+ color: "rgb(37, 37, 37)"
3953
+ }
3954
+ }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(Box$1, {
3955
+ sx: {
3956
+ mb: 3
3626
3957
  }
3627
- }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
3958
+ }, /*#__PURE__*/React__default.createElement(ProviderSelection, {
3628
3959
  providersData: providersData,
3629
3960
  rootProvider: rootProvider,
3630
3961
  onSelectionChange: setDimensionSelectionChain,
3631
3962
  existingDimensions: existingDimensions,
3632
3963
  existingMetrics: existingMetrics,
3633
3964
  existingFilters: savedFilters
3634
- }), /*#__PURE__*/React__default.createElement(Typography$1, {
3635
- variant: "h6",
3965
+ })), /*#__PURE__*/React__default.createElement(Typography$1, {
3636
3966
  sx: {
3637
- marginTop: 3,
3638
- marginBottom: 2
3967
+ fontSize: "14px",
3968
+ fontWeight: 600,
3969
+ mb: 1.5,
3970
+ color: "rgb(37, 37, 37)"
3971
+ }
3972
+ }, "Select Dimension for Filter"), /*#__PURE__*/React__default.createElement(Box$1, {
3973
+ sx: {
3974
+ mb: 3
3639
3975
  }
3640
- }, "Select Dimension for Filter"), /*#__PURE__*/React__default.createElement(SingleSelect, {
3976
+ }, /*#__PURE__*/React__default.createElement(SingleSelect, {
3641
3977
  items: getDimensionItems(),
3642
3978
  value: selectedDimension,
3643
3979
  label: "Choose Dimension",
3644
3980
  onChange: handleDimensionChange,
3645
3981
  sx: {
3646
- width: '400px'
3982
+ width: '400px',
3983
+ fontFamily: "system-ui"
3647
3984
  }
3648
- }), selectedDimension && (() => {
3985
+ })), selectedDimension && (() => {
3649
3986
  const dimensionItems = getDimensionItems();
3650
3987
  const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
3651
3988
  const isDate = selectedItem && isDateDimension(selectedItem.dimension);
3652
3989
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
3653
- variant: "h6",
3654
3990
  sx: {
3655
- marginTop: 3,
3656
- marginBottom: 2
3991
+ fontSize: "14px",
3992
+ fontWeight: 600,
3993
+ mb: 1.5,
3994
+ mt: 3,
3995
+ color: "rgb(37, 37, 37)"
3657
3996
  }
3658
3997
  }, isDate ? 'Select Date Range' : 'Select Filter Values'), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
3659
3998
  dateAdapter: AdapterDayjs
@@ -3702,20 +4041,73 @@ const Filters = ({
3702
4041
  loading: loadingFilterValues,
3703
4042
  helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value'
3704
4043
  })));
3705
- })()), filterEntries.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
4044
+ })(), /*#__PURE__*/React__default.createElement(Box$1, {
4045
+ sx: {
4046
+ display: "flex",
4047
+ justifyContent: "flex-end",
4048
+ gap: 2,
4049
+ mt: 3
4050
+ }
4051
+ }, /*#__PURE__*/React__default.createElement(Button, {
4052
+ variant: "outlined",
4053
+ onClick: handleCancel,
4054
+ sx: {
4055
+ height: "40px",
4056
+ fontFamily: "system-ui",
4057
+ fontSize: "14px",
4058
+ fontWeight: 500,
4059
+ borderRadius: "8px",
4060
+ boxShadow: "none",
4061
+ borderColor: "#e0e0e0",
4062
+ color: "rgb(37, 37, 37)",
4063
+ textTransform: "none",
4064
+ "&:hover": {
4065
+ backgroundColor: "#f5f5f5",
4066
+ borderColor: "#d0d0d0"
4067
+ }
4068
+ }
4069
+ }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
4070
+ variant: "contained",
4071
+ onClick: handleSave,
4072
+ disabled: (() => {
4073
+ if (!selectedDimension) return true;
4074
+ const dimensionItems = getDimensionItems();
4075
+ const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
4076
+ if (!selectedItem) return true;
4077
+ const isDate = isDateDimension(selectedItem.dimension);
4078
+ return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
4079
+ })(),
4080
+ sx: {
4081
+ height: "40px",
4082
+ fontFamily: "system-ui",
4083
+ fontSize: "14px",
4084
+ fontWeight: 500,
4085
+ borderRadius: "8px",
4086
+ boxShadow: "none",
4087
+ textTransform: "none",
4088
+ backgroundColor: "rgb(70, 134, 128)",
4089
+ "&:hover": {
4090
+ backgroundColor: "rgb(50, 114, 108)",
4091
+ boxShadow: "none"
4092
+ }
4093
+ }
4094
+ }, "Save Filter"))), filterEntries.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
3706
4095
  sx: {
3707
- marginTop: 3
4096
+ marginTop: 0
3708
4097
  }
3709
4098
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3710
4099
  variant: "h6",
3711
4100
  sx: {
3712
- marginBottom: 2
4101
+ fontSize: "16px",
4102
+ fontWeight: 600,
4103
+ marginBottom: 1,
4104
+ color: "rgb(37, 37, 37)"
3713
4105
  }
3714
4106
  }, "Saved Filters"), /*#__PURE__*/React__default.createElement(Box$1, {
3715
4107
  sx: {
3716
4108
  display: 'flex',
3717
4109
  flexDirection: 'column',
3718
- gap: 2
4110
+ gap: 1
3719
4111
  }
3720
4112
  }, filterEntries.map(([fullPath, filter]) => {
3721
4113
  const isDate = isDateDimension(filter.dimension);
@@ -3723,7 +4115,7 @@ const Filters = ({
3723
4115
  const isEditingTitle = editingTitlePath === fullPath;
3724
4116
 
3725
4117
  // Format display values based on filter type
3726
- let valueCount, valuesList, badgeContent;
4118
+ let valueCount, valuesList;
3727
4119
  if (isDate && filter.values && typeof filter.values === 'object' && !Array.isArray(filter.values)) {
3728
4120
  // Date range filter - handle cases where only one date is provided
3729
4121
  if (filter.values.gte && filter.values.lte) {
@@ -3735,47 +4127,77 @@ const Filters = ({
3735
4127
  } else {
3736
4128
  valuesList = 'No dates';
3737
4129
  }
3738
- badgeContent = '📅'; // Calendar emoji for date filters
3739
4130
  } else {
3740
4131
  // Regular filter
3741
4132
  valueCount = filter.values?.length || 0;
3742
4133
  valuesList = filter.values?.join(', ') || 'No values';
3743
- badgeContent = valueCount;
3744
4134
  }
3745
4135
  const displayLabel = titleOverrides[fullPath] || filter.dimensionTitle;
3746
4136
  const hasCustomTitle = !!titleOverrides[fullPath];
3747
4137
  return /*#__PURE__*/React__default.createElement(Box$1, {
3748
4138
  key: fullPath
4139
+ }, /*#__PURE__*/React__default.createElement(Box$1, {
4140
+ sx: {
4141
+ display: "flex",
4142
+ alignItems: "center",
4143
+ width: "100%",
4144
+ gap: 1,
4145
+ backgroundColor: "white",
4146
+ border: "1px solid #e0e0e0",
4147
+ borderRadius: 2,
4148
+ padding: 2,
4149
+ transition: "box-shadow 0.2s ease",
4150
+ "&:hover .hover-icons": {
4151
+ opacity: 1
4152
+ }
4153
+ }
4154
+ }, !isEditingTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
4155
+ sx: {
4156
+ flex: 1,
4157
+ minWidth: 0
4158
+ }
3749
4159
  }, /*#__PURE__*/React__default.createElement(Box$1, {
3750
4160
  sx: {
3751
4161
  display: 'flex',
3752
4162
  alignItems: 'center',
3753
- gap: 1,
3754
- marginBottom: isEditing ? 2 : 0
4163
+ gap: 1
4164
+ }
4165
+ }, /*#__PURE__*/React__default.createElement(Typography$1, {
4166
+ variant: "h6",
4167
+ sx: {
4168
+ fontWeight: hasCustomTitle ? 600 : 500,
4169
+ fontStyle: hasCustomTitle ? "italic" : "normal",
4170
+ color: "#1a1a1a",
4171
+ fontSize: "14px"
3755
4172
  }
3756
- }, !isEditingTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
4173
+ }, displayLabel), /*#__PURE__*/React__default.createElement(Tooltip, {
3757
4174
  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)),
3758
4175
  arrow: true,
3759
4176
  placement: "top"
3760
- }, /*#__PURE__*/React__default.createElement(Badge, {
3761
- badgeContent: badgeContent,
3762
- color: "secondary"
3763
4177
  }, /*#__PURE__*/React__default.createElement(Chip, {
3764
- label: displayLabel,
3765
- onDelete: () => onRemoveFilter(fullPath),
3766
- color: "secondary",
4178
+ size: "small",
4179
+ label: isDate ? valuesList : `${valueCount} values`,
4180
+ color: "default",
3767
4181
  variant: "outlined",
3768
4182
  sx: {
3769
- fontWeight: hasCustomTitle ? 'bold' : 'normal',
3770
- fontStyle: hasCustomTitle ? 'italic' : 'normal'
4183
+ marginLeft: 1,
4184
+ height: '20px',
4185
+ fontSize: '14px'
3771
4186
  }
3772
- }))), /*#__PURE__*/React__default.createElement(Tooltip, {
4187
+ })))), /*#__PURE__*/React__default.createElement(Box$1, {
4188
+ className: "hover-icons",
4189
+ sx: {
4190
+ display: "flex",
4191
+ gap: 0.5,
4192
+ opacity: 0,
4193
+ transition: "opacity 0.2s"
4194
+ }
4195
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
3773
4196
  title: "Rename filter",
3774
4197
  arrow: true
3775
4198
  }, /*#__PURE__*/React__default.createElement(IconButton, {
3776
4199
  size: "small",
3777
4200
  onClick: () => handleStartEditTitle(fullPath, filter.dimensionTitle),
3778
- color: "primary",
3779
4201
  disabled: isEditing
3780
4202
  }, /*#__PURE__*/React__default.createElement(EditIcon, {
3781
4203
  fontSize: "small"
@@ -3785,11 +4207,21 @@ const Filters = ({
3785
4207
  }, /*#__PURE__*/React__default.createElement(IconButton, {
3786
4208
  size: "small",
3787
4209
  onClick: () => handleEditFilter(fullPath, filter),
3788
- color: "primary",
3789
4210
  disabled: isEditing
3790
4211
  }, /*#__PURE__*/React__default.createElement(FilterAltIcon, {
3791
4212
  fontSize: "small"
3792
- })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
4213
+ }))), /*#__PURE__*/React__default.createElement(Tooltip, {
4214
+ title: "Remove filter",
4215
+ arrow: true
4216
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
4217
+ size: "small",
4218
+ onClick: () => onRemoveFilter(fullPath),
4219
+ sx: {
4220
+ color: "#ef5350"
4221
+ }
4222
+ }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
4223
+ fontSize: "small"
4224
+ }))))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
3793
4225
  value: editTitleValue,
3794
4226
  onChange: e => setEditTitleValue(e.target.value),
3795
4227
  onKeyDown: e => handleKeyDown(e, fullPath),
@@ -3797,9 +4229,14 @@ const Filters = ({
3797
4229
  autoFocus: true,
3798
4230
  placeholder: "Enter custom title",
3799
4231
  sx: {
3800
- width: '300px'
4232
+ flex: 1
4233
+ }
4234
+ }), /*#__PURE__*/React__default.createElement(Box$1, {
4235
+ sx: {
4236
+ display: "flex",
4237
+ gap: 0.5
3801
4238
  }
3802
- }), /*#__PURE__*/React__default.createElement(Tooltip, {
4239
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
3803
4240
  title: "Save",
3804
4241
  arrow: true
3805
4242
  }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -3813,8 +4250,7 @@ const Filters = ({
3813
4250
  arrow: true
3814
4251
  }, /*#__PURE__*/React__default.createElement(IconButton, {
3815
4252
  size: "small",
3816
- onClick: handleCancelEditTitle,
3817
- color: "default"
4253
+ onClick: handleCancelEditTitle
3818
4254
  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
3819
4255
  fontSize: "small"
3820
4256
  }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -3826,17 +4262,23 @@ const Filters = ({
3826
4262
  color: "warning"
3827
4263
  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
3828
4264
  fontSize: "small"
3829
- }))))), isEditing && /*#__PURE__*/React__default.createElement(Paper$1, {
4265
+ })))))), isEditing && /*#__PURE__*/React__default.createElement(Paper$1, {
4266
+ elevation: 0,
3830
4267
  sx: {
3831
- padding: 2,
3832
- marginLeft: 2
4268
+ p: 2,
4269
+ mt: 1,
4270
+ ml: 2,
4271
+ border: "1px solid #e0e0e0",
4272
+ borderRadius: "8px",
4273
+ backgroundColor: "#fafafa"
3833
4274
  }
3834
4275
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3835
4276
  variant: "subtitle2",
3836
4277
  sx: {
3837
- marginBottom: 1
4278
+ marginBottom: 1.5,
4279
+ fontWeight: 600
3838
4280
  }
3839
- }, "Edit Filter ", isDate ? 'Date Range' : 'Values', " for: ", filter.dimensionTitle), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
4281
+ }, "Edit ", isDate ? 'Date Range' : 'Values', " for: ", filter.dimensionTitle), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
3840
4282
  dateAdapter: AdapterDayjs
3841
4283
  }, /*#__PURE__*/React__default.createElement(Box$1, {
3842
4284
  sx: {
@@ -3887,17 +4329,32 @@ const Filters = ({
3887
4329
  })), /*#__PURE__*/React__default.createElement(Box$1, {
3888
4330
  sx: {
3889
4331
  display: 'flex',
3890
- gap: 1
4332
+ gap: 1,
4333
+ justifyContent: 'flex-end'
3891
4334
  }
3892
4335
  }, /*#__PURE__*/React__default.createElement(Button, {
3893
4336
  variant: "outlined",
3894
4337
  size: "small",
3895
- onClick: handleCancelEdit
4338
+ onClick: handleCancelEdit,
4339
+ sx: {
4340
+ textTransform: 'none',
4341
+ borderRadius: '6px'
4342
+ }
3896
4343
  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3897
4344
  variant: "contained",
3898
4345
  size: "small",
3899
4346
  onClick: () => handleSaveEditedFilter(fullPath),
3900
- disabled: isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0
4347
+ disabled: isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0,
4348
+ sx: {
4349
+ textTransform: 'none',
4350
+ borderRadius: '6px',
4351
+ backgroundColor: "rgb(70, 134, 128)",
4352
+ boxShadow: "none",
4353
+ "&:hover": {
4354
+ backgroundColor: "rgb(50, 114, 108)",
4355
+ boxShadow: "none"
4356
+ }
4357
+ }
3901
4358
  }, "Save Changes"))));
3902
4359
  }))));
3903
4360
  };
@@ -4107,8 +4564,8 @@ const ReportBuilder = ({
4107
4564
  const notify = useNotify();
4108
4565
  const reportingContext = useReportingContextOptional();
4109
4566
  const [providersData, setProvidersData] = useState(null);
4110
- const [selectedProvider, setSelectedProvider] = useState('');
4111
- const [reportTitle, setReportTitle] = useState('');
4567
+ const [selectedProvider, setSelectedProvider] = useState("");
4568
+ const [reportTitle, setReportTitle] = useState("");
4112
4569
  const [report, setReport] = useState({
4113
4570
  dimensions: [],
4114
4571
  metrics: [],
@@ -4162,8 +4619,8 @@ const ReportBuilder = ({
4162
4619
  const reconstructDimensionFromPath = (fullPath, providersData, rootProvider) => {
4163
4620
  try {
4164
4621
  // Parse: "ft_sa_db_pc.legal_name" -> ["ft", "sa", "db", "pc"], "legal_name"
4165
- const [aliasPath, fieldKey] = fullPath.split('.');
4166
- const aliases = aliasPath.split('_');
4622
+ const [aliasPath, fieldKey] = fullPath.split(".");
4623
+ const aliases = aliasPath.split("_");
4167
4624
 
4168
4625
  // Walk the chain to build relations array
4169
4626
  let currentProvider = rootProvider;
@@ -4227,8 +4684,8 @@ const ReportBuilder = ({
4227
4684
  const reconstructMetricFromPath = (fullPath, providersData, rootProvider) => {
4228
4685
  try {
4229
4686
  // Parse: "ft_sa.financing_internal" -> ["ft", "sa"], "financing_internal"
4230
- const [aliasPath, metricName] = fullPath.split('.');
4231
- const aliases = aliasPath.split('_');
4687
+ const [aliasPath, metricName] = fullPath.split(".");
4688
+ const aliases = aliasPath.split("_");
4232
4689
 
4233
4690
  // Walk the chain to build relations array
4234
4691
  let currentProvider = rootProvider;
@@ -4286,17 +4743,17 @@ const ReportBuilder = ({
4286
4743
  };
4287
4744
  const loadReportDefinition = async id => {
4288
4745
  try {
4289
- console.log('Loading report definition:', id);
4746
+ console.log("Loading report definition:", id);
4290
4747
  const reportDef = await Api.getReportDefinition({
4291
4748
  id
4292
4749
  });
4293
- console.log('Loaded report definition:', reportDef);
4750
+ console.log("Loaded report definition:", reportDef);
4294
4751
 
4295
4752
  // Set the provider
4296
4753
  setSelectedProvider(reportDef.provider);
4297
4754
 
4298
4755
  // Set the title
4299
- setReportTitle(reportDef.title || '');
4756
+ setReportTitle(reportDef.title || "");
4300
4757
 
4301
4758
  // Reconstruct dimensions
4302
4759
  const reconstructedDimensions = [];
@@ -4306,9 +4763,9 @@ const ReportBuilder = ({
4306
4763
  if (reportDef.definition?.doc?.query?.order_by) {
4307
4764
  for (const orderItem of reportDef.definition.doc.query.order_by) {
4308
4765
  if (orderItem.desc === true) {
4309
- orderByMap[orderItem.name] = 'desc';
4766
+ orderByMap[orderItem.name] = "desc";
4310
4767
  } else {
4311
- orderByMap[orderItem.name] = 'asc';
4768
+ orderByMap[orderItem.name] = "asc";
4312
4769
  }
4313
4770
  }
4314
4771
  }
@@ -4388,26 +4845,26 @@ const ReportBuilder = ({
4388
4845
 
4389
4846
  // Mark report as loaded
4390
4847
  setReportLoaded(true);
4391
- console.log('Reconstructed report:', {
4848
+ console.log("Reconstructed report:", {
4392
4849
  dimensions: reconstructedDimensions,
4393
4850
  metrics: reconstructedMetrics,
4394
4851
  filters: loadedFilters,
4395
4852
  titleOverrides: loadedTitleOverrides
4396
4853
  });
4397
4854
  } catch (error) {
4398
- console.error('Error loading report definition:', error);
4399
- notify.error('Error loading report definition: ' + (error.message || 'Unknown error'));
4855
+ console.error("Error loading report definition:", error);
4856
+ notify.error("Error loading report definition: " + (error.message || "Unknown error"));
4400
4857
  }
4401
4858
  };
4402
4859
  const loadClonedReport = reportDef => {
4403
4860
  try {
4404
- console.log('Loading cloned report:', reportDef);
4861
+ console.log("Loading cloned report:", reportDef);
4405
4862
 
4406
4863
  // Set the provider
4407
4864
  setSelectedProvider(reportDef.provider);
4408
4865
 
4409
4866
  // Set the title (already modified with " (Copy)" suffix)
4410
- setReportTitle(reportDef.title || '');
4867
+ setReportTitle(reportDef.title || "");
4411
4868
 
4412
4869
  // Reconstruct dimensions
4413
4870
  const reconstructedDimensions = [];
@@ -4417,9 +4874,9 @@ const ReportBuilder = ({
4417
4874
  if (reportDef.definition?.doc?.query?.order_by) {
4418
4875
  for (const orderItem of reportDef.definition.doc.query.order_by) {
4419
4876
  if (orderItem.desc === true) {
4420
- orderByMap[orderItem.name] = 'desc';
4877
+ orderByMap[orderItem.name] = "desc";
4421
4878
  } else {
4422
- orderByMap[orderItem.name] = 'asc';
4879
+ orderByMap[orderItem.name] = "asc";
4423
4880
  }
4424
4881
  }
4425
4882
  }
@@ -4495,15 +4952,15 @@ const ReportBuilder = ({
4495
4952
 
4496
4953
  // Set title overrides
4497
4954
  setTitleOverrides(loadedTitleOverrides);
4498
- console.log('Loaded cloned report:', {
4955
+ console.log("Loaded cloned report:", {
4499
4956
  dimensions: reconstructedDimensions,
4500
4957
  metrics: reconstructedMetrics,
4501
4958
  filters: loadedFilters,
4502
4959
  titleOverrides: loadedTitleOverrides
4503
4960
  });
4504
4961
  } catch (error) {
4505
- console.error('Error loading cloned report:', error);
4506
- notify.error('Error loading cloned report: ' + (error.message || 'Unknown error'));
4962
+ console.error("Error loading cloned report:", error);
4963
+ notify.error("Error loading cloned report: " + (error.message || "Unknown error"));
4507
4964
  }
4508
4965
  };
4509
4966
 
@@ -4530,7 +4987,7 @@ const ReportBuilder = ({
4530
4987
  metrics: {},
4531
4988
  filters: {}
4532
4989
  });
4533
- console.log('Selected root provider:', event.target.value);
4990
+ console.log("Selected root provider:", event.target.value);
4534
4991
  };
4535
4992
  const handleUpdateDimensionTitle = (fullPath, customTitle) => {
4536
4993
  setTitleOverrides(prev => ({
@@ -4601,8 +5058,8 @@ const ReportBuilder = ({
4601
5058
  ...prev,
4602
5059
  dimensions: [...prev.dimensions, dimensionData]
4603
5060
  };
4604
- console.log('Dimension saved:', dimensionData);
4605
- console.log('Complete report:', newReport);
5061
+ console.log("Dimension saved:", dimensionData);
5062
+ console.log("Complete report:", newReport);
4606
5063
  return newReport;
4607
5064
  });
4608
5065
  };
@@ -4624,8 +5081,8 @@ const ReportBuilder = ({
4624
5081
  ...prev,
4625
5082
  metrics: [...prev.metrics, metricData]
4626
5083
  };
4627
- console.log('Metric saved:', metricData);
4628
- console.log('Complete report:', newReport);
5084
+ console.log("Metric saved:", metricData);
5085
+ console.log("Complete report:", newReport);
4629
5086
  return newReport;
4630
5087
  });
4631
5088
  };
@@ -4650,11 +5107,11 @@ const ReportBuilder = ({
4650
5107
  [fullPath]: filterData
4651
5108
  }
4652
5109
  };
4653
- console.log('Filter saved:', {
5110
+ console.log("Filter saved:", {
4654
5111
  fullPath,
4655
5112
  filterData
4656
5113
  });
4657
- console.log('Complete report:', newReport);
5114
+ console.log("Complete report:", newReport);
4658
5115
  return newReport;
4659
5116
  });
4660
5117
  };
@@ -4678,7 +5135,7 @@ const ReportBuilder = ({
4678
5135
  const orderItem = {
4679
5136
  name: dim.fullPath
4680
5137
  };
4681
- if (dim.sortOrder === 'desc') {
5138
+ if (dim.sortOrder === "desc") {
4682
5139
  orderItem.desc = true;
4683
5140
  }
4684
5141
  // For 'asc' or null, just include { name: fullPath } without desc property
@@ -4703,7 +5160,7 @@ const ReportBuilder = ({
4703
5160
  [fullPath]: filterData.values
4704
5161
  });
4705
5162
  }
4706
- } else if (typeof filterData.values === 'object') {
5163
+ } else if (typeof filterData.values === "object") {
4707
5164
  // Date range filter - add the object as-is
4708
5165
  conditions.push({
4709
5166
  [fullPath]: filterData.values
@@ -4763,11 +5220,11 @@ const ReportBuilder = ({
4763
5220
  try {
4764
5221
  setLoading(true);
4765
5222
  const apiReport = convertReportToApiFormat(page, size);
4766
- console.log('Running report with:', apiReport);
5223
+ console.log("Running report with:", apiReport);
4767
5224
  const result = await Api.runAdHocReport({
4768
5225
  report: apiReport
4769
5226
  });
4770
- console.log('Report result:', result);
5227
+ console.log("Report result:", result);
4771
5228
  setReportData(result);
4772
5229
  // Note: The API should ideally return total count, but for now we'll use the result length
4773
5230
  // If the API returns fewer rows than the limit, we know we're at the end
@@ -4778,8 +5235,8 @@ const ReportBuilder = ({
4778
5235
  setTotalRows((page + 2) * size);
4779
5236
  }
4780
5237
  } catch (error) {
4781
- console.error('Error running report:', error);
4782
- notify.error('Error running report: ' + (error.message || 'Unknown error'));
5238
+ console.error("Error running report:", error);
5239
+ notify.error("Error running report: " + (error.message || "Unknown error"));
4783
5240
  setReportData(null);
4784
5241
  } finally {
4785
5242
  setLoading(false);
@@ -4795,20 +5252,20 @@ const ReportBuilder = ({
4795
5252
  try {
4796
5253
  setLoading(true);
4797
5254
  const apiReport = convertReportToApiFormat();
4798
- console.log('Downloading report with:', apiReport);
5255
+ console.log("Downloading report with:", apiReport);
4799
5256
 
4800
5257
  // Generate filename from report title and current date
4801
- const date = new Date().toISOString().split('T')[0]; // Format: YYYY-MM-DD
4802
- const sanitizedTitle = (reportTitle || 'report').replace(/[^a-z0-9]/gi, '_').toLowerCase();
5258
+ const date = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
5259
+ const sanitizedTitle = (reportTitle || "report").replace(/[^a-z0-9]/gi, "_").toLowerCase();
4803
5260
  const filename = `${sanitizedTitle}_${date}.csv`;
4804
5261
  await Api.downloadAdHocReport({
4805
5262
  report: apiReport,
4806
5263
  filename
4807
5264
  });
4808
- notify.success('Report downloaded successfully!');
5265
+ notify.success("Report downloaded successfully!");
4809
5266
  } catch (error) {
4810
- console.error('Error downloading report:', error);
4811
- notify.error('Error downloading report: ' + (error.message || 'Unknown error'));
5267
+ console.error("Error downloading report:", error);
5268
+ notify.error("Error downloading report: " + (error.message || "Unknown error"));
4812
5269
  } finally {
4813
5270
  setLoading(false);
4814
5271
  }
@@ -4826,15 +5283,15 @@ const ReportBuilder = ({
4826
5283
  };
4827
5284
  const handleSaveReport = async () => {
4828
5285
  if (!selectedProvider) {
4829
- notify.warning('Please select a provider first');
5286
+ notify.warning("Please select a provider first");
4830
5287
  return;
4831
5288
  }
4832
5289
  if (!reportTitle.trim()) {
4833
- notify.warning('Please enter a report title');
5290
+ notify.warning("Please enter a report title");
4834
5291
  return;
4835
5292
  }
4836
5293
  if (report.dimensions.length === 0 && report.metrics.length === 0) {
4837
- notify.warning('Please add at least one dimension or metric');
5294
+ notify.warning("Please add at least one dimension or metric");
4838
5295
  return;
4839
5296
  }
4840
5297
  try {
@@ -4845,7 +5302,7 @@ const ReportBuilder = ({
4845
5302
  const orderItem = {
4846
5303
  name: dim.fullPath
4847
5304
  };
4848
- if (dim.sortOrder === 'desc') {
5305
+ if (dim.sortOrder === "desc") {
4849
5306
  orderItem.desc = true;
4850
5307
  }
4851
5308
  // For 'asc' or null, just include { name: fullPath } without desc property
@@ -4888,7 +5345,7 @@ const ReportBuilder = ({
4888
5345
  [fullPath]: filterData.values
4889
5346
  });
4890
5347
  }
4891
- } else if (typeof filterData.values === 'object') {
5348
+ } else if (typeof filterData.values === "object") {
4892
5349
  // Date range filter - add the object as-is
4893
5350
  conditions.push({
4894
5351
  [fullPath]: filterData.values
@@ -4918,20 +5375,20 @@ const ReportBuilder = ({
4918
5375
  }
4919
5376
  }
4920
5377
  };
4921
- console.log('Saving report definition:', payload);
5378
+ console.log("Saving report definition:", payload);
4922
5379
  if (reportDefinitionId) {
4923
5380
  // Update existing report definition
4924
5381
  await Api.updateReportDefinition({
4925
5382
  id: reportDefinitionId,
4926
5383
  reportDefinition: payload
4927
5384
  });
4928
- notify.success('Report definition updated successfully!');
5385
+ notify.success("Report definition updated successfully!");
4929
5386
  } else {
4930
5387
  // Create new report definition
4931
5388
  await Api.createReportDefinition({
4932
5389
  reportDefinition: payload
4933
5390
  });
4934
- notify.success('Report definition created successfully!');
5391
+ notify.success("Report definition created successfully!");
4935
5392
  }
4936
5393
 
4937
5394
  // Navigate back to list
@@ -4939,8 +5396,8 @@ const ReportBuilder = ({
4939
5396
  onBackToList();
4940
5397
  }
4941
5398
  } catch (error) {
4942
- console.error('Error saving report definition:', error);
4943
- notify.error('Error saving report definition: ' + (error.message || 'Unknown error'));
5399
+ console.error("Error saving report definition:", error);
5400
+ notify.error("Error saving report definition: " + (error.message || "Unknown error"));
4944
5401
  } finally {
4945
5402
  setSaving(false);
4946
5403
  }
@@ -4948,121 +5405,273 @@ const ReportBuilder = ({
4948
5405
  const canSaveReport = selectedProvider && reportTitle.trim() && (report.dimensions.length > 0 || report.metrics.length > 0);
4949
5406
  return /*#__PURE__*/React__default.createElement(Box$1, {
4950
5407
  sx: {
4951
- p: 3
5408
+ p: 3,
5409
+ fontFamily: "system-ui"
4952
5410
  }
4953
5411
  }, /*#__PURE__*/React__default.createElement(Box$1, {
4954
5412
  sx: {
4955
- display: 'flex',
4956
- justifyContent: 'space-between',
4957
- alignItems: 'center',
4958
- mb: 2
5413
+ display: "flex",
5414
+ justifyContent: "space-between",
5415
+ alignItems: "center",
5416
+ mb: 2,
5417
+ backgroundColor: "transparent",
5418
+ fontFamily: "system-ui"
4959
5419
  }
4960
- }, /*#__PURE__*/React__default.createElement("h1", null, reportDefinitionId ? 'Edit Report' : 'Create New Report'), onBackToList && /*#__PURE__*/React__default.createElement(Button, {
5420
+ }, /*#__PURE__*/React__default.createElement("h1", null, reportDefinitionId ? "Edit Report" : "Create New Report"), onBackToList && /*#__PURE__*/React__default.createElement(Button, {
4961
5421
  variant: "outlined",
4962
5422
  startIcon: /*#__PURE__*/React__default.createElement(ArrowBackIcon, null),
4963
5423
  onClick: onBackToList
4964
5424
  }, "Back to List")), /*#__PURE__*/React__default.createElement(Box$1, {
4965
5425
  sx: {
4966
5426
  mt: 2,
4967
- display: 'flex',
4968
- gap: 2,
4969
- alignItems: 'flex-start',
4970
- flexWrap: 'wrap'
5427
+ p: 3,
5428
+ backgroundColor: "white",
5429
+ borderRadius: "12px",
5430
+ border: "1px solid #e0e0e0",
5431
+ fontFamily: "system-ui",
5432
+ display: "flex",
5433
+ flexDirection: "column",
5434
+ gap: 3,
5435
+ boxShadow: "0px 2px 4px rgba(0,0,0,0.02)"
5436
+ }
5437
+ }, /*#__PURE__*/React__default.createElement(Box$1, {
5438
+ sx: {
5439
+ display: "flex",
5440
+ gap: 4,
5441
+ alignItems: "flex-start",
5442
+ flexWrap: "wrap"
5443
+ }
5444
+ }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Typography$1, {
5445
+ sx: {
5446
+ fontSize: "14px",
5447
+ fontWeight: 600,
5448
+ mb: 1,
5449
+ color: "rgb(37, 37, 37)"
4971
5450
  }
4972
- }, /*#__PURE__*/React__default.createElement(TextField, {
4973
- label: "Report Title",
5451
+ }, "Report Title"), /*#__PURE__*/React__default.createElement(TextField, {
4974
5452
  value: reportTitle,
4975
5453
  onChange: e => setReportTitle(e.target.value),
4976
5454
  placeholder: "Enter report title",
4977
5455
  sx: {
4978
- width: '300px'
5456
+ width: "400px",
5457
+ fontFamily: "system-ui",
5458
+ "& .MuiOutlinedInput-root": {
5459
+ backgroundColor: "white",
5460
+ borderRadius: "8px"
5461
+ }
4979
5462
  },
4980
5463
  size: "small"
4981
- }), /*#__PURE__*/React__default.createElement(SingleSelect, {
5464
+ })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Typography$1, {
5465
+ sx: {
5466
+ fontSize: "14px",
5467
+ fontWeight: 600,
5468
+ mb: 1,
5469
+ color: "rgb(37, 37, 37)"
5470
+ }
5471
+ }, "Select Root Provider"), /*#__PURE__*/React__default.createElement(SingleSelect, {
4982
5472
  items: getProviderItems(),
4983
5473
  value: selectedProvider,
4984
- label: "Select Root Provider",
4985
5474
  onChange: handleProviderChange,
4986
5475
  sx: {
4987
- width: '300px'
5476
+ width: "300px",
5477
+ fontFamily: "system-ui"
4988
5478
  },
4989
5479
  disabled: !!reportDefinitionId
4990
- }), /*#__PURE__*/React__default.createElement(Button, {
5480
+ }))), /*#__PURE__*/React__default.createElement(Box$1, {
5481
+ sx: {
5482
+ display: "flex",
5483
+ gap: 2,
5484
+ alignItems: "center"
5485
+ }
5486
+ }, /*#__PURE__*/React__default.createElement(Button, {
4991
5487
  variant: "contained",
4992
5488
  onClick: handleRunReport,
4993
5489
  disabled: !canRunReport,
5490
+ startIcon: /*#__PURE__*/React__default.createElement(PlayArrowIcon, null),
4994
5491
  sx: {
4995
- height: '40px'
5492
+ height: "40px",
5493
+ fontFamily: "system-ui",
5494
+ borderRadius: "8px",
5495
+ boxShadow: "none",
5496
+ textTransform: "none",
5497
+ backgroundColor: "rgb(70, 134, 128)",
5498
+ // Bright blue
5499
+ fontWeight: 500,
5500
+ padding: "0 20px",
5501
+ "&:hover": {
5502
+ backgroundColor: "rgb(46, 102, 98)",
5503
+ boxShadow: "none"
5504
+ }
4996
5505
  }
4997
5506
  }, "Run Report"), /*#__PURE__*/React__default.createElement(Button, {
4998
- variant: "contained",
4999
- color: "secondary",
5507
+ variant: "outlined",
5000
5508
  startIcon: /*#__PURE__*/React__default.createElement(DownloadIcon, null),
5001
5509
  onClick: handleDownloadReport,
5002
5510
  disabled: !canRunReport || loading,
5003
5511
  sx: {
5004
- height: '40px'
5512
+ height: "40px",
5513
+ fontFamily: "system-ui",
5514
+ borderRadius: "8px",
5515
+ boxShadow: "none",
5516
+ textTransform: "none",
5517
+ color: "#9c27b0",
5518
+ // Purple
5519
+ borderColor: "#e1bee7",
5520
+ fontWeight: 500,
5521
+ padding: "0 20px",
5522
+ "&:hover": {
5523
+ borderColor: "#9c27b0",
5524
+ backgroundColor: "rgba(156, 39, 176, 0.04)"
5525
+ }
5005
5526
  }
5006
5527
  }, "Download CSV"), /*#__PURE__*/React__default.createElement(Button, {
5007
- variant: "contained",
5008
- color: "success",
5528
+ variant: "outlined",
5009
5529
  startIcon: /*#__PURE__*/React__default.createElement(SaveIcon, null),
5010
5530
  onClick: handleSaveReport,
5011
5531
  disabled: !canSaveReport || saving,
5012
5532
  sx: {
5013
- height: '40px'
5533
+ height: "40px",
5534
+ fontFamily: "system-ui",
5535
+ borderRadius: "8px",
5536
+ boxShadow: "none",
5537
+ textTransform: "none",
5538
+ color: "#2e7d32",
5539
+ // Green
5540
+ borderColor: "#a5d6a7",
5541
+ fontWeight: 500,
5542
+ padding: "0 20px",
5543
+ "&:hover": {
5544
+ borderColor: "#2e7d32",
5545
+ backgroundColor: "rgba(46, 125, 50, 0.04)"
5546
+ }
5014
5547
  }
5015
- }, saving ? 'Saving...' : reportDefinitionId ? 'Update Report' : 'Save Report')), selectedProvider && /*#__PURE__*/React__default.createElement(Box$1, {
5548
+ }, saving ? "Saving..." : reportDefinitionId ? "Update Report" : "Save Report"))), selectedProvider && /*#__PURE__*/React__default.createElement(Box$1, {
5016
5549
  sx: {
5017
- mt: 4
5550
+ mt: 2,
5551
+ fontFamily: "system-ui",
5552
+ backgroundColor: "white",
5553
+ px: 3,
5554
+ py: 2,
5555
+ borderRadius: "8px"
5018
5556
  }
5019
5557
  }, /*#__PURE__*/React__default.createElement(Box$1, {
5020
5558
  sx: {
5021
5559
  borderBottom: 1,
5022
- borderColor: 'divider'
5560
+ borderColor: "rgba(70, 134, 127, 0.27)"
5023
5561
  }
5024
5562
  }, /*#__PURE__*/React__default.createElement(Tabs, {
5025
5563
  value: activeTab,
5026
5564
  onChange: handleTabChange,
5027
- "aria-label": "report builder tabs"
5565
+ "aria-label": "report builder tabs",
5566
+ sx: {
5567
+ "& .MuiTabs-indicator": {
5568
+ display: "flex",
5569
+ justifyContent: "center",
5570
+ backgroundColor: "rgb(70, 134, 128)"
5571
+ },
5572
+ "& .MuiTabs-indicatorSpan": {
5573
+ backgroundColor: "rgb(70, 134, 128)"
5574
+ }
5575
+ }
5028
5576
  }, /*#__PURE__*/React__default.createElement(Tab, {
5029
5577
  label: /*#__PURE__*/React__default.createElement(Badge, {
5030
5578
  badgeContent: report.dimensions.length,
5031
- color: "primary"
5579
+ sx: {
5580
+ "& .MuiBadge-badge": {
5581
+ backgroundColor: "rgb(70, 134, 128)",
5582
+ // green badge bg
5583
+ color: "#fff" // badge text color
5584
+ }
5585
+ }
5032
5586
  }, /*#__PURE__*/React__default.createElement("span", {
5033
5587
  style: {
5034
- marginRight: report.dimensions.length > 0 ? '12px' : '0'
5588
+ marginRight: report.dimensions.length > 0 ? "12px" : "0"
5035
5589
  }
5036
5590
  }, "Dimensions")),
5037
5591
  id: "report-tab-0",
5038
- "aria-controls": "report-tabpanel-0"
5592
+ "aria-controls": "report-tabpanel-0",
5593
+ sx: {
5594
+ height: "41px",
5595
+ fontFamily: "system-ui",
5596
+ borderRadius: "0.5rem",
5597
+ boxShadow: "none",
5598
+ textTransform: "none",
5599
+ color: "rgb(37, 37, 37)",
5600
+ // green text
5601
+ "&.Mui-selected": {
5602
+ color: "rgb(70, 134, 128)" // keep green when selected
5603
+ }
5604
+ }
5039
5605
  }), /*#__PURE__*/React__default.createElement(Tab, {
5040
5606
  label: /*#__PURE__*/React__default.createElement(Badge, {
5041
5607
  badgeContent: report.metrics.length,
5042
- color: "primary"
5608
+ sx: {
5609
+ "& .MuiBadge-badge": {
5610
+ backgroundColor: "rgb(70, 134, 128)",
5611
+ color: "#fff"
5612
+ }
5613
+ }
5043
5614
  }, /*#__PURE__*/React__default.createElement("span", {
5044
5615
  style: {
5045
- marginRight: report.metrics.length > 0 ? '12px' : '0'
5616
+ marginRight: report.metrics.length > 0 ? "12px" : "0"
5046
5617
  }
5047
5618
  }, "Metrics")),
5048
5619
  id: "report-tab-1",
5049
- "aria-controls": "report-tabpanel-1"
5620
+ "aria-controls": "report-tabpanel-1",
5621
+ sx: {
5622
+ height: "41px",
5623
+ fontFamily: "system-ui",
5624
+ borderRadius: "0.5rem",
5625
+ boxShadow: "none",
5626
+ textTransform: "none",
5627
+ color: "rgb(37, 37, 37)",
5628
+ "&.Mui-selected": {
5629
+ color: "rgb(70, 134, 128)"
5630
+ }
5631
+ }
5050
5632
  }), /*#__PURE__*/React__default.createElement(Tab, {
5051
5633
  label: /*#__PURE__*/React__default.createElement(Badge, {
5052
5634
  badgeContent: Object.keys(report.filters).length,
5053
- color: "secondary"
5635
+ sx: {
5636
+ "& .MuiBadge-badge": {
5637
+ backgroundColor: "rgb(70, 134, 128)",
5638
+ color: "#fff"
5639
+ }
5640
+ }
5054
5641
  }, /*#__PURE__*/React__default.createElement("span", {
5055
5642
  style: {
5056
- marginRight: Object.keys(report.filters).length > 0 ? '12px' : '0'
5643
+ marginRight: Object.keys(report.filters).length > 0 ? "12px" : "0"
5057
5644
  }
5058
5645
  }, "Filters")),
5059
5646
  id: "report-tab-2",
5060
- "aria-controls": "report-tabpanel-2"
5647
+ "aria-controls": "report-tabpanel-2",
5648
+ sx: {
5649
+ height: "41px",
5650
+ fontFamily: "system-ui",
5651
+ borderRadius: "0.5rem",
5652
+ boxShadow: "none",
5653
+ textTransform: "none",
5654
+ color: "rgb(37, 37, 37)",
5655
+ "&.Mui-selected": {
5656
+ color: "rgb(70, 134, 128)"
5657
+ }
5658
+ }
5061
5659
  }), /*#__PURE__*/React__default.createElement(Tab, {
5062
5660
  label: reportData ? "Results" : "Results (Run report first)",
5063
5661
  id: "report-tab-3",
5064
5662
  "aria-controls": "report-tabpanel-3",
5065
- disabled: !reportData
5663
+ disabled: !reportData,
5664
+ sx: {
5665
+ height: "41px",
5666
+ fontFamily: "system-ui",
5667
+ borderRadius: "0.5rem",
5668
+ boxShadow: "none",
5669
+ textTransform: "none",
5670
+ color: "rgb(37, 37, 37)",
5671
+ "&.Mui-selected": {
5672
+ color: "rgb(70, 134, 128)"
5673
+ }
5674
+ }
5066
5675
  }))), /*#__PURE__*/React__default.createElement(TabPanel, {
5067
5676
  value: activeTab,
5068
5677
  index: 0
@@ -5196,7 +5805,29 @@ const ReportApp = ({
5196
5805
  return /*#__PURE__*/React__default.createElement(NotifyProvider, null, /*#__PURE__*/React__default.createElement(ReportingProvider, {
5197
5806
  defaultParameters: params,
5198
5807
  defaultApi: api
5199
- }, /*#__PURE__*/React__default.createElement(ReportDefinitionsManager, null)));
5808
+ }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
5809
+ theme: createTheme({
5810
+ palette: {
5811
+ primary: {
5812
+ main: "rgb(70, 134, 128)"
5813
+ }
5814
+ },
5815
+ components: {
5816
+ MuiButton: {
5817
+ styleOverrides: {
5818
+ root: {
5819
+ borderRadius: 8,
5820
+ textTransform: "none",
5821
+ boxShadow: "none",
5822
+ "&:hover": {
5823
+ boxShadow: "none"
5824
+ }
5825
+ }
5826
+ }
5827
+ }
5828
+ }
5829
+ })
5830
+ }, /*#__PURE__*/React__default.createElement(ReportDefinitionsManager, null))));
5200
5831
  };
5201
5832
 
5202
5833
  var index = {