@bygd/nc-report-ui 0.1.19 → 0.1.21

package/dist/default/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useEffect, useMemo, useState, useRef } from 'react';
+import React__default, { useEffect, useMemo, useState, useRef, createContext, useContext } from 'react';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
 import { CircularProgress } from '@material-ui/core';
@@ -12,7 +12,7 @@ import FormControl$2 from '@material-ui/core/FormControl';
 import Select$1 from '@material-ui/core/Select';
 import MenuItem$1 from '@material-ui/core/MenuItem';
 import { useInView } from 'react-intersection-observer';
-import { FormControl, Autocomplete, TextField, CircularProgress as CircularProgress$1, Chip, Checkbox, FormHelperText } from '@mui/material';
+import { FormControl, Autocomplete, TextField, CircularProgress as CircularProgress$1, Chip, Checkbox, FormHelperText, Snackbar, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Box as Box$1, Typography as Typography$1, Tooltip, IconButton, Paper as Paper$1, Badge, Tabs, Tab } from '@mui/material';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Box from '@mui/material/Box';
@@ -23,6 +23,31 @@ import Select from '@mui/material/Select';
 import EventEmitter from 'eventemitter3';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
+import { DataGrid } from '@mui/x-data-grid';
+import AddIcon from '@mui/icons-material/Add';
+import EditIcon from '@mui/icons-material/Edit';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteIcon from '@mui/icons-material/Delete';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import SaveIcon from '@mui/icons-material/Save';
+import DownloadIcon from '@mui/icons-material/Download';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import SortIcon from '@mui/icons-material/Sort';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -280,6 +305,43 @@ const Api = {
     } = await apiClient.post(`/report-build/run`, report);
     return data;
   },
+  /**
+   * Download ad-hoc report as CSV
+   * @param {Object} params - Parameters object
+   * @param {Object} params.report - Report definition object containing dimensions, metrics, etc.
+   * @param {string} [params.filename] - Optional filename for the downloaded file
+   * @returns {Promise} Downloads CSV file
+   */
+  downloadAdHocReport: async ({
+    report,
+    filename
+  }) => {
+    const response = await apiClient.post(`/report-build/run?download=csv`, report, {
+      responseType: 'blob'
+    });
+
+    // Create a download link and trigger download
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+
+    // Use provided filename, or extract from Content-Disposition header, or use default
+    let finalFilename = filename || 'report.csv';
+    if (!filename) {
+      const contentDisposition = response.headers['content-disposition'];
+      if (contentDisposition) {
+        const filenameMatch = contentDisposition.match(/filename="?(.+)"?/i);
+        if (filenameMatch && filenameMatch[1]) {
+          finalFilename = filenameMatch[1];
+        }
+      }
+    }
+    link.setAttribute('download', finalFilename);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.URL.revokeObjectURL(url);
+  },
   getDateRanges: async ({
     dashboardId
   } = {}) => {
@@ -747,7 +809,8 @@ function SingleSelect({
   onChange,
   sx = {
     width: '100%'
-  }
+  },
+  disabled = false
 }) {
   // Check if the current value exists in items, otherwise use empty string
   const validValue = items.some(itm => itm.key === value) ? value : '';
@@ -763,6 +826,7 @@ function SingleSelect({
     value: validValue,
     label: label,
     onChange: onChange,
+    disabled: disabled,
     MenuProps: {
       style: {
         maxHeight: '300px'
@@ -1129,11 +1193,67 @@ var Chart = ({
   }), chartType)));
 };
 
+// Create the context
+const ReportingContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * ReportingProvider - Provides reporting configuration context to child components
+ * 
+ * @param {Object} props
+ * @param {Object} [props.defaultParameters] - Default parameters for reports (base_currency, merchants, client, etc.)
+ * @param {Object} [props.defaultApi] - Default API configuration (token, base_url)
+ * @param {React.ReactNode} props.children - Child components
+ */
+const ReportingProvider = ({
+  defaultParameters = {},
+  defaultApi = {},
+  children
+}) => {
+  const [parameters, setParameters] = useState(defaultParameters);
+  const [api, setApi] = useState(defaultApi);
+  const value = {
+    parameters,
+    setParameters,
+    api,
+    setApi,
+    // Convenience method to update both at once
+    setReportingContext: ({
+      parameters: newParams,
+      api: newApi
+    }) => {
+      if (newParams !== undefined) {
+        setParameters(newParams);
+      }
+      if (newApi !== undefined) {
+        setApi(newApi);
+      }
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(ReportingContext.Provider, {
+    value: value
+  }, children);
+};
+
+/**
+ * useReportingContextOptional - Hook to optionally access reporting context
+ * Returns null if used outside of ReportingProvider (useful for optional fallback)
+ * 
+ * @returns {Object|null} Context value or null if not within provider
+ */
+const useReportingContextOptional = () => {
+  return useContext(ReportingContext);
+};
+
 function Dashboard({
   id = "sample_dashboard",
   api,
   params
 }) {
+  const reportingContext = useReportingContextOptional();
+
+  // Use props if provided, otherwise fall back to context
+  const finalApi = api || reportingContext?.api || {};
+  const finalParams = params || reportingContext?.parameters || {};
   const [dashboard, setDashboard] = React__default.useState();
   //const [schema, setSchema] = React.useState();
   const [schema] = React__default.useState();
@@ -1148,17 +1268,17 @@ function Dashboard({
   }, {
     schema
   }, {
-    params
+    params: finalParams
   });
   useEffect(() => {
-    // console.log('token changed',api);
+    // console.log('token changed',finalApi);
 
-    Api.setBaseUrl(api.base_url);
-    Api.setToken(api.token);
-  }, [api]);
+    Api.setBaseUrl(finalApi.base_url);
+    Api.setToken(finalApi.token);
+  }, [finalApi]);
   const init = async () => {
-    Api.setBaseUrl(api.base_url);
-    Api.setToken(api.token);
+    Api.setBaseUrl(finalApi.base_url);
+    Api.setToken(finalApi.token);
     await Api.loadDashboardMeta({
       dashboardId: id
     });
@@ -1258,14 +1378,14 @@ function Dashboard({
         xs: 12,
         md: md
       }, /*#__PURE__*/React__default.createElement(Chart, {
-        api: api,
+        api: finalApi,
         cache: cache.current,
         id: column.id,
         dashboard: dashboard,
         schema: schema,
         title: column.title,
         filter: column.filter,
-        params: params
+        params: finalParams
       }))))) :
       // All other rows behave normally
       row.columns.map((column, i) => /*#__PURE__*/React__default.createElement(Grid, {
@@ -1274,22 +1394,3804 @@ function Dashboard({
         xs: 12,
         md: md
       }, /*#__PURE__*/React__default.createElement(Chart, {
-        api: api,
+        api: finalApi,
         cache: cache.current,
         id: column.id,
         dashboard: dashboard,
         schema: schema,
         title: column.title,
         filter: column.filter,
-        params: params
+        params: finalParams
       }))));
     })))
   );
 }
 
+// Create a context for the notification system
+const NotifyContext = /*#__PURE__*/createContext();
+
+/**
+ * NotifyProvider component that wraps your app to provide notification functionality
+ * 
+ * Usage:
+ * Wrap your app with <NotifyProvider>:
+ * 
+ * <NotifyProvider>
+ *   <App />
+ * </NotifyProvider>
+ */
+const NotifyProvider = ({
+  children
+}) => {
+  const [notification, setNotification] = useState({
+    open: false,
+    message: '',
+    severity: 'info',
+    // 'success' | 'error' | 'warning' | 'info'
+    duration: 6000
+  });
+  const showNotification = (message, severity = 'info', duration = 6000) => {
+    setNotification({
+      open: true,
+      message,
+      severity,
+      duration
+    });
+  };
+  const handleClose = (_event, reason) => {
+    // Don't close on clickaway to ensure user sees the message
+    if (reason === 'clickaway') {
+      return;
+    }
+    setNotification(prev => ({
+      ...prev,
+      open: false
+    }));
+  };
+  const notify = {
+    success: (message, duration) => showNotification(message, 'success', duration),
+    error: (message, duration) => showNotification(message, 'error', duration),
+    warning: (message, duration) => showNotification(message, 'warning', duration),
+    info: (message, duration) => showNotification(message, 'info', duration)
+  };
+  return /*#__PURE__*/React__default.createElement(NotifyContext.Provider, {
+    value: notify
+  }, children, /*#__PURE__*/React__default.createElement(Snackbar, {
+    open: notification.open,
+    autoHideDuration: notification.duration,
+    onClose: handleClose,
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    }
+  }, /*#__PURE__*/React__default.createElement(Alert, {
+    onClose: handleClose,
+    severity: notification.severity,
+    variant: "filled",
+    sx: {
+      width: '100%'
+    }
+  }, notification.message)));
+};
+
+/**
+ * Hook to use notifications in any component
+ * 
+ * Usage in components:
+ * 
+ * import { useNotify } from '../components/Notify';
+ * 
+ * const MyComponent = () => {
+ *   const notify = useNotify();
+ *   
+ *   const handleSuccess = () => {
+ *     notify.success('Operation completed successfully!');
+ *   };
+ *   
+ *   const handleError = () => {
+ *     notify.error('Something went wrong!');
+ *   };
+ *   
+ *   const handleWarning = () => {
+ *     notify.warning('Please be careful!');
+ *   };
+ *   
+ *   const handleInfo = () => {
+ *     notify.info('Here is some information');
+ *   };
+ *   
+ *   return <button onClick={handleSuccess}>Click me</button>;
+ * };
+ */
+const useNotify = () => {
+  const context = useContext(NotifyContext);
+  if (!context) {
+    throw new Error('useNotify must be used within a NotifyProvider');
+  }
+  return context;
+};
+
+/**
+ * Reusable confirmation dialog component
+ * @param {boolean} open - Whether the dialog is open
+ * @param {string} title - Dialog title
+ * @param {string} message - Dialog message/content
+ * @param {function} onConfirm - Callback when user confirms
+ * @param {function} onCancel - Callback when user cancels
+ * @param {string} confirmText - Text for confirm button (default: "Confirm")
+ * @param {string} cancelText - Text for cancel button (default: "Cancel")
+ * @param {string} confirmColor - Color for confirm button (default: "error")
+ */
+const ConfirmDialog = ({
+  open,
+  title = 'Confirm Action',
+  message,
+  onConfirm,
+  onCancel,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  confirmColor = 'error'
+}) => {
+  return /*#__PURE__*/React__default.createElement(Dialog, {
+    open: open,
+    onClose: onCancel,
+    "aria-labelledby": "confirm-dialog-title",
+    "aria-describedby": "confirm-dialog-description"
+  }, /*#__PURE__*/React__default.createElement(DialogTitle, {
+    id: "confirm-dialog-title"
+  }, title), /*#__PURE__*/React__default.createElement(DialogContent, null, /*#__PURE__*/React__default.createElement(DialogContentText, {
+    id: "confirm-dialog-description"
+  }, message)), /*#__PURE__*/React__default.createElement(DialogActions, null, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onCancel,
+    variant: "outlined"
+  }, cancelText), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onConfirm,
+    variant: "contained",
+    color: confirmColor,
+    autoFocus: true
+  }, confirmText)));
+};
+
+const ReportDefinitionsList = ({
+  onSelectReport,
+  onAddNew,
+  onCloneReport,
+  onRunReport,
+  refreshTrigger
+}) => {
+  const notify = useNotify();
+  const [reportDefinitions, setReportDefinitions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [reportToDelete, setReportToDelete] = useState(null);
+  useEffect(() => {
+    loadReportDefinitions();
+  }, [refreshTrigger]);
+  const loadReportDefinitions = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await Api.getReportDefinitions();
+      setReportDefinitions(data);
+    } catch (err) {
+      console.error('Error loading report definitions:', err);
+      const errorMessage = 'Failed to load report definitions: ' + (err.message || 'Unknown error');
+      setError(errorMessage);
+      notify.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleEdit = (id, event) => {
+    event.stopPropagation();
+    onSelectReport(id);
+  };
+  const handleRun = (id, event) => {
+    event.stopPropagation();
+    onRunReport(id);
+  };
+  const handleClone = async (id, event) => {
+    event.stopPropagation();
+    try {
+      // Load the full report definition
+      const reportDef = await Api.getReportDefinition({
+        id
+      });
+
+      // Modify the title to indicate it's a copy
+      const clonedReport = {
+        ...reportDef,
+        title: `${reportDef.title} (Copy)`
+      };
+
+      // Pass the cloned report data to the parent
+      onCloneReport(clonedReport);
+    } catch (error) {
+      console.error('Error cloning report:', error);
+      notify.error('Failed to clone report: ' + (error.message || 'Unknown error'));
+    }
+  };
+  const handleDelete = (id, event) => {
+    event.stopPropagation();
+    // Find the report to get its title for the confirmation dialog
+    const report = reportDefinitions.find(r => r.id === id);
+    setReportToDelete(report);
+    setDeleteDialogOpen(true);
+  };
+  const handleConfirmDelete = async () => {
+    if (!reportToDelete) return;
+    try {
+      await Api.deleteReportDefinition({
+        id: reportToDelete.id
+      });
+      notify.success(`Report "${reportToDelete.title}" deleted successfully!`);
+
+      // Close dialog and reset state
+      setDeleteDialogOpen(false);
+      setReportToDelete(null);
+
+      // Reload the report definitions list
+      loadReportDefinitions();
+    } catch (error) {
+      console.error('Error deleting report:', error);
+      notify.error('Failed to delete report: ' + (error.response?.data?.message || error.message || 'Unknown error'));
+      setDeleteDialogOpen(false);
+      setReportToDelete(null);
+    }
+  };
+  const handleCancelDelete = () => {
+    setDeleteDialogOpen(false);
+    setReportToDelete(null);
+  };
+  const columns = [{
+    field: 'title',
+    headerName: 'Title',
+    flex: 1,
+    minWidth: 200
+  }, {
+    field: 'provider',
+    headerName: 'Provider',
+    flex: 1,
+    minWidth: 200
+  }, {
+    field: 'actions',
+    headerName: 'Actions',
+    width: 200,
+    sortable: false,
+    filterable: false,
+    disableColumnMenu: true,
+    renderCell: params => /*#__PURE__*/React__default.createElement(Box$1, {
+      sx: {
+        display: 'flex',
+        gap: 1
+      }
+    }, /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Run"
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      size: "small",
+      color: "success",
+      onClick: e => handleRun(params.row.id, e)
+    }, /*#__PURE__*/React__default.createElement(PlayArrowIcon, {
+      fontSize: "small"
+    }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Edit"
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      size: "small",
+      color: "primary",
+      onClick: e => handleEdit(params.row.id, e)
+    }, /*#__PURE__*/React__default.createElement(EditIcon, {
+      fontSize: "small"
+    }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Clone"
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      size: "small",
+      onClick: e => handleClone(params.row.id, e)
+    }, /*#__PURE__*/React__default.createElement(ContentCopyIcon, {
+      fontSize: "small"
+    }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Delete"
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      size: "small",
+      color: "error",
+      onClick: e => handleDelete(params.row.id, e)
+    }, /*#__PURE__*/React__default.createElement(DeleteIcon, {
+      fontSize: "small"
+    }))))
+  }];
+  const rows = reportDefinitions.map(def => ({
+    id: def.id,
+    title: def.title,
+    provider: def.provider
+  }));
+  const handleRowClick = params => {
+    onSelectReport(params.row.id);
+  };
+  if (loading) {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: 400
+    }, /*#__PURE__*/React__default.createElement(CircularProgress$1, null));
+  }
+  if (error) {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: 400,
+      gap: 2
+    }, /*#__PURE__*/React__default.createElement(Typography$1, {
+      variant: "body1",
+      color: "error"
+    }, error), /*#__PURE__*/React__default.createElement(Button, {
+      variant: "contained",
+      onClick: loadReportDefinitions
+    }, "Retry"));
+  }
+  return /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      p: 3
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      mb: 3
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h4",
+    component: "h1"
+  }, "Report Definitions"), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    color: "primary",
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, null),
+    onClick: onAddNew
+  }, "Add New Report")), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      height: 600,
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(DataGrid, {
+    rows: rows,
+    columns: columns,
+    pageSize: 10,
+    rowsPerPageOptions: [10, 25, 50],
+    disableSelectionOnClick: true,
+    onRowClick: handleRowClick,
+    sx: {
+      '& .MuiDataGrid-row': {
+        cursor: 'pointer'
+      },
+      '& .MuiDataGrid-row:hover': {
+        backgroundColor: '#f5f5f5'
+      },
+      '& .MuiDataGrid-columnHeader': {
+        backgroundColor: '#f5f5f5',
+        fontWeight: 'bold'
+      }
+    }
+  })), /*#__PURE__*/React__default.createElement(ConfirmDialog, {
+    open: deleteDialogOpen,
+    title: "Delete Report Definition",
+    message: reportToDelete ? `Are you sure you want to delete "${reportToDelete.title}"? This action cannot be undone.` : '',
+    onConfirm: handleConfirmDelete,
+    onCancel: handleCancelDelete,
+    confirmText: "Delete",
+    cancelText: "Cancel",
+    confirmColor: "error"
+  }));
+};
+
+const ProviderSelection = ({
+  providersData,
+  rootProvider,
+  onSelectionChange,
+  existingDimensions = [],
+  existingMetrics = [],
+  existingFilters = {}
+}) => {
+  const [selectionChain, setSelectionChain] = useState([]); // Array of {providerKey, relationName, targetKey}
+
+  // Reset selection chain when root provider changes
+  useEffect(() => {
+    setSelectionChain([]);
+    if (onSelectionChange) {
+      onSelectionChange([]);
+    }
+  }, [rootProvider]);
+
+  // Helper function to extract used typed relations from existing items
+  // Returns a Map: providerKey -> Set of used typed relation names
+  const getUsedTypedRelations = () => {
+    const usedTypedRelationsMap = new Map();
+
+    // Helper to process a single item's relations
+    const processItemRelations = item => {
+      if (!item.relations || !item.providerPath) return;
+
+      // Walk through the provider path and relations together
+      for (let i = 0; i < item.relations.length; i++) {
+        const relation = item.relations[i];
+        const currentProviderKey = item.providerPath[i]; // The provider this relation comes from
+
+        // Check if this relation has a 'type' property
+        if (relation.type) {
+          // Track this typed relation usage
+          if (!usedTypedRelationsMap.has(currentProviderKey)) {
+            usedTypedRelationsMap.set(currentProviderKey, new Set());
+          }
+          usedTypedRelationsMap.get(currentProviderKey).add(relation.name);
+        }
+      }
+    };
+
+    // Process dimensions
+    existingDimensions.forEach(processItemRelations);
+
+    // Process metrics
+    existingMetrics.forEach(processItemRelations);
+
+    // Process filters (convert object to array of filter data)
+    Object.values(existingFilters).forEach(processItemRelations);
+    return usedTypedRelationsMap;
+  };
+
+  // Get items for a dropdown based on the selected provider's relations
+  const getRelationItems = providerKey => {
+    if (!providersData || !providerKey) return [];
+    const provider = providersData[providerKey];
+    if (!provider || !provider.relations || provider.relations.length === 0) {
+      return [];
+    }
+
+    // Get the map of used typed relations
+    const usedTypedRelationsMap = getUsedTypedRelations();
+
+    // Check if this provider has any typed relations already in use
+    const usedTypedRelations = usedTypedRelationsMap.get(providerKey);
+
+    // Map relations to items, using relation name as key and target as metadata
+    return provider.relations.filter(relation => providersData[relation.target]).map(relation => {
+      const hasType = !!relation.type;
+      let disabled = false;
+      let disabledReason = null;
+
+      // If this relation has a type property
+      if (hasType && usedTypedRelations && usedTypedRelations.size > 0) {
+        // Check if a different typed relation from this provider is already in use
+        const isThisRelationUsed = usedTypedRelations.has(relation.name);
+        const otherTypedRelationUsed = !isThisRelationUsed && usedTypedRelations.size > 0;
+        if (otherTypedRelationUsed) {
+          disabled = true;
+          // Find which relation is in use
+          const usedRelationName = Array.from(usedTypedRelations)[0];
+          disabledReason = `Cannot select: '${usedRelationName}' is already in use`;
+        }
+      }
+      return {
+        key: relation.name,
+        // Use relation name as the unique key
+        value: relation.name,
+        targetKey: relation.target,
+        // Store the target provider key separately
+        disabled: disabled,
+        disabledReason: disabledReason
+      };
+    });
+  };
+
+  // Handle selection at a specific level
+  const handleSelectionChange = (level, event) => {
+    const selectedKey = event.target.value;
+
+    // Find the targetKey from the items
+    const parentProvider = level === 0 ? rootProvider : selectionChain[level - 1].targetKey;
+    const items = getRelationItems(parentProvider);
+    const selectedItem = items.find(item => item.key === selectedKey);
+    if (!selectedItem) return;
+
+    // Truncate the chain to this level and add the new selection
+    const newChain = selectionChain.slice(0, level);
+    newChain.push({
+      providerKey: selectedKey,
+      // The key used in the dropdown (relation name)
+      relationName: selectedKey,
+      // The relation name
+      targetKey: selectedItem.targetKey // The actual provider this points to
+    });
+    setSelectionChain(newChain);
+    console.log('Selection chain:', newChain);
+
+    // Notify parent of selection change
+    if (onSelectionChange) {
+      onSelectionChange(newChain);
+    }
+  };
+
+  // Handle removing a provider from the chain (and all subsequent providers)
+  const handleRemoveFromChain = level => {
+    // Truncate the chain to remove this level and everything after it
+    const newChain = selectionChain.slice(0, level);
+    setSelectionChain(newChain);
+
+    // Notify parent of selection change
+    if (onSelectionChange) {
+      onSelectionChange(newChain);
+    }
+  };
+
+  // Render all dropdowns in the chain
+  const renderSelectionChain = () => {
+    if (!providersData || !rootProvider) return null;
+    const dropdowns = [];
+
+    // First dropdown - relations of root provider
+    const rootRelationItems = getRelationItems(rootProvider);
+    if (rootRelationItems.length > 0) {
+      dropdowns.push(/*#__PURE__*/React__default.createElement("div", {
+        key: "level-0",
+        style: {
+          marginRight: '16px'
+        }
+      }, /*#__PURE__*/React__default.createElement(SingleSelect, {
+        items: rootRelationItems,
+        value: selectionChain[0]?.providerKey || '',
+        label: `Related to ${rootProvider}`,
+        onChange: e => handleSelectionChange(0, e),
+        sx: {
+          width: '300px'
+        }
+      })));
+    }
+
+    // Subsequent dropdowns based on relations
+    for (let i = 0; i < selectionChain.length; i++) {
+      const currentSelection = selectionChain[i];
+      const relationItems = getRelationItems(currentSelection.targetKey);
+
+      // Only show next dropdown if current selection has relations
+      if (relationItems.length > 0) {
+        const nextSelection = selectionChain[i + 1];
+        dropdowns.push(/*#__PURE__*/React__default.createElement("div", {
+          key: `level-${i + 1}`,
+          style: {
+            marginRight: '16px'
+          }
+        }, /*#__PURE__*/React__default.createElement(SingleSelect, {
+          items: relationItems,
+          value: nextSelection?.providerKey || '',
+          label: `Related to ${currentSelection.targetKey}`,
+          onChange: e => handleSelectionChange(i + 1, e),
+          sx: {
+            width: '300px'
+          }
+        })));
+      }
+    }
+    return dropdowns;
+  };
+  return /*#__PURE__*/React__default.createElement(Box$1, null, selectionChain.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      marginBottom: 2
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "subtitle2",
+    sx: {
+      marginBottom: 1,
+      color: 'text.secondary'
+    }
+  }, "Selected Path:"), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1,
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React__default.createElement(Chip, {
+    label: rootProvider,
+    size: "small",
+    color: "primary",
+    variant: "outlined"
+  }), selectionChain.map((selection, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    key: index
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "body2",
+    sx: {
+      color: 'text.secondary'
+    }
+  }, "\u2192"), /*#__PURE__*/React__default.createElement(Chip, {
+    label: selection.targetKey,
+    size: "small",
+    color: "primary",
+    onDelete: () => handleRemoveFromChain(index),
+    sx: {
+      fontWeight: 500
+    }
+  }))))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'flex-start',
+      gap: '8px'
+    }
+  }, renderSelectionChain()));
+};
+
+// Sortable Chip Component
+const SortableChip$1 = ({
+  id,
+  label,
+  fullLabel,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
+  sortOrder,
+  onSortOrderChange,
+  fullPath,
+  defaultTitle,
+  customTitle,
+  onUpdateTitle,
+  onResetTitle
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState('');
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%'
+  };
+
+  // Focus input when entering edit mode
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  // Handle click outside to cancel
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (isEditing && containerRef.current && !containerRef.current.contains(event.target)) {
+        handleCancel();
+      }
+    };
+    if (isEditing) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isEditing]);
+
+  // Cycle through sort states: null -> 'asc' -> 'desc' -> null
+  const handleSortToggle = () => {
+    if (sortOrder === null) {
+      onSortOrderChange('asc');
+    } else if (sortOrder === 'asc') {
+      onSortOrderChange('desc');
+    } else {
+      onSortOrderChange(null);
+    }
+  };
+
+  // Determine which icon to show
+  const getSortIcon = () => {
+    if (sortOrder === 'asc') {
+      return /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
+        fontSize: "small"
+      });
+    } else if (sortOrder === 'desc') {
+      return /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
+        fontSize: "small"
+      });
+    } else {
+      return /*#__PURE__*/React__default.createElement(SortIcon, {
+        fontSize: "small",
+        sx: {
+          opacity: 0.3
+        }
+      });
+    }
+  };
+  const handleEditClick = () => {
+    setEditValue(customTitle || defaultTitle);
+    setIsEditing(true);
+  };
+  const handleSave = () => {
+    const trimmedValue = editValue.trim();
+    if (trimmedValue === '') {
+      // Empty string validation - treat as cancel
+      handleCancel();
+      return;
+    }
+    onUpdateTitle(fullPath, trimmedValue);
+    setIsEditing(false);
+  };
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditValue('');
+  };
+  const handleReset = () => {
+    onResetTitle(fullPath);
+    setIsEditing(false);
+    setEditValue('');
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      handleSave();
+    } else if (e.key === 'Escape') {
+      handleCancel();
+    }
+  };
+  const displayLabel = customTitle || label;
+  const hasCustomTitle = !!customTitle;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: setNodeRef,
+    style: style
+  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
+    ref: containerRef,
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      gap: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      cursor: 'grab',
+      '&:active': {
+        cursor: 'grabbing'
+      }
+    }
+  }), /*#__PURE__*/React__default.createElement(DragIndicatorIcon, {
+    sx: {
+      cursor: 'grab'
+    }
+  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: fullLabel,
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(Chip, {
+    label: displayLabel,
+    onDelete: onDelete,
+    color: "primary",
+    variant: "outlined",
+    sx: {
+      fontWeight: hasCustomTitle ? 'bold' : 'normal',
+      fontStyle: hasCustomTitle ? 'italic' : 'normal'
+    }
+  })), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Edit title",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: handleEditClick,
+    "aria-label": "edit title"
+  }, /*#__PURE__*/React__default.createElement(EditIcon, {
+    fontSize: "small"
+  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
+    inputRef: inputRef,
+    value: editValue,
+    onChange: e => setEditValue(e.target.value),
+    onKeyDown: handleKeyDown,
+    size: "small",
+    sx: {
+      width: '200px'
+    }
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Save",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: handleSave,
+    color: "primary",
+    "aria-label": "save title"
+  }, /*#__PURE__*/React__default.createElement(CheckIcon, {
+    fontSize: "small"
+  }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Cancel",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: handleCancel,
+    "aria-label": "cancel edit"
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    fontSize: "small"
+  }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Reset to default",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: handleReset,
+    color: "warning",
+    "aria-label": "reset title"
+  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
+    fontSize: "small"
+  })))), !isEditing && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: sortOrder === null ? 'No sort' : sortOrder === 'asc' ? 'Ascending' : 'Descending',
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: handleSortToggle,
+    "aria-label": "toggle sort order",
+    color: sortOrder ? 'primary' : 'default'
+  }, getSortIcon())), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      gap: 0.5
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: onMoveUp,
+    disabled: isFirst,
+    "aria-label": "move up"
+  }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: onMoveDown,
+    disabled: isLast,
+    "aria-label": "move down"
+  }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
+    fontSize: "small"
+  }))))));
+};
+const Dimensions = ({
+  providersData,
+  rootProvider,
+  savedDimensions = [],
+  onSaveDimension,
+  onRemoveDimension,
+  onReorderDimensions,
+  titleOverrides = {},
+  onUpdateTitle,
+  onResetTitle,
+  existingMetrics = [],
+  existingFilters = {}
+}) => {
+  const [isAdding, setIsAdding] = useState(false);
+  const [dimensionSelectionChain, setDimensionSelectionChain] = useState([]);
+  const [selectedDimension, setSelectedDimension] = useState('');
+
+  // Setup drag and drop sensors
+  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+
+  // Handle drag end
+  const handleDragEnd = event => {
+    const {
+      active,
+      over
+    } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = savedDimensions.findIndex((_, i) => i === active.id);
+      const newIndex = savedDimensions.findIndex((_, i) => i === over.id);
+      const newOrder = arrayMove(savedDimensions, oldIndex, newIndex);
+      onReorderDimensions(newOrder);
+    }
+  };
+
+  // Handle move up
+  const handleMoveUp = index => {
+    if (index > 0) {
+      const newOrder = arrayMove(savedDimensions, index, index - 1);
+      onReorderDimensions(newOrder);
+    }
+  };
+
+  // Handle move down
+  const handleMoveDown = index => {
+    if (index < savedDimensions.length - 1) {
+      const newOrder = arrayMove(savedDimensions, index, index + 1);
+      onReorderDimensions(newOrder);
+    }
+  };
+
+  // Handle sort order change
+  const handleSortOrderChange = (index, sortOrder) => {
+    const newDimensions = [...savedDimensions];
+    newDimensions[index] = {
+      ...newDimensions[index],
+      sortOrder
+    };
+    onReorderDimensions(newDimensions);
+  };
+
+  // Get the current provider based on selection chain
+  const getCurrentProvider = () => {
+    if (!rootProvider) return null;
+    if (dimensionSelectionChain.length === 0) return rootProvider;
+    return dimensionSelectionChain[dimensionSelectionChain.length - 1].targetKey;
+  };
+
+  // Get dimensions for the current provider
+  const getDimensionItems = () => {
+    const currentProvider = getCurrentProvider();
+    if (!currentProvider || !providersData || !providersData[currentProvider]) {
+      return [];
+    }
+    const provider = providersData[currentProvider];
+    if (!provider.dimensions) return [];
+
+    // Build the alias path for the current selection chain
+    const rootProviderData = providersData[rootProvider];
+    const aliasPath = [rootProviderData.default_alias];
+
+    // Add relation aliases from the selection chain
+    let currentProviderKey = rootProvider;
+    dimensionSelectionChain.forEach(selection => {
+      const providerData = providersData[currentProviderKey];
+      if (providerData && providerData.relations) {
+        const relationObj = providerData.relations.find(rel => rel.name === selection.relationName);
+        if (relationObj) {
+          aliasPath.push(relationObj.alias);
+        }
+      }
+      currentProviderKey = selection.targetKey;
+    });
+
+    // Create a Set of already selected dimension fullPaths for quick lookup
+    const selectedFullPaths = new Set(savedDimensions.map(dim => dim.fullPath));
+    const items = [];
+    // Iterate through aliases (e.g., 'ba', 'pc')
+    Object.keys(provider.dimensions).forEach(alias => {
+      const dimensionsForAlias = provider.dimensions[alias];
+      // Iterate through dimension keys (e.g., 'created_at', 'status')
+      Object.keys(dimensionsForAlias).forEach(dimKey => {
+        const dimension = dimensionsForAlias[dimKey];
+
+        // Construct the fullPath for this dimension
+        const fullPath = `${aliasPath.join('_')}.${dimKey}`;
+
+        // Check if this dimension is already selected
+        const isAlreadySelected = selectedFullPaths.has(fullPath);
+        items.push({
+          // Include provider name to ensure uniqueness across different providers
+          key: `${currentProvider}_${alias}.${dimKey}`,
+          value: dimension.title || dimKey,
+          dimensionKey: dimKey,
+          alias: alias,
+          dimension: dimension,
+          disabled: isAlreadySelected
+        });
+      });
+    });
+    return items;
+  };
+  const handleAddClick = () => {
+    setIsAdding(true);
+    setDimensionSelectionChain([]);
+    setSelectedDimension('');
+  };
+  const handleCancel = () => {
+    setIsAdding(false);
+    setDimensionSelectionChain([]);
+    setSelectedDimension('');
+  };
+  const handleSave = () => {
+    if (!selectedDimension) return;
+    const dimensionItems = getDimensionItems();
+    const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
+    if (!selectedItem) return;
+
+    // Build the complete relation objects array
+    const relations = [];
+    const providerPath = [rootProvider];
+    const relationNames = [];
+
+    // Collect all relation objects from the selection chain
+    let currentProviderKey = rootProvider;
+    dimensionSelectionChain.forEach(selection => {
+      const provider = providersData[currentProviderKey];
+      if (provider && provider.relations) {
+        // Find the complete relation object
+        const relationObj = provider.relations.find(rel => rel.name === selection.relationName);
+        if (relationObj) {
+          relations.push(relationObj);
+          relationNames.push(relationObj.name);
+        }
+      }
+      providerPath.push(selection.targetKey);
+      currentProviderKey = selection.targetKey;
+    });
+
+    // Build the alias path: root_alias + relation_aliases + dimension_key
+    const rootProviderData = providersData[rootProvider];
+    const aliasPath = [rootProviderData.default_alias];
+    relations.forEach(rel => {
+      aliasPath.push(rel.alias);
+    });
+    const fullPath = `${aliasPath.join('_')}.${selectedItem.dimensionKey}`;
+    const dimensionData = {
+      // Complete dimension object from the final provider
+      dimension: selectedItem.dimension,
+      // Array of complete relation objects
+      relations: relations,
+      // Metadata
+      providerPath: providerPath,
+      relationNames: relationNames,
+      dimensionKey: selectedItem.dimensionKey,
+      dimensionTitle: selectedItem.value,
+      // The constructed path for server
+      fullPath: fullPath
+    };
+    onSaveDimension(dimensionData);
+    handleCancel();
+  };
+  const handleDimensionChange = event => {
+    setSelectedDimension(event.target.value);
+  };
+  const handleAddAll = () => {
+    const dimensionItems = getDimensionItems();
+
+    // Filter out already selected dimensions (disabled items)
+    const availableItems = dimensionItems.filter(item => !item.disabled);
+    if (availableItems.length === 0) return;
+
+    // Build the complete relation objects array (same for all dimensions in this provider)
+    const relations = [];
+    const providerPath = [rootProvider];
+    const relationNames = [];
+
+    // Collect all relation objects from the selection chain
+    let currentProviderKey = rootProvider;
+    dimensionSelectionChain.forEach(selection => {
+      const provider = providersData[currentProviderKey];
+      if (provider && provider.relations) {
+        // Find the complete relation object
+        const relationObj = provider.relations.find(rel => rel.name === selection.relationName);
+        if (relationObj) {
+          relations.push(relationObj);
+          relationNames.push(relationObj.name);
+        }
+      }
+      providerPath.push(selection.targetKey);
+      currentProviderKey = selection.targetKey;
+    });
+
+    // Build the alias path: root_alias + relation_aliases
+    const rootProviderData = providersData[rootProvider];
+    const aliasPath = [rootProviderData.default_alias];
+    relations.forEach(rel => {
+      aliasPath.push(rel.alias);
+    });
+
+    // Create dimension data for each available dimension
+    availableItems.forEach(item => {
+      const fullPath = `${aliasPath.join('_')}.${item.dimensionKey}`;
+      const dimensionData = {
+        // Complete dimension object from the final provider
+        dimension: item.dimension,
+        // Array of complete relation objects
+        relations: relations,
+        // Metadata
+        providerPath: providerPath,
+        relationNames: relationNames,
+        dimensionKey: item.dimensionKey,
+        dimensionTitle: item.value,
+        // The constructed path for server
+        fullPath: fullPath
+      };
+      onSaveDimension(dimensionData);
+    });
+    handleCancel();
+  };
+  const formatProviderPath = dim => {
+    // Build path using root provider + relation names
+    const pathParts = [rootProvider];
+    if (dim.relationNames && dim.relationNames.length > 0) {
+      pathParts.push(...dim.relationNames);
+    }
+    return pathParts.join(' → ');
+  };
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 2,
+      marginBottom: 2
+    }
+  }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    onClick: handleAddClick
+  }, "Add Dimension") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outlined",
+    onClick: handleCancel
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    onClick: handleSave,
+    disabled: !selectedDimension
+  }, "Save Dimension"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
+    sx: {
+      padding: 3,
+      marginBottom: 3
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      marginBottom: 2
+    }
+  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
+    providersData: providersData,
+    rootProvider: rootProvider,
+    onSelectionChange: setDimensionSelectionChain,
+    existingDimensions: savedDimensions,
+    existingMetrics: existingMetrics,
+    existingFilters: existingFilters
+  }), /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      marginTop: 3,
+      marginBottom: 2
+    }
+  }, "Select Dimension"), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
+    items: getDimensionItems(),
+    value: selectedDimension,
+    label: "Choose Dimension",
+    onChange: handleDimensionChange,
+    sx: {
+      width: '400px'
+    }
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Add all available dimensions",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton, {
+    color: "primary",
+    onClick: handleAddAll,
+    disabled: getDimensionItems().filter(item => !item.disabled).length === 0,
+    "aria-label": "add all dimensions"
+  }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null)))))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      marginTop: 3
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      marginBottom: 2
+    }
+  }, "Saved Dimensions (Drag to reorder or use arrows)"), /*#__PURE__*/React__default.createElement(DndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/React__default.createElement(SortableContext, {
+    items: savedDimensions.map((_, index) => index),
+    strategy: verticalListSortingStrategy
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 1
+    }
+  }, savedDimensions.map((dim, index) => /*#__PURE__*/React__default.createElement(SortableChip$1, {
+    key: index,
+    id: index,
+    label: dim.dimensionTitle,
+    fullLabel: `${formatProviderPath(dim)} → ${dim.dimensionTitle} (${dim.fullPath})`,
+    onDelete: () => onRemoveDimension(index),
+    onMoveUp: () => handleMoveUp(index),
+    onMoveDown: () => handleMoveDown(index),
+    isFirst: index === 0,
+    isLast: index === savedDimensions.length - 1,
+    sortOrder: dim.sortOrder || null,
+    onSortOrderChange: sortOrder => handleSortOrderChange(index, sortOrder),
+    fullPath: dim.fullPath,
+    defaultTitle: dim.dimensionTitle,
+    customTitle: titleOverrides[dim.fullPath],
+    onUpdateTitle: onUpdateTitle,
+    onResetTitle: onResetTitle
+  })))))));
+};
+
+// Sortable Chip Component
+const SortableChip = ({
+  id,
+  label,
+  fullLabel,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
+  fullPath,
+  defaultTitle,
+  customTitle,
+  onUpdateTitle,
+  onResetTitle
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState('');
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%'
+  };
+
+  // Focus input when entering edit mode
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  // Handle click outside to cancel
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (isEditing && containerRef.current && !containerRef.current.contains(event.target)) {
+        handleCancel();
+      }
+    };
+    if (isEditing) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isEditing]);
+  const handleEditClick = () => {
+    setEditValue(customTitle || defaultTitle);
+    setIsEditing(true);
+  };
+  const handleSave = () => {
+    const trimmedValue = editValue.trim();
+    if (trimmedValue === '') {
+      // Empty string validation - treat as cancel
+      handleCancel();
+      return;
+    }
+    onUpdateTitle(fullPath, trimmedValue);
+    setIsEditing(false);
+  };
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditValue('');
+  };
+  const handleReset = () => {
+    onResetTitle(fullPath);
+    setIsEditing(false);
+    setEditValue('');
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      handleSave();
+    } else if (e.key === 'Escape') {
+      handleCancel();
+    }
+  };
+  const displayLabel = customTitle || label;
+  const hasCustomTitle = !!customTitle;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: setNodeRef,
+    style: style
+  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
+    ref: containerRef,
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      gap: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$1, _extends({}, listeners, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      cursor: 'grab',
+      '&:active': {
+        cursor: 'grabbing'
+      }
+    }
+  }), /*#__PURE__*/React__default.createElement(DragIndicatorIcon, {
+    sx: {
+      cursor: 'grab'
+    }
+  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: fullLabel,
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(Chip, {
+    label: displayLabel,
+    onDelete: onDelete,
+    color: "secondary",
+    variant: "outlined",
+    sx: {
+      fontWeight: hasCustomTitle ? 'bold' : 'normal',
+      fontStyle: hasCustomTitle ? 'italic' : 'normal'
+    }
+  })), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Edit title",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: handleEditClick,
+    "aria-label": "edit title"
+  }, /*#__PURE__*/React__default.createElement(EditIcon, {
+    fontSize: "small"
+  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
+    inputRef: inputRef,
+    value: editValue,
+    onChange: e => setEditValue(e.target.value),
+    onKeyDown: handleKeyDown,
+    size: "small",
+    sx: {
+      width: '200px'
+    }
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Save",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: handleSave,
+    color: "primary",
+    "aria-label": "save title"
+  }, /*#__PURE__*/React__default.createElement(CheckIcon, {
+    fontSize: "small"
+  }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Cancel",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: handleCancel,
+    "aria-label": "cancel edit"
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    fontSize: "small"
+  }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Reset to default",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: handleReset,
+    color: "warning",
+    "aria-label": "reset title"
+  }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
+    fontSize: "small"
+  })))), !isEditing && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      gap: 0.5
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: onMoveUp,
+    disabled: isFirst,
+    "aria-label": "move up"
+  }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: onMoveDown,
+    disabled: isLast,
+    "aria-label": "move down"
+  }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
+    fontSize: "small"
+  }))))));
+};
+const Metrics = ({
+  providersData,
+  rootProvider,
+  savedMetrics = [],
+  onSaveMetric,
+  onRemoveMetric,
+  onReorderMetrics,
+  titleOverrides = {},
+  onUpdateTitle,
+  onResetTitle,
+  existingDimensions = [],
+  existingFilters = {}
+}) => {
+  const [isAdding, setIsAdding] = useState(false);
+  const [metricSelectionChain, setMetricSelectionChain] = useState([]);
+  const [selectedMetric, setSelectedMetric] = useState('');
+
+  // Setup drag and drop sensors
+  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+
+  // Handle drag end
+  const handleDragEnd = event => {
+    const {
+      active,
+      over
+    } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = savedMetrics.findIndex((_, i) => i === active.id);
+      const newIndex = savedMetrics.findIndex((_, i) => i === over.id);
+      const newOrder = arrayMove(savedMetrics, oldIndex, newIndex);
+      onReorderMetrics(newOrder);
+    }
+  };
+
+  // Handle move up
+  const handleMoveUp = index => {
+    if (index > 0) {
+      const newOrder = arrayMove(savedMetrics, index, index - 1);
+      onReorderMetrics(newOrder);
+    }
+  };
+
+  // Handle move down
+  const handleMoveDown = index => {
+    if (index < savedMetrics.length - 1) {
+      const newOrder = arrayMove(savedMetrics, index, index + 1);
+      onReorderMetrics(newOrder);
+    }
+  };
+
+  // Get the current provider based on selection chain
+  const getCurrentProvider = () => {
+    if (!rootProvider) return null;
+    if (metricSelectionChain.length === 0) return rootProvider;
+    return metricSelectionChain[metricSelectionChain.length - 1].targetKey;
+  };
+
+  // Get metrics for the current provider
+  const getMetricItems = () => {
+    const currentProvider = getCurrentProvider();
+    if (!currentProvider || !providersData || !providersData[currentProvider]) {
+      return [];
+    }
+    const provider = providersData[currentProvider];
+    if (!provider.metrics) return [];
+
+    // Build the alias path for the current selection chain
+    const rootProviderData = providersData[rootProvider];
+    const aliasPath = [rootProviderData.default_alias];
+
+    // Add relation aliases from the selection chain
+    let currentProviderKey = rootProvider;
+    metricSelectionChain.forEach(selection => {
+      const providerData = providersData[currentProviderKey];
+      if (providerData && providerData.relations) {
+        const relationObj = providerData.relations.find(rel => rel.name === selection.relationName);
+        if (relationObj) {
+          aliasPath.push(relationObj.alias);
+        }
+      }
+      currentProviderKey = selection.targetKey;
+    });
+
+    // Create a Set of already selected metric fullPaths for quick lookup
+    const selectedFullPaths = new Set(savedMetrics.map(metric => metric.fullPath));
+
+    // Metrics are a direct array, not nested by alias
+    // Use index to ensure unique keys even if metric names are duplicated
+    const items = provider.metrics.map((metric, index) => {
+      // Construct the fullPath for this metric
+      const fullPath = `${aliasPath.join('_')}.${metric.name}`;
+
+      // Check if this metric is already selected
+      const isAlreadySelected = selectedFullPaths.has(fullPath);
+      return {
+        key: `${currentProvider}_${metric.name}_${index}`,
+        value: metric.title || metric.name,
+        metricName: metric.name,
+        metric: metric,
+        disabled: isAlreadySelected
+      };
+    });
+    return items;
+  };
+  const handleAddClick = () => {
+    setIsAdding(true);
+    setMetricSelectionChain([]);
+    setSelectedMetric('');
+  };
+  const handleCancel = () => {
+    setIsAdding(false);
+    setMetricSelectionChain([]);
+    setSelectedMetric('');
+  };
+  const handleSave = () => {
+    if (!selectedMetric) return;
+    const metricItems = getMetricItems();
+    const selectedItem = metricItems.find(item => item.key === selectedMetric);
+    if (!selectedItem) return;
+
+    // Build the complete relation objects array
+    const relations = [];
+    const providerPath = [rootProvider];
+    const relationNames = [];
+
+    // Collect all relation objects from the selection chain
+    let currentProviderKey = rootProvider;
+    metricSelectionChain.forEach(selection => {
+      const provider = providersData[currentProviderKey];
+      if (provider && provider.relations) {
+        // Find the complete relation object
+        const relationObj = provider.relations.find(rel => rel.name === selection.relationName);
+        if (relationObj) {
+          relations.push(relationObj);
+          relationNames.push(relationObj.name);
+        }
+      }
+      providerPath.push(selection.targetKey);
+      currentProviderKey = selection.targetKey;
+    });
+
+    // Build the alias path: root_alias + relation_aliases + metric_name
+    const rootProviderData = providersData[rootProvider];
+    const aliasPath = [rootProviderData.default_alias];
+    relations.forEach(rel => {
+      aliasPath.push(rel.alias);
+    });
+    const fullPath = `${aliasPath.join('_')}.${selectedItem.metricName}`;
+    const metricData = {
+      // Complete metric object from the final provider
+      metric: selectedItem.metric,
+      // Array of complete relation objects
+      relations: relations,
+      // Metadata
+      providerPath: providerPath,
+      relationNames: relationNames,
+      metricName: selectedItem.metricName,
+      metricTitle: selectedItem.value,
+      // The constructed path for server
+      fullPath: fullPath
+    };
+    onSaveMetric(metricData);
+    handleCancel();
+  };
+  const handleMetricChange = event => {
+    setSelectedMetric(event.target.value);
+  };
+  const handleAddAll = () => {
+    const metricItems = getMetricItems();
+
+    // Filter out already selected metrics (disabled items)
+    const availableItems = metricItems.filter(item => !item.disabled);
+    if (availableItems.length === 0) return;
+
+    // Build the complete relation objects array (same for all metrics in this provider)
+    const relations = [];
+    const providerPath = [rootProvider];
+    const relationNames = [];
+
+    // Collect all relation objects from the selection chain
+    let currentProviderKey = rootProvider;
+    metricSelectionChain.forEach(selection => {
+      const provider = providersData[currentProviderKey];
+      if (provider && provider.relations) {
+        // Find the complete relation object
+        const relationObj = provider.relations.find(rel => rel.name === selection.relationName);
+        if (relationObj) {
+          relations.push(relationObj);
+          relationNames.push(relationObj.name);
+        }
+      }
+      providerPath.push(selection.targetKey);
+      currentProviderKey = selection.targetKey;
+    });
+
+    // Build the alias path: root_alias + relation_aliases
+    const rootProviderData = providersData[rootProvider];
+    const aliasPath = [rootProviderData.default_alias];
+    relations.forEach(rel => {
+      aliasPath.push(rel.alias);
+    });
+
+    // Create metric data for each available metric
+    availableItems.forEach(item => {
+      const fullPath = `${aliasPath.join('_')}.${item.metricName}`;
+      const metricData = {
+        // Complete metric object from the final provider
+        metric: item.metric,
+        // Array of complete relation objects
+        relations: relations,
+        // Metadata
+        providerPath: providerPath,
+        relationNames: relationNames,
+        metricName: item.metricName,
+        metricTitle: item.value,
+        // The constructed path for server
+        fullPath: fullPath
+      };
+      onSaveMetric(metricData);
+    });
+    handleCancel();
+  };
+  const formatProviderPath = metric => {
+    // Build path using root provider + relation names
+    const pathParts = [rootProvider];
+    if (metric.relationNames && metric.relationNames.length > 0) {
+      pathParts.push(...metric.relationNames);
+    }
+    return pathParts.join(' → ');
+  };
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 2,
+      marginBottom: 2
+    }
+  }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    onClick: handleAddClick
+  }, "Add Metric") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outlined",
+    onClick: handleCancel
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    onClick: handleSave,
+    disabled: !selectedMetric
+  }, "Save Metric"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
+    sx: {
+      padding: 3,
+      marginBottom: 3
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      marginBottom: 2
+    }
+  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
+    providersData: providersData,
+    rootProvider: rootProvider,
+    onSelectionChange: setMetricSelectionChain,
+    existingDimensions: existingDimensions,
+    existingMetrics: savedMetrics,
+    existingFilters: existingFilters
+  }), /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      marginTop: 3,
+      marginBottom: 2
+    }
+  }, "Select Metric"), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(SingleSelect, {
+    items: getMetricItems(),
+    value: selectedMetric,
+    label: "Choose Metric",
+    onChange: handleMetricChange,
+    sx: {
+      width: '400px'
+    }
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Add all available metrics",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton, {
+    color: "primary",
+    onClick: handleAddAll,
+    disabled: getMetricItems().filter(item => !item.disabled).length === 0,
+    "aria-label": "add all metrics"
+  }, /*#__PURE__*/React__default.createElement(PlaylistAddIcon, null)))))), savedMetrics.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      marginTop: 3
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      marginBottom: 2
+    }
+  }, "Saved Metrics (Drag to reorder or use arrows)"), /*#__PURE__*/React__default.createElement(DndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/React__default.createElement(SortableContext, {
+    items: savedMetrics.map((_, index) => index),
+    strategy: verticalListSortingStrategy
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 1
+    }
+  }, savedMetrics.map((metric, index) => /*#__PURE__*/React__default.createElement(SortableChip, {
+    key: index,
+    id: index,
+    label: metric.metricTitle,
+    fullLabel: `${formatProviderPath(metric)} → ${metric.metricTitle} (${metric.fullPath})`,
+    onDelete: () => onRemoveMetric(index),
+    onMoveUp: () => handleMoveUp(index),
+    onMoveDown: () => handleMoveDown(index),
+    isFirst: index === 0,
+    isLast: index === savedMetrics.length - 1,
+    fullPath: metric.fullPath,
+    defaultTitle: metric.metricTitle,
+    customTitle: titleOverrides[metric.fullPath],
+    onUpdateTitle: onUpdateTitle,
+    onResetTitle: onResetTitle
+  })))))));
+};
+
+const Filters = ({
+  providersData,
+  rootProvider,
+  savedFilters = {},
+  onSaveFilter,
+  onRemoveFilter,
+  existingDimensions = [],
+  existingMetrics = [],
+  titleOverrides = {},
+  onUpdateTitle,
+  onResetTitle
+}) => {
+  const reportingContext = useReportingContextOptional();
+  const [isAdding, setIsAdding] = useState(false);
+  const [dimensionSelectionChain, setDimensionSelectionChain] = useState([]);
+  const [selectedDimension, setSelectedDimension] = useState('');
+  const [availableFilterValues, setAvailableFilterValues] = useState([]);
+  const [selectedFilterValues, setSelectedFilterValues] = useState([]);
+  const [loadingFilterValues, setLoadingFilterValues] = useState(false);
+  const [editingFilterPath, setEditingFilterPath] = useState(null); // Track which filter is being edited
+
+  // Date range state for date/timestamp filters
+  const [dateRangeFrom, setDateRangeFrom] = useState(null);
+  const [dateRangeTo, setDateRangeTo] = useState(null);
+
+  // Title editing state
+  const [editingTitlePath, setEditingTitlePath] = useState(null);
+  const [editTitleValue, setEditTitleValue] = useState('');
+
+  // Reset filter-related states when provider chain changes
+  useEffect(() => {
+    // Reset dimension selection and filter values when the provider chain changes
+    setSelectedDimension('');
+    setAvailableFilterValues([]);
+    setSelectedFilterValues([]);
+    setDateRangeFrom(null);
+    setDateRangeTo(null);
+  }, [dimensionSelectionChain]);
+
+  // Get the current provider based on selection chain
+  const getCurrentProvider = () => {
+    if (!rootProvider) return null;
+    if (dimensionSelectionChain.length === 0) return rootProvider;
+    return dimensionSelectionChain[dimensionSelectionChain.length - 1].targetKey;
+  };
+
+  // Check if a dimension is suitable for filtering (simple column, not expression-based)
+  const isFilterableDimension = dimension => {
+    if (!dimension.column) return false;
+
+    // Simple column names should only contain:
+    // - letters (a-z, A-Z)
+    // - underscores (_)
+    // - dots (.) for table prefixes like "ft.currency"
+    // - numbers (0-9)
+    // If it contains anything else (spaces, parentheses, operators, etc.), it's an expression
+    const simpleColumnPattern = /^[a-zA-Z0-9_.]+$/;
+    return simpleColumnPattern.test(dimension.column);
+  };
+
+  // Check if a dimension is a date or timestamp type
+  const isDateDimension = dimension => {
+    return dimension && (dimension.type === 'date' || dimension.type === 'timestamp');
+  };
+
+  // Get dimensions for the current provider
+  const getDimensionItems = () => {
+    const currentProvider = getCurrentProvider();
+    if (!currentProvider || !providersData || !providersData[currentProvider]) {
+      return [];
+    }
+    const provider = providersData[currentProvider];
+    if (!provider.dimensions) return [];
+    const items = [];
+    // Iterate through aliases (e.g., 'ba', 'pc')
+    Object.keys(provider.dimensions).forEach(alias => {
+      const dimensionsForAlias = provider.dimensions[alias];
+      // Iterate through dimension keys (e.g., 'created_at', 'status')
+      Object.keys(dimensionsForAlias).forEach(dimKey => {
+        const dimension = dimensionsForAlias[dimKey];
+
+        // Only include dimensions that are suitable for filtering (simple columns, not expressions)
+        if (isFilterableDimension(dimension)) {
+          items.push({
+            // Include provider name to ensure uniqueness across different providers
+            key: `${currentProvider}_${alias}.${dimKey}`,
+            value: dimension.title || dimKey,
+            dimensionKey: dimKey,
+            alias: alias,
+            dimension: dimension
+          });
+        }
+      });
+    });
+    return items;
+  };
+  const handleAddClick = () => {
+    setIsAdding(true);
+    setDimensionSelectionChain([]);
+    setSelectedDimension('');
+    setAvailableFilterValues([]);
+    setSelectedFilterValues([]);
+    setDateRangeFrom(null);
+    setDateRangeTo(null);
+    setEditingFilterPath(null); // Close any editing
+  };
+  const handleCancel = () => {
+    setIsAdding(false);
+    setDimensionSelectionChain([]);
+    setSelectedDimension('');
+    setAvailableFilterValues([]);
+    setSelectedFilterValues([]);
+    setDateRangeFrom(null);
+    setDateRangeTo(null);
+    setEditingFilterPath(null); // Close any editing
+  };
+  const handleEditFilter = async (fullPath, filter) => {
+    // Close add mode if open
+    setIsAdding(false);
+
+    // Set editing mode for this filter
+    setEditingFilterPath(fullPath);
+
+    // Check if this is a date filter
+    if (isDateDimension(filter.dimension)) {
+      // For date filters, set date range values
+      if (filter.values && typeof filter.values === 'object' && !Array.isArray(filter.values)) {
+        setDateRangeFrom(filter.values.gte ? dayjs(filter.values.gte) : null);
+        setDateRangeTo(filter.values.lte ? dayjs(filter.values.lte) : null);
+      }
+    } else {
+      // For regular filters, set selected values and fetch available values
+      setSelectedFilterValues(filter.values || []);
+      await fetchFilterValues(fullPath);
+    }
+  };
+  const handleSaveEditedFilter = fullPath => {
+    // Get the existing filter data
+    const existingFilter = savedFilters[fullPath];
+
+    // Check if this is a date filter
+    if (isDateDimension(existingFilter.dimension)) {
+      // For date filters, validate that at least one date is provided
+      if (!dateRangeFrom && !dateRangeTo) {
+        return; // Don't save if no dates provided
+      }
+
+      // Update with new date range values (only include provided dates)
+      const dateValues = {};
+      if (dateRangeFrom) {
+        dateValues.gte = dateRangeFrom.format('YYYY-MM-DD');
+      }
+      if (dateRangeTo) {
+        dateValues.lte = dateRangeTo.format('YYYY-MM-DD');
+      }
+      const updatedFilter = {
+        ...existingFilter,
+        values: dateValues
+      };
+
+      // Save the updated filter
+      onSaveFilter(fullPath, updatedFilter);
+    } else {
+      // For regular filters, validate selected values
+      if (selectedFilterValues.length === 0) {
+        return; // Don't save if no values selected
+      }
+
+      // Update with new values
+      const updatedFilter = {
+        ...existingFilter,
+        values: selectedFilterValues
+      };
+
+      // Save the updated filter
+      onSaveFilter(fullPath, updatedFilter);
+    }
+
+    // Close editing mode
+    setEditingFilterPath(null);
+    setAvailableFilterValues([]);
+    setSelectedFilterValues([]);
+    setDateRangeFrom(null);
+    setDateRangeTo(null);
+  };
+  const handleCancelEdit = () => {
+    setEditingFilterPath(null);
+    setAvailableFilterValues([]);
+    setSelectedFilterValues([]);
+    setDateRangeFrom(null);
+    setDateRangeTo(null);
+  };
+
+  // Title editing handlers
+  const handleStartEditTitle = (fullPath, currentTitle) => {
+    setEditingTitlePath(fullPath);
+    setEditTitleValue(titleOverrides[fullPath] || currentTitle || '');
+  };
+  const handleSaveTitle = fullPath => {
+    const trimmedValue = editTitleValue.trim();
+    if (trimmedValue === '') {
+      // Empty string validation - treat as cancel
+      handleCancelEditTitle();
+      return;
+    }
+    onUpdateTitle(fullPath, trimmedValue);
+    setEditingTitlePath(null);
+    setEditTitleValue('');
+  };
+  const handleCancelEditTitle = () => {
+    setEditingTitlePath(null);
+    setEditTitleValue('');
+  };
+  const handleResetTitle = fullPath => {
+    onResetTitle(fullPath);
+    setEditingTitlePath(null);
+    setEditTitleValue('');
+  };
+  const handleKeyDown = (e, fullPath) => {
+    if (e.key === 'Enter') {
+      handleSaveTitle(fullPath);
+    } else if (e.key === 'Escape') {
+      handleCancelEditTitle();
+    }
+  };
+
+  // Fetch distinct values for the selected dimension
+  const fetchFilterValues = async fullPath => {
+    setLoadingFilterValues(true);
+    try {
+      // Get parameters from context if available, otherwise use default
+      const parameters = reportingContext?.parameters || {
+        base_currency: "EUR"
+      };
+
+      // Build a temporary report to fetch distinct values
+      const reportPayload = {
+        provider: rootProvider,
+        doc: {
+          query: {
+            dimensions: [fullPath],
+            metrics: [],
+            order_by: [{
+              "name": fullPath
+            }]
+          }
+        },
+        parameters
+      };
+      console.log('Fetching filter values with payload:', reportPayload);
+      const results = await Api.runAdHocReport({
+        report: reportPayload
+      });
+      console.log('Filter values results:', results);
+
+      // Extract distinct values from results
+      // Results format: [{ "ft_currency": "USD" }, { "ft_currency": "EUR" }, ...]
+      // Note: The API might return keys with underscores instead of dots
+      // The results might be directly an array or nested under 'data' property
+      const dataArray = Array.isArray(results) ? results : results.data || [];
+      const distinctValues = dataArray.map(row => {
+        // Try to find the value using the fullPath or any key in the row
+        let value = row[fullPath];
+
+        // If not found, try with underscores instead of dots
+        if (value === undefined) {
+          const alternateKey = fullPath.replace(/\./g, '_');
+          value = row[alternateKey];
+        }
+
+        // If still not found, use the first value in the row
+        if (value === undefined) {
+          const keys = Object.keys(row);
+          if (keys.length > 0) {
+            value = row[keys[0]];
+          }
+        }
+        return {
+          key: String(value),
+          value: String(value)
+        };
+      });
+      console.log('Transformed distinct values:', distinctValues);
+      setAvailableFilterValues(distinctValues);
+    } catch (error) {
+      console.error('Error fetching filter values:', error);
+      setAvailableFilterValues([]);
+    } finally {
+      setLoadingFilterValues(false);
+    }
+  };
+  const handleSave = () => {
+    const dimensionItems = getDimensionItems();
+    const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
+    if (!selectedItem) return;
+
+    // Check if this is a date filter
+    const isDate = isDateDimension(selectedItem.dimension);
+
+    // Validate based on filter type
+    if (isDate) {
+      if (!dateRangeFrom && !dateRangeTo) return; // At least one date must be provided
+    } else {
+      if (selectedFilterValues.length === 0) return; // Regular filters must have values
+    }
+    if (!selectedDimension) return;
+
+    // Build the complete relation objects array
+    const relations = [];
+    const providerPath = [rootProvider];
+    const relationNames = [];
+
+    // Collect all relation objects from the selection chain
+    let currentProviderKey = rootProvider;
+    dimensionSelectionChain.forEach(selection => {
+      const provider = providersData[currentProviderKey];
+      if (provider && provider.relations) {
+        // Find the complete relation object
+        const relationObj = provider.relations.find(rel => rel.name === selection.relationName);
+        if (relationObj) {
+          relations.push(relationObj);
+          relationNames.push(relationObj.name);
+        }
+      }
+      providerPath.push(selection.targetKey);
+      currentProviderKey = selection.targetKey;
+    });
+
+    // Build the alias path: root_alias + relation_aliases + dimension_key
+    const rootProviderData = providersData[rootProvider];
+    const aliasPath = [rootProviderData.default_alias];
+    relations.forEach(rel => {
+      aliasPath.push(rel.alias);
+    });
+    const fullPath = `${aliasPath.join('_')}.${selectedItem.dimensionKey}`;
+
+    // Prepare filter values based on type
+    let filterValues;
+    if (isDate) {
+      // For date filters, store as {gte, lte} object (only include provided dates)
+      filterValues = {};
+      if (dateRangeFrom) {
+        filterValues.gte = dateRangeFrom.format('YYYY-MM-DD');
+      }
+      if (dateRangeTo) {
+        filterValues.lte = dateRangeTo.format('YYYY-MM-DD');
+      }
+    } else {
+      // For regular filters, store as array
+      filterValues = selectedFilterValues;
+    }
+    const filterData = {
+      // Complete dimension object from the final provider
+      dimension: selectedItem.dimension,
+      // Array of complete relation objects
+      relations: relations,
+      // Metadata
+      providerPath: providerPath,
+      relationNames: relationNames,
+      dimensionKey: selectedItem.dimensionKey,
+      dimensionTitle: selectedItem.value,
+      // The constructed path for server
+      fullPath: fullPath,
+      // Selected filter values (array for regular, object for date)
+      values: filterValues
+    };
+    onSaveFilter(fullPath, filterData);
+    handleCancel();
+  };
+  const handleDimensionChange = event => {
+    const dimensionKey = event.target.value;
+    setSelectedDimension(dimensionKey);
+    setSelectedFilterValues([]);
+    setDateRangeFrom(null);
+    setDateRangeTo(null);
+    if (dimensionKey) {
+      // Build the fullPath for this dimension to fetch its values
+      const dimensionItems = getDimensionItems();
+      const selectedItem = dimensionItems.find(item => item.key === dimensionKey);
+      if (selectedItem) {
+        // Check if this is a date dimension
+        const isDate = isDateDimension(selectedItem.dimension);
+
+        // Only fetch values for non-date dimensions
+        if (!isDate) {
+          // Build the complete relation objects array
+          const relations = [];
+          let currentProviderKey = rootProvider;
+          dimensionSelectionChain.forEach(selection => {
+            const provider = providersData[currentProviderKey];
+            if (provider && provider.relations) {
+              const relationObj = provider.relations.find(rel => rel.name === selection.relationName);
+              if (relationObj) {
+                relations.push(relationObj);
+              }
+            }
+            currentProviderKey = selection.targetKey;
+          });
+
+          // Build the alias path
+          const rootProviderData = providersData[rootProvider];
+          const aliasPath = [rootProviderData.default_alias];
+          relations.forEach(rel => {
+            aliasPath.push(rel.alias);
+          });
+          const fullPath = `${aliasPath.join('_')}.${selectedItem.dimensionKey}`;
+
+          // Fetch distinct values for this dimension
+          fetchFilterValues(fullPath);
+        }
+      }
+    } else {
+      setAvailableFilterValues([]);
+    }
+  };
+  const formatProviderPath = filter => {
+    // Build path using root provider + relation names
+    const pathParts = [rootProvider];
+    if (filter.relationNames && filter.relationNames.length > 0) {
+      pathParts.push(...filter.relationNames);
+    }
+    return pathParts.join(' → ');
+  };
+
+  // Convert savedFilters object to array for display
+  const filterEntries = Object.entries(savedFilters);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 2,
+      marginBottom: 2
+    }
+  }, !isAdding ? /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    onClick: handleAddClick
+  }, "Add Filter") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outlined",
+    onClick: handleCancel
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    onClick: handleSave,
+    disabled: (() => {
+      if (!selectedDimension) return true;
+      const dimensionItems = getDimensionItems();
+      const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
+      if (!selectedItem) return true;
+      const isDate = isDateDimension(selectedItem.dimension);
+      return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
+    })()
+  }, "Save Filter"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
+    sx: {
+      padding: 3,
+      marginBottom: 3
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      marginBottom: 2
+    }
+  }, "Select Provider Path"), /*#__PURE__*/React__default.createElement(ProviderSelection, {
+    providersData: providersData,
+    rootProvider: rootProvider,
+    onSelectionChange: setDimensionSelectionChain,
+    existingDimensions: existingDimensions,
+    existingMetrics: existingMetrics,
+    existingFilters: savedFilters
+  }), /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      marginTop: 3,
+      marginBottom: 2
+    }
+  }, "Select Dimension for Filter"), /*#__PURE__*/React__default.createElement(SingleSelect, {
+    items: getDimensionItems(),
+    value: selectedDimension,
+    label: "Choose Dimension",
+    onChange: handleDimensionChange,
+    sx: {
+      width: '400px'
+    }
+  }), selectedDimension && (() => {
+    const dimensionItems = getDimensionItems();
+    const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
+    const isDate = selectedItem && isDateDimension(selectedItem.dimension);
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
+      variant: "h6",
+      sx: {
+        marginTop: 3,
+        marginBottom: 2
+      }
+    }, isDate ? 'Select Date Range' : 'Select Filter Values'), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
+      dateAdapter: AdapterDayjs
+    }, /*#__PURE__*/React__default.createElement(Box$1, {
+      sx: {
+        display: 'flex',
+        gap: 2,
+        width: '400px'
+      }
+    }, /*#__PURE__*/React__default.createElement(DatePicker, {
+      label: "From Date",
+      value: dateRangeFrom,
+      onChange: newValue => setDateRangeFrom(newValue),
+      slotProps: {
+        textField: {
+          size: 'small',
+          fullWidth: true
+        },
+        field: {
+          clearable: true
+        }
+      }
+    }), /*#__PURE__*/React__default.createElement(DatePicker, {
+      label: "To Date",
+      value: dateRangeTo,
+      onChange: newValue => setDateRangeTo(newValue),
+      slotProps: {
+        textField: {
+          size: 'small',
+          fullWidth: true
+        },
+        field: {
+          clearable: true
+        }
+      }
+    }))) : /*#__PURE__*/React__default.createElement(Box$1, {
+      sx: {
+        width: '400px'
+      }
+    }, /*#__PURE__*/React__default.createElement(CheckboxMultiAutocomplete, {
+      items: availableFilterValues,
+      selectedKeys: selectedFilterValues,
+      onChange: keys => setSelectedFilterValues(keys),
+      label: "Choose Values",
+      placeholder: "Select one or more values...",
+      loading: loadingFilterValues,
+      helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value'
+    })));
+  })()), filterEntries.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      marginTop: 3
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      marginBottom: 2
+    }
+  }, "Saved Filters"), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 2
+    }
+  }, filterEntries.map(([fullPath, filter]) => {
+    const isDate = isDateDimension(filter.dimension);
+    const isEditing = editingFilterPath === fullPath;
+    const isEditingTitle = editingTitlePath === fullPath;
+
+    // Format display values based on filter type
+    let valueCount, valuesList, badgeContent;
+    if (isDate && filter.values && typeof filter.values === 'object' && !Array.isArray(filter.values)) {
+      // Date range filter - handle cases where only one date is provided
+      if (filter.values.gte && filter.values.lte) {
+        valuesList = `${filter.values.gte} to ${filter.values.lte}`;
+      } else if (filter.values.gte) {
+        valuesList = `From ${filter.values.gte}`;
+      } else if (filter.values.lte) {
+        valuesList = `Until ${filter.values.lte}`;
+      } else {
+        valuesList = 'No dates';
+      }
+      badgeContent = '📅'; // Calendar emoji for date filters
+    } else {
+      // Regular filter
+      valueCount = filter.values?.length || 0;
+      valuesList = filter.values?.join(', ') || 'No values';
+      badgeContent = valueCount;
+    }
+    const displayLabel = titleOverrides[fullPath] || filter.dimensionTitle;
+    const hasCustomTitle = !!titleOverrides[fullPath];
+    return /*#__PURE__*/React__default.createElement(Box$1, {
+      key: fullPath
+    }, /*#__PURE__*/React__default.createElement(Box$1, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        marginBottom: isEditing ? 2 : 0
+      }
+    }, !isEditingTitle ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
+      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)),
+      arrow: true,
+      placement: "top"
+    }, /*#__PURE__*/React__default.createElement(Badge, {
+      badgeContent: badgeContent,
+      color: "secondary"
+    }, /*#__PURE__*/React__default.createElement(Chip, {
+      label: displayLabel,
+      onDelete: () => onRemoveFilter(fullPath),
+      color: "secondary",
+      variant: "outlined",
+      sx: {
+        fontWeight: hasCustomTitle ? 'bold' : 'normal',
+        fontStyle: hasCustomTitle ? 'italic' : 'normal'
+      }
+    }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Rename filter",
+      arrow: true
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      size: "small",
+      onClick: () => handleStartEditTitle(fullPath, filter.dimensionTitle),
+      color: "primary",
+      disabled: isEditing
+    }, /*#__PURE__*/React__default.createElement(EditIcon, {
+      fontSize: "small"
+    }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Edit filter values",
+      arrow: true
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      size: "small",
+      onClick: () => handleEditFilter(fullPath, filter),
+      color: "primary",
+      disabled: isEditing
+    }, /*#__PURE__*/React__default.createElement(FilterAltIcon, {
+      fontSize: "small"
+    })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
+      value: editTitleValue,
+      onChange: e => setEditTitleValue(e.target.value),
+      onKeyDown: e => handleKeyDown(e, fullPath),
+      size: "small",
+      autoFocus: true,
+      placeholder: "Enter custom title",
+      sx: {
+        width: '300px'
+      }
+    }), /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Save",
+      arrow: true
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      size: "small",
+      onClick: () => handleSaveTitle(fullPath),
+      color: "primary"
+    }, /*#__PURE__*/React__default.createElement(CheckIcon, {
+      fontSize: "small"
+    }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Cancel",
+      arrow: true
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      size: "small",
+      onClick: handleCancelEditTitle,
+      color: "default"
+    }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+      fontSize: "small"
+    }))), hasCustomTitle && /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Reset to default",
+      arrow: true
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      size: "small",
+      onClick: () => handleResetTitle(fullPath),
+      color: "warning"
+    }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
+      fontSize: "small"
+    }))))), isEditing && /*#__PURE__*/React__default.createElement(Paper$1, {
+      sx: {
+        padding: 2,
+        marginLeft: 2
+      }
+    }, /*#__PURE__*/React__default.createElement(Typography$1, {
+      variant: "subtitle2",
+      sx: {
+        marginBottom: 1
+      }
+    }, "Edit Filter ", isDate ? 'Date Range' : 'Values', " for: ", filter.dimensionTitle), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
+      dateAdapter: AdapterDayjs
+    }, /*#__PURE__*/React__default.createElement(Box$1, {
+      sx: {
+        display: 'flex',
+        gap: 2,
+        width: '400px',
+        marginBottom: 2
+      }
+    }, /*#__PURE__*/React__default.createElement(DatePicker, {
+      label: "From Date",
+      value: dateRangeFrom,
+      onChange: newValue => setDateRangeFrom(newValue),
+      slotProps: {
+        textField: {
+          size: 'small',
+          fullWidth: true
+        },
+        field: {
+          clearable: true
+        }
+      }
+    }), /*#__PURE__*/React__default.createElement(DatePicker, {
+      label: "To Date",
+      value: dateRangeTo,
+      onChange: newValue => setDateRangeTo(newValue),
+      slotProps: {
+        textField: {
+          size: 'small',
+          fullWidth: true
+        },
+        field: {
+          clearable: true
+        }
+      }
+    }))) : /*#__PURE__*/React__default.createElement(Box$1, {
+      sx: {
+        width: '400px',
+        marginBottom: 2
+      }
+    }, /*#__PURE__*/React__default.createElement(CheckboxMultiAutocomplete, {
+      items: availableFilterValues,
+      selectedKeys: selectedFilterValues,
+      onChange: keys => setSelectedFilterValues(keys),
+      label: "Choose Values",
+      placeholder: "Select one or more values...",
+      loading: loadingFilterValues,
+      helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value'
+    })), /*#__PURE__*/React__default.createElement(Box$1, {
+      sx: {
+        display: 'flex',
+        gap: 1
+      }
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      variant: "outlined",
+      size: "small",
+      onClick: handleCancelEdit
+    }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
+      variant: "contained",
+      size: "small",
+      onClick: () => handleSaveEditedFilter(fullPath),
+      disabled: isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0
+    }, "Save Changes"))));
+  }))));
+};
+
+const ReportDataGrid = ({
+  reportData,
+  dimensions,
+  metrics,
+  loading,
+  onPageChange,
+  totalRows = 0,
+  titleOverrides = {
+    dimensions: {},
+    metrics: {}
+  }
+}) => {
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50
+  });
+
+  // Generate columns dynamically from dimensions and metrics
+  const columns = React__default.useMemo(() => {
+    const cols = [];
+
+    // Add dimension columns
+    // Field naming logic:
+    // - If from base provider: baseAlias.field -> baseAlias_field
+    // - If from nested provider: baseAlias_rel1_rel2.field -> rel1_rel2_field (drops base alias)
+    dimensions.forEach(dim => {
+      let fieldName;
+      let headerName;
+
+      // Check if there are relations (nested providers)
+      if (dim.relations && dim.relations.length > 0) {
+        // From nested provider: drop the base provider alias
+        // Example: ft_fa_db.currency -> fa_db_currency
+        const parts = dim.fullPath.split('.');
+        const pathWithoutField = parts[0]; // e.g., "ft_fa_db"
+        const field = parts[1]; // e.g., "currency"
+
+        // Remove the base provider alias (first part before first underscore)
+        const pathParts = pathWithoutField.split('_');
+        pathParts.shift(); // Remove base provider alias
+        const pathWithoutBase = pathParts.join('_'); // e.g., "fa_db"
+
+        fieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
+      } else {
+        // From base provider: keep the full path with underscore
+        // Example: ba.created_at -> ba_created_at
+        fieldName = dim.fullPath.replace('.', '_');
+      }
+
+      // Check for title override, otherwise use the friendly dimension title from provider
+      headerName = titleOverrides.dimensions[dim.fullPath] || dim.dimensionTitle || fieldName;
+      cols.push({
+        field: fieldName,
+        headerName: headerName,
+        flex: 1,
+        minWidth: 150
+      });
+    });
+
+    // Add metric columns
+    // Metric field naming logic:
+    // - If from base provider: baseAlias.metric -> metric (no prefix at all)
+    // - If from nested provider: baseAlias_rel1_rel2.metric -> rel1_rel2_metric (drops base alias)
+    metrics.forEach(metric => {
+      const metricDef = metric.metric;
+      let fieldName;
+      let headerName;
+
+      // Check if there are relations (nested providers)
+      if (metric.relations && metric.relations.length > 0) {
+        // From nested provider: drop the base provider alias
+        // Example: ft_fa.total_amount -> fa_total_amount
+        const parts = metric.fullPath.split('.');
+        const pathWithoutField = parts[0]; // e.g., "ft_fa"
+        const field = parts[1]; // e.g., "total_amount"
+
+        // Remove the base provider alias (first part before first underscore)
+        const pathParts = pathWithoutField.split('_');
+        pathParts.shift(); // Remove base provider alias
+        const pathWithoutBase = pathParts.join('_'); // e.g., "fa"
+
+        fieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
+      } else {
+        // From base provider: no prefix at all, just the metric name
+        // Example: fo.total_amount -> total_amount
+        fieldName = metric.metricName;
+      }
+
+      // Check for title override, otherwise use the friendly metric title from provider
+      headerName = titleOverrides.metrics[metric.fullPath] || metric.metricTitle || fieldName;
+      cols.push({
+        field: fieldName,
+        headerName: headerName,
+        flex: 1,
+        minWidth: 150,
+        type: metricDef?.type === 'integer' || metricDef?.type === 'currency' ? 'number' : 'string',
+        valueFormatter: value => {
+          if (value == null) return '';
+
+          // Format based on metric type
+          if (metricDef?.format) {
+            const formatted = numeral(value).format(metricDef.format);
+            if (metricDef?.prefix) {
+              return `${metricDef.prefix} ${formatted}`;
+            }
+            return formatted;
+          }
+          return value;
+        }
+      });
+    });
+    return cols;
+  }, [dimensions, metrics, titleOverrides]);
+
+  // Transform report data to rows with unique IDs
+  const rows = React__default.useMemo(() => {
+    if (!reportData || !Array.isArray(reportData)) return [];
+    return reportData.map((row, index) => ({
+      id: index,
+      // DataGrid requires unique id for each row
+      ...row
+    }));
+  }, [reportData]);
+
+  // Handle pagination change
+  const handlePaginationModelChange = newModel => {
+    setPaginationModel(newModel);
+
+    // Notify parent component about page change
+    if (onPageChange && newModel.page !== paginationModel.page) {
+      onPageChange(newModel.page, newModel.pageSize);
+    }
+  };
+  if (loading) {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: 400
+    }, /*#__PURE__*/React__default.createElement(CircularProgress$1, null));
+  }
+  if (!reportData || reportData.length === 0) {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: 400
+    }, /*#__PURE__*/React__default.createElement(Typography$1, {
+      variant: "body1",
+      color: "textSecondary"
+    }, "No data available. Run a report to see results."));
+  }
+  return /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      height: 600,
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(DataGrid, {
+    rows: rows,
+    columns: columns,
+    paginationModel: paginationModel,
+    onPaginationModelChange: handlePaginationModelChange,
+    pageSizeOptions: [10, 25, 50, 100],
+    paginationMode: "server",
+    rowCount: totalRows || rows.length,
+    loading: loading,
+    disableRowSelectionOnClick: true,
+    sx: {
+      '& .MuiDataGrid-cell': {
+        padding: '8px'
+      },
+      '& .MuiDataGrid-columnHeader': {
+        backgroundColor: '#f5f5f5',
+        fontWeight: 'bold'
+      }
+    }
+  }));
+};
+
+// TabPanel component to show/hide tab content
+function TabPanel({
+  children,
+  value,
+  index
+}) {
+  return /*#__PURE__*/React__default.createElement("div", {
+    role: "tabpanel",
+    hidden: value !== index,
+    id: `report-tabpanel-${index}`,
+    "aria-labelledby": `report-tab-${index}`
+  }, value === index && /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      py: 3
+    }
+  }, children));
+}
+const ReportBuilder = ({
+  reportDefinitionId,
+  cloneData,
+  autoRun,
+  onBackToList
+}) => {
+  const notify = useNotify();
+  const reportingContext = useReportingContextOptional();
+  const [providersData, setProvidersData] = useState(null);
+  const [selectedProvider, setSelectedProvider] = useState('');
+  const [reportTitle, setReportTitle] = useState('');
+  const [report, setReport] = useState({
+    dimensions: [],
+    metrics: [],
+    filters: {}
+  });
+  const [titleOverrides, setTitleOverrides] = useState({
+    dimensions: {},
+    metrics: {},
+    filters: {}
+  });
+  const [reportData, setReportData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [totalRows, setTotalRows] = useState(0);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [pageSize, setPageSize] = useState(50);
+  const [activeTab, setActiveTab] = useState(0);
+  const [saving, setSaving] = useState(false);
+  const [reportLoaded, setReportLoaded] = useState(false);
+  useEffect(() => {
+    (async () => {
+      const providers = await Api.getProviders();
+      console.log({
+        providers
+      });
+      setProvidersData(providers);
+    })();
+  }, []);
+
+  // Load existing report definition when ID is provided
+  useEffect(() => {
+    if (reportDefinitionId && providersData) {
+      loadReportDefinition(reportDefinitionId);
+    }
+  }, [reportDefinitionId, providersData]);
+
+  // Load cloned report data when cloneData is provided
+  useEffect(() => {
+    if (cloneData && providersData) {
+      loadClonedReport(cloneData);
+    }
+  }, [cloneData, providersData]);
+
+  // Auto-run report when autoRun is true and report is loaded
+  useEffect(() => {
+    if (autoRun && reportLoaded && selectedProvider && report.dimensions.length > 0) {
+      handleRunReport();
+    }
+  }, [autoRun, reportLoaded]);
+
+  // Utility function to reconstruct dimension object from fullPath
+  const reconstructDimensionFromPath = (fullPath, providersData, rootProvider) => {
+    try {
+      // Parse: "ft_sa_db_pc.legal_name" -> ["ft", "sa", "db", "pc"], "legal_name"
+      const [aliasPath, fieldKey] = fullPath.split('.');
+      const aliases = aliasPath.split('_');
+
+      // Walk the chain to build relations array
+      let currentProvider = rootProvider;
+      const relations = [];
+      const providerPath = [rootProvider];
+      const relationNames = [];
+
+      // Skip first alias (root), process the rest
+      for (let i = 1; i < aliases.length; i++) {
+        const alias = aliases[i];
+        const provider = providersData[currentProvider];
+        if (!provider || !provider.relations) {
+          console.warn(`Provider ${currentProvider} not found or has no relations`);
+          return null;
+        }
+        const relation = provider.relations.find(r => r.alias === alias);
+        if (!relation) {
+          console.warn(`Relation with alias ${alias} not found in provider ${currentProvider}`);
+          return null;
+        }
+        relations.push(relation);
+        relationNames.push(relation.name);
+        currentProvider = relation.target;
+        providerPath.push(currentProvider);
+      }
+
+      // Get the dimension from final provider
+      const finalProvider = providersData[currentProvider];
+      if (!finalProvider) {
+        console.warn(`Final provider ${currentProvider} not found`);
+        return null;
+      }
+
+      // Use the provider's default_alias, not the relation alias
+      const finalAlias = finalProvider.default_alias;
+      if (!finalProvider.dimensions || !finalProvider.dimensions[finalAlias]) {
+        console.warn(`Dimensions not found for alias ${finalAlias} in provider ${currentProvider}`);
+        return null;
+      }
+      const dimension = finalProvider.dimensions[finalAlias][fieldKey];
+      if (!dimension) {
+        console.warn(`Dimension ${fieldKey} not found in provider ${currentProvider}, alias ${finalAlias}`);
+        return null;
+      }
+      return {
+        dimension,
+        relations,
+        providerPath,
+        relationNames,
+        dimensionKey: fieldKey,
+        dimensionTitle: dimension.title || fieldKey,
+        fullPath
+      };
+    } catch (error) {
+      console.warn(`Error reconstructing dimension from path ${fullPath}:`, error);
+      return null;
+    }
+  };
+
+  // Utility function to reconstruct metric object from fullPath
+  const reconstructMetricFromPath = (fullPath, providersData, rootProvider) => {
+    try {
+      // Parse: "ft_sa.financing_internal" -> ["ft", "sa"], "financing_internal"
+      const [aliasPath, metricName] = fullPath.split('.');
+      const aliases = aliasPath.split('_');
+
+      // Walk the chain to build relations array
+      let currentProvider = rootProvider;
+      const relations = [];
+      const providerPath = [rootProvider];
+      const relationNames = [];
+
+      // Skip first alias (root), process the rest
+      for (let i = 1; i < aliases.length; i++) {
+        const alias = aliases[i];
+        const provider = providersData[currentProvider];
+        if (!provider || !provider.relations) {
+          console.warn(`Provider ${currentProvider} not found or has no relations`);
+          return null;
+        }
+        const relation = provider.relations.find(r => r.alias === alias);
+        if (!relation) {
+          console.warn(`Relation with alias ${alias} not found in provider ${currentProvider}`);
+          return null;
+        }
+        relations.push(relation);
+        relationNames.push(relation.name);
+        currentProvider = relation.target;
+        providerPath.push(currentProvider);
+      }
+
+      // Get the metric from final provider
+      const finalProvider = providersData[currentProvider];
+      if (!finalProvider) {
+        console.warn(`Final provider ${currentProvider} not found`);
+        return null;
+      }
+      if (!finalProvider.metrics) {
+        console.warn(`Metrics not found in provider ${currentProvider}`);
+        return null;
+      }
+      const metric = finalProvider.metrics.find(m => m.name === metricName);
+      if (!metric) {
+        console.warn(`Metric ${metricName} not found in provider ${currentProvider}`);
+        return null;
+      }
+      return {
+        metric,
+        relations,
+        providerPath,
+        relationNames,
+        metricName: metricName,
+        metricTitle: metric.title || metricName,
+        fullPath
+      };
+    } catch (error) {
+      console.warn(`Error reconstructing metric from path ${fullPath}:`, error);
+      return null;
+    }
+  };
+  const loadReportDefinition = async id => {
+    try {
+      console.log('Loading report definition:', id);
+      const reportDef = await Api.getReportDefinition({
+        id
+      });
+      console.log('Loaded report definition:', reportDef);
+
+      // Set the provider
+      setSelectedProvider(reportDef.provider);
+
+      // Set the title
+      setReportTitle(reportDef.title || '');
+
+      // Reconstruct dimensions
+      const reconstructedDimensions = [];
+      const orderByMap = {}; // Map to store sort order from order_by array
+
+      // First, build a map of fullPath -> sortOrder from order_by
+      if (reportDef.definition?.doc?.query?.order_by) {
+        for (const orderItem of reportDef.definition.doc.query.order_by) {
+          if (orderItem.desc === true) {
+            orderByMap[orderItem.name] = 'desc';
+          } else {
+            orderByMap[orderItem.name] = 'asc';
+          }
+        }
+      }
+
+      // Now reconstruct dimensions and add sortOrder from the map
+      if (reportDef.definition?.doc?.query?.dimensions) {
+        for (const dimPath of reportDef.definition.doc.query.dimensions) {
+          const dim = reconstructDimensionFromPath(dimPath, providersData, reportDef.provider);
+          if (dim) {
+            // Add sortOrder from order_by if it exists
+            dim.sortOrder = orderByMap[dimPath] || null;
+            reconstructedDimensions.push(dim);
+          }
+        }
+      }
+
+      // Reconstruct metrics
+      const reconstructedMetrics = [];
+      if (reportDef.definition?.doc?.query?.metrics) {
+        for (const metricPath of reportDef.definition.doc.query.metrics) {
+          const metric = reconstructMetricFromPath(metricPath, providersData, reportDef.provider);
+          if (metric) {
+            reconstructedMetrics.push(metric);
+          }
+        }
+      }
+
+      // Load title overrides if they exist
+      const loadedTitleOverrides = {
+        dimensions: {},
+        metrics: {},
+        filters: {}
+      };
+      if (reportDef.definition?.doc?.query?.titles) {
+        if (reportDef.definition.doc.query.titles.dimensions) {
+          loadedTitleOverrides.dimensions = reportDef.definition.doc.query.titles.dimensions;
+        }
+        if (reportDef.definition.doc.query.titles.metrics) {
+          loadedTitleOverrides.metrics = reportDef.definition.doc.query.titles.metrics;
+        }
+        if (reportDef.definition.doc.query.titles.filters) {
+          loadedTitleOverrides.filters = reportDef.definition.doc.query.titles.filters;
+        }
+      }
+
+      // Load filters if they exist
+      // Format: { and: [ { "ft.currency": ["USD", "EUR"] }, { "ft_ba.created_at": {gte: "...", lte: "..."} } ] }
+      // Need to reconstruct to full internal format: { "ft.currency": { dimension: {...}, values: [...], ... } }
+      const loadedFilters = {};
+      if (reportDef.definition?.doc?.query?.filter) {
+        const filterObj = reportDef.definition.doc.query.filter;
+
+        // Extract conditions from the 'and' or 'or' array
+        const conditions = filterObj.and || filterObj.or || [];
+        conditions.forEach(condition => {
+          // Each condition is an object with one key (the fullPath)
+          const [fullPath, values] = Object.entries(condition)[0];
+          const filterDim = reconstructDimensionFromPath(fullPath, providersData, reportDef.provider);
+          if (filterDim) {
+            loadedFilters[fullPath] = {
+              ...filterDim,
+              values: values // values can be array (regular) or object (date range)
+            };
+          }
+        });
+      }
+
+      // Set the report state
+      setReport({
+        dimensions: reconstructedDimensions,
+        metrics: reconstructedMetrics,
+        filters: loadedFilters
+      });
+
+      // Set title overrides
+      setTitleOverrides(loadedTitleOverrides);
+
+      // Mark report as loaded
+      setReportLoaded(true);
+      console.log('Reconstructed report:', {
+        dimensions: reconstructedDimensions,
+        metrics: reconstructedMetrics,
+        filters: loadedFilters,
+        titleOverrides: loadedTitleOverrides
+      });
+    } catch (error) {
+      console.error('Error loading report definition:', error);
+      notify.error('Error loading report definition: ' + (error.message || 'Unknown error'));
+    }
+  };
+  const loadClonedReport = reportDef => {
+    try {
+      console.log('Loading cloned report:', reportDef);
+
+      // Set the provider
+      setSelectedProvider(reportDef.provider);
+
+      // Set the title (already modified with " (Copy)" suffix)
+      setReportTitle(reportDef.title || '');
+
+      // Reconstruct dimensions
+      const reconstructedDimensions = [];
+      const orderByMap = {}; // Map to store sort order from order_by array
+
+      // First, build a map of fullPath -> sortOrder from order_by
+      if (reportDef.definition?.doc?.query?.order_by) {
+        for (const orderItem of reportDef.definition.doc.query.order_by) {
+          if (orderItem.desc === true) {
+            orderByMap[orderItem.name] = 'desc';
+          } else {
+            orderByMap[orderItem.name] = 'asc';
+          }
+        }
+      }
+
+      // Now reconstruct dimensions and add sortOrder from the map
+      if (reportDef.definition?.doc?.query?.dimensions) {
+        for (const dimPath of reportDef.definition.doc.query.dimensions) {
+          const dim = reconstructDimensionFromPath(dimPath, providersData, reportDef.provider);
+          if (dim) {
+            // Add sortOrder from order_by if it exists
+            dim.sortOrder = orderByMap[dimPath] || null;
+            reconstructedDimensions.push(dim);
+          }
+        }
+      }
+
+      // Reconstruct metrics
+      const reconstructedMetrics = [];
+      if (reportDef.definition?.doc?.query?.metrics) {
+        for (const metricPath of reportDef.definition.doc.query.metrics) {
+          const metric = reconstructMetricFromPath(metricPath, providersData, reportDef.provider);
+          if (metric) {
+            reconstructedMetrics.push(metric);
+          }
+        }
+      }
+
+      // Load title overrides if they exist
+      const loadedTitleOverrides = {
+        dimensions: {},
+        metrics: {},
+        filters: {}
+      };
+      if (reportDef.definition?.doc?.query?.titles) {
+        if (reportDef.definition.doc.query.titles.dimensions) {
+          loadedTitleOverrides.dimensions = reportDef.definition.doc.query.titles.dimensions;
+        }
+        if (reportDef.definition.doc.query.titles.metrics) {
+          loadedTitleOverrides.metrics = reportDef.definition.doc.query.titles.metrics;
+        }
+        if (reportDef.definition.doc.query.titles.filters) {
+          loadedTitleOverrides.filters = reportDef.definition.doc.query.titles.filters;
+        }
+      }
+
+      // Load filters if they exist
+      // Format: { and: [ { "ft.currency": ["USD", "EUR"] }, { "ft_ba.created_at": {gte: "...", lte: "..."} } ] }
+      const loadedFilters = {};
+      if (reportDef.definition?.doc?.query?.filter) {
+        const filterObj = reportDef.definition.doc.query.filter;
+
+        // Extract conditions from the 'and' or 'or' array
+        const conditions = filterObj.and || filterObj.or || [];
+        conditions.forEach(condition => {
+          // Each condition is an object with one key (the fullPath)
+          const [fullPath, values] = Object.entries(condition)[0];
+          const filterDim = reconstructDimensionFromPath(fullPath, providersData, reportDef.provider);
+          if (filterDim) {
+            loadedFilters[fullPath] = {
+              ...filterDim,
+              values: values
+            };
+          }
+        });
+      }
+
+      // Set the report state
+      setReport({
+        dimensions: reconstructedDimensions,
+        metrics: reconstructedMetrics,
+        filters: loadedFilters
+      });
+
+      // Set title overrides
+      setTitleOverrides(loadedTitleOverrides);
+      console.log('Loaded cloned report:', {
+        dimensions: reconstructedDimensions,
+        metrics: reconstructedMetrics,
+        filters: loadedFilters,
+        titleOverrides: loadedTitleOverrides
+      });
+    } catch (error) {
+      console.error('Error loading cloned report:', error);
+      notify.error('Error loading cloned report: ' + (error.message || 'Unknown error'));
+    }
+  };
+
+  // Get items for the initial provider dropdown
+  const getProviderItems = () => {
+    if (!providersData) return [];
+    return Object.keys(providersData).map(key => ({
+      key: key,
+      value: providersData[key].name || key
+    }));
+  };
+  const handleProviderChange = event => {
+    setSelectedProvider(event.target.value);
+    // Reset dimensions, metrics, and filters when root provider changes
+    setReport({
+      dimensions: [],
+      metrics: [],
+      filters: {}
+    });
+    // Reset title overrides
+    setTitleOverrides({
+      dimensions: {},
+      metrics: {},
+      filters: {}
+    });
+    console.log('Selected root provider:', event.target.value);
+  };
+  const handleUpdateDimensionTitle = (fullPath, customTitle) => {
+    setTitleOverrides(prev => ({
+      ...prev,
+      dimensions: {
+        ...prev.dimensions,
+        [fullPath]: customTitle
+      }
+    }));
+  };
+  const handleResetDimensionTitle = fullPath => {
+    setTitleOverrides(prev => {
+      const newDimensions = {
+        ...prev.dimensions
+      };
+      delete newDimensions[fullPath];
+      return {
+        ...prev,
+        dimensions: newDimensions
+      };
+    });
+  };
+  const handleUpdateMetricTitle = (fullPath, customTitle) => {
+    setTitleOverrides(prev => ({
+      ...prev,
+      metrics: {
+        ...prev.metrics,
+        [fullPath]: customTitle
+      }
+    }));
+  };
+  const handleResetMetricTitle = fullPath => {
+    setTitleOverrides(prev => {
+      const newMetrics = {
+        ...prev.metrics
+      };
+      delete newMetrics[fullPath];
+      return {
+        ...prev,
+        metrics: newMetrics
+      };
+    });
+  };
+  const handleUpdateFilterTitle = (fullPath, customTitle) => {
+    setTitleOverrides(prev => ({
+      ...prev,
+      filters: {
+        ...prev.filters,
+        [fullPath]: customTitle
+      }
+    }));
+  };
+  const handleResetFilterTitle = fullPath => {
+    setTitleOverrides(prev => {
+      const newFilters = {
+        ...prev.filters
+      };
+      delete newFilters[fullPath];
+      return {
+        ...prev,
+        filters: newFilters
+      };
+    });
+  };
+  const handleSaveDimension = dimensionData => {
+    setReport(prev => {
+      const newReport = {
+        ...prev,
+        dimensions: [...prev.dimensions, dimensionData]
+      };
+      console.log('Dimension saved:', dimensionData);
+      console.log('Complete report:', newReport);
+      return newReport;
+    });
+  };
+  const handleRemoveDimension = index => {
+    setReport(prev => ({
+      ...prev,
+      dimensions: prev.dimensions.filter((_, i) => i !== index)
+    }));
+  };
+  const handleReorderDimensions = newOrder => {
+    setReport(prev => ({
+      ...prev,
+      dimensions: newOrder
+    }));
+  };
+  const handleSaveMetric = metricData => {
+    setReport(prev => {
+      const newReport = {
+        ...prev,
+        metrics: [...prev.metrics, metricData]
+      };
+      console.log('Metric saved:', metricData);
+      console.log('Complete report:', newReport);
+      return newReport;
+    });
+  };
+  const handleRemoveMetric = index => {
+    setReport(prev => ({
+      ...prev,
+      metrics: prev.metrics.filter((_, i) => i !== index)
+    }));
+  };
+  const handleReorderMetrics = newOrder => {
+    setReport(prev => ({
+      ...prev,
+      metrics: newOrder
+    }));
+  };
+  const handleSaveFilter = (fullPath, filterData) => {
+    setReport(prev => {
+      const newReport = {
+        ...prev,
+        filters: {
+          ...prev.filters,
+          [fullPath]: filterData
+        }
+      };
+      console.log('Filter saved:', {
+        fullPath,
+        filterData
+      });
+      console.log('Complete report:', newReport);
+      return newReport;
+    });
+  };
+  const handleRemoveFilter = fullPath => {
+    setReport(prev => {
+      const newFilters = {
+        ...prev.filters
+      };
+      delete newFilters[fullPath];
+      return {
+        ...prev,
+        filters: newFilters
+      };
+    });
+  };
+
+  // Convert internal report structure to API format
+  const convertReportToApiFormat = (page = 0, size = 50) => {
+    // Build order_by array - include all dimensions, add desc property only when needed
+    const orderBy = report.dimensions.map(dim => {
+      const orderItem = {
+        name: dim.fullPath
+      };
+      if (dim.sortOrder === 'desc') {
+        orderItem.desc = true;
+      }
+      // For 'asc' or null, just include { name: fullPath } without desc property
+      return orderItem;
+    });
+
+    // Build filter object - convert from our internal format to NEW API format
+    // Internal format (saved):
+    //   Regular: { "ft.currency": { dimension: {...}, values: ["USD", "EUR"], ... } }
+    //   Date: { "ft_ba.created_at": { dimension: {...}, values: {gte: "2025-05-01", lte: "2025-12-31"}, ... } }
+    // NEW API format (for running):
+    //   { and: [ { "ft.currency": ["USD", "EUR"] }, { "ft_ba.created_at": {gte: "2025-05-01", lte: "2025-12-31"} } ] }
+    const conditions = [];
+    if (report.filters && Object.keys(report.filters).length > 0) {
+      Object.entries(report.filters).forEach(([fullPath, filterData]) => {
+        if (filterData.values) {
+          // Check if values is an object (date range) or array (regular filter)
+          if (Array.isArray(filterData.values)) {
+            // Regular filter - only add if array has values
+            if (filterData.values.length > 0) {
+              conditions.push({
+                [fullPath]: filterData.values
+              });
+            }
+          } else if (typeof filterData.values === 'object') {
+            // Date range filter - add the object as-is
+            conditions.push({
+              [fullPath]: filterData.values
+            });
+          }
+        }
+      });
+    }
+
+    // Build the new filter structure with top-level 'and' operator
+    const filter = conditions.length > 0 ? {
+      and: conditions
+    } : null;
+
+    // Build titles object - only include overridden titles
+    const titles = {};
+    if (Object.keys(titleOverrides.dimensions).length > 0) {
+      titles.dimensions = titleOverrides.dimensions;
+    }
+    if (Object.keys(titleOverrides.metrics).length > 0) {
+      titles.metrics = titleOverrides.metrics;
+    }
+    if (Object.keys(titleOverrides.filters).length > 0) {
+      titles.filters = titleOverrides.filters;
+    }
+    const queryObj = {
+      dimensions: report.dimensions.map(dim => dim.fullPath),
+      metrics: report.metrics.map(metric => metric.fullPath),
+      order_by: orderBy,
+      limit: size,
+      offset: page * size
+    };
+
+    // Only add titles if there are any overrides
+    if (Object.keys(titles).length > 0) {
+      queryObj.titles = titles;
+    }
+
+    // Only add filter to query if there are any conditions
+    if (filter) {
+      queryObj.filter = filter;
+    }
+
+    // Get parameters from context if available, otherwise use default
+    const parameters = reportingContext?.parameters || {
+      base_currency: "EUR"
+    };
+    return {
+      provider: selectedProvider,
+      doc: {
+        query: queryObj
+      },
+      parameters
+    };
+  };
+  const runReportWithPagination = async (page, size) => {
+    try {
+      setLoading(true);
+      const apiReport = convertReportToApiFormat(page, size);
+      console.log('Running report with:', apiReport);
+      const result = await Api.runAdHocReport({
+        report: apiReport
+      });
+      console.log('Report result:', result);
+      setReportData(result);
+      // Note: The API should ideally return total count, but for now we'll use the result length
+      // If the API returns fewer rows than the limit, we know we're at the end
+      if (result && result.length < size) {
+        setTotalRows(page * size + result.length);
+      } else {
+        // Estimate total rows (this is a limitation without a count endpoint)
+        setTotalRows((page + 2) * size);
+      }
+    } catch (error) {
+      console.error('Error running report:', error);
+      notify.error('Error running report: ' + (error.message || 'Unknown error'));
+      setReportData(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleRunReport = async () => {
+    setCurrentPage(0);
+    await runReportWithPagination(0, pageSize);
+    // Switch to Results tab after running report (now index 3 after adding Filters tab)
+    setActiveTab(3);
+  };
+  const handleDownloadReport = async () => {
+    try {
+      setLoading(true);
+      const apiReport = convertReportToApiFormat();
+      console.log('Downloading report with:', apiReport);
+
+      // Generate filename from report title and current date
+      const date = new Date().toISOString().split('T')[0]; // Format: YYYY-MM-DD
+      const sanitizedTitle = (reportTitle || 'report').replace(/[^a-z0-9]/gi, '_').toLowerCase();
+      const filename = `${sanitizedTitle}_${date}.csv`;
+      await Api.downloadAdHocReport({
+        report: apiReport,
+        filename
+      });
+      notify.success('Report downloaded successfully!');
+    } catch (error) {
+      console.error('Error downloading report:', error);
+      notify.error('Error downloading report: ' + (error.message || 'Unknown error'));
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handlePageChange = async (newPage, newPageSize) => {
+    setCurrentPage(newPage);
+    if (newPageSize !== pageSize) {
+      setPageSize(newPageSize);
+    }
+    await runReportWithPagination(newPage, newPageSize);
+  };
+  const canRunReport = selectedProvider;
+  const handleTabChange = (_event, newValue) => {
+    setActiveTab(newValue);
+  };
+  const handleSaveReport = async () => {
+    if (!selectedProvider) {
+      notify.warning('Please select a provider first');
+      return;
+    }
+    if (!reportTitle.trim()) {
+      notify.warning('Please enter a report title');
+      return;
+    }
+    if (report.dimensions.length === 0 && report.metrics.length === 0) {
+      notify.warning('Please add at least one dimension or metric');
+      return;
+    }
+    try {
+      setSaving(true);
+
+      // Build order_by array - include all dimensions, add desc property only when needed
+      const orderBy = report.dimensions.map(dim => {
+        const orderItem = {
+          name: dim.fullPath
+        };
+        if (dim.sortOrder === 'desc') {
+          orderItem.desc = true;
+        }
+        // For 'asc' or null, just include { name: fullPath } without desc property
+        return orderItem;
+      });
+
+      // Build titles object - only include overridden titles
+      const titles = {};
+      if (Object.keys(titleOverrides.dimensions).length > 0) {
+        titles.dimensions = titleOverrides.dimensions;
+      }
+      if (Object.keys(titleOverrides.metrics).length > 0) {
+        titles.metrics = titleOverrides.metrics;
+      }
+      if (Object.keys(titleOverrides.filters).length > 0) {
+        titles.filters = titleOverrides.filters;
+      }
+      const queryObj = {
+        dimensions: report.dimensions.map(dim => dim.fullPath),
+        metrics: report.metrics.map(metric => metric.fullPath),
+        order_by: orderBy
+      };
+
+      // Only add titles if there are any overrides
+      if (Object.keys(titles).length > 0) {
+        queryObj.titles = titles;
+      }
+
+      // Add filter if there are any - NEW API format with top-level 'and' operator
+      // NEW format: { and: [ { "ft.currency": ["USD", "EUR"] }, { "ft_ba.created_at": {gte: "2025-05-01", lte: "2025-12-31"} } ] }
+      if (Object.keys(report.filters).length > 0) {
+        const conditions = [];
+        Object.entries(report.filters).forEach(([fullPath, filterData]) => {
+          if (filterData.values) {
+            // Check if values is an object (date range) or array (regular filter)
+            if (Array.isArray(filterData.values)) {
+              // Regular filter - only add if array has values
+              if (filterData.values.length > 0) {
+                conditions.push({
+                  [fullPath]: filterData.values
+                });
+              }
+            } else if (typeof filterData.values === 'object') {
+              // Date range filter - add the object as-is
+              conditions.push({
+                [fullPath]: filterData.values
+              });
+            }
+          }
+        });
+        if (conditions.length > 0) {
+          queryObj.filter = {
+            and: conditions
+          };
+        }
+      }
+
+      // Build the doc object
+      const docObj = {
+        query: queryObj
+      };
+      const payload = {
+        provider: selectedProvider,
+        title: reportTitle.trim(),
+        definition: {
+          provider: selectedProvider,
+          doc: docObj,
+          parameters: {
+            base_currency: "EUR"
+          }
+        }
+      };
+      console.log('Saving report definition:', payload);
+      if (reportDefinitionId) {
+        // Update existing report definition
+        await Api.updateReportDefinition({
+          id: reportDefinitionId,
+          reportDefinition: payload
+        });
+        notify.success('Report definition updated successfully!');
+      } else {
+        // Create new report definition
+        await Api.createReportDefinition({
+          reportDefinition: payload
+        });
+        notify.success('Report definition created successfully!');
+      }
+
+      // Navigate back to list
+      if (onBackToList) {
+        onBackToList();
+      }
+    } catch (error) {
+      console.error('Error saving report definition:', error);
+      notify.error('Error saving report definition: ' + (error.message || 'Unknown error'));
+    } finally {
+      setSaving(false);
+    }
+  };
+  const canSaveReport = selectedProvider && reportTitle.trim() && (report.dimensions.length > 0 || report.metrics.length > 0);
+  return /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      p: 3
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      mb: 2
+    }
+  }, /*#__PURE__*/React__default.createElement("h1", null, reportDefinitionId ? 'Edit Report' : 'Create New Report'), onBackToList && /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outlined",
+    startIcon: /*#__PURE__*/React__default.createElement(ArrowBackIcon, null),
+    onClick: onBackToList
+  }, "Back to List")), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      mt: 2,
+      display: 'flex',
+      gap: 2,
+      alignItems: 'flex-start',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React__default.createElement(TextField, {
+    label: "Report Title",
+    value: reportTitle,
+    onChange: e => setReportTitle(e.target.value),
+    placeholder: "Enter report title",
+    sx: {
+      width: '300px'
+    },
+    size: "small"
+  }), /*#__PURE__*/React__default.createElement(SingleSelect, {
+    items: getProviderItems(),
+    value: selectedProvider,
+    label: "Select Root Provider",
+    onChange: handleProviderChange,
+    sx: {
+      width: '300px'
+    },
+    disabled: !!reportDefinitionId
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    onClick: handleRunReport,
+    disabled: !canRunReport,
+    sx: {
+      height: '40px'
+    }
+  }, "Run Report"), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    color: "secondary",
+    startIcon: /*#__PURE__*/React__default.createElement(DownloadIcon, null),
+    onClick: handleDownloadReport,
+    disabled: !canRunReport || loading,
+    sx: {
+      height: '40px'
+    }
+  }, "Download CSV"), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    color: "success",
+    startIcon: /*#__PURE__*/React__default.createElement(SaveIcon, null),
+    onClick: handleSaveReport,
+    disabled: !canSaveReport || saving,
+    sx: {
+      height: '40px'
+    }
+  }, saving ? 'Saving...' : reportDefinitionId ? 'Update Report' : 'Save Report')), selectedProvider && /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      mt: 4
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      borderBottom: 1,
+      borderColor: 'divider'
+    }
+  }, /*#__PURE__*/React__default.createElement(Tabs, {
+    value: activeTab,
+    onChange: handleTabChange,
+    "aria-label": "report builder tabs"
+  }, /*#__PURE__*/React__default.createElement(Tab, {
+    label: /*#__PURE__*/React__default.createElement(Badge, {
+      badgeContent: report.dimensions.length,
+      color: "primary"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        marginRight: report.dimensions.length > 0 ? '12px' : '0'
+      }
+    }, "Dimensions")),
+    id: "report-tab-0",
+    "aria-controls": "report-tabpanel-0"
+  }), /*#__PURE__*/React__default.createElement(Tab, {
+    label: /*#__PURE__*/React__default.createElement(Badge, {
+      badgeContent: report.metrics.length,
+      color: "primary"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        marginRight: report.metrics.length > 0 ? '12px' : '0'
+      }
+    }, "Metrics")),
+    id: "report-tab-1",
+    "aria-controls": "report-tabpanel-1"
+  }), /*#__PURE__*/React__default.createElement(Tab, {
+    label: /*#__PURE__*/React__default.createElement(Badge, {
+      badgeContent: Object.keys(report.filters).length,
+      color: "secondary"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        marginRight: Object.keys(report.filters).length > 0 ? '12px' : '0'
+      }
+    }, "Filters")),
+    id: "report-tab-2",
+    "aria-controls": "report-tabpanel-2"
+  }), /*#__PURE__*/React__default.createElement(Tab, {
+    label: reportData ? "Results" : "Results (Run report first)",
+    id: "report-tab-3",
+    "aria-controls": "report-tabpanel-3",
+    disabled: !reportData
+  }))), /*#__PURE__*/React__default.createElement(TabPanel, {
+    value: activeTab,
+    index: 0
+  }, /*#__PURE__*/React__default.createElement(Dimensions, {
+    providersData: providersData,
+    rootProvider: selectedProvider,
+    savedDimensions: report.dimensions,
+    onSaveDimension: handleSaveDimension,
+    onRemoveDimension: handleRemoveDimension,
+    onReorderDimensions: handleReorderDimensions,
+    titleOverrides: titleOverrides.dimensions,
+    onUpdateTitle: handleUpdateDimensionTitle,
+    onResetTitle: handleResetDimensionTitle,
+    existingMetrics: report.metrics,
+    existingFilters: report.filters
+  })), /*#__PURE__*/React__default.createElement(TabPanel, {
+    value: activeTab,
+    index: 1
+  }, /*#__PURE__*/React__default.createElement(Metrics, {
+    providersData: providersData,
+    rootProvider: selectedProvider,
+    savedMetrics: report.metrics,
+    onSaveMetric: handleSaveMetric,
+    onRemoveMetric: handleRemoveMetric,
+    onReorderMetrics: handleReorderMetrics,
+    titleOverrides: titleOverrides.metrics,
+    onUpdateTitle: handleUpdateMetricTitle,
+    onResetTitle: handleResetMetricTitle,
+    existingDimensions: report.dimensions,
+    existingFilters: report.filters
+  })), /*#__PURE__*/React__default.createElement(TabPanel, {
+    value: activeTab,
+    index: 2
+  }, /*#__PURE__*/React__default.createElement(Filters, {
+    providersData: providersData,
+    rootProvider: selectedProvider,
+    savedFilters: report.filters,
+    existingDimensions: report.dimensions,
+    existingMetrics: report.metrics,
+    onSaveFilter: handleSaveFilter,
+    onRemoveFilter: handleRemoveFilter,
+    titleOverrides: titleOverrides.filters,
+    onUpdateTitle: handleUpdateFilterTitle,
+    onResetTitle: handleResetFilterTitle
+  })), /*#__PURE__*/React__default.createElement(TabPanel, {
+    value: activeTab,
+    index: 3
+  }, reportData && /*#__PURE__*/React__default.createElement(ReportDataGrid, {
+    reportData: reportData,
+    dimensions: report.dimensions,
+    metrics: report.metrics,
+    loading: loading,
+    onPageChange: handlePageChange,
+    totalRows: totalRows,
+    titleOverrides: titleOverrides
+  }))));
+};
+
+const ReportDefinitionsManager = () => {
+  const [view, setView] = useState('list'); // 'list' or 'builder'
+  const [selectedReportId, setSelectedReportId] = useState(null);
+  const [cloneData, setCloneData] = useState(null);
+  const [autoRun, setAutoRun] = useState(false);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const handleSelectReport = id => {
+    setSelectedReportId(id);
+    setCloneData(null);
+    setAutoRun(false);
+    setView('builder');
+  };
+  const handleAddNew = () => {
+    setSelectedReportId(null);
+    setCloneData(null);
+    setAutoRun(false);
+    setView('builder');
+  };
+  const handleRunReport = id => {
+    setSelectedReportId(id);
+    setCloneData(null);
+    setAutoRun(true);
+    setView('builder');
+  };
+  const handleCloneReport = reportDefinition => {
+    setSelectedReportId(null);
+    setCloneData(reportDefinition);
+    setAutoRun(false);
+    setView('builder');
+  };
+  const handleBackToList = () => {
+    setSelectedReportId(null);
+    setCloneData(null);
+    setAutoRun(false);
+    setView('list');
+    // Trigger refresh of the list
+    setRefreshTrigger(prev => prev + 1);
+  };
+  if (view === 'list') {
+    return /*#__PURE__*/React__default.createElement(ReportDefinitionsList, {
+      onSelectReport: handleSelectReport,
+      onAddNew: handleAddNew,
+      onCloneReport: handleCloneReport,
+      onRunReport: handleRunReport,
+      refreshTrigger: refreshTrigger
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(ReportBuilder, {
+    reportDefinitionId: selectedReportId,
+    cloneData: cloneData,
+    autoRun: autoRun,
+    onBackToList: handleBackToList
+  });
+};
+
+const ReportApp = ({
+  paramsDefault,
+  apiDefaults
+}) => {
+  return /*#__PURE__*/React__default.createElement(NotifyProvider, null, /*#__PURE__*/React__default.createElement(ReportingProvider, {
+    defaultParameters: paramsDefault,
+    defaultApi: apiDefaults
+  }, /*#__PURE__*/React__default.createElement(ReportDefinitionsManager, null)));
+};
+
 var index = {
   Chart,
-  Dashboard
+  Dashboard,
+  ReportApp
+  //   ReportingProvider,
+  //   useReportingContext,
+  //   useReportingContextOptional
 };
 
 export { index as default };