@bygd/nc-report-ui 0.1.24 → 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 +1055 -441
  3. package/dist/default/iife/index.js +41 -41
  4. package/package.json +1 -1
package/dist/default/esm/index.js CHANGED
@@ -12,18 +12,17 @@ import FormControl$2 from '@material-ui/core/FormControl';
12
12
  import Select$1 from '@material-ui/core/Select';
13
13
  import MenuItem$1 from '@material-ui/core/MenuItem';
14
14
  import { useInView } from 'react-intersection-observer';
15
- import { FormControl, Autocomplete, TextField, CircularProgress as CircularProgress$1, Chip, Checkbox, FormHelperText, Snackbar, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Box as Box$1, Typography as Typography$1, Tooltip, IconButton, Paper as Paper$1, Badge, Tabs, Tab } from '@mui/material';
15
+ import { FormControl, Autocomplete, TextField, CircularProgress as CircularProgress$1, Chip, Checkbox, FormHelperText, Snackbar, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Box as Box$1, Typography as Typography$1, Tooltip, IconButton, Paper as Paper$1, Tabs, Tab, Badge } from '@mui/material';
16
16
  import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
17
17
  import CheckBoxIcon from '@mui/icons-material/CheckBox';
18
18
  import Box from '@mui/material/Box';
19
- import InputLabel from '@mui/material/InputLabel';
20
19
  import MenuItem from '@mui/material/MenuItem';
21
20
  import FormControl$1 from '@mui/material/FormControl';
22
21
  import Select from '@mui/material/Select';
23
22
  import EventEmitter from 'eventemitter3';
24
23
  import Grid from '@material-ui/core/Grid';
25
24
  import Container from '@material-ui/core/Container';
26
- import { DataGrid } from '@mui/x-data-grid';
25
+ import { DataGrid, GridAddIcon, GridDeleteIcon } from '@mui/x-data-grid';
27
26
  import AddIcon from '@mui/icons-material/Add';
28
27
  import EditIcon from '@mui/icons-material/Edit';
29
28
  import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -48,6 +47,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
48
47
  import { DatePicker } from '@mui/x-date-pickers/DatePicker';
49
48
  import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
50
49
  import dayjs from 'dayjs';
50
+ import { ThemeProvider, createTheme } from '@mui/material/styles';
51
51
 
52
52
  function _extends() {
53
53
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -802,40 +802,65 @@ const ChartFilterMultiSelect = ({
802
802
  })));
803
803
  };
804
804
 
805
+ const formatLabel = key => {
806
+ return key?.replace(/([a-z])([A-Z])/g, "$1 $2") // insert space before capital letters
807
+ ?.replace(/_/g, " ")?.replace(/-/g, " ") // replace underscores with spaces (optional)
808
+ .replace(/\b\w/g, char => char.toUpperCase()); // capitalize each word
809
+ };
805
810
  function SingleSelect({
806
811
  items,
807
812
  value,
808
- label,
809
813
  onChange,
810
814
  sx = {
811
- width: '100%'
815
+ width: "100%"
812
816
  },
813
- disabled = false
817
+ disabled = false,
818
+ label
814
819
  }) {
815
820
  // Check if the current value exists in items, otherwise use empty string
816
- const validValue = items.some(itm => itm.key === value) ? value : '';
821
+ const validValue = items.some(itm => itm.key === value) ? value : "";
817
822
  return /*#__PURE__*/React__default.createElement(Box, {
818
823
  sx: sx
819
824
  }, /*#__PURE__*/React__default.createElement(FormControl$1, {
820
- fullWidth: true
821
- }, /*#__PURE__*/React__default.createElement(InputLabel, {
822
- id: "demo-simple-select-label"
823
- }, label), /*#__PURE__*/React__default.createElement(Select, {
824
- labelId: "demo-simple-select-label",
825
- id: "demo-simple-select",
825
+ fullWidth: true,
826
+ size: "small"
827
+ }, /*#__PURE__*/React__default.createElement(Select, {
826
828
  value: validValue,
827
- label: label,
828
829
  onChange: onChange,
829
830
  disabled: disabled,
831
+ displayEmpty: true,
830
832
  MenuProps: {
831
833
  style: {
832
- maxHeight: '300px'
834
+ maxHeight: 300
835
+ }
836
+ },
837
+ sx: {
838
+ height: "40px",
839
+ borderRadius: "8px",
840
+ fontFamily: "system-ui",
841
+ backgroundColor: "white",
842
+ "& .MuiSelect-select": {
843
+ display: "flex",
844
+ alignItems: "center",
845
+ padding: "8px 12px"
846
+ },
847
+ "& fieldset": {
848
+ borderColor: "rgba(0,0,0,0.23)" // default border
849
+ },
850
+ "&:hover fieldset": {
851
+ borderColor: "rgb(70, 134, 128) !important" // green on hover
852
+ },
853
+ "&.Mui-focused fieldset": {
854
+ borderColor: "rgb(70, 134, 128) !important" // green on focus
833
855
  }
834
856
  }
835
- // sx={{height:'40px'}}
836
- ,
837
- size: "small"
838
- }, items.map(itm => {
857
+ }, /*#__PURE__*/React__default.createElement(MenuItem, {
858
+ value: "",
859
+ disabled: true,
860
+ sx: {
861
+ color: "rgba(37, 37, 37, 0.58)"
862
+ }
863
+ }, formatLabel(label)), items.map(itm => {
839
864
  const {
840
865
  key,
841
866
  value,
@@ -844,8 +869,12 @@ function SingleSelect({
844
869
  return /*#__PURE__*/React__default.createElement(MenuItem, {
845
870
  key: key,
846
871
  value: key,
847
- disabled: disabled
848
- }, value);
872
+ disabled: disabled,
873
+ sx: {
874
+ fontFamily: "system-ui",
875
+ minHeight: "36px"
876
+ }
877
+ }, formatLabel(value));
849
878
  }))));
850
879
  }
851
880
 
@@ -1216,6 +1245,20 @@ const ReportingProvider = ({
1216
1245
  };
1217
1246
  const [parameters, setParameters] = useState(initialParameters);
1218
1247
  const [api, setApi] = useState(defaultApi);
1248
+
1249
+ // Update parameters when defaultParameters prop changes
1250
+ useEffect(() => {
1251
+ const updatedParameters = {
1252
+ base_currency: 'EUR',
1253
+ ...defaultParameters
1254
+ };
1255
+ setParameters(updatedParameters);
1256
+ }, [defaultParameters]);
1257
+
1258
+ // Update api when defaultApi prop changes
1259
+ useEffect(() => {
1260
+ setApi(defaultApi);
1261
+ }, [defaultApi]);
1219
1262
  const value = {
1220
1263
  parameters,
1221
1264
  setParameters: newParams => {
@@ -1592,8 +1635,8 @@ const ReportDefinitionsList = ({
1592
1635
  const data = await Api.getReportDefinitions();
1593
1636
  setReportDefinitions(data);
1594
1637
  } catch (err) {
1595
- console.error('Error loading report definitions:', err);
1596
- const errorMessage = 'Failed to load report definitions: ' + (err.message || 'Unknown error');
1638
+ console.error("Error loading report definitions:", err);
1639
+ const errorMessage = "Failed to load report definitions: " + (err.message || "Unknown error");
1597
1640
  setError(errorMessage);
1598
1641
  notify.error(errorMessage);
1599
1642
  } finally {
@@ -1625,8 +1668,8 @@ const ReportDefinitionsList = ({
1625
1668
  // Pass the cloned report data to the parent
1626
1669
  onCloneReport(clonedReport);
1627
1670
  } catch (error) {
1628
- console.error('Error cloning report:', error);
1629
- notify.error('Failed to clone report: ' + (error.message || 'Unknown error'));
1671
+ console.error("Error cloning report:", error);
1672
+ notify.error("Failed to clone report: " + (error.message || "Unknown error"));
1630
1673
  }
1631
1674
  };
1632
1675
  const handleDelete = (id, event) => {
@@ -1651,8 +1694,8 @@ const ReportDefinitionsList = ({
1651
1694
  // Reload the report definitions list
1652
1695
  loadReportDefinitions();
1653
1696
  } catch (error) {
1654
- console.error('Error deleting report:', error);
1655
- notify.error('Failed to delete report: ' + (error.response?.data?.message || error.message || 'Unknown error'));
1697
+ console.error("Error deleting report:", error);
1698
+ notify.error("Failed to delete report: " + (error.response?.data?.message || error.message || "Unknown error"));
1656
1699
  setDeleteDialogOpen(false);
1657
1700
  setReportToDelete(null);
1658
1701
  }
@@ -1662,25 +1705,25 @@ const ReportDefinitionsList = ({
1662
1705
  setReportToDelete(null);
1663
1706
  };
1664
1707
  const columns = [{
1665
- field: 'title',
1666
- headerName: 'Title',
1708
+ field: "title",
1709
+ headerName: "Title",
1667
1710
  flex: 1,
1668
1711
  minWidth: 200
1669
1712
  }, {
1670
- field: 'provider',
1671
- headerName: 'Provider',
1713
+ field: "provider",
1714
+ headerName: "Provider",
1672
1715
  flex: 1,
1673
1716
  minWidth: 200
1674
1717
  }, {
1675
- field: 'actions',
1676
- headerName: 'Actions',
1718
+ field: "actions",
1719
+ headerName: "Actions",
1677
1720
  width: 200,
1678
1721
  sortable: false,
1679
1722
  filterable: false,
1680
1723
  disableColumnMenu: true,
1681
1724
  renderCell: params => /*#__PURE__*/React__default.createElement(Box$1, {
1682
1725
  sx: {
1683
- display: 'flex',
1726
+ display: "flex",
1684
1727
  gap: 1
1685
1728
  }
1686
1729
  }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -1750,27 +1793,38 @@ const ReportDefinitionsList = ({
1750
1793
  }
1751
1794
  return /*#__PURE__*/React__default.createElement(Box$1, {
1752
1795
  sx: {
1753
- p: 3
1796
+ p: 3,
1797
+ display: "flex",
1798
+ flexDirection: "column",
1799
+ fontFamily: "system-ui"
1754
1800
  }
1755
1801
  }, /*#__PURE__*/React__default.createElement(Box$1, {
1756
1802
  sx: {
1757
- display: 'flex',
1758
- justifyContent: 'space-between',
1759
- alignItems: 'center',
1760
- mb: 3
1803
+ display: "flex",
1804
+ justifyContent: "flex-end",
1805
+ alignItems: "center",
1806
+ mb: 2,
1807
+ fontFamily: "system-ui"
1761
1808
  }
1762
- }, /*#__PURE__*/React__default.createElement(Typography$1, {
1763
- variant: "h4",
1764
- component: "h1"
1765
- }, "Report Definitions"), /*#__PURE__*/React__default.createElement(Button, {
1809
+ }, /*#__PURE__*/React__default.createElement(Button, {
1766
1810
  variant: "contained",
1767
- color: "primary",
1811
+ sx: {
1812
+ backgroundColor: " rgb(70, 134, 128)",
1813
+ // green
1814
+ borderRadius: "0.5rem",
1815
+ // rounded-lg
1816
+ boxShadow: "none",
1817
+ textTransform: "none"
1818
+ },
1768
1819
  startIcon: /*#__PURE__*/React__default.createElement(AddIcon, null),
1769
1820
  onClick: onAddNew
1770
1821
  }, "Add New Report")), /*#__PURE__*/React__default.createElement(Box$1, {
1771
1822
  sx: {
1772
- height: 600,
1773
- width: '100%'
1823
+ flex: 1,
1824
+ width: "100%",
1825
+ borderRadius: "0.5rem",
1826
+ overflow: "hidden",
1827
+ fontFamily: "system-ui"
1774
1828
  }
1775
1829
  }, /*#__PURE__*/React__default.createElement(DataGrid, {
1776
1830
  rows: rows,
@@ -1780,21 +1834,36 @@ const ReportDefinitionsList = ({
1780
1834
  disableSelectionOnClick: true,
1781
1835
  onRowClick: handleRowClick,
1782
1836
  sx: {
1783
- '& .MuiDataGrid-row': {
1784
- cursor: 'pointer'
1837
+ height: "100%",
1838
+ borderRadius: "0.5rem",
1839
+ overflow: "hidden",
1840
+ fontFamily: "system-ui",
1841
+ "& .MuiDataGrid-columnHeaders": {
1842
+ backgroundColor: "#ffff"
1785
1843
  },
1786
- '& .MuiDataGrid-row:hover': {
1787
- backgroundColor: '#f5f5f5'
1844
+ "& .MuiDataGrid-columnHeaderTitle": {
1845
+ fontWeight: "600 !important",
1846
+ // bold
1847
+ fontSize: "0.875rem !important" // smaller (~14px)
1788
1848
  },
1789
- '& .MuiDataGrid-columnHeader': {
1790
- backgroundColor: '#f5f5f5',
1791
- fontWeight: 'bold'
1849
+ "& .MuiDataGrid-columnHeader:first-of-type": {
1850
+ borderTopLeftRadius: "0.5rem"
1851
+ },
1852
+ "& .MuiDataGrid-columnHeader:last-of-type": {
1853
+ borderTopRightRadius: "0.5rem"
1854
+ },
1855
+ "& .MuiDataGrid-row": {
1856
+ cursor: "pointer",
1857
+ fontSize: "0.875rem !important"
1858
+ },
1859
+ "& .MuiDataGrid-row:hover": {
1860
+ backgroundColor: "#f6f5f5ff"
1792
1861
  }
1793
1862
  }
1794
1863
  })), /*#__PURE__*/React__default.createElement(ConfirmDialog, {
1795
1864
  open: deleteDialogOpen,
1796
1865
  title: "Delete Report Definition",
1797
- message: reportToDelete ? `Are you sure you want to delete "${reportToDelete.title}"? This action cannot be undone.` : '',
1866
+ message: reportToDelete ? `Are you sure you want to delete "${reportToDelete.title}"? This action cannot be undone.` : "",
1798
1867
  onConfirm: handleConfirmDelete,
1799
1868
  onCancel: handleCancelDelete,
1800
1869
  confirmText: "Delete",
@@ -1921,7 +1990,7 @@ const ProviderSelection = ({
1921
1990
  targetKey: selectedItem.targetKey // The actual provider this points to
1922
1991
  });
1923
1992
  setSelectionChain(newChain);
1924
- console.log('Selection chain:', newChain);
1993
+ console.log("Selection chain:", newChain);
1925
1994
 
1926
1995
  // Notify parent of selection change
1927
1996
  if (onSelectionChange) {
@@ -1952,15 +2021,15 @@ const ProviderSelection = ({
1952
2021
  dropdowns.push(/*#__PURE__*/React__default.createElement("div", {
1953
2022
  key: "level-0",
1954
2023
  style: {
1955
- marginRight: '16px'
2024
+ marginRight: "16px"
1956
2025
  }
1957
2026
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
1958
2027
  items: rootRelationItems,
1959
- value: selectionChain[0]?.providerKey || '',
2028
+ value: selectionChain[0]?.providerKey || "",
1960
2029
  label: `Related to ${rootProvider}`,
1961
2030
  onChange: e => handleSelectionChange(0, e),
1962
2031
  sx: {
1963
- width: '300px'
2032
+ width: "300px"
1964
2033
  }
1965
2034
  })));
1966
2035
  }
@@ -1976,15 +2045,15 @@ const ProviderSelection = ({
1976
2045
  dropdowns.push(/*#__PURE__*/React__default.createElement("div", {
1977
2046
  key: `level-${i + 1}`,
1978
2047
  style: {
1979
- marginRight: '16px'
2048
+ marginRight: "16px"
1980
2049
  }
1981
2050
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
1982
2051
  items: relationItems,
1983
- value: nextSelection?.providerKey || '',
2052
+ value: nextSelection?.providerKey || "",
1984
2053
  label: `Related to ${currentSelection.targetKey}`,
1985
2054
  onChange: e => handleSelectionChange(i + 1, e),
1986
2055
  sx: {
1987
- width: '300px'
2056
+ width: "300px"
1988
2057
  }
1989
2058
  })));
1990
2059
  }
@@ -1995,45 +2064,56 @@ const ProviderSelection = ({
1995
2064
  sx: {
1996
2065
  marginBottom: 2
1997
2066
  }
1998
- }, /*#__PURE__*/React__default.createElement(Typography$1, {
1999
- variant: "subtitle2",
2067
+ }, /*#__PURE__*/React__default.createElement(Box$1, {
2000
2068
  sx: {
2001
- marginBottom: 1,
2002
- color: 'text.secondary'
2069
+ display: "flex",
2070
+ alignItems: "center",
2071
+ gap: 1.5,
2072
+ flexWrap: "wrap"
2003
2073
  }
2004
- }, "Selected Path:"), /*#__PURE__*/React__default.createElement(Box$1, {
2074
+ }, /*#__PURE__*/React__default.createElement(Chip, {
2075
+ label: formatLabel(rootProvider),
2076
+ size: "medium",
2077
+ variant: "outlined",
2005
2078
  sx: {
2006
- display: 'flex',
2007
- alignItems: 'center',
2008
- gap: 1,
2009
- flexWrap: 'wrap'
2079
+ fontWeight: 600,
2080
+ borderColor: "rgb(70, 134, 128)",
2081
+ color: "rgb(70, 134, 128)",
2082
+ backgroundColor: "white",
2083
+ height: "32px",
2084
+ fontFamily: "system-ui"
2010
2085
  }
2011
- }, /*#__PURE__*/React__default.createElement(Chip, {
2012
- label: rootProvider,
2013
- size: "small",
2014
- color: "primary",
2015
- variant: "outlined"
2016
2086
  }), selectionChain.map((selection, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
2017
2087
  key: index
2018
2088
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
2019
2089
  variant: "body2",
2020
2090
  sx: {
2021
- color: 'text.secondary'
2091
+ color: "#9e9e9e",
2092
+ fontWeight: "bold"
2022
2093
  }
2023
2094
  }, "\u2192"), /*#__PURE__*/React__default.createElement(Chip, {
2024
- label: selection.targetKey,
2025
- size: "small",
2026
- color: "primary",
2095
+ label: formatLabel(selection.targetKey),
2096
+ size: "medium",
2027
2097
  onDelete: () => handleRemoveFromChain(index),
2028
2098
  sx: {
2029
- fontWeight: 500
2099
+ fontWeight: 500,
2100
+ backgroundColor: "rgb(70, 134, 128)",
2101
+ color: "white",
2102
+ height: "32px",
2103
+ fontFamily: "system-ui",
2104
+ "& .MuiChip-deleteIcon": {
2105
+ color: "rgba(255, 255, 255, 0.7)",
2106
+ "&:hover": {
2107
+ color: "white"
2108
+ }
2109
+ }
2030
2110
  }
2031
2111
  }))))), /*#__PURE__*/React__default.createElement("div", {
2032
2112
  style: {
2033
- display: 'flex',
2034
- flexWrap: 'wrap',
2035
- alignItems: 'flex-start',
2036
- gap: '8px'
2113
+ display: "flex",
2114
+ flexWrap: "wrap",
2115
+ alignItems: "flex-start",
2116
+ gap: "16px" // Increased gap for better spacing
2037
2117
  }
2038
2118
  }, renderSelectionChain()));
2039
2119
  };
@@ -2057,7 +2137,7 @@ const SortableChip$1 = ({
2057
2137
  onResetTitle
2058
2138
  }) => {
2059
2139
  const [isEditing, setIsEditing] = useState(false);
2060
- const [editValue, setEditValue] = useState('');
2140
+ const [editValue, setEditValue] = useState("");
2061
2141
  const inputRef = useRef(null);
2062
2142
  const containerRef = useRef(null);
2063
2143
  const {
@@ -2074,9 +2154,9 @@ const SortableChip$1 = ({
2074
2154
  transform: CSS.Transform.toString(transform),
2075
2155
  transition,
2076
2156
  opacity: isDragging ? 0.5 : 1,
2077
- display: 'flex',
2078
- alignItems: 'center',
2079
- width: '100%'
2157
+ display: "flex",
2158
+ alignItems: "center",
2159
+ width: "100%"
2080
2160
  };
2081
2161
 
2082
2162
  // Focus input when entering edit mode
@@ -2095,9 +2175,9 @@ const SortableChip$1 = ({
2095
2175
  }
2096
2176
  };
2097
2177
  if (isEditing) {
2098
- document.addEventListener('mousedown', handleClickOutside);
2178
+ document.addEventListener("mousedown", handleClickOutside);
2099
2179
  return () => {
2100
- document.removeEventListener('mousedown', handleClickOutside);
2180
+ document.removeEventListener("mousedown", handleClickOutside);
2101
2181
  };
2102
2182
  }
2103
2183
  }, [isEditing]);
@@ -2105,9 +2185,9 @@ const SortableChip$1 = ({
2105
2185
  // Cycle through sort states: null -> 'asc' -> 'desc' -> null
2106
2186
  const handleSortToggle = () => {
2107
2187
  if (sortOrder === null) {
2108
- onSortOrderChange('asc');
2109
- } else if (sortOrder === 'asc') {
2110
- onSortOrderChange('desc');
2188
+ onSortOrderChange("asc");
2189
+ } else if (sortOrder === "asc") {
2190
+ onSortOrderChange("desc");
2111
2191
  } else {
2112
2192
  onSortOrderChange(null);
2113
2193
  }
@@ -2115,11 +2195,11 @@ const SortableChip$1 = ({
2115
2195
 
2116
2196
  // Determine which icon to show
2117
2197
  const getSortIcon = () => {
2118
- if (sortOrder === 'asc') {
2198
+ if (sortOrder === "asc") {
2119
2199
  return /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2120
2200
  fontSize: "small"
2121
2201
  });
2122
- } else if (sortOrder === 'desc') {
2202
+ } else if (sortOrder === "desc") {
2123
2203
  return /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2124
2204
  fontSize: "small"
2125
2205
  });
@@ -2138,7 +2218,7 @@ const SortableChip$1 = ({
2138
2218
  };
2139
2219
  const handleSave = () => {
2140
2220
  const trimmedValue = editValue.trim();
2141
- if (trimmedValue === '') {
2221
+ if (trimmedValue === "") {
2142
2222
  // Empty string validation - treat as cancel
2143
2223
  handleCancel();
2144
2224
  return;
@@ -2148,17 +2228,17 @@ const SortableChip$1 = ({
2148
2228
  };
2149
2229
  const handleCancel = () => {
2150
2230
  setIsEditing(false);
2151
- setEditValue('');
2231
+ setEditValue("");
2152
2232
  };
2153
2233
  const handleReset = () => {
2154
2234
  onResetTitle(fullPath);
2155
2235
  setIsEditing(false);
2156
- setEditValue('');
2236
+ setEditValue("");
2157
2237
  };
2158
2238
  const handleKeyDown = e => {
2159
- if (e.key === 'Enter') {
2239
+ if (e.key === "Enter") {
2160
2240
  handleSave();
2161
- } else if (e.key === 'Escape') {
2241
+ } else if (e.key === "Escape") {
2162
2242
  handleCancel();
2163
2243
  }
2164
2244
  };
@@ -2170,38 +2250,56 @@ const SortableChip$1 = ({
2170
2250
  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
2171
2251
  ref: containerRef,
2172
2252
  sx: {
2173
- display: 'flex',
2174
- alignItems: 'center',
2175
- width: '100%',
2176
- gap: 1
2253
+ display: "flex",
2254
+ alignItems: "center",
2255
+ width: "100%",
2256
+ gap: 1,
2257
+ backgroundColor: "white",
2258
+ border: "1px solid #e0e0e0",
2259
+ borderRadius: 2,
2260
+ padding: 1,
2261
+ transition: "transform 0.2s ease, box-shadow 0.2s ease",
2262
+ // smoother drag
2263
+ "&:hover .hover-icons": {
2264
+ opacity: 1 // show icons on hover
2265
+ }
2177
2266
  }
2178
2267
  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
2179
2268
  sx: {
2180
- display: 'flex',
2181
- alignItems: 'center',
2182
- cursor: 'grab',
2183
- '&:active': {
2184
- cursor: 'grabbing'
2269
+ display: "flex",
2270
+ alignItems: "center",
2271
+ cursor: "grab",
2272
+ "&:active": {
2273
+ cursor: "grabbing"
2185
2274
  }
2186
2275
  }
2187
2276
  }), /*#__PURE__*/React__default.createElement(DragIndicatorIcon, {
2188
2277
  sx: {
2189
- cursor: 'grab'
2278
+ cursor: "grab",
2279
+ color: "rgba(110, 110, 110, 0.62)"
2190
2280
  }
2191
- })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
2192
- title: fullLabel,
2193
- arrow: true,
2194
- placement: "top"
2195
- }, /*#__PURE__*/React__default.createElement(Chip, {
2196
- label: displayLabel,
2197
- onDelete: onDelete,
2198
- color: "primary",
2199
- variant: "outlined",
2281
+ })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
2200
2282
  sx: {
2201
- fontWeight: hasCustomTitle ? 'bold' : 'normal',
2202
- fontStyle: hasCustomTitle ? 'italic' : 'normal'
2283
+ flex: 1,
2284
+ minWidth: 0
2203
2285
  }
2204
- })), /*#__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, {
2205
2303
  title: "Edit title",
2206
2304
  arrow: true,
2207
2305
  placement: "top"
@@ -2211,16 +2309,59 @@ const SortableChip$1 = ({
2211
2309
  "aria-label": "edit title"
2212
2310
  }, /*#__PURE__*/React__default.createElement(EditIcon, {
2213
2311
  fontSize: "small"
2214
- })))) : /*#__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, {
2215
2349
  inputRef: inputRef,
2216
2350
  value: editValue,
2217
2351
  onChange: e => setEditValue(e.target.value),
2218
2352
  onKeyDown: handleKeyDown,
2219
2353
  size: "small",
2220
2354
  sx: {
2221
- width: '200px'
2355
+ flex: 1
2222
2356
  }
2223
- }), /*#__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, {
2224
2365
  title: "Save",
2225
2366
  arrow: true,
2226
2367
  placement: "top"
@@ -2252,39 +2393,7 @@ const SortableChip$1 = ({
2252
2393
  "aria-label": "reset title"
2253
2394
  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
2254
2395
  fontSize: "small"
2255
- })))), !isEditing && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
2256
- title: sortOrder === null ? 'No sort' : sortOrder === 'asc' ? 'Ascending' : 'Descending',
2257
- arrow: true,
2258
- placement: "top"
2259
- }, /*#__PURE__*/React__default.createElement(IconButton, {
2260
- size: "small",
2261
- onClick: handleSortToggle,
2262
- "aria-label": "toggle sort order",
2263
- color: sortOrder ? 'primary' : 'default'
2264
- }, getSortIcon())), /*#__PURE__*/React__default.createElement(Box$1, {
2265
- sx: {
2266
- flex: 1
2267
- }
2268
- }), /*#__PURE__*/React__default.createElement(Box$1, {
2269
- sx: {
2270
- display: 'flex',
2271
- gap: 0.5
2272
- }
2273
- }, /*#__PURE__*/React__default.createElement(IconButton, {
2274
- size: "small",
2275
- onClick: onMoveUp,
2276
- disabled: isFirst,
2277
- "aria-label": "move up"
2278
- }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2279
- fontSize: "small"
2280
- })), /*#__PURE__*/React__default.createElement(IconButton, {
2281
- size: "small",
2282
- onClick: onMoveDown,
2283
- disabled: isLast,
2284
- "aria-label": "move down"
2285
- }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2286
- fontSize: "small"
2287
- }))))));
2396
+ })))))));
2288
2397
  };
2289
2398
  const Dimensions = ({
2290
2399
  providersData,
@@ -2301,7 +2410,7 @@ const Dimensions = ({
2301
2410
  }) => {
2302
2411
  const [isAdding, setIsAdding] = useState(false);
2303
2412
  const [dimensionSelectionChain, setDimensionSelectionChain] = useState([]);
2304
- const [selectedDimension, setSelectedDimension] = useState('');
2413
+ const [selectedDimension, setSelectedDimension] = useState("");
2305
2414
 
2306
2415
  // Setup drag and drop sensors
2307
2416
  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
@@ -2392,7 +2501,7 @@ const Dimensions = ({
2392
2501
  const dimension = dimensionsForAlias[dimKey];
2393
2502
 
2394
2503
  // Construct the fullPath for this dimension
2395
- const fullPath = `${aliasPath.join('_')}.${dimKey}`;
2504
+ const fullPath = `${aliasPath.join("_")}.${dimKey}`;
2396
2505
 
2397
2506
  // Check if this dimension is already selected
2398
2507
  const isAlreadySelected = selectedFullPaths.has(fullPath);
@@ -2412,12 +2521,12 @@ const Dimensions = ({
2412
2521
  const handleAddClick = () => {
2413
2522
  setIsAdding(true);
2414
2523
  setDimensionSelectionChain([]);
2415
- setSelectedDimension('');
2524
+ setSelectedDimension("");
2416
2525
  };
2417
2526
  const handleCancel = () => {
2418
2527
  setIsAdding(false);
2419
2528
  setDimensionSelectionChain([]);
2420
- setSelectedDimension('');
2529
+ setSelectedDimension("");
2421
2530
  };
2422
2531
  const handleSave = () => {
2423
2532
  if (!selectedDimension) return;
@@ -2452,7 +2561,7 @@ const Dimensions = ({
2452
2561
  relations.forEach(rel => {
2453
2562
  aliasPath.push(rel.alias);
2454
2563
  });
2455
- const fullPath = `${aliasPath.join('_')}.${selectedItem.dimensionKey}`;
2564
+ const fullPath = `${aliasPath.join("_")}.${selectedItem.dimensionKey}`;
2456
2565
  const dimensionData = {
2457
2566
  // Complete dimension object from the final provider
2458
2567
  dimension: selectedItem.dimension,
@@ -2509,7 +2618,7 @@ const Dimensions = ({
2509
2618
 
2510
2619
  // Create dimension data for each available dimension
2511
2620
  availableItems.forEach(item => {
2512
- const fullPath = `${aliasPath.join('_')}.${item.dimensionKey}`;
2621
+ const fullPath = `${aliasPath.join("_")}.${item.dimensionKey}`;
2513
2622
  const dimensionData = {
2514
2623
  // Complete dimension object from the final provider
2515
2624
  dimension: item.dimension,
@@ -2533,53 +2642,74 @@ const Dimensions = ({
2533
2642
  if (dim.relationNames && dim.relationNames.length > 0) {
2534
2643
  pathParts.push(...dim.relationNames);
2535
2644
  }
2536
- return pathParts.join(' → ');
2645
+ return pathParts.join(" → ");
2537
2646
  };
2538
2647
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
2539
2648
  sx: {
2540
- display: 'flex',
2541
- alignItems: 'center',
2542
- gap: 2,
2543
- marginBottom: 2
2649
+ display: "flex",
2650
+ justifyContent: "flex-start",
2651
+ mb: 2
2544
2652
  }
2545
- }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
2653
+ }, !isAdding && /*#__PURE__*/React__default.createElement(Button, {
2546
2654
  variant: "contained",
2547
- onClick: handleAddClick
2548
- }, "Add Dimension") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
2549
- variant: "outlined",
2550
- onClick: handleCancel
2551
- }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
2552
- variant: "contained",
2553
- onClick: handleSave,
2554
- disabled: !selectedDimension
2555
- }, "Save Dimension"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
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,
2556
2673
  sx: {
2557
- padding: 3,
2558
- 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"
2559
2681
  }
2560
2682
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
2561
- variant: "h6",
2562
2683
  sx: {
2563
- 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
2564
2692
  }
2565
- }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
2693
+ }, /*#__PURE__*/React__default.createElement(ProviderSelection, {
2566
2694
  providersData: providersData,
2567
2695
  rootProvider: rootProvider,
2568
2696
  onSelectionChange: setDimensionSelectionChain,
2569
2697
  existingDimensions: savedDimensions,
2570
2698
  existingMetrics: existingMetrics,
2571
2699
  existingFilters: existingFilters
2572
- }), /*#__PURE__*/React__default.createElement(Typography$1, {
2573
- variant: "h6",
2700
+ })), /*#__PURE__*/React__default.createElement(Typography$1, {
2574
2701
  sx: {
2575
- marginTop: 3,
2576
- marginBottom: 2
2702
+ fontSize: "14px",
2703
+ fontWeight: 600,
2704
+ mb: 1.5,
2705
+ color: "rgb(37, 37, 37)"
2577
2706
  }
2578
2707
  }, "Select Dimension"), /*#__PURE__*/React__default.createElement(Box$1, {
2579
2708
  sx: {
2580
- display: 'flex',
2581
- alignItems: 'center',
2582
- gap: 1
2709
+ display: "flex",
2710
+ alignItems: "center",
2711
+ gap: 2,
2712
+ mb: 3
2583
2713
  }
2584
2714
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
2585
2715
  items: getDimensionItems(),
@@ -2587,27 +2717,91 @@ const Dimensions = ({
2587
2717
  label: "Choose Dimension",
2588
2718
  onChange: handleDimensionChange,
2589
2719
  sx: {
2590
- width: '400px'
2720
+ width: "400px",
2721
+ fontFamily: "system-ui"
2591
2722
  }
2592
2723
  }), /*#__PURE__*/React__default.createElement(Tooltip, {
2593
2724
  title: "Add all available dimensions",
2594
2725
  arrow: true,
2595
2726
  placement: "top"
2596
2727
  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton, {
2597
- color: "primary",
2598
2728
  onClick: handleAddAll,
2599
2729
  disabled: getDimensionItems().filter(item => !item.disabled).length === 0,
2600
- "aria-label": "add all dimensions"
2601
- }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null)))))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
2730
+ "aria-label": "add all dimensions",
2602
2731
  sx: {
2603
- marginTop: 3
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,
2772
+ sx: {
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
2604
2789
  }
2605
2790
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
2606
2791
  variant: "h6",
2607
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",
2608
2802
  marginBottom: 2
2609
2803
  }
2610
- }, "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, {
2611
2805
  sensors: sensors,
2612
2806
  collisionDetection: closestCenter,
2613
2807
  onDragEnd: handleDragEnd
@@ -2616,8 +2810,8 @@ const Dimensions = ({
2616
2810
  strategy: verticalListSortingStrategy
2617
2811
  }, /*#__PURE__*/React__default.createElement(Box$1, {
2618
2812
  sx: {
2619
- display: 'flex',
2620
- flexDirection: 'column',
2813
+ display: "flex",
2814
+ flexDirection: "column",
2621
2815
  gap: 1
2622
2816
  }
2623
2817
  }, savedDimensions.map((dim, index) => /*#__PURE__*/React__default.createElement(SortableChip$1, {
@@ -2739,57 +2933,109 @@ const SortableChip = ({
2739
2933
  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
2740
2934
  ref: containerRef,
2741
2935
  sx: {
2742
- display: 'flex',
2743
- alignItems: 'center',
2744
- width: '100%',
2745
- 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
+ }
2746
2949
  }
2747
2950
  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
2748
2951
  sx: {
2749
- display: 'flex',
2750
- alignItems: 'center',
2751
- cursor: 'grab',
2752
- '&:active': {
2753
- cursor: 'grabbing'
2952
+ display: "flex",
2953
+ alignItems: "center",
2954
+ cursor: "grab",
2955
+ "&:active": {
2956
+ cursor: "grabbing"
2754
2957
  }
2755
2958
  }
2756
2959
  }), /*#__PURE__*/React__default.createElement(DragIndicatorIcon, {
2757
2960
  sx: {
2758
- cursor: 'grab'
2961
+ cursor: "grab",
2962
+ color: "rgba(110, 110, 110, 0.62)"
2759
2963
  }
2760
- })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
2761
- title: fullLabel,
2762
- arrow: true,
2763
- placement: "top"
2764
- }, /*#__PURE__*/React__default.createElement(Chip, {
2765
- label: displayLabel,
2766
- onDelete: onDelete,
2767
- color: "secondary",
2768
- variant: "outlined",
2964
+ })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
2769
2965
  sx: {
2770
- fontWeight: hasCustomTitle ? 'bold' : 'normal',
2771
- fontStyle: hasCustomTitle ? 'italic' : 'normal'
2966
+ flex: 1,
2967
+ minWidth: 0
2772
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"
2773
3009
  })), /*#__PURE__*/React__default.createElement(Tooltip, {
2774
- title: "Edit title",
3010
+ title: "Delete",
2775
3011
  arrow: true,
2776
3012
  placement: "top"
2777
3013
  }, /*#__PURE__*/React__default.createElement(IconButton, {
2778
3014
  size: "small",
2779
- onClick: handleEditClick,
2780
- "aria-label": "edit title"
2781
- }, /*#__PURE__*/React__default.createElement(EditIcon, {
3015
+ onClick: onDelete,
3016
+ "aria-label": "delete",
3017
+ sx: {
3018
+ color: "#ef5350"
3019
+ }
3020
+ }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
2782
3021
  fontSize: "small"
2783
- })))) : /*#__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, {
2784
3023
  inputRef: inputRef,
2785
3024
  value: editValue,
2786
3025
  onChange: e => setEditValue(e.target.value),
2787
3026
  onKeyDown: handleKeyDown,
2788
3027
  size: "small",
2789
3028
  sx: {
2790
- width: '200px'
3029
+ flex: 1
2791
3030
  }
2792
- }), /*#__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, {
2793
3039
  title: "Save",
2794
3040
  arrow: true,
2795
3041
  placement: "top"
@@ -2821,30 +3067,7 @@ const SortableChip = ({
2821
3067
  "aria-label": "reset title"
2822
3068
  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
2823
3069
  fontSize: "small"
2824
- })))), !isEditing && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
2825
- sx: {
2826
- flex: 1
2827
- }
2828
- }), /*#__PURE__*/React__default.createElement(Box$1, {
2829
- sx: {
2830
- display: 'flex',
2831
- gap: 0.5
2832
- }
2833
- }, /*#__PURE__*/React__default.createElement(IconButton, {
2834
- size: "small",
2835
- onClick: onMoveUp,
2836
- disabled: isFirst,
2837
- "aria-label": "move up"
2838
- }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
2839
- fontSize: "small"
2840
- })), /*#__PURE__*/React__default.createElement(IconButton, {
2841
- size: "small",
2842
- onClick: onMoveDown,
2843
- disabled: isLast,
2844
- "aria-label": "move down"
2845
- }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
2846
- fontSize: "small"
2847
- }))))));
3070
+ })))))));
2848
3071
  };
2849
3072
  const Metrics = ({
2850
3073
  providersData,
@@ -3080,49 +3303,70 @@ const Metrics = ({
3080
3303
  };
3081
3304
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
3082
3305
  sx: {
3083
- display: 'flex',
3084
- alignItems: 'center',
3085
- gap: 2,
3086
- marginBottom: 2
3306
+ display: "flex",
3307
+ justifyContent: "flex-start",
3308
+ mb: 2
3087
3309
  }
3088
- }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
3310
+ }, !isAdding && /*#__PURE__*/React__default.createElement(Button, {
3089
3311
  variant: "contained",
3090
- onClick: handleAddClick
3091
- }, "Add Metric") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
3092
- variant: "outlined",
3093
- onClick: handleCancel
3094
- }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3095
- variant: "contained",
3096
- onClick: handleSave,
3097
- disabled: !selectedMetric
3098
- }, "Save Metric"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
3312
+ startIcon: /*#__PURE__*/React__default.createElement(GridAddIcon, null),
3313
+ onClick: handleAddClick,
3099
3314
  sx: {
3100
- padding: 3,
3101
- 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"
3102
3338
  }
3103
3339
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3104
- variant: "h6",
3105
3340
  sx: {
3106
- 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
3107
3349
  }
3108
- }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
3350
+ }, /*#__PURE__*/React__default.createElement(ProviderSelection, {
3109
3351
  providersData: providersData,
3110
3352
  rootProvider: rootProvider,
3111
3353
  onSelectionChange: setMetricSelectionChain,
3112
3354
  existingDimensions: existingDimensions,
3113
3355
  existingMetrics: savedMetrics,
3114
3356
  existingFilters: existingFilters
3115
- }), /*#__PURE__*/React__default.createElement(Typography$1, {
3116
- variant: "h6",
3357
+ })), /*#__PURE__*/React__default.createElement(Typography$1, {
3117
3358
  sx: {
3118
- marginTop: 3,
3119
- marginBottom: 2
3359
+ fontSize: "14px",
3360
+ fontWeight: 600,
3361
+ mb: 1.5,
3362
+ color: "rgb(37, 37, 37)"
3120
3363
  }
3121
3364
  }, "Select Metric"), /*#__PURE__*/React__default.createElement(Box$1, {
3122
3365
  sx: {
3123
3366
  display: 'flex',
3124
3367
  alignItems: 'center',
3125
- gap: 1
3368
+ gap: 2,
3369
+ mb: 3
3126
3370
  }
3127
3371
  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
3128
3372
  items: getMetricItems(),
@@ -3130,27 +3374,85 @@ const Metrics = ({
3130
3374
  label: "Choose Metric",
3131
3375
  onChange: handleMetricChange,
3132
3376
  sx: {
3133
- width: '400px'
3377
+ width: '400px',
3378
+ fontFamily: "system-ui"
3134
3379
  }
3135
3380
  }), /*#__PURE__*/React__default.createElement(Tooltip, {
3136
3381
  title: "Add all available metrics",
3137
3382
  arrow: true,
3138
3383
  placement: "top"
3139
3384
  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton, {
3140
- color: "primary",
3141
3385
  onClick: handleAddAll,
3142
3386
  disabled: getMetricItems().filter(item => !item.disabled).length === 0,
3143
- "aria-label": "add all metrics"
3144
- }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null)))))), savedMetrics.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
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, {
3145
3444
  sx: {
3146
- marginTop: 3
3445
+ marginTop: 0
3147
3446
  }
3148
3447
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3149
3448
  variant: "h6",
3150
3449
  sx: {
3151
- marginBottom: 2
3450
+ fontSize: "16px",
3451
+ fontWeight: 600,
3452
+ marginBottom: 1,
3453
+ color: "rgb(37, 37, 37)"
3152
3454
  }
3153
- }, "Saved Metrics (Drag to reorder or use arrows)"), /*#__PURE__*/React__default.createElement(DndContext, {
3455
+ }, "Saved Metrics"), /*#__PURE__*/React__default.createElement(DndContext, {
3154
3456
  sensors: sensors,
3155
3457
  collisionDetection: closestCenter,
3156
3458
  onDragEnd: handleDragEnd
@@ -3609,68 +3911,88 @@ const Filters = ({
3609
3911
  const filterEntries = Object.entries(savedFilters);
3610
3912
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
3611
3913
  sx: {
3612
- display: 'flex',
3613
- alignItems: 'center',
3614
- gap: 2,
3615
- marginBottom: 2
3914
+ display: "flex",
3915
+ justifyContent: "flex-start",
3916
+ mb: 2
3616
3917
  }
3617
- }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
3618
- variant: "contained",
3619
- onClick: handleAddClick
3620
- }, "Add Filter") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
3621
- variant: "outlined",
3622
- onClick: handleCancel
3623
- }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3918
+ }, !isAdding && /*#__PURE__*/React__default.createElement(Button, {
3624
3919
  variant: "contained",
3625
- onClick: handleSave,
3626
- disabled: (() => {
3627
- if (!selectedDimension) return true;
3628
- const dimensionItems = getDimensionItems();
3629
- const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
3630
- if (!selectedItem) return true;
3631
- const isDate = isDateDimension(selectedItem.dimension);
3632
- return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
3633
- })()
3634
- }, "Save Filter"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
3920
+ startIcon: /*#__PURE__*/React__default.createElement(GridAddIcon, null),
3921
+ onClick: handleAddClick,
3635
3922
  sx: {
3636
- padding: 3,
3637
- 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"
3638
3946
  }
3639
3947
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3640
- variant: "h6",
3641
3948
  sx: {
3642
- 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
3643
3957
  }
3644
- }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
3958
+ }, /*#__PURE__*/React__default.createElement(ProviderSelection, {
3645
3959
  providersData: providersData,
3646
3960
  rootProvider: rootProvider,
3647
3961
  onSelectionChange: setDimensionSelectionChain,
3648
3962
  existingDimensions: existingDimensions,
3649
3963
  existingMetrics: existingMetrics,
3650
3964
  existingFilters: savedFilters
3651
- }), /*#__PURE__*/React__default.createElement(Typography$1, {
3652
- variant: "h6",
3965
+ })), /*#__PURE__*/React__default.createElement(Typography$1, {
3653
3966
  sx: {
3654
- marginTop: 3,
3655
- 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
3656
3975
  }
3657
- }, "Select Dimension for Filter"), /*#__PURE__*/React__default.createElement(SingleSelect, {
3976
+ }, /*#__PURE__*/React__default.createElement(SingleSelect, {
3658
3977
  items: getDimensionItems(),
3659
3978
  value: selectedDimension,
3660
3979
  label: "Choose Dimension",
3661
3980
  onChange: handleDimensionChange,
3662
3981
  sx: {
3663
- width: '400px'
3982
+ width: '400px',
3983
+ fontFamily: "system-ui"
3664
3984
  }
3665
- }), selectedDimension && (() => {
3985
+ })), selectedDimension && (() => {
3666
3986
  const dimensionItems = getDimensionItems();
3667
3987
  const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
3668
3988
  const isDate = selectedItem && isDateDimension(selectedItem.dimension);
3669
3989
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
3670
- variant: "h6",
3671
3990
  sx: {
3672
- marginTop: 3,
3673
- marginBottom: 2
3991
+ fontSize: "14px",
3992
+ fontWeight: 600,
3993
+ mb: 1.5,
3994
+ mt: 3,
3995
+ color: "rgb(37, 37, 37)"
3674
3996
  }
3675
3997
  }, isDate ? 'Select Date Range' : 'Select Filter Values'), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
3676
3998
  dateAdapter: AdapterDayjs
@@ -3719,20 +4041,73 @@ const Filters = ({
3719
4041
  loading: loadingFilterValues,
3720
4042
  helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value'
3721
4043
  })));
3722
- })()), 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, {
3723
4095
  sx: {
3724
- marginTop: 3
4096
+ marginTop: 0
3725
4097
  }
3726
4098
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3727
4099
  variant: "h6",
3728
4100
  sx: {
3729
- marginBottom: 2
4101
+ fontSize: "16px",
4102
+ fontWeight: 600,
4103
+ marginBottom: 1,
4104
+ color: "rgb(37, 37, 37)"
3730
4105
  }
3731
4106
  }, "Saved Filters"), /*#__PURE__*/React__default.createElement(Box$1, {
3732
4107
  sx: {
3733
4108
  display: 'flex',
3734
4109
  flexDirection: 'column',
3735
- gap: 2
4110
+ gap: 1
3736
4111
  }
3737
4112
  }, filterEntries.map(([fullPath, filter]) => {
3738
4113
  const isDate = isDateDimension(filter.dimension);
@@ -3740,7 +4115,7 @@ const Filters = ({
3740
4115
  const isEditingTitle = editingTitlePath === fullPath;
3741
4116
 
3742
4117
  // Format display values based on filter type
3743
- let valueCount, valuesList, badgeContent;
4118
+ let valueCount, valuesList;
3744
4119
  if (isDate && filter.values && typeof filter.values === 'object' && !Array.isArray(filter.values)) {
3745
4120
  // Date range filter - handle cases where only one date is provided
3746
4121
  if (filter.values.gte && filter.values.lte) {
@@ -3752,47 +4127,77 @@ const Filters = ({
3752
4127
  } else {
3753
4128
  valuesList = 'No dates';
3754
4129
  }
3755
- badgeContent = '📅'; // Calendar emoji for date filters
3756
4130
  } else {
3757
4131
  // Regular filter
3758
4132
  valueCount = filter.values?.length || 0;
3759
4133
  valuesList = filter.values?.join(', ') || 'No values';
3760
- badgeContent = valueCount;
3761
4134
  }
3762
4135
  const displayLabel = titleOverrides[fullPath] || filter.dimensionTitle;
3763
4136
  const hasCustomTitle = !!titleOverrides[fullPath];
3764
4137
  return /*#__PURE__*/React__default.createElement(Box$1, {
3765
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
+ }
3766
4159
  }, /*#__PURE__*/React__default.createElement(Box$1, {
3767
4160
  sx: {
3768
4161
  display: 'flex',
3769
4162
  alignItems: 'center',
3770
- gap: 1,
3771
- 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"
3772
4172
  }
3773
- }, !isEditingTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
4173
+ }, displayLabel), /*#__PURE__*/React__default.createElement(Tooltip, {
3774
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)),
3775
4175
  arrow: true,
3776
4176
  placement: "top"
3777
- }, /*#__PURE__*/React__default.createElement(Badge, {
3778
- badgeContent: badgeContent,
3779
- color: "secondary"
3780
4177
  }, /*#__PURE__*/React__default.createElement(Chip, {
3781
- label: displayLabel,
3782
- onDelete: () => onRemoveFilter(fullPath),
3783
- color: "secondary",
4178
+ size: "small",
4179
+ label: isDate ? valuesList : `${valueCount} values`,
4180
+ color: "default",
3784
4181
  variant: "outlined",
3785
4182
  sx: {
3786
- fontWeight: hasCustomTitle ? 'bold' : 'normal',
3787
- fontStyle: hasCustomTitle ? 'italic' : 'normal'
4183
+ marginLeft: 1,
4184
+ height: '20px',
4185
+ fontSize: '14px'
3788
4186
  }
3789
- }))), /*#__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, {
3790
4196
  title: "Rename filter",
3791
4197
  arrow: true
3792
4198
  }, /*#__PURE__*/React__default.createElement(IconButton, {
3793
4199
  size: "small",
3794
4200
  onClick: () => handleStartEditTitle(fullPath, filter.dimensionTitle),
3795
- color: "primary",
3796
4201
  disabled: isEditing
3797
4202
  }, /*#__PURE__*/React__default.createElement(EditIcon, {
3798
4203
  fontSize: "small"
@@ -3802,11 +4207,21 @@ const Filters = ({
3802
4207
  }, /*#__PURE__*/React__default.createElement(IconButton, {
3803
4208
  size: "small",
3804
4209
  onClick: () => handleEditFilter(fullPath, filter),
3805
- color: "primary",
3806
4210
  disabled: isEditing
3807
4211
  }, /*#__PURE__*/React__default.createElement(FilterAltIcon, {
3808
4212
  fontSize: "small"
3809
- })))) : /*#__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, {
3810
4225
  value: editTitleValue,
3811
4226
  onChange: e => setEditTitleValue(e.target.value),
3812
4227
  onKeyDown: e => handleKeyDown(e, fullPath),
@@ -3814,9 +4229,14 @@ const Filters = ({
3814
4229
  autoFocus: true,
3815
4230
  placeholder: "Enter custom title",
3816
4231
  sx: {
3817
- width: '300px'
4232
+ flex: 1
4233
+ }
4234
+ }), /*#__PURE__*/React__default.createElement(Box$1, {
4235
+ sx: {
4236
+ display: "flex",
4237
+ gap: 0.5
3818
4238
  }
3819
- }), /*#__PURE__*/React__default.createElement(Tooltip, {
4239
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
3820
4240
  title: "Save",
3821
4241
  arrow: true
3822
4242
  }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -3830,8 +4250,7 @@ const Filters = ({
3830
4250
  arrow: true
3831
4251
  }, /*#__PURE__*/React__default.createElement(IconButton, {
3832
4252
  size: "small",
3833
- onClick: handleCancelEditTitle,
3834
- color: "default"
4253
+ onClick: handleCancelEditTitle
3835
4254
  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
3836
4255
  fontSize: "small"
3837
4256
  }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -3843,17 +4262,23 @@ const Filters = ({
3843
4262
  color: "warning"
3844
4263
  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
3845
4264
  fontSize: "small"
3846
- }))))), isEditing && /*#__PURE__*/React__default.createElement(Paper$1, {
4265
+ })))))), isEditing && /*#__PURE__*/React__default.createElement(Paper$1, {
4266
+ elevation: 0,
3847
4267
  sx: {
3848
- padding: 2,
3849
- marginLeft: 2
4268
+ p: 2,
4269
+ mt: 1,
4270
+ ml: 2,
4271
+ border: "1px solid #e0e0e0",
4272
+ borderRadius: "8px",
4273
+ backgroundColor: "#fafafa"
3850
4274
  }
3851
4275
  }, /*#__PURE__*/React__default.createElement(Typography$1, {
3852
4276
  variant: "subtitle2",
3853
4277
  sx: {
3854
- marginBottom: 1
4278
+ marginBottom: 1.5,
4279
+ fontWeight: 600
3855
4280
  }
3856
- }, "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, {
3857
4282
  dateAdapter: AdapterDayjs
3858
4283
  }, /*#__PURE__*/React__default.createElement(Box$1, {
3859
4284
  sx: {
@@ -3904,17 +4329,32 @@ const Filters = ({
3904
4329
  })), /*#__PURE__*/React__default.createElement(Box$1, {
3905
4330
  sx: {
3906
4331
  display: 'flex',
3907
- gap: 1
4332
+ gap: 1,
4333
+ justifyContent: 'flex-end'
3908
4334
  }
3909
4335
  }, /*#__PURE__*/React__default.createElement(Button, {
3910
4336
  variant: "outlined",
3911
4337
  size: "small",
3912
- onClick: handleCancelEdit
4338
+ onClick: handleCancelEdit,
4339
+ sx: {
4340
+ textTransform: 'none',
4341
+ borderRadius: '6px'
4342
+ }
3913
4343
  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
3914
4344
  variant: "contained",
3915
4345
  size: "small",
3916
4346
  onClick: () => handleSaveEditedFilter(fullPath),
3917
- 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
+ }
3918
4358
  }, "Save Changes"))));
3919
4359
  }))));
3920
4360
  };
@@ -4124,8 +4564,8 @@ const ReportBuilder = ({
4124
4564
  const notify = useNotify();
4125
4565
  const reportingContext = useReportingContextOptional();
4126
4566
  const [providersData, setProvidersData] = useState(null);
4127
- const [selectedProvider, setSelectedProvider] = useState('');
4128
- const [reportTitle, setReportTitle] = useState('');
4567
+ const [selectedProvider, setSelectedProvider] = useState("");
4568
+ const [reportTitle, setReportTitle] = useState("");
4129
4569
  const [report, setReport] = useState({
4130
4570
  dimensions: [],
4131
4571
  metrics: [],
@@ -4179,8 +4619,8 @@ const ReportBuilder = ({
4179
4619
  const reconstructDimensionFromPath = (fullPath, providersData, rootProvider) => {
4180
4620
  try {
4181
4621
  // Parse: "ft_sa_db_pc.legal_name" -> ["ft", "sa", "db", "pc"], "legal_name"
4182
- const [aliasPath, fieldKey] = fullPath.split('.');
4183
- const aliases = aliasPath.split('_');
4622
+ const [aliasPath, fieldKey] = fullPath.split(".");
4623
+ const aliases = aliasPath.split("_");
4184
4624
 
4185
4625
  // Walk the chain to build relations array
4186
4626
  let currentProvider = rootProvider;
@@ -4244,8 +4684,8 @@ const ReportBuilder = ({
4244
4684
  const reconstructMetricFromPath = (fullPath, providersData, rootProvider) => {
4245
4685
  try {
4246
4686
  // Parse: "ft_sa.financing_internal" -> ["ft", "sa"], "financing_internal"
4247
- const [aliasPath, metricName] = fullPath.split('.');
4248
- const aliases = aliasPath.split('_');
4687
+ const [aliasPath, metricName] = fullPath.split(".");
4688
+ const aliases = aliasPath.split("_");
4249
4689
 
4250
4690
  // Walk the chain to build relations array
4251
4691
  let currentProvider = rootProvider;
@@ -4303,17 +4743,17 @@ const ReportBuilder = ({
4303
4743
  };
4304
4744
  const loadReportDefinition = async id => {
4305
4745
  try {
4306
- console.log('Loading report definition:', id);
4746
+ console.log("Loading report definition:", id);
4307
4747
  const reportDef = await Api.getReportDefinition({
4308
4748
  id
4309
4749
  });
4310
- console.log('Loaded report definition:', reportDef);
4750
+ console.log("Loaded report definition:", reportDef);
4311
4751
 
4312
4752
  // Set the provider
4313
4753
  setSelectedProvider(reportDef.provider);
4314
4754
 
4315
4755
  // Set the title
4316
- setReportTitle(reportDef.title || '');
4756
+ setReportTitle(reportDef.title || "");
4317
4757
 
4318
4758
  // Reconstruct dimensions
4319
4759
  const reconstructedDimensions = [];
@@ -4323,9 +4763,9 @@ const ReportBuilder = ({
4323
4763
  if (reportDef.definition?.doc?.query?.order_by) {
4324
4764
  for (const orderItem of reportDef.definition.doc.query.order_by) {
4325
4765
  if (orderItem.desc === true) {
4326
- orderByMap[orderItem.name] = 'desc';
4766
+ orderByMap[orderItem.name] = "desc";
4327
4767
  } else {
4328
- orderByMap[orderItem.name] = 'asc';
4768
+ orderByMap[orderItem.name] = "asc";
4329
4769
  }
4330
4770
  }
4331
4771
  }
@@ -4405,26 +4845,26 @@ const ReportBuilder = ({
4405
4845
 
4406
4846
  // Mark report as loaded
4407
4847
  setReportLoaded(true);
4408
- console.log('Reconstructed report:', {
4848
+ console.log("Reconstructed report:", {
4409
4849
  dimensions: reconstructedDimensions,
4410
4850
  metrics: reconstructedMetrics,
4411
4851
  filters: loadedFilters,
4412
4852
  titleOverrides: loadedTitleOverrides
4413
4853
  });
4414
4854
  } catch (error) {
4415
- console.error('Error loading report definition:', error);
4416
- 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"));
4417
4857
  }
4418
4858
  };
4419
4859
  const loadClonedReport = reportDef => {
4420
4860
  try {
4421
- console.log('Loading cloned report:', reportDef);
4861
+ console.log("Loading cloned report:", reportDef);
4422
4862
 
4423
4863
  // Set the provider
4424
4864
  setSelectedProvider(reportDef.provider);
4425
4865
 
4426
4866
  // Set the title (already modified with " (Copy)" suffix)
4427
- setReportTitle(reportDef.title || '');
4867
+ setReportTitle(reportDef.title || "");
4428
4868
 
4429
4869
  // Reconstruct dimensions
4430
4870
  const reconstructedDimensions = [];
@@ -4434,9 +4874,9 @@ const ReportBuilder = ({
4434
4874
  if (reportDef.definition?.doc?.query?.order_by) {
4435
4875
  for (const orderItem of reportDef.definition.doc.query.order_by) {
4436
4876
  if (orderItem.desc === true) {
4437
- orderByMap[orderItem.name] = 'desc';
4877
+ orderByMap[orderItem.name] = "desc";
4438
4878
  } else {
4439
- orderByMap[orderItem.name] = 'asc';
4879
+ orderByMap[orderItem.name] = "asc";
4440
4880
  }
4441
4881
  }
4442
4882
  }
@@ -4512,15 +4952,15 @@ const ReportBuilder = ({
4512
4952
 
4513
4953
  // Set title overrides
4514
4954
  setTitleOverrides(loadedTitleOverrides);
4515
- console.log('Loaded cloned report:', {
4955
+ console.log("Loaded cloned report:", {
4516
4956
  dimensions: reconstructedDimensions,
4517
4957
  metrics: reconstructedMetrics,
4518
4958
  filters: loadedFilters,
4519
4959
  titleOverrides: loadedTitleOverrides
4520
4960
  });
4521
4961
  } catch (error) {
4522
- console.error('Error loading cloned report:', error);
4523
- 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"));
4524
4964
  }
4525
4965
  };
4526
4966
 
@@ -4547,7 +4987,7 @@ const ReportBuilder = ({
4547
4987
  metrics: {},
4548
4988
  filters: {}
4549
4989
  });
4550
- console.log('Selected root provider:', event.target.value);
4990
+ console.log("Selected root provider:", event.target.value);
4551
4991
  };
4552
4992
  const handleUpdateDimensionTitle = (fullPath, customTitle) => {
4553
4993
  setTitleOverrides(prev => ({
@@ -4618,8 +5058,8 @@ const ReportBuilder = ({
4618
5058
  ...prev,
4619
5059
  dimensions: [...prev.dimensions, dimensionData]
4620
5060
  };
4621
- console.log('Dimension saved:', dimensionData);
4622
- console.log('Complete report:', newReport);
5061
+ console.log("Dimension saved:", dimensionData);
5062
+ console.log("Complete report:", newReport);
4623
5063
  return newReport;
4624
5064
  });
4625
5065
  };
@@ -4641,8 +5081,8 @@ const ReportBuilder = ({
4641
5081
  ...prev,
4642
5082
  metrics: [...prev.metrics, metricData]
4643
5083
  };
4644
- console.log('Metric saved:', metricData);
4645
- console.log('Complete report:', newReport);
5084
+ console.log("Metric saved:", metricData);
5085
+ console.log("Complete report:", newReport);
4646
5086
  return newReport;
4647
5087
  });
4648
5088
  };
@@ -4667,11 +5107,11 @@ const ReportBuilder = ({
4667
5107
  [fullPath]: filterData
4668
5108
  }
4669
5109
  };
4670
- console.log('Filter saved:', {
5110
+ console.log("Filter saved:", {
4671
5111
  fullPath,
4672
5112
  filterData
4673
5113
  });
4674
- console.log('Complete report:', newReport);
5114
+ console.log("Complete report:", newReport);
4675
5115
  return newReport;
4676
5116
  });
4677
5117
  };
@@ -4695,7 +5135,7 @@ const ReportBuilder = ({
4695
5135
  const orderItem = {
4696
5136
  name: dim.fullPath
4697
5137
  };
4698
- if (dim.sortOrder === 'desc') {
5138
+ if (dim.sortOrder === "desc") {
4699
5139
  orderItem.desc = true;
4700
5140
  }
4701
5141
  // For 'asc' or null, just include { name: fullPath } without desc property
@@ -4720,7 +5160,7 @@ const ReportBuilder = ({
4720
5160
  [fullPath]: filterData.values
4721
5161
  });
4722
5162
  }
4723
- } else if (typeof filterData.values === 'object') {
5163
+ } else if (typeof filterData.values === "object") {
4724
5164
  // Date range filter - add the object as-is
4725
5165
  conditions.push({
4726
5166
  [fullPath]: filterData.values
@@ -4780,11 +5220,11 @@ const ReportBuilder = ({
4780
5220
  try {
4781
5221
  setLoading(true);
4782
5222
  const apiReport = convertReportToApiFormat(page, size);
4783
- console.log('Running report with:', apiReport);
5223
+ console.log("Running report with:", apiReport);
4784
5224
  const result = await Api.runAdHocReport({
4785
5225
  report: apiReport
4786
5226
  });
4787
- console.log('Report result:', result);
5227
+ console.log("Report result:", result);
4788
5228
  setReportData(result);
4789
5229
  // Note: The API should ideally return total count, but for now we'll use the result length
4790
5230
  // If the API returns fewer rows than the limit, we know we're at the end
@@ -4795,8 +5235,8 @@ const ReportBuilder = ({
4795
5235
  setTotalRows((page + 2) * size);
4796
5236
  }
4797
5237
  } catch (error) {
4798
- console.error('Error running report:', error);
4799
- 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"));
4800
5240
  setReportData(null);
4801
5241
  } finally {
4802
5242
  setLoading(false);
@@ -4812,20 +5252,20 @@ const ReportBuilder = ({
4812
5252
  try {
4813
5253
  setLoading(true);
4814
5254
  const apiReport = convertReportToApiFormat();
4815
- console.log('Downloading report with:', apiReport);
5255
+ console.log("Downloading report with:", apiReport);
4816
5256
 
4817
5257
  // Generate filename from report title and current date
4818
- const date = new Date().toISOString().split('T')[0]; // Format: YYYY-MM-DD
4819
- const sanitizedTitle = (reportTitle || 'report').replace(/[^a-z0-9]/gi, '_').toLowerCase();
5258
+ const date = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
5259
+ const sanitizedTitle = (reportTitle || "report").replace(/[^a-z0-9]/gi, "_").toLowerCase();
4820
5260
  const filename = `${sanitizedTitle}_${date}.csv`;
4821
5261
  await Api.downloadAdHocReport({
4822
5262
  report: apiReport,
4823
5263
  filename
4824
5264
  });
4825
- notify.success('Report downloaded successfully!');
5265
+ notify.success("Report downloaded successfully!");
4826
5266
  } catch (error) {
4827
- console.error('Error downloading report:', error);
4828
- 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"));
4829
5269
  } finally {
4830
5270
  setLoading(false);
4831
5271
  }
@@ -4843,15 +5283,15 @@ const ReportBuilder = ({
4843
5283
  };
4844
5284
  const handleSaveReport = async () => {
4845
5285
  if (!selectedProvider) {
4846
- notify.warning('Please select a provider first');
5286
+ notify.warning("Please select a provider first");
4847
5287
  return;
4848
5288
  }
4849
5289
  if (!reportTitle.trim()) {
4850
- notify.warning('Please enter a report title');
5290
+ notify.warning("Please enter a report title");
4851
5291
  return;
4852
5292
  }
4853
5293
  if (report.dimensions.length === 0 && report.metrics.length === 0) {
4854
- notify.warning('Please add at least one dimension or metric');
5294
+ notify.warning("Please add at least one dimension or metric");
4855
5295
  return;
4856
5296
  }
4857
5297
  try {
@@ -4862,7 +5302,7 @@ const ReportBuilder = ({
4862
5302
  const orderItem = {
4863
5303
  name: dim.fullPath
4864
5304
  };
4865
- if (dim.sortOrder === 'desc') {
5305
+ if (dim.sortOrder === "desc") {
4866
5306
  orderItem.desc = true;
4867
5307
  }
4868
5308
  // For 'asc' or null, just include { name: fullPath } without desc property
@@ -4905,7 +5345,7 @@ const ReportBuilder = ({
4905
5345
  [fullPath]: filterData.values
4906
5346
  });
4907
5347
  }
4908
- } else if (typeof filterData.values === 'object') {
5348
+ } else if (typeof filterData.values === "object") {
4909
5349
  // Date range filter - add the object as-is
4910
5350
  conditions.push({
4911
5351
  [fullPath]: filterData.values
@@ -4935,20 +5375,20 @@ const ReportBuilder = ({
4935
5375
  }
4936
5376
  }
4937
5377
  };
4938
- console.log('Saving report definition:', payload);
5378
+ console.log("Saving report definition:", payload);
4939
5379
  if (reportDefinitionId) {
4940
5380
  // Update existing report definition
4941
5381
  await Api.updateReportDefinition({
4942
5382
  id: reportDefinitionId,
4943
5383
  reportDefinition: payload
4944
5384
  });
4945
- notify.success('Report definition updated successfully!');
5385
+ notify.success("Report definition updated successfully!");
4946
5386
  } else {
4947
5387
  // Create new report definition
4948
5388
  await Api.createReportDefinition({
4949
5389
  reportDefinition: payload
4950
5390
  });
4951
- notify.success('Report definition created successfully!');
5391
+ notify.success("Report definition created successfully!");
4952
5392
  }
4953
5393
 
4954
5394
  // Navigate back to list
@@ -4956,8 +5396,8 @@ const ReportBuilder = ({
4956
5396
  onBackToList();
4957
5397
  }
4958
5398
  } catch (error) {
4959
- console.error('Error saving report definition:', error);
4960
- 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"));
4961
5401
  } finally {
4962
5402
  setSaving(false);
4963
5403
  }
@@ -4965,121 +5405,273 @@ const ReportBuilder = ({
4965
5405
  const canSaveReport = selectedProvider && reportTitle.trim() && (report.dimensions.length > 0 || report.metrics.length > 0);
4966
5406
  return /*#__PURE__*/React__default.createElement(Box$1, {
4967
5407
  sx: {
4968
- p: 3
5408
+ p: 3,
5409
+ fontFamily: "system-ui"
4969
5410
  }
4970
5411
  }, /*#__PURE__*/React__default.createElement(Box$1, {
4971
5412
  sx: {
4972
- display: 'flex',
4973
- justifyContent: 'space-between',
4974
- alignItems: 'center',
4975
- mb: 2
5413
+ display: "flex",
5414
+ justifyContent: "space-between",
5415
+ alignItems: "center",
5416
+ mb: 2,
5417
+ backgroundColor: "transparent",
5418
+ fontFamily: "system-ui"
4976
5419
  }
4977
- }, /*#__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, {
4978
5421
  variant: "outlined",
4979
5422
  startIcon: /*#__PURE__*/React__default.createElement(ArrowBackIcon, null),
4980
5423
  onClick: onBackToList
4981
5424
  }, "Back to List")), /*#__PURE__*/React__default.createElement(Box$1, {
4982
5425
  sx: {
4983
5426
  mt: 2,
4984
- display: 'flex',
4985
- gap: 2,
4986
- alignItems: 'flex-start',
4987
- 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)"
4988
5450
  }
4989
- }, /*#__PURE__*/React__default.createElement(TextField, {
4990
- label: "Report Title",
5451
+ }, "Report Title"), /*#__PURE__*/React__default.createElement(TextField, {
4991
5452
  value: reportTitle,
4992
5453
  onChange: e => setReportTitle(e.target.value),
4993
5454
  placeholder: "Enter report title",
4994
5455
  sx: {
4995
- width: '300px'
5456
+ width: "400px",
5457
+ fontFamily: "system-ui",
5458
+ "& .MuiOutlinedInput-root": {
5459
+ backgroundColor: "white",
5460
+ borderRadius: "8px"
5461
+ }
4996
5462
  },
4997
5463
  size: "small"
4998
- }), /*#__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, {
4999
5472
  items: getProviderItems(),
5000
5473
  value: selectedProvider,
5001
- label: "Select Root Provider",
5002
5474
  onChange: handleProviderChange,
5003
5475
  sx: {
5004
- width: '300px'
5476
+ width: "300px",
5477
+ fontFamily: "system-ui"
5005
5478
  },
5006
5479
  disabled: !!reportDefinitionId
5007
- }), /*#__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, {
5008
5487
  variant: "contained",
5009
5488
  onClick: handleRunReport,
5010
5489
  disabled: !canRunReport,
5490
+ startIcon: /*#__PURE__*/React__default.createElement(PlayArrowIcon, null),
5011
5491
  sx: {
5012
- 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
+ }
5013
5505
  }
5014
5506
  }, "Run Report"), /*#__PURE__*/React__default.createElement(Button, {
5015
- variant: "contained",
5016
- color: "secondary",
5507
+ variant: "outlined",
5017
5508
  startIcon: /*#__PURE__*/React__default.createElement(DownloadIcon, null),
5018
5509
  onClick: handleDownloadReport,
5019
5510
  disabled: !canRunReport || loading,
5020
5511
  sx: {
5021
- 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
+ }
5022
5526
  }
5023
5527
  }, "Download CSV"), /*#__PURE__*/React__default.createElement(Button, {
5024
- variant: "contained",
5025
- color: "success",
5528
+ variant: "outlined",
5026
5529
  startIcon: /*#__PURE__*/React__default.createElement(SaveIcon, null),
5027
5530
  onClick: handleSaveReport,
5028
5531
  disabled: !canSaveReport || saving,
5029
5532
  sx: {
5030
- 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
+ }
5031
5547
  }
5032
- }, 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, {
5033
5549
  sx: {
5034
- mt: 4
5550
+ mt: 2,
5551
+ fontFamily: "system-ui",
5552
+ backgroundColor: "white",
5553
+ px: 3,
5554
+ py: 2,
5555
+ borderRadius: "8px"
5035
5556
  }
5036
5557
  }, /*#__PURE__*/React__default.createElement(Box$1, {
5037
5558
  sx: {
5038
5559
  borderBottom: 1,
5039
- borderColor: 'divider'
5560
+ borderColor: "rgba(70, 134, 127, 0.27)"
5040
5561
  }
5041
5562
  }, /*#__PURE__*/React__default.createElement(Tabs, {
5042
5563
  value: activeTab,
5043
5564
  onChange: handleTabChange,
5044
- "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
+ }
5045
5576
  }, /*#__PURE__*/React__default.createElement(Tab, {
5046
5577
  label: /*#__PURE__*/React__default.createElement(Badge, {
5047
5578
  badgeContent: report.dimensions.length,
5048
- 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
+ }
5049
5586
  }, /*#__PURE__*/React__default.createElement("span", {
5050
5587
  style: {
5051
- marginRight: report.dimensions.length > 0 ? '12px' : '0'
5588
+ marginRight: report.dimensions.length > 0 ? "12px" : "0"
5052
5589
  }
5053
5590
  }, "Dimensions")),
5054
5591
  id: "report-tab-0",
5055
- "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
+ }
5056
5605
  }), /*#__PURE__*/React__default.createElement(Tab, {
5057
5606
  label: /*#__PURE__*/React__default.createElement(Badge, {
5058
5607
  badgeContent: report.metrics.length,
5059
- color: "primary"
5608
+ sx: {
5609
+ "& .MuiBadge-badge": {
5610
+ backgroundColor: "rgb(70, 134, 128)",
5611
+ color: "#fff"
5612
+ }
5613
+ }
5060
5614
  }, /*#__PURE__*/React__default.createElement("span", {
5061
5615
  style: {
5062
- marginRight: report.metrics.length > 0 ? '12px' : '0'
5616
+ marginRight: report.metrics.length > 0 ? "12px" : "0"
5063
5617
  }
5064
5618
  }, "Metrics")),
5065
5619
  id: "report-tab-1",
5066
- "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
+ }
5067
5632
  }), /*#__PURE__*/React__default.createElement(Tab, {
5068
5633
  label: /*#__PURE__*/React__default.createElement(Badge, {
5069
5634
  badgeContent: Object.keys(report.filters).length,
5070
- color: "secondary"
5635
+ sx: {
5636
+ "& .MuiBadge-badge": {
5637
+ backgroundColor: "rgb(70, 134, 128)",
5638
+ color: "#fff"
5639
+ }
5640
+ }
5071
5641
  }, /*#__PURE__*/React__default.createElement("span", {
5072
5642
  style: {
5073
- marginRight: Object.keys(report.filters).length > 0 ? '12px' : '0'
5643
+ marginRight: Object.keys(report.filters).length > 0 ? "12px" : "0"
5074
5644
  }
5075
5645
  }, "Filters")),
5076
5646
  id: "report-tab-2",
5077
- "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
+ }
5078
5659
  }), /*#__PURE__*/React__default.createElement(Tab, {
5079
5660
  label: reportData ? "Results" : "Results (Run report first)",
5080
5661
  id: "report-tab-3",
5081
5662
  "aria-controls": "report-tabpanel-3",
5082
- 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
+ }
5083
5675
  }))), /*#__PURE__*/React__default.createElement(TabPanel, {
5084
5676
  value: activeTab,
5085
5677
  index: 0
@@ -5213,7 +5805,29 @@ const ReportApp = ({
5213
5805
  return /*#__PURE__*/React__default.createElement(NotifyProvider, null, /*#__PURE__*/React__default.createElement(ReportingProvider, {
5214
5806
  defaultParameters: params,
5215
5807
  defaultApi: api
5216
- }, /*#__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))));
5217
5831
  };
5218
5832
 
5219
5833
  var index = {