@bygd/nc-report-ui 0.1.39 → 0.1.41

package/dist/default/esm/index.js

@@ -54,6 +54,7 @@ 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 FunctionsIcon from '@mui/icons-material/Functions';
 import StorageIcon from '@mui/icons-material/Storage';
 import TrendingUpIcon from '@mui/icons-material/TrendingUp';
 import BoltIcon from '@mui/icons-material/Bolt';
@@ -1573,6 +1574,39 @@ const ReportingProvider = ({
   }, children);
 };
 
+/**
+ * useReportingContext - Hook to access reporting context
+ * 
+ * @returns {Object} Context value with parameters, api, and setter functions
+ * @returns {Object} return.parameters - Current parameters object
+ * @returns {Function} return.setParameters - Function to update parameters
+ * @returns {Object} return.api - Current API configuration
+ * @returns {Function} return.setApi - Function to update API configuration
+ * @returns {Function} return.setReportingContext - Function to update both parameters and api
+ * 
+ * @example
+ * const { parameters, setParameters, api, setApi, setReportingContext } = useReportingContext();
+ * 
+ * // Update parameters only
+ * setParameters({ base_currency: 'USD', merchants: [...] });
+ * 
+ * // Update API only
+ * setApi({ token: 'new-token', base_url: 'https://api.example.com' });
+ * 
+ * // Update both at once
+ * setReportingContext({
+ *   parameters: { base_currency: 'EUR' },
+ *   api: { token: 'token', base_url: 'https://api.example.com' }
+ * });
+ */
+const useReportingContext = () => {
+  const context = useContext(ReportingContext);
+  if (context === undefined) {
+    throw new Error('useReportingContext must be used within a ReportingProvider');
+  }
+  return context;
+};
+
 /**
  * useReportingContextOptional - Hook to optionally access reporting context
  * Returns null if used outside of ReportingProvider (useful for optional fallback)
@@ -2809,68 +2843,368 @@ const SortableChip$1 = ({
     }
   }))));
 };
+
+// Sortable chip for a Computed Dimension: a { name, value } pair independent
+// of any provider, so unlike SortableChip there's no title override or sort
+// toggle. Editing happens inline (right where the item is) rather than via
+// the top-of-page Add form, so it stays visible regardless of scroll position.
+const SortableComputedChip = ({
+  id,
+  name,
+  value,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
+  onUpdate,
+  isNameTaken
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id
+  });
+  const [isEditing, setIsEditing] = useState(false);
+  const [editName, setEditName] = useState("");
+  const [editValue, setEditValue] = useState("");
+  const containerRef = useRef(null);
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    display: "flex",
+    alignItems: "center",
+    width: "100%"
+  };
+
+  // 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 = () => {
+    setEditName(name);
+    setEditValue(value);
+    setIsEditing(true);
+  };
+  const nameError = editName.trim() !== "" && isNameTaken(editName.trim(), name);
+  const handleSave = () => {
+    const trimmedName = editName.trim();
+    const trimmedValue = editValue.trim();
+    if (!trimmedName || !trimmedValue) return;
+    if (isNameTaken(trimmedName, name)) return;
+    onUpdate(name, {
+      name: trimmedName,
+      value: trimmedValue
+    });
+    setIsEditing(false);
+  };
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditName("");
+    setEditValue("");
+  };
+  const handleKeyDown = e => {
+    if (e.key === "Enter") {
+      handleSave();
+    } else if (e.key === "Escape") {
+      handleCancel();
+    }
+  };
+  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,
+      backgroundColor: "white",
+      border: "1px solid #e0e0e0",
+      borderRadius: 2,
+      padding: 1,
+      "&:hover .hover-icons": {
+        opacity: 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",
+      color: "rgba(110, 110, 110, 0.62)"
+    }
+  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Chip, {
+    icon: /*#__PURE__*/React__default.createElement(FunctionsIcon, {
+      sx: {
+        fontSize: "15px !important"
+      }
+    }),
+    label: name,
+    size: "small",
+    sx: {
+      fontWeight: 500,
+      backgroundColor: "rgba(70, 134, 128, 0.1)",
+      color: "rgb(70, 134, 128)",
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    title: value,
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    sx: {
+      fontSize: "13px",
+      color: "#666",
+      fontFamily: "monospace",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      minWidth: 0,
+      flex: 1
+    }
+  }, value)), /*#__PURE__*/React__default.createElement(Box$1, {
+    className: "hover-icons",
+    sx: {
+      display: "flex",
+      gap: 0.5,
+      opacity: 0,
+      transition: "opacity 0.2s"
+    }
+  }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    title: "Edit",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
+    size: "small",
+    onClick: handleEditClick,
+    "aria-label": "edit computed dimension"
+  }, /*#__PURE__*/React__default.createElement(EditIcon, {
+    fontSize: "small"
+  }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    title: "Delete",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
+    size: "small",
+    onClick: onDelete,
+    "aria-label": "delete",
+    sx: {
+      color: "#ef5350"
+    }
+  }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
+    fontSize: "small"
+  })))), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
+    className: "hover-icons",
+    sx: {
+      display: "flex",
+      gap: 0.5,
+      opacity: 0,
+      transition: "opacity 0.2s"
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
+    size: "small",
+    onClick: onMoveUp,
+    disabled: isFirst,
+    "aria-label": "move up"
+  }, /*#__PURE__*/React__default.createElement(ArrowUpwardIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React__default.createElement(IconButton$1, {
+    size: "small",
+    onClick: onMoveDown,
+    disabled: isLast,
+    "aria-label": "move down"
+  }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
+    fontSize: "small"
+  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
+    value: editName,
+    onChange: e => setEditName(e.target.value),
+    onKeyDown: handleKeyDown,
+    size: "small",
+    label: "Name",
+    error: nameError,
+    helperText: nameError ? "Name already in use" : " ",
+    sx: {
+      width: "200px"
+    }
+  }), /*#__PURE__*/React__default.createElement(TextField, {
+    value: editValue,
+    onChange: e => setEditValue(e.target.value),
+    onKeyDown: handleKeyDown,
+    size: "small",
+    label: "Value",
+    helperText: " ",
+    sx: {
+      flex: 1,
+      minWidth: "200px",
+      "& .MuiInputBase-input": {
+        fontFamily: "monospace"
+      }
+    }
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: "flex",
+      gap: 0.5,
+      alignSelf: "flex-start",
+      mt: "4px"
+    }
+  }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    title: "Save",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton$1, {
+    size: "small",
+    onClick: handleSave,
+    color: "primary",
+    "aria-label": "save computed dimension",
+    disabled: !editName.trim() || !editValue.trim() || nameError
+  }, /*#__PURE__*/React__default.createElement(CheckIcon, {
+    fontSize: "small"
+  })))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    title: "Cancel",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton$1, {
+    size: "small",
+    onClick: handleCancel,
+    "aria-label": "cancel edit"
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    fontSize: "small"
+  })))))));
+};
 const Dimensions = ({
   providersData,
   rootProvider,
   savedDimensions = [],
   onSaveDimension,
   onRemoveDimension,
-  onReorderDimensions,
+  onUpdateDimensionSortOrder,
   titleOverrides = {},
   onUpdateTitle,
   onResetTitle,
   existingMetrics = [],
-  existingFilters = {}
+  existingFilters = {},
+  savedComputedDimensions = [],
+  onSaveComputedDimension,
+  onUpdateComputedDimension,
+  onRemoveComputedDimension,
+  dimensionOrder = [],
+  onReorderDimensionItems
 }) => {
   const reportingContext = useReportingContextOptional();
   const parameters = reportingContext?.parameters;
   const [isAdding, setIsAdding] = useState(false);
   const [dimensionSelectionChain, setDimensionSelectionChain] = useState([]);
   const [selectedDimension, setSelectedDimension] = useState("");
+  const [isAddingComputed, setIsAddingComputed] = useState(false);
+  const [computedName, setComputedName] = useState("");
+  const [computedValue, setComputedValue] = useState("");
 
   // Setup drag and drop sensors
   const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
     coordinateGetter: sortableKeyboardCoordinates
   }));
 
-  // Handle drag end
+  // Resolve the unified dimensionOrder into the actual dimension / computed
+  // dimension objects, so dimensions and computed dimensions can be shown
+  // (and dragged) as a single list while staying stored in their own arrays.
+  const dimensionByFullPath = Object.fromEntries(savedDimensions.map(d => [d.fullPath, d]));
+  const computedDimensionByName = Object.fromEntries(savedComputedDimensions.map(cd => [cd.name, cd]));
+  const orderedItems = dimensionOrder.map(entry => entry.type === "dimension" ? {
+    kind: "dimension",
+    key: entry.key,
+    data: dimensionByFullPath[entry.key]
+  } : {
+    kind: "computed",
+    key: entry.key,
+    data: computedDimensionByName[entry.key]
+  }).filter(item => item.data);
+
+  // Handle drag end for the unified list
   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);
+      const oldIndex = dimensionOrder.findIndex((_, i) => i === active.id);
+      const newIndex = dimensionOrder.findIndex((_, i) => i === over.id);
+      onReorderDimensionItems(arrayMove(dimensionOrder, oldIndex, newIndex));
     }
   };
 
   // Handle move up
   const handleMoveUp = index => {
     if (index > 0) {
-      const newOrder = arrayMove(savedDimensions, index, index - 1);
-      onReorderDimensions(newOrder);
+      onReorderDimensionItems(arrayMove(dimensionOrder, index, index - 1));
     }
   };
 
   // Handle move down
   const handleMoveDown = index => {
-    if (index < savedDimensions.length - 1) {
-      const newOrder = arrayMove(savedDimensions, index, index + 1);
-      onReorderDimensions(newOrder);
+    if (index < dimensionOrder.length - 1) {
+      onReorderDimensionItems(arrayMove(dimensionOrder, index, index + 1));
     }
   };
 
-  // Handle sort order change
-  const handleSortOrderChange = (index, sortOrder) => {
-    const newDimensions = [...savedDimensions];
-    newDimensions[index] = {
-      ...newDimensions[index],
-      sortOrder
-    };
-    onReorderDimensions(newDimensions);
+  // Handle sort order change (dimensions only - computed dimensions have no order_by)
+  const handleSortOrderChange = (fullPath, sortOrder) => {
+    onUpdateDimensionSortOrder(fullPath, sortOrder);
+  };
+
+  // Computed Dimensions: { name, value } pairs independent of any provider.
+  // Their `value` is a raw SQL literal/expression sent to the API as-is.
+  const isComputedNameTaken = (name, excludeName = null) => savedComputedDimensions.some(cd => cd.name === name) && name !== excludeName;
+  const computedNameError = computedName.trim() !== "" && isComputedNameTaken(computedName.trim());
+  const handleAddComputedClick = () => {
+    setIsAddingComputed(true);
+    setIsAdding(false);
+    setComputedName("");
+    setComputedValue("");
+  };
+  const handleCancelComputed = () => {
+    setIsAddingComputed(false);
+    setComputedName("");
+    setComputedValue("");
+  };
+  const handleSaveComputed = () => {
+    const trimmedName = computedName.trim();
+    const trimmedValue = computedValue.trim();
+    if (!trimmedName || !trimmedValue) return;
+    if (isComputedNameTaken(trimmedName)) return;
+    onSaveComputedDimension({
+      name: trimmedName,
+      value: trimmedValue
+    });
+    handleCancelComputed();
   };
 
   // Get the current provider based on selection chain
@@ -2936,6 +3270,7 @@ const Dimensions = ({
   };
   const handleAddClick = () => {
     setIsAdding(true);
+    setIsAddingComputed(false);
     setDimensionSelectionChain([]);
     setSelectedDimension("");
   };
@@ -3064,9 +3399,10 @@ const Dimensions = ({
     sx: {
       display: "flex",
       justifyContent: "flex-start",
+      gap: 2,
       mb: 2
     }
-  }, !isAdding && /*#__PURE__*/React__default.createElement(Button, {
+  }, !isAdding && !isAddingComputed && /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
     startIcon: /*#__PURE__*/React__default.createElement(GridAddIcon, null),
     onClick: handleAddClick,
@@ -3084,7 +3420,117 @@ const Dimensions = ({
         boxShadow: "none"
       }
     }
-  }, "Add Dimension")), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
+  }, "Add Dimension"), !isAdding && !isAddingComputed && /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outlined",
+    startIcon: /*#__PURE__*/React__default.createElement(FunctionsIcon, null),
+    onClick: handleAddComputedClick,
+    sx: {
+      height: "40px",
+      fontFamily: "system-ui",
+      fontSize: "14px",
+      fontWeight: 500,
+      borderRadius: "8px",
+      textTransform: "none",
+      borderColor: "rgb(70, 134, 128)",
+      color: "rgb(70, 134, 128)",
+      boxShadow: "none",
+      "&:hover": {
+        backgroundColor: "rgba(70, 134, 128, 0.04)",
+        borderColor: "rgb(50, 114, 108)",
+        boxShadow: "none"
+      }
+    }
+  }, "Add Computed Dimension")), isAddingComputed && /*#__PURE__*/React__default.createElement(Paper$1, {
+    elevation: 0,
+    sx: {
+      p: 3,
+      mb: 3,
+      border: "1px solid #e0e0e0",
+      borderRadius: "12px",
+      backgroundColor: "white",
+      boxShadow: "0px 2px 4px rgba(0,0,0,0.02)",
+      fontFamily: "system-ui"
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      mb: 0.5,
+      color: "rgb(37, 37, 37)"
+    }
+  }, "Define Computed Dimension"), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: "flex",
+      gap: 2,
+      flexWrap: "wrap",
+      mt: 2
+    }
+  }, /*#__PURE__*/React__default.createElement(TextField, {
+    label: "Name",
+    value: computedName,
+    onChange: e => setComputedName(e.target.value),
+    size: "small",
+    sx: {
+      width: "260px"
+    },
+    error: computedNameError,
+    helperText: computedNameError ? "A computed dimension with this name already exists" : " "
+  }), /*#__PURE__*/React__default.createElement(TextField, {
+    label: "Value",
+    value: computedValue,
+    onChange: e => setComputedValue(e.target.value),
+    size: "small",
+    sx: {
+      width: "400px",
+      "& .MuiInputBase-input": {
+        fontFamily: "monospace"
+      }
+    },
+    helperText: " "
+  })), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: 2,
+      mt: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outlined",
+    onClick: handleCancelComputed,
+    sx: {
+      height: "40px",
+      fontFamily: "system-ui",
+      fontSize: "14px",
+      fontWeight: 500,
+      borderRadius: "8px",
+      boxShadow: "none",
+      borderColor: "#e0e0e0",
+      color: "rgb(37, 37, 37)",
+      textTransform: "none",
+      "&:hover": {
+        backgroundColor: "#f5f5f5",
+        borderColor: "#d0d0d0"
+      }
+    }
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "contained",
+    onClick: handleSaveComputed,
+    disabled: !computedName.trim() || !computedValue.trim() || computedNameError,
+    sx: {
+      height: "40px",
+      fontFamily: "system-ui",
+      fontSize: "14px",
+      fontWeight: 500,
+      borderRadius: "8px",
+      boxShadow: "none",
+      textTransform: "none",
+      backgroundColor: "rgb(70, 134, 128)",
+      "&:hover": {
+        backgroundColor: "rgb(50, 114, 108)",
+        boxShadow: "none"
+      }
+    }
+  }, "Save Computed Dimension"))), isAdding && /*#__PURE__*/React__default.createElement(Paper$1, {
     elevation: 0,
     sx: {
       p: 3,
@@ -3202,7 +3648,7 @@ const Dimensions = ({
         boxShadow: "none"
       }
     }
-  }, "Save Dimension"))), savedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
+  }, "Save Dimension"))), orderedItems.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       marginTop: 0
     }
@@ -3225,7 +3671,7 @@ const Dimensions = ({
     collisionDetection: closestCenter,
     onDragEnd: handleDragEnd
   }, /*#__PURE__*/React__default.createElement(SortableContext, {
-    items: savedDimensions.map((_, index) => index),
+    items: orderedItems.map((_, index) => index),
     strategy: verticalListSortingStrategy
   }, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
@@ -3233,23 +3679,35 @@ const Dimensions = ({
       flexDirection: "column",
       gap: 1
     }
-  }, savedDimensions.map((dim, index) => /*#__PURE__*/React__default.createElement(SortableChip$1, {
-    key: index,
+  }, orderedItems.map((item, index) => item.kind === "dimension" ? /*#__PURE__*/React__default.createElement(SortableChip$1, {
+    key: `dim-${item.key}`,
     id: index,
-    label: dim.dimensionTitle,
-    fullLabel: `${formatProviderPath(dim)} → ${dim.dimensionTitle} (${dim.fullPath})`,
-    onDelete: () => onRemoveDimension(index),
+    label: item.data.dimensionTitle,
+    fullLabel: `${formatProviderPath(item.data)} → ${item.data.dimensionTitle} (${item.data.fullPath})`,
+    onDelete: () => onRemoveDimension(item.key),
     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],
+    isLast: index === orderedItems.length - 1,
+    sortOrder: item.data.sortOrder || null,
+    onSortOrderChange: sortOrder => handleSortOrderChange(item.key, sortOrder),
+    fullPath: item.data.fullPath,
+    defaultTitle: item.data.dimensionTitle,
+    customTitle: titleOverrides[item.data.fullPath],
     onUpdateTitle: onUpdateTitle,
     onResetTitle: onResetTitle
+  }) : /*#__PURE__*/React__default.createElement(SortableComputedChip, {
+    key: `comp-${item.key}`,
+    id: index,
+    name: item.data.name,
+    value: item.data.value,
+    onUpdate: onUpdateComputedDimension,
+    isNameTaken: isComputedNameTaken,
+    onDelete: () => onRemoveComputedDimension(item.key),
+    onMoveUp: () => handleMoveUp(index),
+    onMoveDown: () => handleMoveDown(index),
+    isFirst: index === 0,
+    isLast: index === orderedItems.length - 1
   })))))));
 };
 
@@ -5232,7 +5690,7 @@ const formatValue = (value, def) => {
 const isNumericType = type => type === 'integer' || type === 'currency';
 const ReportDataGrid = ({
   reportData,
-  dimensions,
+  orderedDimensionItems = [],
   metrics,
   loading,
   onPageChange,
@@ -5253,11 +5711,26 @@ const ReportDataGrid = ({
   const columns = React__default.useMemo(() => {
     const cols = [];
 
-    // Add dimension columns
-    // Field naming logic:
+    // Add dimension + computed-dimension columns, in the single unified
+    // order the user arranged them in on the Dimensions tab.
+    // Field naming logic (dimensions):
     // - 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 => {
+    // Computed dimensions have no provider/relations chain, so the API
+    // returns each row keyed by the computed dimension's own `name`.
+    orderedDimensionItems.forEach(item => {
+      if (item.kind === 'computed') {
+        const cd = item.data;
+        cols.push({
+          field: cd.name,
+          headerName: cd.name,
+          flex: 1,
+          minWidth: 150,
+          type: 'string'
+        });
+        return;
+      }
+      const dim = item.data;
       let fieldName;
       let headerName;
 
@@ -5354,7 +5827,7 @@ const ReportDataGrid = ({
       });
     });
     return cols;
-  }, [dimensions, metrics, titleOverrides, parameters]);
+  }, [orderedDimensionItems, metrics, titleOverrides, parameters]);
 
   // Transform report data to rows with unique IDs.
   // Keys are normalised by replacing dots with underscores so that MUI DataGrid
@@ -5460,7 +5933,11 @@ const ReportBuilder = ({
   const [report, setReport] = useState({
     dimensions: [],
     metrics: [],
-    filters: {}
+    filters: {},
+    computedDimensions: [],
+    // Unified display/execution order across dimensions + computedDimensions.
+    // Entries: { type: 'dimension', key: fullPath } | { type: 'computed', key: name }
+    dimensionOrder: []
   });
   const [titleOverrides, setTitleOverrides] = useState({
     dimensions: {},
@@ -5501,11 +5978,21 @@ const ReportBuilder = ({
 
   // Auto-run report when autoRun is true and report is loaded
   useEffect(() => {
-    if (autoRun && reportLoaded && selectedProvider && report.dimensions.length > 0) {
+    if (autoRun && reportLoaded && selectedProvider && (report.dimensions.length > 0 || report.metrics.length > 0 || report.computedDimensions.length > 0)) {
       handleRunReport();
     }
   }, [autoRun, reportLoaded]);
 
+  // Re-run the currently displayed report when base_currency changes in context
+  const currentBaseCurrency = reportingContext?.parameters?.base_currency;
+  const prevBaseCurrencyRef = useRef(currentBaseCurrency);
+  useEffect(() => {
+    if (reportData && prevBaseCurrencyRef.current !== undefined && prevBaseCurrencyRef.current !== currentBaseCurrency) {
+      runReportWithPagination(currentPage, pageSize);
+    }
+    prevBaseCurrencyRef.current = currentBaseCurrency;
+  }, [currentBaseCurrency]);
+
   // Utility function to reconstruct dimension object from fullPath
   const reconstructDimensionFromPath = (fullPath, providersData, rootProvider) => {
     try {
@@ -5635,6 +6122,52 @@ const ReportBuilder = ({
       return null;
     }
   };
+
+  // Build the unified display/execution order for dimensions + computed
+  // dimensions. Prefers the persisted `ordered_dimensions` field; falls back
+  // to "dimensions first, then computed dimensions" for report definitions
+  // saved before this field existed.
+  const buildDimensionOrder = (rawOrderedDimensions, dimensions, computedDimensions) => {
+    const dimensionOrder = [];
+    const seenDimensionKeys = new Set();
+    const seenComputedKeys = new Set();
+    if (Array.isArray(rawOrderedDimensions)) {
+      rawOrderedDimensions.forEach(entry => {
+        if (entry.type === "dimension" && dimensions.some(d => d.fullPath === entry.ref)) {
+          dimensionOrder.push({
+            type: "dimension",
+            key: entry.ref
+          });
+          seenDimensionKeys.add(entry.ref);
+        } else if (entry.type === "computed" && computedDimensions.some(cd => cd.name === entry.ref)) {
+          dimensionOrder.push({
+            type: "computed",
+            key: entry.ref
+          });
+          seenComputedKeys.add(entry.ref);
+        }
+      });
+    }
+
+    // Append anything not covered by ordered_dimensions (older reports, or drift)
+    dimensions.forEach(d => {
+      if (!seenDimensionKeys.has(d.fullPath)) {
+        dimensionOrder.push({
+          type: "dimension",
+          key: d.fullPath
+        });
+      }
+    });
+    computedDimensions.forEach(cd => {
+      if (!seenComputedKeys.has(cd.name)) {
+        dimensionOrder.push({
+          type: "computed",
+          key: cd.name
+        });
+      }
+    });
+    return dimensionOrder;
+  };
   const loadReportDefinition = async id => {
     try {
       console.log("Loading report definition:", id);
@@ -5727,11 +6260,18 @@ const ReportBuilder = ({
         });
       }
 
+      // Computed dimensions are self-contained { name, value } pairs with no
+      // provider/relation chain, so they're loaded as-is (no reconstruction needed)
+      const computedDimensions = reportDef.definition?.doc?.query?.computed_dimensions || [];
+      const dimensionOrder = buildDimensionOrder(reportDef.definition?.doc?.query?.ordered_dimensions, reconstructedDimensions, computedDimensions);
+
       // Set the report state
       setReport({
         dimensions: reconstructedDimensions,
         metrics: reconstructedMetrics,
-        filters: loadedFilters
+        filters: loadedFilters,
+        computedDimensions,
+        dimensionOrder
       });
 
       // Set title overrides
@@ -5837,11 +6377,18 @@ const ReportBuilder = ({
         });
       }
 
+      // Computed dimensions are self-contained { name, value } pairs with no
+      // provider/relation chain, so they're loaded as-is (no reconstruction needed)
+      const computedDimensions = reportDef.definition?.doc?.query?.computed_dimensions || [];
+      const dimensionOrder = buildDimensionOrder(reportDef.definition?.doc?.query?.ordered_dimensions, reconstructedDimensions, computedDimensions);
+
       // Set the report state
       setReport({
         dimensions: reconstructedDimensions,
         metrics: reconstructedMetrics,
-        filters: loadedFilters
+        filters: loadedFilters,
+        computedDimensions,
+        dimensionOrder
       });
 
       // Set title overrides
@@ -5873,7 +6420,9 @@ const ReportBuilder = ({
     setReport({
       dimensions: [],
       metrics: [],
-      filters: {}
+      filters: {},
+      computedDimensions: [],
+      dimensionOrder: []
     });
     // Reset title overrides
     setTitleOverrides({
@@ -5950,23 +6499,68 @@ const ReportBuilder = ({
     setReport(prev => {
       const newReport = {
         ...prev,
-        dimensions: [...prev.dimensions, dimensionData]
+        dimensions: [...prev.dimensions, dimensionData],
+        dimensionOrder: [...prev.dimensionOrder, {
+          type: "dimension",
+          key: dimensionData.fullPath
+        }]
       };
       console.log("Dimension saved:", dimensionData);
       console.log("Complete report:", newReport);
       return newReport;
     });
   };
-  const handleRemoveDimension = index => {
+  const handleRemoveDimension = fullPath => {
+    setReport(prev => ({
+      ...prev,
+      dimensions: prev.dimensions.filter(d => d.fullPath !== fullPath),
+      dimensionOrder: prev.dimensionOrder.filter(entry => !(entry.type === "dimension" && entry.key === fullPath))
+    }));
+  };
+  const handleUpdateDimensionSortOrder = (fullPath, sortOrder) => {
+    setReport(prev => ({
+      ...prev,
+      dimensions: prev.dimensions.map(d => d.fullPath === fullPath ? {
+        ...d,
+        sortOrder
+      } : d)
+    }));
+  };
+
+  // Reorders the single unified dimensions + computed-dimensions list;
+  // `dimensions`/`computedDimensions` arrays themselves are unordered from
+  // this perspective, so only `dimensionOrder` needs to change.
+  const handleReorderDimensionItems = newDimensionOrder => {
+    setReport(prev => ({
+      ...prev,
+      dimensionOrder: newDimensionOrder
+    }));
+  };
+  const handleSaveComputedDimension = computedDimensionData => {
+    setReport(prev => ({
+      ...prev,
+      computedDimensions: [...prev.computedDimensions, computedDimensionData],
+      dimensionOrder: [...prev.dimensionOrder, {
+        type: "computed",
+        key: computedDimensionData.name
+      }]
+    }));
+  };
+  const handleUpdateComputedDimension = (name, computedDimensionData) => {
     setReport(prev => ({
       ...prev,
-      dimensions: prev.dimensions.filter((_, i) => i !== index)
+      computedDimensions: prev.computedDimensions.map(cd => cd.name === name ? computedDimensionData : cd),
+      dimensionOrder: prev.dimensionOrder.map(entry => entry.type === "computed" && entry.key === name ? {
+        ...entry,
+        key: computedDimensionData.name
+      } : entry)
     }));
   };
-  const handleReorderDimensions = newOrder => {
+  const handleRemoveComputedDimension = name => {
     setReport(prev => ({
       ...prev,
-      dimensions: newOrder
+      computedDimensions: prev.computedDimensions.filter(cd => cd.name !== name),
+      dimensionOrder: prev.dimensionOrder.filter(entry => !(entry.type === "computed" && entry.key === name))
     }));
   };
   const handleSaveMetric = metricData => {
@@ -6022,10 +6616,20 @@ const ReportBuilder = ({
     });
   };
 
-  // Convert internal report structure to API format
-  const convertReportToApiFormat = (page = 0, size = 50) => {
+  // Builds the query object shared between running (paginated) and saving
+  // (unpaginated) a report. Dimension and computed-dimension order both
+  // derive from the single unified `report.dimensionOrder` list, so the
+  // saved `dimensions`/`computed_dimensions` arrays, `order_by`, and the
+  // persisted `ordered_dimensions` field all stay consistent with whatever
+  // order the user arranged on screen.
+  const buildQueryObject = () => {
+    const dimensionByPath = Object.fromEntries(report.dimensions.map(d => [d.fullPath, d]));
+    const computedByName = Object.fromEntries(report.computedDimensions.map(cd => [cd.name, cd]));
+    const orderedDimensionsOnly = report.dimensionOrder.filter(entry => entry.type === "dimension").map(entry => dimensionByPath[entry.key]).filter(Boolean);
+    const orderedComputedOnly = report.dimensionOrder.filter(entry => entry.type === "computed").map(entry => computedByName[entry.key]).filter(Boolean);
+
     // Build order_by array - include all dimensions, add desc property only when needed
-    const orderBy = report.dimensions.map(dim => {
+    const orderBy = orderedDimensionsOnly.map(dim => {
       const orderItem = {
         name: dim.fullPath
       };
@@ -6081,13 +6685,29 @@ const ReportBuilder = ({
       titles.filters = titleOverrides.filters;
     }
     const queryObj = {
-      dimensions: report.dimensions.map(dim => dim.fullPath),
+      dimensions: orderedDimensionsOnly.map(dim => dim.fullPath),
       metrics: report.metrics.map(metric => metric.fullPath),
-      order_by: orderBy,
-      limit: size,
-      offset: page * size
+      order_by: orderBy
     };
 
+    // Only add computed_dimensions if there are any
+    if (orderedComputedOnly.length > 0) {
+      queryObj.computed_dimensions = orderedComputedOnly.map(cd => ({
+        name: cd.name,
+        value: cd.value
+      }));
+    }
+
+    // Persist the unified dimension + computed-dimension order so it can be
+    // reconstructed on reload and so executed reports render columns in the
+    // same order they were arranged in the builder.
+    if (report.dimensionOrder.length > 0) {
+      queryObj.ordered_dimensions = report.dimensionOrder.map(entry => ({
+        type: entry.type,
+        ref: entry.key
+      }));
+    }
+
     // Only add titles if there are any overrides
     if (Object.keys(titles).length > 0) {
       queryObj.titles = titles;
@@ -6097,6 +6717,14 @@ const ReportBuilder = ({
     if (filter) {
       queryObj.filter = filter;
     }
+    return queryObj;
+  };
+
+  // Convert internal report structure to API format
+  const convertReportToApiFormat = (page = 0, size = 50) => {
+    const queryObj = buildQueryObject();
+    queryObj.limit = size;
+    queryObj.offset = page * size;
 
     // Get parameters from context if available, otherwise use default
     const parameters = reportingContext?.parameters || {
@@ -6184,75 +6812,13 @@ const ReportBuilder = ({
       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");
+    if (report.dimensions.length === 0 && report.metrics.length === 0 && report.computedDimensions.length === 0) {
+      notify.warning("Please add at least one dimension, metric, or computed dimension");
       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
-          };
-        }
-      }
+      const queryObj = buildQueryObject();
 
       // Build the doc object
       const docObj = {
@@ -6296,7 +6862,19 @@ const ReportBuilder = ({
       setSaving(false);
     }
   };
-  const canSaveReport = selectedProvider && reportTitle.trim() && (report.dimensions.length > 0 || report.metrics.length > 0);
+  const canSaveReport = selectedProvider && reportTitle.trim() && (report.dimensions.length > 0 || report.metrics.length > 0 || report.computedDimensions.length > 0);
+
+  // Resolve the unified dimensionOrder into actual dimension/computed-dimension
+  // objects so the results grid can render columns in that same order.
+  const dimensionByFullPath = Object.fromEntries(report.dimensions.map(d => [d.fullPath, d]));
+  const computedDimensionByName = Object.fromEntries(report.computedDimensions.map(cd => [cd.name, cd]));
+  const orderedDimensionItems = report.dimensionOrder.map(entry => entry.type === "dimension" ? {
+    kind: "dimension",
+    data: dimensionByFullPath[entry.key]
+  } : {
+    kind: "computed",
+    data: computedDimensionByName[entry.key]
+  }).filter(item => item.data);
   return /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       p: 3,
@@ -6469,7 +7047,7 @@ const ReportBuilder = ({
     }
   }, /*#__PURE__*/React__default.createElement(Tab, {
     label: /*#__PURE__*/React__default.createElement(Badge, {
-      badgeContent: report.dimensions.length,
+      badgeContent: report.dimensions.length + report.computedDimensions.length,
       sx: {
         "& .MuiBadge-badge": {
           backgroundColor: "rgb(70, 134, 128)",
@@ -6479,7 +7057,7 @@ const ReportBuilder = ({
       }
     }, /*#__PURE__*/React__default.createElement("span", {
       style: {
-        marginRight: report.dimensions.length > 0 ? "12px" : "0"
+        marginRight: report.dimensions.length + report.computedDimensions.length > 0 ? "12px" : "0"
       }
     }, "Dimensions")),
     id: "report-tab-0",
@@ -6575,12 +7153,18 @@ const ReportBuilder = ({
     savedDimensions: report.dimensions,
     onSaveDimension: handleSaveDimension,
     onRemoveDimension: handleRemoveDimension,
-    onReorderDimensions: handleReorderDimensions,
+    onUpdateDimensionSortOrder: handleUpdateDimensionSortOrder,
     titleOverrides: titleOverrides.dimensions,
     onUpdateTitle: handleUpdateDimensionTitle,
     onResetTitle: handleResetDimensionTitle,
     existingMetrics: report.metrics,
-    existingFilters: report.filters
+    existingFilters: report.filters,
+    savedComputedDimensions: report.computedDimensions,
+    onSaveComputedDimension: handleSaveComputedDimension,
+    onUpdateComputedDimension: handleUpdateComputedDimension,
+    onRemoveComputedDimension: handleRemoveComputedDimension,
+    dimensionOrder: report.dimensionOrder,
+    onReorderDimensionItems: handleReorderDimensionItems
   })), /*#__PURE__*/React__default.createElement(TabPanel, {
     value: activeTab,
     index: 1
@@ -6616,7 +7200,7 @@ const ReportBuilder = ({
     index: 3
   }, reportData && /*#__PURE__*/React__default.createElement(ReportDataGrid, {
     reportData: reportData,
-    dimensions: report.dimensions,
+    orderedDimensionItems: orderedDimensionItems,
     metrics: report.metrics,
     loading: loading,
     onPageChange: handlePageChange,
@@ -6680,6 +7264,44 @@ const ReportDefinitionsManager = () => {
   });
 };
 
+// TODO: replace with currencies fetched from the API once that's available.
+const CURRENCY_OPTIONS = [{
+  key: "USD",
+  value: "USD"
+}, {
+  key: "EUR",
+  value: "EUR"
+}, {
+  key: "SEK",
+  value: "SEK"
+}, {
+  key: "GBP",
+  value: "GBP"
+}, {
+  key: "DKK",
+  value: "DKK"
+}, {
+  key: "NOK",
+  value: "NOK"
+}];
+const CurrencySelector = () => {
+  const {
+    parameters,
+    setParameters
+  } = useReportingContext();
+  return /*#__PURE__*/React__default.createElement(SingleSelect, {
+    items: CURRENCY_OPTIONS,
+    value: parameters.base_currency,
+    label: "Currency",
+    onChange: e => setParameters({
+      ...parameters,
+      base_currency: e.target.value
+    }),
+    sx: {
+      width: 110
+    }
+  });
+};
 const ReportApp = ({
   params,
   api
@@ -6746,7 +7368,13 @@ const ReportApp = ({
         }
       }
     })
-  }, /*#__PURE__*/React__default.createElement(ReportDefinitionsManager, null))));
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: "flex",
+      justifyContent: "flex-end",
+      p: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(CurrencySelector, null)), /*#__PURE__*/React__default.createElement(ReportDefinitionsManager, null))));
 };
 
 var index = {