@bygd/nc-report-ui 0.1.38 → 0.1.40

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';
@@ -2494,6 +2495,17 @@ const ProviderSelection = ({
   }, renderSelectionChain()));
 };
 
+// Replace {{key}} placeholders in a title with values from the report
+// parameters (e.g. "Balance ({{base_currency}})" -> "Balance (EUR)").
+// Unknown keys are left as-is so missing parameters remain visible.
+const interpolateTitle = (template, params) => {
+  if (typeof template !== 'string' || !template.includes('{{')) return template;
+  return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (match, key) => {
+    const value = params?.[key];
+    return value == null ? match : String(value);
+  });
+};
+
 // Sortable Chip Component
 const SortableChip$1 = ({
   id,
@@ -2512,6 +2524,8 @@ const SortableChip$1 = ({
   onUpdateTitle,
   onResetTitle
 }) => {
+  const reportingContext = useReportingContextOptional();
+  const parameters = reportingContext?.parameters;
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState("");
   const inputRef = useRef(null);
@@ -2618,7 +2632,9 @@ const SortableChip$1 = ({
       handleCancel();
     }
   };
-  const displayLabel = customTitle || label;
+  const rawDisplayLabel = customTitle || label;
+  const displayLabel = interpolateTitle(rawDisplayLabel, parameters);
+  const interpolatedFullLabel = interpolateTitle(fullLabel, parameters);
   const hasCustomTitle = !!customTitle;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: setNodeRef,
@@ -2659,7 +2675,7 @@ const SortableChip$1 = ({
       minWidth: 0
     }
   }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
-    title: fullLabel || displayLabel,
+    title: interpolatedFullLabel || displayLabel,
     arrow: true,
     placement: "top"
   }, /*#__PURE__*/React__default.createElement(Typography$1, {
@@ -2794,6 +2810,264 @@ 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,
+  index,
+  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(), index);
+  const handleSave = () => {
+    const trimmedName = editName.trim();
+    const trimmedValue = editValue.trim();
+    if (!trimmedName || !trimmedValue) return;
+    if (isNameTaken(trimmedName, index)) return;
+    onUpdate(index, {
+      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,
@@ -2805,11 +3079,21 @@ const Dimensions = ({
   onUpdateTitle,
   onResetTitle,
   existingMetrics = [],
-  existingFilters = {}
+  existingFilters = {},
+  savedComputedDimensions = [],
+  onSaveComputedDimension,
+  onUpdateComputedDimension,
+  onRemoveComputedDimension,
+  onReorderComputedDimensions
 }) => {
+  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, {
@@ -2856,6 +3140,54 @@ const Dimensions = ({
     onReorderDimensions(newDimensions);
   };
 
+  // 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, excludeIndex = null) => savedComputedDimensions.some((cd, i) => cd.name === name && i !== excludeIndex);
+  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();
+  };
+  const handleComputedDragEnd = event => {
+    const {
+      active,
+      over
+    } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = savedComputedDimensions.findIndex((_, i) => i === active.id);
+      const newIndex = savedComputedDimensions.findIndex((_, i) => i === over.id);
+      onReorderComputedDimensions(arrayMove(savedComputedDimensions, oldIndex, newIndex));
+    }
+  };
+  const handleMoveComputedUp = index => {
+    if (index > 0) {
+      onReorderComputedDimensions(arrayMove(savedComputedDimensions, index, index - 1));
+    }
+  };
+  const handleMoveComputedDown = index => {
+    if (index < savedComputedDimensions.length - 1) {
+      onReorderComputedDimensions(arrayMove(savedComputedDimensions, index, index + 1));
+    }
+  };
+
   // Get the current provider based on selection chain
   const getCurrentProvider = () => {
     if (!rootProvider) return null;
@@ -2919,6 +3251,7 @@ const Dimensions = ({
   };
   const handleAddClick = () => {
     setIsAdding(true);
+    setIsAddingComputed(false);
     setDimensionSelectionChain([]);
     setSelectedDimension("");
   };
@@ -3047,9 +3380,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,
@@ -3067,7 +3401,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,
@@ -3111,7 +3555,10 @@ const Dimensions = ({
       mb: 3
     }
   }, /*#__PURE__*/React__default.createElement(SingleSelect, {
-    items: getDimensionItems(),
+    items: getDimensionItems().map(item => ({
+      ...item,
+      value: interpolateTitle(item.value, parameters)
+    })),
     value: selectedDimension,
     label: "Choose Dimension",
     onChange: handleDimensionChange,
@@ -3230,6 +3677,50 @@ const Dimensions = ({
     customTitle: titleOverrides[dim.fullPath],
     onUpdateTitle: onUpdateTitle,
     onResetTitle: onResetTitle
+  })))))), savedComputedDimensions.length > 0 && /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      marginTop: 2
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      fontSize: "16px",
+      fontWeight: 600,
+      marginTop: 2,
+      color: "rgb(37, 37, 37)"
+    }
+  }, "Saved Computed Dimensions"), /*#__PURE__*/React__default.createElement(Typography$1, {
+    sx: {
+      fontSize: "13px",
+      color: "#666",
+      marginBottom: 2
+    }
+  }, "Drag to reorder or use arrows"), /*#__PURE__*/React__default.createElement(DndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    onDragEnd: handleComputedDragEnd
+  }, /*#__PURE__*/React__default.createElement(SortableContext, {
+    items: savedComputedDimensions.map((_, index) => index),
+    strategy: verticalListSortingStrategy
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 1
+    }
+  }, savedComputedDimensions.map((cd, index) => /*#__PURE__*/React__default.createElement(SortableComputedChip, {
+    key: index,
+    id: index,
+    index: index,
+    name: cd.name,
+    value: cd.value,
+    onUpdate: onUpdateComputedDimension,
+    isNameTaken: isComputedNameTaken,
+    onDelete: () => onRemoveComputedDimension(index),
+    onMoveUp: () => handleMoveComputedUp(index),
+    onMoveDown: () => handleMoveComputedDown(index),
+    isFirst: index === 0,
+    isLast: index === savedComputedDimensions.length - 1
   })))))));
 };
 
@@ -3295,6 +3786,8 @@ const SortableChip = ({
   onResetTitle,
   source
 }) => {
+  const reportingContext = useReportingContextOptional();
+  const parameters = reportingContext?.parameters;
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState('');
   const inputRef = useRef(null);
@@ -3370,7 +3863,9 @@ const SortableChip = ({
       handleCancel();
     }
   };
-  const displayLabel = customTitle || label;
+  const rawDisplayLabel = customTitle || label;
+  const displayLabel = interpolateTitle(rawDisplayLabel, parameters);
+  const interpolatedFullLabel = interpolateTitle(fullLabel, parameters);
   const hasCustomTitle = !!customTitle;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: setNodeRef,
@@ -3419,7 +3914,7 @@ const SortableChip = ({
       minWidth: 0
     }
   }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
-    title: fullLabel || displayLabel,
+    title: interpolatedFullLabel || displayLabel,
     arrow: true,
     placement: "top"
   }, /*#__PURE__*/React__default.createElement(Typography$1, {
@@ -3558,6 +4053,8 @@ const Metrics = ({
   existingDimensions = [],
   existingFilters = {}
 }) => {
+  const reportingContext = useReportingContextOptional();
+  const parameters = reportingContext?.parameters;
   const [isAdding, setIsAdding] = useState(false);
   const [metricSelectionChain, setMetricSelectionChain] = useState([]);
   const [selectedMetric, setSelectedMetric] = useState('');
@@ -3848,7 +4345,10 @@ const Metrics = ({
       mb: 3
     }
   }, /*#__PURE__*/React__default.createElement(SingleSelect, {
-    items: getMetricItems(),
+    items: getMetricItems().map(item => ({
+      ...item,
+      value: interpolateTitle(item.value, parameters)
+    })),
     value: selectedMetric,
     label: "Choose Metric",
     onChange: handleMetricChange,
@@ -3977,6 +4477,7 @@ const Filters = ({
   onResetTitle
 }) => {
   const reportingContext = useReportingContextOptional();
+  const parameters = reportingContext?.parameters;
   const [isAdding, setIsAdding] = useState(false);
   const [isAddingFromDimension, setIsAddingFromDimension] = useState(false); // New state for dimension filter mode
   const [dimensionSelectionChain, setDimensionSelectionChain] = useState([]);
@@ -4645,7 +5146,10 @@ const Filters = ({
       mb: 3
     }
   }, /*#__PURE__*/React__default.createElement(SingleSelect, {
-    items: getDimensionItems(),
+    items: getDimensionItems().map(item => ({
+      ...item,
+      value: interpolateTitle(item.value, parameters)
+    })),
     value: selectedDimension,
     label: "Choose Dimension",
     onChange: handleDimensionChange,
@@ -4791,7 +5295,7 @@ const Filters = ({
   }, /*#__PURE__*/React__default.createElement(SingleSelect, {
     items: existingDimensions.map(dim => ({
       key: dim.fullPath,
-      value: dimensionTitleOverrides[dim.fullPath] || dim.dimensionTitle
+      value: interpolateTitle(dimensionTitleOverrides[dim.fullPath] || dim.dimensionTitle, parameters)
     })).sort((a, b) => a.value.localeCompare(b.value)),
     value: selectedExistingDimension,
     label: "Choose Dimension",
@@ -4954,7 +5458,9 @@ const Filters = ({
     }
 
     // Use filter title override if exists, otherwise use dimension title override, otherwise use default dimension title
-    const displayLabel = titleOverrides[fullPath] || dimensionTitleOverrides[fullPath] || filter.dimensionTitle;
+    const rawDisplayLabel = titleOverrides[fullPath] || dimensionTitleOverrides[fullPath] || filter.dimensionTitle;
+    const displayLabel = interpolateTitle(rawDisplayLabel, parameters);
+    const tooltipPathLabel = interpolateTitle(dimensionTitleOverrides[fullPath] || filter.dimensionTitle, parameters);
     const hasCustomTitle = !!titleOverrides[fullPath];
     return /*#__PURE__*/React__default.createElement(Box$1, {
       key: fullPath
@@ -5028,7 +5534,7 @@ const Filters = ({
     }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
       fontSize: "small"
     }))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
-      title: /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("strong", null, "Path:"), " ", formatProviderPath(filter), " \u2192 ", dimensionTitleOverrides[fullPath] || 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)),
+      title: /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("strong", null, "Path:"), " ", formatProviderPath(filter), " \u2192 ", tooltipPathLabel), /*#__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: "right"
     }, /*#__PURE__*/React__default.createElement(IconButton$1, {
@@ -5096,7 +5602,7 @@ const Filters = ({
         marginBottom: 1.5,
         fontWeight: 600
       }
-    }, "Edit ", isDate ? 'Date Range' : 'Values', " for: ", dimensionTitleOverrides[fullPath] || filter.dimensionTitle), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
+    }, "Edit ", isDate ? 'Date Range' : 'Values', " for: ", tooltipPathLabel), isDate ? /*#__PURE__*/React__default.createElement(LocalizationProvider, {
       dateAdapter: AdapterDayjs
     }, /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
@@ -5199,6 +5705,7 @@ const ReportDataGrid = ({
   reportData,
   dimensions,
   metrics,
+  computedDimensions = [],
   loading,
   onPageChange,
   totalRows = 0,
@@ -5207,6 +5714,8 @@ const ReportDataGrid = ({
     metrics: {}
   }
 }) => {
+  const reportingContext = useReportingContextOptional();
+  const parameters = reportingContext?.parameters;
   const [paginationModel, setPaginationModel] = useState({
     page: 0,
     pageSize: 50
@@ -5246,6 +5755,7 @@ const ReportDataGrid = ({
 
       // Check for title override, otherwise use the friendly dimension title from provider
       headerName = titleOverrides.dimensions[dim.fullPath] || dim.dimensionTitle || fieldName;
+      headerName = interpolateTitle(headerName, parameters);
       const dimDef = dim.dimension;
       cols.push({
         field: fieldName,
@@ -5257,6 +5767,18 @@ const ReportDataGrid = ({
       });
     });
 
+    // Add computed dimension columns. These have no provider/relations chain,
+    // so the API returns each row keyed by the computed dimension's own `name`.
+    computedDimensions.forEach(cd => {
+      cols.push({
+        field: cd.name,
+        headerName: cd.name,
+        flex: 1,
+        minWidth: 150,
+        type: 'string'
+      });
+    });
+
     // Add metric columns
     // The API returns metric keys in two different forms depending on the path depth:
     //
@@ -5296,6 +5818,7 @@ const ReportDataGrid = ({
 
       // Check for title override, otherwise use the friendly metric title from provider
       headerName = titleOverrides.metrics[metric.fullPath] || metric.metricTitle || fieldName;
+      headerName = interpolateTitle(headerName, parameters);
       cols.push({
         field: fieldName,
         headerName: headerName,
@@ -5315,7 +5838,7 @@ const ReportDataGrid = ({
       });
     });
     return cols;
-  }, [dimensions, metrics, titleOverrides]);
+  }, [dimensions, metrics, computedDimensions, titleOverrides, parameters]);
 
   // Transform report data to rows with unique IDs.
   // Keys are normalised by replacing dots with underscores so that MUI DataGrid
@@ -5421,7 +5944,8 @@ const ReportBuilder = ({
   const [report, setReport] = useState({
     dimensions: [],
     metrics: [],
-    filters: {}
+    filters: {},
+    computedDimensions: []
   });
   const [titleOverrides, setTitleOverrides] = useState({
     dimensions: {},
@@ -5462,7 +5986,7 @@ 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]);
@@ -5688,11 +6212,16 @@ 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 || [];
+
       // Set the report state
       setReport({
         dimensions: reconstructedDimensions,
         metrics: reconstructedMetrics,
-        filters: loadedFilters
+        filters: loadedFilters,
+        computedDimensions
       });
 
       // Set title overrides
@@ -5798,11 +6327,16 @@ 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 || [];
+
       // Set the report state
       setReport({
         dimensions: reconstructedDimensions,
         metrics: reconstructedMetrics,
-        filters: loadedFilters
+        filters: loadedFilters,
+        computedDimensions
       });
 
       // Set title overrides
@@ -5834,7 +6368,8 @@ const ReportBuilder = ({
     setReport({
       dimensions: [],
       metrics: [],
-      filters: {}
+      filters: {},
+      computedDimensions: []
     });
     // Reset title overrides
     setTitleOverrides({
@@ -5930,6 +6465,34 @@ const ReportBuilder = ({
       dimensions: newOrder
     }));
   };
+  const handleSaveComputedDimension = computedDimensionData => {
+    setReport(prev => ({
+      ...prev,
+      computedDimensions: [...prev.computedDimensions, computedDimensionData]
+    }));
+  };
+  const handleUpdateComputedDimension = (index, computedDimensionData) => {
+    setReport(prev => {
+      const newComputedDimensions = [...prev.computedDimensions];
+      newComputedDimensions[index] = computedDimensionData;
+      return {
+        ...prev,
+        computedDimensions: newComputedDimensions
+      };
+    });
+  };
+  const handleRemoveComputedDimension = index => {
+    setReport(prev => ({
+      ...prev,
+      computedDimensions: prev.computedDimensions.filter((_, i) => i !== index)
+    }));
+  };
+  const handleReorderComputedDimensions = newOrder => {
+    setReport(prev => ({
+      ...prev,
+      computedDimensions: newOrder
+    }));
+  };
   const handleSaveMetric = metricData => {
     setReport(prev => {
       const newReport = {
@@ -6049,6 +6612,14 @@ const ReportBuilder = ({
       offset: page * size
     };
 
+    // Only add computed_dimensions if there are any
+    if (report.computedDimensions && report.computedDimensions.length > 0) {
+      queryObj.computed_dimensions = report.computedDimensions.map(cd => ({
+        name: cd.name,
+        value: cd.value
+      }));
+    }
+
     // Only add titles if there are any overrides
     if (Object.keys(titles).length > 0) {
       queryObj.titles = titles;
@@ -6145,8 +6716,8 @@ 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 {
@@ -6181,6 +6752,14 @@ const ReportBuilder = ({
         order_by: orderBy
       };
 
+      // Only add computed_dimensions if there are any
+      if (report.computedDimensions && report.computedDimensions.length > 0) {
+        queryObj.computed_dimensions = report.computedDimensions.map(cd => ({
+          name: cd.name,
+          value: cd.value
+        }));
+      }
+
       // Only add titles if there are any overrides
       if (Object.keys(titles).length > 0) {
         queryObj.titles = titles;
@@ -6257,7 +6836,7 @@ 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);
   return /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       p: 3,
@@ -6430,7 +7009,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)",
@@ -6440,7 +7019,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",
@@ -6541,7 +7120,12 @@ const ReportBuilder = ({
     onUpdateTitle: handleUpdateDimensionTitle,
     onResetTitle: handleResetDimensionTitle,
     existingMetrics: report.metrics,
-    existingFilters: report.filters
+    existingFilters: report.filters,
+    savedComputedDimensions: report.computedDimensions,
+    onSaveComputedDimension: handleSaveComputedDimension,
+    onUpdateComputedDimension: handleUpdateComputedDimension,
+    onRemoveComputedDimension: handleRemoveComputedDimension,
+    onReorderComputedDimensions: handleReorderComputedDimensions
   })), /*#__PURE__*/React__default.createElement(TabPanel, {
     value: activeTab,
     index: 1
@@ -6579,6 +7163,7 @@ const ReportBuilder = ({
     reportData: reportData,
     dimensions: report.dimensions,
     metrics: report.metrics,
+    computedDimensions: report.computedDimensions,
     loading: loading,
     onPageChange: handlePageChange,
     totalRows: totalRows,