@bygd/nc-report-ui 0.1.41 → 0.1.43

package/dist/default/esm/index.js

@@ -17,6 +17,7 @@ import { useInView } from 'react-intersection-observer';
 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 as Tooltip$1, IconButton as IconButton$1, Paper as Paper$1, Tabs, Tab, Badge } from '@mui/material';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import EventEmitter from 'eventemitter3';
 import Grid from '@mui/material/Grid';
 import IconButton from '@mui/material/IconButton';
@@ -44,7 +45,7 @@ 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 { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
@@ -64,6 +65,7 @@ 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';
+import CalculateIcon from '@mui/icons-material/Calculate';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 function _extends() {
@@ -1054,7 +1056,8 @@ function SingleSelect({
       key,
       value,
       disabled,
-      icon
+      icon,
+      alreadySelected
     } = itm;
     return /*#__PURE__*/React__default.createElement(MenuItem, {
       key: key,
@@ -1065,7 +1068,12 @@ function SingleSelect({
         minHeight: "36px",
         display: "flex",
         alignItems: "center",
-        gap: "6px"
+        gap: "6px",
+        ...(alreadySelected && {
+          color: "rgb(70, 134, 128)",
+          backgroundColor: "rgba(70, 134, 128, 0.08)",
+          fontWeight: 600
+        })
       }
     }, icon && /*#__PURE__*/React__default.createElement(Box, {
       component: "span",
@@ -1073,7 +1081,13 @@ function SingleSelect({
         display: "inline-flex",
         alignItems: "center"
       }
-    }, icon), formatLabel(value));
+    }, icon), alreadySelected && /*#__PURE__*/React__default.createElement(CheckCircleIcon, {
+      fontSize: "small",
+      sx: {
+        color: "rgb(70, 134, 128)",
+        fontSize: "16px"
+      }
+    }), formatLabel(value));
   }))));
 }
 
@@ -2528,6 +2542,163 @@ const ProviderSelection = ({
   }, renderSelectionChain()));
 };
 
+// Shared drag-and-drop primitives for the index-identified, arrow-reorderable
+// lists used across the report builder (Dimensions, Metrics, Column Order).
+// Previously duplicated per-tab; consolidated here so all three behave and
+// look identical and only need to be fixed in one place.
+
+const useSortableListSensors = () => useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+  coordinateGetter: sortableKeyboardCoordinates
+}));
+
+// Builds drag/move handlers for a list where dnd-kit item ids are the array
+// index. `onReorder` receives the whole reordered list.
+const makeListReorderHandlers = (list, onReorder) => {
+  const handleDragEnd = ({
+    active,
+    over
+  }) => {
+    if (over && active.id !== over.id) {
+      const oldIndex = list.findIndex((_, i) => i === active.id);
+      const newIndex = list.findIndex((_, i) => i === over.id);
+      onReorder(arrayMove(list, oldIndex, newIndex));
+    }
+  };
+  const handleMoveUp = index => {
+    if (index > 0) {
+      onReorder(arrayMove(list, index, index - 1));
+    }
+  };
+  const handleMoveDown = index => {
+    if (index < list.length - 1) {
+      onReorder(arrayMove(list, index, index + 1));
+    }
+  };
+  return {
+    handleDragEnd,
+    handleMoveUp,
+    handleMoveDown
+  };
+};
+
+// Wraps DndContext + SortableContext + the vertical list container.
+// `itemIds` must line up with the ids passed to each item's useSortable().
+const SortableListContext = ({
+  sensors,
+  itemIds,
+  onDragEnd,
+  children
+}) => /*#__PURE__*/React__default.createElement(DndContext, {
+  sensors: sensors,
+  collisionDetection: closestCenter,
+  onDragEnd: onDragEnd
+}, /*#__PURE__*/React__default.createElement(SortableContext, {
+  items: itemIds,
+  strategy: verticalListSortingStrategy
+}, /*#__PURE__*/React__default.createElement(Box$1, {
+  sx: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 1
+  }
+}, children)));
+
+// Per-row useSortable() wiring shared by every sortable chip/row component.
+const useSortableRow = id => {
+  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%"
+  };
+  return {
+    attributes,
+    listeners,
+    setNodeRef,
+    style
+  };
+};
+const DragHandle = ({
+  listeners
+}) => /*#__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)"
+  }
+}));
+const MoveButtons = ({
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast
+}) => /*#__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"
+})));
+
+// Builds an identity string for a saved dimension/metric instance. Deliberate
+// duplicates (the same field added more than once) are allowed - the first
+// occurrence keeps the plain fullPath (so existing saved reports and their
+// title-override keys stay backward compatible), later occurrences get a
+// `#n` suffix.
+const makeInstanceId = (fullPath, occurrenceIndex) => occurrenceIndex === 0 ? fullPath : `${fullPath}#${occurrenceIndex}`;
+
+// Picks the next free instance id for a newly-added fullPath, given the
+// items already saved. Scans occurrence numbers from 0 rather than just
+// counting existing instances with this fullPath, because counting alone
+// can collide: e.g. add "ft.currency" twice (ids "ft.currency",
+// "ft.currency#1"), remove the first, then add "ft.currency" again - a
+// plain count of 1 would regenerate "ft.currency#1", clashing with the
+// surviving duplicate.
+const nextInstanceId = (fullPath, existingItems) => {
+  const existingIds = new Set(existingItems.map(item => item.id));
+  let occurrenceIndex = 0;
+  while (existingIds.has(makeInstanceId(fullPath, occurrenceIndex))) {
+    occurrenceIndex += 1;
+  }
+  return makeInstanceId(fullPath, occurrenceIndex);
+};
+
 // 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.
@@ -2539,6 +2710,53 @@ const interpolateTitle = (template, params) => {
   });
 };
 
+// Resolves the final column display order for the results grid: dimensions,
+// computed dimensions, and metrics combined into a single list.
+//
+// `columnOrder` is the optional, explicitly-arranged order (raw entries
+// `{ type: 'dimension' | 'computed' | 'metric', key }`) set on the Column
+// Order tab. When present, its entries come first, in that order. Anything
+// not covered by it (new fields added since it was last touched, or when
+// it's empty/undefined because no custom order has ever been defined) is
+// appended in the pre-existing default order: dimensions/computed (in their
+// own `dimensionOrder`) first, then metrics (in their own array order) —
+// this keeps behavior unchanged for reports that never define a column order.
+const resolveColumnOrder = (columnOrder, orderedDimensionItems, metrics) => {
+  // Normalise every candidate item to a uniform { kind, key, data } shape
+  // up front, so callers (e.g. the Column Order tab) can always read
+  // `.key` regardless of where the item came from.
+  // Keyed by instance id (not fullPath) so that two instances of the same
+  // dimension/metric - added deliberately as duplicates - are treated as
+  // distinct columns rather than collapsing into one.
+  const normalizedDimensionItems = orderedDimensionItems.map(item => ({
+    kind: item.kind,
+    key: item.kind === 'computed' ? item.data.name : item.data.id,
+    data: item.data
+  }));
+  const normalizedMetricItems = metrics.map(m => ({
+    kind: 'metric',
+    key: m.id,
+    data: m
+  }));
+  const byKey = Object.fromEntries([...normalizedDimensionItems, ...normalizedMetricItems].map(item => [`${item.kind}:${item.key}`, item]));
+  const resolved = [];
+  const seen = new Set();
+  (columnOrder || []).forEach(entry => {
+    const seenKey = `${entry.type}:${entry.key}`;
+    if (seen.has(seenKey) || !byKey[seenKey]) return;
+    resolved.push(byKey[seenKey]);
+    seen.add(seenKey);
+  });
+  [...normalizedDimensionItems, ...normalizedMetricItems].forEach(item => {
+    const seenKey = `${item.kind}:${item.key}`;
+    if (!seen.has(seenKey)) {
+      resolved.push(item);
+      seen.add(seenKey);
+    }
+  });
+  return resolved;
+};
+
 // Sortable Chip Component
 const SortableChip$1 = ({
   id,
@@ -2551,7 +2769,7 @@ const SortableChip$1 = ({
   isLast,
   sortOrder,
   onSortOrderChange,
-  fullPath,
+  instanceId,
   defaultTitle,
   customTitle,
   onUpdateTitle,
@@ -2567,20 +2785,8 @@ const SortableChip$1 = ({
     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%"
-  };
+    style
+  } = useSortableRow(id);
 
   // Focus input when entering edit mode
   useEffect(() => {
@@ -2646,7 +2852,7 @@ const SortableChip$1 = ({
       handleCancel();
       return;
     }
-    onUpdateTitle(fullPath, trimmedValue);
+    onUpdateTitle(instanceId, trimmedValue);
     setIsEditing(false);
   };
   const handleCancel = () => {
@@ -2654,7 +2860,7 @@ const SortableChip$1 = ({
     setEditValue("");
   };
   const handleReset = () => {
-    onResetTitle(fullPath);
+    onResetTitle(instanceId);
     setIsEditing(false);
     setEditValue("");
   };
@@ -2689,21 +2895,9 @@ const SortableChip$1 = ({
         opacity: 1 // show icons on hover
       }
     }
-  }, /*#__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(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(DragHandle, {
+    listeners: listeners
+  }), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       minWidth: 0
     }
@@ -2766,29 +2960,12 @@ const SortableChip$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, {
+  }), /*#__PURE__*/React__default.createElement(MoveButtons, {
+    onMoveUp: onMoveUp,
+    onMoveDown: onMoveDown,
+    isFirst: isFirst,
+    isLast: isLast
+  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
     inputRef: inputRef,
     value: editValue,
     onChange: e => setEditValue(e.target.value),
@@ -2864,24 +3041,12 @@ const SortableComputedChip = ({
     attributes,
     listeners,
     setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = useSortable({
-    id
-  });
+    style
+  } = useSortableRow(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(() => {
@@ -2906,7 +3071,7 @@ const SortableComputedChip = ({
   const handleSave = () => {
     const trimmedName = editName.trim();
     const trimmedValue = editValue.trim();
-    if (!trimmedName || !trimmedValue) return;
+    if (!trimmedName) return;
     if (isNameTaken(trimmedName, name)) return;
     onUpdate(name, {
       name: trimmedName,
@@ -2944,21 +3109,9 @@ const SortableComputedChip = ({
         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, {
+  }, /*#__PURE__*/React__default.createElement(DragHandle, {
+    listeners: listeners
+  }), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Chip, {
     icon: /*#__PURE__*/React__default.createElement(FunctionsIcon, {
       sx: {
         fontSize: "15px !important"
@@ -3022,29 +3175,12 @@ const SortableComputedChip = ({
     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, {
+  }), /*#__PURE__*/React__default.createElement(MoveButtons, {
+    onMoveUp: onMoveUp,
+    onMoveDown: onMoveDown,
+    isFirst: isFirst,
+    isLast: isLast
+  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
     value: editName,
     onChange: e => setEditName(e.target.value),
     onKeyDown: handleKeyDown,
@@ -3085,7 +3221,7 @@ const SortableComputedChip = ({
     onClick: handleSave,
     color: "primary",
     "aria-label": "save computed dimension",
-    disabled: !editName.trim() || !editValue.trim() || nameError
+    disabled: !editName.trim() || nameError
   }, /*#__PURE__*/React__default.createElement(CheckIcon, {
     fontSize: "small"
   })))), /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -3129,55 +3265,39 @@ const Dimensions = ({
   const [computedValue, setComputedValue] = useState("");
 
   // Setup drag and drop sensors
-  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
-    coordinateGetter: sortableKeyboardCoordinates
-  }));
+  const sensors = useSortableListSensors();
 
   // 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]));
+  // Keyed by instance id rather than fullPath, so two instances of the same
+  // dimension (added deliberately as a duplicate) stay distinct entries.
+  const dimensionById = Object.fromEntries(savedDimensions.map(d => [d.id, 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]
+    data: dimensionById[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 = 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) {
-      onReorderDimensionItems(arrayMove(dimensionOrder, index, index - 1));
-    }
-  };
-
-  // Handle move down
-  const handleMoveDown = index => {
-    if (index < dimensionOrder.length - 1) {
-      onReorderDimensionItems(arrayMove(dimensionOrder, index, index + 1));
-    }
-  };
+  // Handle drag/move for the unified list
+  const {
+    handleDragEnd,
+    handleMoveUp,
+    handleMoveDown
+  } = makeListReorderHandlers(dimensionOrder, onReorderDimensionItems);
 
-  // Handle sort order change (dimensions only - computed dimensions have no order_by)
-  const handleSortOrderChange = (fullPath, sortOrder) => {
-    onUpdateDimensionSortOrder(fullPath, sortOrder);
+  // Handle sort order change (dimensions only - computed dimensions have no
+  // order_by). Keyed by instance id but applied query-wide: SQL can only
+  // sort by a given column once, so toggling sort on any duplicate instance
+  // of the same field is propagated to all instances sharing its fullPath
+  // (handled in ReportBuilder's onUpdateDimensionSortOrder).
+  const handleSortOrderChange = (id, sortOrder) => {
+    onUpdateDimensionSortOrder(id, sortOrder);
   };
 
   // Computed Dimensions: { name, value } pairs independent of any provider.
@@ -3198,7 +3318,7 @@ const Dimensions = ({
   const handleSaveComputed = () => {
     const trimmedName = computedName.trim();
     const trimmedValue = computedValue.trim();
-    if (!trimmedName || !trimmedValue) return;
+    if (!trimmedName) return;
     if (isComputedNameTaken(trimmedName)) return;
     onSaveComputedDimension({
       name: trimmedName,
@@ -3240,7 +3360,10 @@ const Dimensions = ({
       currentProviderKey = selection.targetKey;
     });
 
-    // Create a Set of already selected dimension fullPaths for quick lookup
+    // Create a Set of already selected dimension fullPaths for quick lookup.
+    // Already-selected items stay selectable (so the same dimension can be
+    // added again on purpose) - they're just flagged so the dropdown can
+    // highlight them instead of blocking the click.
     const selectedFullPaths = new Set(savedDimensions.map(dim => dim.fullPath));
     const items = [];
     // Iterate through aliases (e.g., 'ba', 'pc')
@@ -3252,9 +3375,6 @@ const Dimensions = ({
 
         // 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}`,
@@ -3262,7 +3382,7 @@ const Dimensions = ({
           dimensionKey: dimKey,
           alias: alias,
           dimension: dimension,
-          disabled: isAlreadySelected
+          alreadySelected: selectedFullPaths.has(fullPath)
         });
       });
     });
@@ -3324,7 +3444,10 @@ const Dimensions = ({
       dimensionKey: selectedItem.dimensionKey,
       dimensionTitle: selectedItem.value,
       // The constructed path for server
-      fullPath: fullPath
+      fullPath: fullPath,
+      // Unique per-instance identity, so this field can be added more than
+      // once and each occurrence stays independently orderable/removable.
+      id: nextInstanceId(fullPath, savedDimensions)
     };
     onSaveDimension(dimensionData);
     handleCancel();
@@ -3335,8 +3458,9 @@ const Dimensions = ({
   const handleAddAll = () => {
     const dimensionItems = getDimensionItems();
 
-    // Filter out already selected dimensions (disabled items)
-    const availableItems = dimensionItems.filter(item => !item.disabled);
+    // Filter out already selected dimensions - "Add all" only fills in
+    // missing ones; intentional duplicates are added one at a time above.
+    const availableItems = dimensionItems.filter(item => !item.alreadySelected);
     if (availableItems.length === 0) return;
 
     // Build the complete relation objects array (same for all dimensions in this provider)
@@ -3381,7 +3505,10 @@ const Dimensions = ({
         dimensionKey: item.dimensionKey,
         dimensionTitle: item.value,
         // The constructed path for server
-        fullPath: fullPath
+        fullPath: fullPath,
+        // "Add all" only ever adds fields that aren't already selected, so
+        // this is always the first (and only) occurrence of this fullPath.
+        id: fullPath
       };
       onSaveDimension(dimensionData);
     });
@@ -3515,7 +3642,7 @@ const Dimensions = ({
   }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
     onClick: handleSaveComputed,
-    disabled: !computedName.trim() || !computedValue.trim() || computedNameError,
+    disabled: !computedName.trim() || computedNameError,
     sx: {
       height: "40px",
       fontFamily: "system-ui",
@@ -3591,7 +3718,7 @@ const Dimensions = ({
     placement: "top"
   }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton$1, {
     onClick: handleAddAll,
-    disabled: getDimensionItems().filter(item => !item.disabled).length === 0,
+    disabled: getDimensionItems().filter(item => !item.alreadySelected).length === 0,
     "aria-label": "add all dimensions",
     sx: {
       color: "rgb(70, 134, 128)",
@@ -3666,19 +3793,10 @@ const Dimensions = ({
       color: "#666",
       marginBottom: 2
     }
-  }, "Drag to reorder or use arrows"), /*#__PURE__*/React__default.createElement(DndContext, {
+  }, "Drag to reorder or use arrows"), /*#__PURE__*/React__default.createElement(SortableListContext, {
     sensors: sensors,
-    collisionDetection: closestCenter,
+    itemIds: orderedItems.map((_, index) => index),
     onDragEnd: handleDragEnd
-  }, /*#__PURE__*/React__default.createElement(SortableContext, {
-    items: orderedItems.map((_, index) => index),
-    strategy: verticalListSortingStrategy
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 1
-    }
   }, orderedItems.map((item, index) => item.kind === "dimension" ? /*#__PURE__*/React__default.createElement(SortableChip$1, {
     key: `dim-${item.key}`,
     id: index,
@@ -3691,9 +3809,9 @@ const Dimensions = ({
     isLast: index === orderedItems.length - 1,
     sortOrder: item.data.sortOrder || null,
     onSortOrderChange: sortOrder => handleSortOrderChange(item.key, sortOrder),
-    fullPath: item.data.fullPath,
+    instanceId: item.data.id,
     defaultTitle: item.data.dimensionTitle,
-    customTitle: titleOverrides[item.data.fullPath],
+    customTitle: titleOverrides[item.data.id],
     onUpdateTitle: onUpdateTitle,
     onResetTitle: onResetTitle
   }) : /*#__PURE__*/React__default.createElement(SortableComputedChip, {
@@ -3708,7 +3826,7 @@ const Dimensions = ({
     onMoveDown: () => handleMoveDown(index),
     isFirst: index === 0,
     isLast: index === orderedItems.length - 1
-  })))))));
+  })))));
 };
 
 const MetricSourceIcon = ({
@@ -3766,7 +3884,7 @@ const SortableChip = ({
   onMoveDown,
   isFirst,
   isLast,
-  fullPath,
+  instanceId,
   defaultTitle,
   customTitle,
   onUpdateTitle,
@@ -3783,20 +3901,8 @@ const SortableChip = ({
     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%'
-  };
+    style
+  } = useSortableRow(id);
 
   // Focus input when entering edit mode
   useEffect(() => {
@@ -3831,7 +3937,7 @@ const SortableChip = ({
       handleCancel();
       return;
     }
-    onUpdateTitle(fullPath, trimmedValue);
+    onUpdateTitle(instanceId, trimmedValue);
     setIsEditing(false);
   };
   const handleCancel = () => {
@@ -3839,7 +3945,7 @@ const SortableChip = ({
     setEditValue('');
   };
   const handleReset = () => {
-    onResetTitle(fullPath);
+    onResetTitle(instanceId);
     setIsEditing(false);
     setEditValue('');
   };
@@ -3874,21 +3980,9 @@ const SortableChip = ({
         opacity: 1 // show icons on hover
       }
     }
-  }, /*#__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, source && /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(DragHandle, {
+    listeners: listeners
+  }), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, source && /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       display: 'flex',
       alignItems: 'center',
@@ -3950,29 +4044,12 @@ const SortableChip = ({
     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, {
+  }), /*#__PURE__*/React__default.createElement(MoveButtons, {
+    onMoveUp: onMoveUp,
+    onMoveDown: onMoveDown,
+    isFirst: isFirst,
+    isLast: isLast
+  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
     inputRef: inputRef,
     value: editValue,
     onChange: e => setEditValue(e.target.value),
@@ -4047,39 +4124,14 @@ const Metrics = ({
   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);
-    }
-  };
+  const sensors = useSortableListSensors();
 
-  // 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);
-    }
-  };
+  // Handle drag/move
+  const {
+    handleDragEnd,
+    handleMoveUp,
+    handleMoveDown
+  } = makeListReorderHandlers(savedMetrics, onReorderMetrics);
 
   // Get the current provider based on selection chain
   const getCurrentProvider = () => {
@@ -4114,7 +4166,10 @@ const Metrics = ({
       currentProviderKey = selection.targetKey;
     });
 
-    // Create a Set of already selected metric fullPaths for quick lookup
+    // Create a Set of already selected metric fullPaths for quick lookup.
+    // Already-selected items stay selectable (so the same metric can be
+    // added again on purpose) - they're just flagged so the dropdown can
+    // highlight them instead of blocking the click.
     const selectedFullPaths = new Set(savedMetrics.map(metric => metric.fullPath));
 
     // Metrics are a direct array, not nested by alias
@@ -4122,15 +4177,12 @@ const Metrics = ({
     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,
+        alreadySelected: selectedFullPaths.has(fullPath),
         icon: metric.source ? /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
           source: metric.source
         }) : undefined
@@ -4193,7 +4245,11 @@ const Metrics = ({
       metricName: selectedItem.metricName,
       metricTitle: selectedItem.value,
       // The constructed path for server
-      fullPath: fullPath
+      fullPath: fullPath,
+      // Unique per-instance identity, so this field can be added more
+      // than once and each occurrence stays independently
+      // orderable/removable/titleable.
+      id: nextInstanceId(fullPath, savedMetrics)
     };
     onSaveMetric(metricData);
     handleCancel();
@@ -4204,8 +4260,9 @@ const Metrics = ({
   const handleAddAll = () => {
     const metricItems = getMetricItems();
 
-    // Filter out already selected metrics (disabled items)
-    const availableItems = metricItems.filter(item => !item.disabled);
+    // Filter out already selected metrics - "Add all" only fills in
+    // missing ones; intentional duplicates are added one at a time above.
+    const availableItems = metricItems.filter(item => !item.alreadySelected);
     if (availableItems.length === 0) return;
 
     // Build the complete relation objects array (same for all metrics in this provider)
@@ -4250,7 +4307,10 @@ const Metrics = ({
         metricName: item.metricName,
         metricTitle: item.value,
         // The constructed path for server
-        fullPath: fullPath
+        fullPath: fullPath,
+        // "Add all" only ever adds fields that aren't already
+        // selected, so this is always the first occurrence.
+        id: fullPath
       };
       onSaveMetric(metricData);
     });
@@ -4349,7 +4409,7 @@ const Metrics = ({
     placement: "top"
   }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconButton$1, {
     onClick: handleAddAll,
-    disabled: getMetricItems().filter(item => !item.disabled).length === 0,
+    disabled: getMetricItems().filter(item => !item.alreadySelected).length === 0,
     "aria-label": "add all metrics",
     sx: {
       color: "rgb(70, 134, 128)",
@@ -4418,36 +4478,27 @@ const Metrics = ({
       marginBottom: 1,
       color: "rgb(37, 37, 37)"
     }
-  }, "Saved Metrics"), /*#__PURE__*/React__default.createElement(DndContext, {
+  }, "Saved Metrics"), /*#__PURE__*/React__default.createElement(SortableListContext, {
     sensors: sensors,
-    collisionDetection: closestCenter,
+    itemIds: savedMetrics.map((_, index) => index),
     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),
+    onDelete: () => onRemoveMetric(metric.id),
     onMoveUp: () => handleMoveUp(index),
     onMoveDown: () => handleMoveDown(index),
     isFirst: index === 0,
     isLast: index === savedMetrics.length - 1,
-    fullPath: metric.fullPath,
+    instanceId: metric.id,
     defaultTitle: metric.metricTitle,
-    customTitle: titleOverrides[metric.fullPath],
+    customTitle: titleOverrides[metric.id],
     onUpdateTitle: onUpdateTitle,
     onResetTitle: onResetTitle,
     source: metric.metric?.source
-  })))))));
+  })))));
 };
 
 const Filters = ({
@@ -5280,7 +5331,12 @@ const Filters = ({
       mb: 3
     }
   }, /*#__PURE__*/React__default.createElement(SingleSelect, {
-    items: existingDimensions.map(dim => ({
+    items: Array.from(
+    // Dimensions can now be added more than once (same fullPath,
+    // different instance), but a filter targets the underlying
+    // field regardless of how many columns display it - so this
+    // list is deduped by fullPath to avoid showing it twice.
+    new Map(existingDimensions.map(dim => [dim.fullPath, dim])).values()).map(dim => ({
       key: dim.fullPath,
       value: interpolateTitle(dimensionTitleOverrides[dim.fullPath] || dim.dimensionTitle, parameters)
     })).sort((a, b) => a.value.localeCompare(b.value)),
@@ -5674,6 +5730,205 @@ const Filters = ({
   }))));
 };
 
+const KIND_LABEL = {
+  dimension: "Dimension",
+  computed: "Computed",
+  metric: "Metric"
+};
+const KindChip = ({
+  kind,
+  source
+}) => {
+  if (kind === "metric") {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flexShrink: 0
+      }
+    }, /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
+      source: source
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Chip, {
+    icon: kind === "computed" ? /*#__PURE__*/React__default.createElement(CalculateIcon, {
+      sx: {
+        fontSize: "15px !important"
+      }
+    }) : undefined,
+    label: KIND_LABEL[kind],
+    size: "small",
+    sx: {
+      fontWeight: 500,
+      backgroundColor: "rgba(70, 134, 128, 0.1)",
+      color: "rgb(70, 134, 128)",
+      flexShrink: 0
+    }
+  });
+};
+
+// Read-only sortable row: this tab only reorders columns. Adding, removing,
+// and renaming stay on the Dimensions/Metrics tabs so there's one place each
+// field is managed.
+const SortableColumnRow = ({
+  id,
+  label,
+  fullPath,
+  kind,
+  source,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast
+}) => {
+  const reportingContext = useReportingContextOptional();
+  const parameters = reportingContext?.parameters;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    style
+  } = useSortableRow(id);
+  const displayLabel = interpolateTitle(label, parameters);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: setNodeRef,
+    style: style
+  }, attributes), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      gap: 1,
+      backgroundColor: "white",
+      border: "1px solid #e0e0e0",
+      borderRadius: 2,
+      padding: 1,
+      transition: "transform 0.2s ease, box-shadow 0.2s ease",
+      "&:hover .hover-icons": {
+        opacity: 1
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(DragHandle, {
+    listeners: listeners
+  }), /*#__PURE__*/React__default.createElement(KindChip, {
+    kind: kind,
+    source: source
+  }), /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    title: fullPath,
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    sx: {
+      fontWeight: 500,
+      color: "#1a1a1a",
+      fontSize: "14px",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }, displayLabel)), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React__default.createElement(MoveButtons, {
+    onMoveUp: onMoveUp,
+    onMoveDown: onMoveDown,
+    isFirst: isFirst,
+    isLast: isLast
+  })));
+};
+const ColumnOrder = ({
+  orderedDimensionItems = [],
+  metrics = [],
+  columnOrder = [],
+  onReorderColumnItems,
+  titleOverrides = {
+    dimensions: {},
+    metrics: {}
+  }
+}) => {
+  const isCustomized = columnOrder.length > 0;
+  const resolvedItems = resolveColumnOrder(columnOrder, orderedDimensionItems, metrics);
+  const sensors = useSortableListSensors();
+  const reorderResolved = newResolvedItems => {
+    onReorderColumnItems(newResolvedItems.map(item => ({
+      type: item.kind,
+      key: item.key
+    })));
+  };
+  const {
+    handleDragEnd,
+    handleMoveUp,
+    handleMoveDown
+  } = makeListReorderHandlers(resolvedItems, reorderResolved);
+  const labelFor = item => {
+    if (item.kind === "computed") return item.data.name;
+    if (item.kind === "metric") {
+      return titleOverrides.metrics[item.key] || item.data.metricTitle || item.key;
+    }
+    return titleOverrides.dimensions[item.key] || item.data.dimensionTitle || item.key;
+  };
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      mb: 2,
+      gap: 2
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    sx: {
+      fontSize: "13px",
+      color: "#666"
+    }
+  }, "Optional: define a single order for all columns (dimensions, computed dimensions and metrics together) in the results grid. Drag to reorder or use the arrows. Newly added dimensions/metrics are appended to the end automatically. Without a custom order, columns follow the Dimensions tab order, then the Metrics tab order."), isCustomized && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    title: "Discard the custom order and go back to the default (Dimensions, then Metrics)",
+    arrow: true
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outlined",
+    size: "small",
+    startIcon: /*#__PURE__*/React__default.createElement(RestartAltIcon, null),
+    onClick: () => onReorderColumnItems([]),
+    sx: {
+      height: "36px",
+      flexShrink: 0,
+      fontFamily: "system-ui",
+      fontSize: "13px",
+      fontWeight: 500,
+      borderRadius: "8px",
+      boxShadow: "none",
+      textTransform: "none",
+      borderColor: "#e0e0e0",
+      color: "rgb(37, 37, 37)",
+      "&:hover": {
+        backgroundColor: "#f5f5f5",
+        borderColor: "#d0d0d0"
+      }
+    }
+  }, "Reset to Default"))), resolvedItems.length === 0 ? /*#__PURE__*/React__default.createElement(Typography$1, {
+    sx: {
+      fontSize: "13px",
+      color: "#999"
+    }
+  }, "Add dimensions or metrics in the other tabs first.") : /*#__PURE__*/React__default.createElement(SortableListContext, {
+    sensors: sensors,
+    itemIds: resolvedItems.map((_, index) => index),
+    onDragEnd: handleDragEnd
+  }, resolvedItems.map((item, index) => /*#__PURE__*/React__default.createElement(SortableColumnRow, {
+    key: `${item.kind}-${item.key}`,
+    id: index,
+    label: labelFor(item),
+    fullPath: item.kind === "computed" ? item.data.value : item.data.fullPath,
+    kind: item.kind,
+    source: item.kind === "metric" ? item.data.metric?.source : undefined,
+    onMoveUp: () => handleMoveUp(index),
+    onMoveDown: () => handleMoveDown(index),
+    isFirst: index === 0,
+    isLast: index === resolvedItems.length - 1
+  }))));
+};
+
 // Default numeral.js formats applied when a dimension/metric definition has a
 // known type but no explicit `format` set on the provider.
 const DEFAULT_FORMATS_BY_TYPE = {
@@ -5688,10 +5943,122 @@ const formatValue = (value, def) => {
   return def?.prefix ? `${def.prefix} ${formatted}` : formatted;
 };
 const isNumericType = type => type === 'integer' || type === 'currency';
+
+// Builds a single DataGrid column definition for one resolved column item
+// (a dimension, computed dimension, or metric). The DataGrid `field` is the
+// item's instance id (so two duplicate instances of the same underlying
+// dimension/metric still get distinct columns); the actual cell value is
+// read via `valueGetter` from `dataFieldName`, the key the API response
+// actually uses - shared by every duplicate instance, since the backend
+// only ever returns one value per fullPath. dataFieldName rules:
+// - Dimensions from base provider: baseAlias.field -> baseAlias_field
+// - Dimensions from nested provider: baseAlias_rel1_rel2.field -> rel1_rel2_field (drops base alias)
+// - Computed dimensions have no provider/relations chain, so the API returns
+//   each row keyed by the computed dimension's own `name` (and can't be
+//   duplicated - names must be unique - so field/dataFieldName coincide).
+// - Metrics: API returns metric keys in different forms depending on path depth
+//   (see comment inline below), normalised to match the row-key normalisation
+//   done when building `rows`.
+const buildColumn = (item, titleOverrides, parameters) => {
+  if (item.kind === 'computed') {
+    const cd = item.data;
+    return {
+      field: cd.name,
+      headerName: cd.name,
+      flex: 1,
+      minWidth: 150,
+      type: 'string'
+    };
+  }
+  if (item.kind === 'metric') {
+    const metric = item.data;
+    const metricDef = metric.metric;
+    let dataFieldName;
+    const dotCount = (metric.fullPath.match(/\./g) || []).length;
+    if (dotCount >= 2) {
+      // 3+-part namespaced path: API returns the full dotted path as the key.
+      // Normalise dots to underscores to match the row key normalisation below.
+      // Example: "mc.dkpi.activeAgreementsCount" -> "mc_dkpi_activeAgreementsCount"
+      dataFieldName = metric.fullPath.replace(/\./g, '_');
+    } else if (metric.relations && metric.relations.length > 0) {
+      // 2-part path from a nested provider: API drops the base provider alias.
+      // Example: "mc_fa.total_amount" -> "fa_total_amount"
+      const parts = metric.fullPath.split('.');
+      const pathWithoutField = parts[0]; // e.g., "mc_fa"
+      const field = parts[1]; // e.g., "total_amount"
+
+      const pathParts = pathWithoutField.split('_');
+      pathParts.shift(); // remove base provider alias
+      const pathWithoutBase = pathParts.join('_');
+      dataFieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
+    } else {
+      // 2-part path from the base provider: API returns just the metric name.
+      // Example: "mc.record_count" -> "record_count"
+      dataFieldName = metric.metricName;
+    }
+    const headerName = interpolateTitle(titleOverrides.metrics[metric.id] || metric.metricTitle || dataFieldName, parameters);
+    return {
+      // `field` is the instance id (unique even for duplicate columns
+      // pointing at the same underlying metric); the actual value is
+      // read from the row via valueGetter using dataFieldName, which is
+      // the key the API response actually uses (shared across duplicates).
+      field: metric.id.replace(/[.#]/g, '_'),
+      headerName: headerName,
+      flex: 1,
+      minWidth: 150,
+      type: isNumericType(metricDef?.type) ? 'number' : 'string',
+      valueGetter: (_value, row) => row[dataFieldName],
+      renderHeader: () => /*#__PURE__*/React__default.createElement(Box$1, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5
+        }
+      }, /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
+        source: metricDef?.source
+      }), /*#__PURE__*/React__default.createElement("span", null, headerName)),
+      valueFormatter: value => formatValue(value, metricDef)
+    };
+  }
+
+  // Dimension
+  const dim = item.data;
+  let dataFieldName;
+  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"
+
+    const pathParts = pathWithoutField.split('_');
+    pathParts.shift(); // Remove base provider alias
+    const pathWithoutBase = pathParts.join('_'); // e.g., "fa_db"
+
+    dataFieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
+  } else {
+    // From base provider: keep the full path with underscore
+    // Example: ba.created_at -> ba_created_at
+    dataFieldName = dim.fullPath.replace('.', '_');
+  }
+  const headerName = interpolateTitle(titleOverrides.dimensions[dim.id] || dim.dimensionTitle || dataFieldName, parameters);
+  const dimDef = dim.dimension;
+  return {
+    // Same rationale as the metric branch above: `field` must be unique
+    // per instance, while the value always comes from the one real
+    // underlying row key (dataFieldName), shared by every duplicate.
+    field: dim.id.replace(/[.#]/g, '_'),
+    headerName: headerName,
+    flex: 1,
+    minWidth: 150,
+    type: isNumericType(dimDef?.type) ? 'number' : 'string',
+    valueGetter: (_value, row) => row[dataFieldName],
+    valueFormatter: value => formatValue(value, dimDef)
+  };
+};
 const ReportDataGrid = ({
   reportData,
-  orderedDimensionItems = [],
-  metrics,
+  columnItems = [],
   loading,
   onPageChange,
   totalRows = 0,
@@ -5707,127 +6074,10 @@ const ReportDataGrid = ({
     pageSize: 50
   });
 
-  // Generate columns dynamically from dimensions and metrics
-  const columns = React__default.useMemo(() => {
-    const cols = [];
-
-    // 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)
-    // 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;
-
-      // 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;
-      headerName = interpolateTitle(headerName, parameters);
-      const dimDef = dim.dimension;
-      cols.push({
-        field: fieldName,
-        headerName: headerName,
-        flex: 1,
-        minWidth: 150,
-        type: isNumericType(dimDef?.type) ? 'number' : 'string',
-        valueFormatter: value => formatValue(value, dimDef)
-      });
-    });
-
-    // Add metric columns
-    // The API returns metric keys in two different forms depending on the path depth:
-    //
-    //  • 2-part path  "mc.record_count"              → API key: "record_count"
-    //  • 2-part path  "mc_fa.total_amount"  (nested) → API key: "fa_total_amount"
-    //  • 3+-part path "mc.dkpi.activeAgreementsCount"→ API key: "mc.dkpi.activeAgreementsCount" (dots)
-    //
-    // For 3+-part paths the API key contains dots. MUI DataGrid interprets dots
-    // in field names as nested-object accessors, so the rows useMemo normalises
-    // those keys (dots → underscores). The column field must match that normalised key.
-    metrics.forEach(metric => {
-      const metricDef = metric.metric;
-      let fieldName;
-      let headerName;
-      const dotCount = (metric.fullPath.match(/\./g) || []).length;
-      if (dotCount >= 2) {
-        // 3+-part namespaced path: API returns the full dotted path as the key.
-        // Normalise dots to underscores to match the row key normalisation below.
-        // Example: "mc.dkpi.activeAgreementsCount" -> "mc_dkpi_activeAgreementsCount"
-        fieldName = metric.fullPath.replace(/\./g, '_');
-      } else if (metric.relations && metric.relations.length > 0) {
-        // 2-part path from a nested provider: API drops the base provider alias.
-        // Example: "mc_fa.total_amount" -> "fa_total_amount"
-        const parts = metric.fullPath.split('.');
-        const pathWithoutField = parts[0]; // e.g., "mc_fa"
-        const field = parts[1]; // e.g., "total_amount"
-
-        const pathParts = pathWithoutField.split('_');
-        pathParts.shift(); // remove base provider alias
-        const pathWithoutBase = pathParts.join('_');
-        fieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
-      } else {
-        // 2-part path from the base provider: API returns just the metric name.
-        // Example: "mc.record_count" -> "record_count"
-        fieldName = metric.metricName;
-      }
-
-      // 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,
-        flex: 1,
-        minWidth: 150,
-        type: isNumericType(metricDef?.type) ? 'number' : 'string',
-        renderHeader: () => /*#__PURE__*/React__default.createElement(Box$1, {
-          sx: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 0.5
-          }
-        }, /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
-          source: metricDef?.source
-        }), /*#__PURE__*/React__default.createElement("span", null, headerName)),
-        valueFormatter: value => formatValue(value, metricDef)
-      });
-    });
-    return cols;
-  }, [orderedDimensionItems, metrics, titleOverrides, parameters]);
+  // Generate columns dynamically, in the final resolved column order
+  // (custom Column Order tab arrangement when defined, otherwise
+  // dimensions/computed then metrics).
+  const columns = React__default.useMemo(() => columnItems.map(item => buildColumn(item, titleOverrides, parameters)), [columnItems, titleOverrides, parameters]);
 
   // Transform report data to rows with unique IDs.
   // Keys are normalised by replacing dots with underscores so that MUI DataGrid
@@ -5937,7 +6187,12 @@ const ReportBuilder = ({
     computedDimensions: [],
     // Unified display/execution order across dimensions + computedDimensions.
     // Entries: { type: 'dimension', key: fullPath } | { type: 'computed', key: name }
-    dimensionOrder: []
+    dimensionOrder: [],
+    // Optional unified display order across dimensions + computedDimensions +
+    // metrics, set on the Column Order tab. Empty means "not defined" — the
+    // results grid falls back to dimensionOrder followed by metrics order.
+    // Entries: { type: 'dimension' | 'computed' | 'metric', key }
+    columnOrder: []
   });
   const [titleOverrides, setTitleOverrides] = useState({
     dimensions: {},
@@ -6123,6 +6378,72 @@ const ReportBuilder = ({
     }
   };
 
+  // Reconstructs saved dimensions as independent, individually-identified
+  // instances so that deliberate duplicates (the same field added more than
+  // once) survive a save/reload round trip. Prefers `ordered_dimensions`
+  // (one ref per instance - the nth duplicate of a path is suffixed
+  // `#n`) when present; falls back to one instance per entry in the
+  // (necessarily duplicate-free) `dimensions` path list for reports saved
+  // before this field existed.
+  const reconstructDimensions = (reportDef, providersData) => {
+    const orderByMap = {};
+    if (reportDef.definition?.doc?.query?.order_by) {
+      for (const orderItem of reportDef.definition.doc.query.order_by) {
+        orderByMap[orderItem.name] = orderItem.desc === true ? "desc" : "asc";
+      }
+    }
+    const reconstructed = [];
+    const orderedRefs = (reportDef.definition?.doc?.query?.ordered_dimensions || []).filter(entry => entry.type === "dimension").map(entry => entry.ref);
+    if (orderedRefs.length > 0) {
+      orderedRefs.forEach(ref => {
+        const fullPath = ref.split("#")[0];
+        const dim = reconstructDimensionFromPath(fullPath, providersData, reportDef.provider);
+        if (dim) {
+          dim.id = ref;
+          dim.sortOrder = orderByMap[fullPath] || null;
+          reconstructed.push(dim);
+        }
+      });
+    } else if (reportDef.definition?.doc?.query?.dimensions) {
+      for (const dimPath of reportDef.definition.doc.query.dimensions) {
+        const dim = reconstructDimensionFromPath(dimPath, providersData, reportDef.provider);
+        if (dim) {
+          dim.id = dimPath;
+          dim.sortOrder = orderByMap[dimPath] || null;
+          reconstructed.push(dim);
+        }
+      }
+    }
+    return reconstructed;
+  };
+
+  // Mirrors reconstructDimensions for metrics, using the analogous
+  // `ordered_metrics` field (metrics have no other unified-order concept to
+  // fall back on, so this is always written whenever there are metrics).
+  const reconstructMetrics = (reportDef, providersData) => {
+    const reconstructed = [];
+    const orderedRefs = reportDef.definition?.doc?.query?.ordered_metrics || [];
+    if (orderedRefs.length > 0) {
+      orderedRefs.forEach(ref => {
+        const fullPath = ref.split("#")[0];
+        const metric = reconstructMetricFromPath(fullPath, providersData, reportDef.provider);
+        if (metric) {
+          metric.id = ref;
+          reconstructed.push(metric);
+        }
+      });
+    } else if (reportDef.definition?.doc?.query?.metrics) {
+      for (const metricPath of reportDef.definition.doc.query.metrics) {
+        const metric = reconstructMetricFromPath(metricPath, providersData, reportDef.provider);
+        if (metric) {
+          metric.id = metricPath;
+          reconstructed.push(metric);
+        }
+      }
+    }
+    return reconstructed;
+  };
+
   // 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
@@ -6133,7 +6454,7 @@ const ReportBuilder = ({
     const seenComputedKeys = new Set();
     if (Array.isArray(rawOrderedDimensions)) {
       rawOrderedDimensions.forEach(entry => {
-        if (entry.type === "dimension" && dimensions.some(d => d.fullPath === entry.ref)) {
+        if (entry.type === "dimension" && dimensions.some(d => d.id === entry.ref)) {
           dimensionOrder.push({
             type: "dimension",
             key: entry.ref
@@ -6151,10 +6472,10 @@ const ReportBuilder = ({
 
     // Append anything not covered by ordered_dimensions (older reports, or drift)
     dimensions.forEach(d => {
-      if (!seenDimensionKeys.has(d.fullPath)) {
+      if (!seenDimensionKeys.has(d.id)) {
         dimensionOrder.push({
           type: "dimension",
-          key: d.fullPath
+          key: d.id
         });
       }
     });
@@ -6168,6 +6489,46 @@ const ReportBuilder = ({
     });
     return dimensionOrder;
   };
+
+  // Build the optional unified column order (dimensions + computed
+  // dimensions + metrics) from the persisted `ordered_columns` field.
+  // Unlike buildDimensionOrder, entries that no longer resolve are simply
+  // dropped rather than backfilled — an empty/partial result just means "no
+  // custom order defined (yet)", which resolveColumnOrder treats as
+  // "fall back to the default order".
+  const buildColumnOrder = (rawOrderedColumns, dimensions, computedDimensions, metrics) => {
+    if (!Array.isArray(rawOrderedColumns)) return [];
+    const dimensionIds = new Set(dimensions.map(d => d.id));
+    const computedNames = new Set(computedDimensions.map(cd => cd.name));
+    const metricIds = new Set(metrics.map(m => m.id));
+    const columnOrder = [];
+    rawOrderedColumns.forEach(entry => {
+      if (entry.type === "dimension" && dimensionIds.has(entry.ref)) {
+        columnOrder.push({
+          type: "dimension",
+          key: entry.ref
+        });
+      } else if (entry.type === "computed" && computedNames.has(entry.ref)) {
+        columnOrder.push({
+          type: "computed",
+          key: entry.ref
+        });
+      } else if (entry.type === "metric" && metricIds.has(entry.ref)) {
+        columnOrder.push({
+          type: "metric",
+          key: entry.ref
+        });
+      }
+    });
+    return columnOrder;
+  };
+
+  // Auto-append a newly added dimension/computed dimension/metric to the end
+  // of columnOrder — but only once a custom order actually exists. While
+  // columnOrder is empty (no custom order defined) it's left untouched, so
+  // the results grid keeps falling back to the default dimensions-then-
+  // metrics order until the user visits the Column Order tab.
+  const appendToColumnOrder = (columnOrder, entry) => columnOrder.length > 0 ? [...columnOrder, entry] : columnOrder;
   const loadReportDefinition = async id => {
     try {
       console.log("Loading report definition:", id);
@@ -6182,43 +6543,10 @@ const ReportBuilder = ({
       // 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);
-          }
-        }
-      }
+      // Reconstruct dimensions and metrics as independent instances
+      // (preserving deliberate duplicates - see reconstructDimensions/Metrics)
+      const reconstructedDimensions = reconstructDimensions(reportDef, providersData);
+      const reconstructedMetrics = reconstructMetrics(reportDef, providersData);
 
       // Load title overrides if they exist
       const loadedTitleOverrides = {
@@ -6264,6 +6592,7 @@ const ReportBuilder = ({
       // 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);
+      const columnOrder = buildColumnOrder(reportDef.definition?.doc?.query?.ordered_columns, reconstructedDimensions, computedDimensions, reconstructedMetrics);
 
       // Set the report state
       setReport({
@@ -6271,7 +6600,8 @@ const ReportBuilder = ({
         metrics: reconstructedMetrics,
         filters: loadedFilters,
         computedDimensions,
-        dimensionOrder
+        dimensionOrder,
+        columnOrder
       });
 
       // Set title overrides
@@ -6300,43 +6630,10 @@ const ReportBuilder = ({
       // 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);
-          }
-        }
-      }
+      // Reconstruct dimensions and metrics as independent instances
+      // (preserving deliberate duplicates - see reconstructDimensions/Metrics)
+      const reconstructedDimensions = reconstructDimensions(reportDef, providersData);
+      const reconstructedMetrics = reconstructMetrics(reportDef, providersData);
 
       // Load title overrides if they exist
       const loadedTitleOverrides = {
@@ -6381,6 +6678,7 @@ const ReportBuilder = ({
       // 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);
+      const columnOrder = buildColumnOrder(reportDef.definition?.doc?.query?.ordered_columns, reconstructedDimensions, computedDimensions, reconstructedMetrics);
 
       // Set the report state
       setReport({
@@ -6388,7 +6686,8 @@ const ReportBuilder = ({
         metrics: reconstructedMetrics,
         filters: loadedFilters,
         computedDimensions,
-        dimensionOrder
+        dimensionOrder,
+        columnOrder
       });
 
       // Set title overrides
@@ -6422,7 +6721,8 @@ const ReportBuilder = ({
       metrics: [],
       filters: {},
       computedDimensions: [],
-      dimensionOrder: []
+      dimensionOrder: [],
+      columnOrder: []
     });
     // Reset title overrides
     setTitleOverrides({
@@ -6432,42 +6732,45 @@ const ReportBuilder = ({
     });
     console.log("Selected root provider:", event.target.value);
   };
-  const handleUpdateDimensionTitle = (fullPath, customTitle) => {
+
+  // Keyed by instance id, so two instances of the same dimension can carry
+  // independent custom titles.
+  const handleUpdateDimensionTitle = (id, customTitle) => {
     setTitleOverrides(prev => ({
       ...prev,
       dimensions: {
         ...prev.dimensions,
-        [fullPath]: customTitle
+        [id]: customTitle
       }
     }));
   };
-  const handleResetDimensionTitle = fullPath => {
+  const handleResetDimensionTitle = id => {
     setTitleOverrides(prev => {
       const newDimensions = {
         ...prev.dimensions
       };
-      delete newDimensions[fullPath];
+      delete newDimensions[id];
       return {
         ...prev,
         dimensions: newDimensions
       };
     });
   };
-  const handleUpdateMetricTitle = (fullPath, customTitle) => {
+  const handleUpdateMetricTitle = (id, customTitle) => {
     setTitleOverrides(prev => ({
       ...prev,
       metrics: {
         ...prev.metrics,
-        [fullPath]: customTitle
+        [id]: customTitle
       }
     }));
   };
-  const handleResetMetricTitle = fullPath => {
+  const handleResetMetricTitle = id => {
     setTitleOverrides(prev => {
       const newMetrics = {
         ...prev.metrics
       };
-      delete newMetrics[fullPath];
+      delete newMetrics[id];
       return {
         ...prev,
         metrics: newMetrics
@@ -6502,29 +6805,42 @@ const ReportBuilder = ({
         dimensions: [...prev.dimensions, dimensionData],
         dimensionOrder: [...prev.dimensionOrder, {
           type: "dimension",
-          key: dimensionData.fullPath
-        }]
+          key: dimensionData.id
+        }],
+        columnOrder: appendToColumnOrder(prev.columnOrder, {
+          type: "dimension",
+          key: dimensionData.id
+        })
       };
       console.log("Dimension saved:", dimensionData);
       console.log("Complete report:", newReport);
       return newReport;
     });
   };
-  const handleRemoveDimension = fullPath => {
+  const handleRemoveDimension = id => {
     setReport(prev => ({
       ...prev,
-      dimensions: prev.dimensions.filter(d => d.fullPath !== fullPath),
-      dimensionOrder: prev.dimensionOrder.filter(entry => !(entry.type === "dimension" && entry.key === fullPath))
+      dimensions: prev.dimensions.filter(d => d.id !== id),
+      dimensionOrder: prev.dimensionOrder.filter(entry => !(entry.type === "dimension" && entry.key === id)),
+      columnOrder: prev.columnOrder.filter(entry => !(entry.type === "dimension" && entry.key === id))
     }));
   };
-  const handleUpdateDimensionSortOrder = (fullPath, sortOrder) => {
-    setReport(prev => ({
-      ...prev,
-      dimensions: prev.dimensions.map(d => d.fullPath === fullPath ? {
-        ...d,
-        sortOrder
-      } : d)
-    }));
+
+  // sortOrder is fundamentally a per-field (query-level) setting - SQL can
+  // only sort by a given column once - so toggling it on any instance of a
+  // duplicated dimension applies to every instance sharing that fullPath.
+  const handleUpdateDimensionSortOrder = (id, sortOrder) => {
+    setReport(prev => {
+      const target = prev.dimensions.find(d => d.id === id);
+      if (!target) return prev;
+      return {
+        ...prev,
+        dimensions: prev.dimensions.map(d => d.fullPath === target.fullPath ? {
+          ...d,
+          sortOrder
+        } : d)
+      };
+    });
   };
 
   // Reorders the single unified dimensions + computed-dimensions list;
@@ -6543,7 +6859,11 @@ const ReportBuilder = ({
       dimensionOrder: [...prev.dimensionOrder, {
         type: "computed",
         key: computedDimensionData.name
-      }]
+      }],
+      columnOrder: appendToColumnOrder(prev.columnOrder, {
+        type: "computed",
+        key: computedDimensionData.name
+      })
     }));
   };
   const handleUpdateComputedDimension = (name, computedDimensionData) => {
@@ -6553,6 +6873,10 @@ const ReportBuilder = ({
       dimensionOrder: prev.dimensionOrder.map(entry => entry.type === "computed" && entry.key === name ? {
         ...entry,
         key: computedDimensionData.name
+      } : entry),
+      columnOrder: prev.columnOrder.map(entry => entry.type === "computed" && entry.key === name ? {
+        ...entry,
+        key: computedDimensionData.name
       } : entry)
     }));
   };
@@ -6560,24 +6884,30 @@ const ReportBuilder = ({
     setReport(prev => ({
       ...prev,
       computedDimensions: prev.computedDimensions.filter(cd => cd.name !== name),
-      dimensionOrder: prev.dimensionOrder.filter(entry => !(entry.type === "computed" && entry.key === name))
+      dimensionOrder: prev.dimensionOrder.filter(entry => !(entry.type === "computed" && entry.key === name)),
+      columnOrder: prev.columnOrder.filter(entry => !(entry.type === "computed" && entry.key === name))
     }));
   };
   const handleSaveMetric = metricData => {
     setReport(prev => {
       const newReport = {
         ...prev,
-        metrics: [...prev.metrics, metricData]
+        metrics: [...prev.metrics, metricData],
+        columnOrder: appendToColumnOrder(prev.columnOrder, {
+          type: "metric",
+          key: metricData.id
+        })
       };
       console.log("Metric saved:", metricData);
       console.log("Complete report:", newReport);
       return newReport;
     });
   };
-  const handleRemoveMetric = index => {
+  const handleRemoveMetric = id => {
     setReport(prev => ({
       ...prev,
-      metrics: prev.metrics.filter((_, i) => i !== index)
+      metrics: prev.metrics.filter(m => m.id !== id),
+      columnOrder: prev.columnOrder.filter(entry => !(entry.type === "metric" && entry.key === id))
     }));
   };
   const handleReorderMetrics = newOrder => {
@@ -6586,6 +6916,16 @@ const ReportBuilder = ({
       metrics: newOrder
     }));
   };
+
+  // Sets the unified column order shown on the Column Order tab. An empty
+  // array (e.g. via "Reset to Default") clears the customization, and the
+  // results grid falls back to dimensionOrder followed by metrics order.
+  const handleReorderColumnItems = newColumnOrder => {
+    setReport(prev => ({
+      ...prev,
+      columnOrder: newColumnOrder
+    }));
+  };
   const handleSaveFilter = (fullPath, filterData) => {
     setReport(prev => {
       const newReport = {
@@ -6623,13 +6963,30 @@ const ReportBuilder = ({
   // 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 dimensionById = Object.fromEntries(report.dimensions.map(d => [d.id, 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);
+
+    // May contain more than one instance of the same fullPath (deliberate
+    // duplicates), kept in dimensionOrder's display order.
+    const orderedDimensionsOnly = report.dimensionOrder.filter(entry => entry.type === "dimension").map(entry => dimensionById[entry.key]).filter(Boolean);
     const orderedComputedOnly = report.dimensionOrder.filter(entry => entry.type === "computed").map(entry => computedByName[entry.key]).filter(Boolean);
 
+    // The API keys each result row by fullPath, so duplicate instances of
+    // the same field can only ever carry one value/one sort direction at
+    // the query level - dedupe by fullPath (keeping first-occurrence order)
+    // before sending. The builder still shows/orders/titles each instance
+    // independently; they just read from the same underlying query column.
+    const uniqueDimensionsByPath = [];
+    const seenDimensionPaths = new Set();
+    orderedDimensionsOnly.forEach(dim => {
+      if (!seenDimensionPaths.has(dim.fullPath)) {
+        seenDimensionPaths.add(dim.fullPath);
+        uniqueDimensionsByPath.push(dim);
+      }
+    });
+
     // Build order_by array - include all dimensions, add desc property only when needed
-    const orderBy = orderedDimensionsOnly.map(dim => {
+    const orderBy = uniqueDimensionsByPath.map(dim => {
       const orderItem = {
         name: dim.fullPath
       };
@@ -6684,9 +7041,20 @@ const ReportBuilder = ({
     if (Object.keys(titleOverrides.filters).length > 0) {
       titles.filters = titleOverrides.filters;
     }
+
+    // Same dedupe rationale as dimensions above: the query only needs each
+    // metric fullPath once, however many display instances reference it.
+    const uniqueMetricPaths = [];
+    const seenMetricPaths = new Set();
+    report.metrics.forEach(metric => {
+      if (!seenMetricPaths.has(metric.fullPath)) {
+        seenMetricPaths.add(metric.fullPath);
+        uniqueMetricPaths.push(metric.fullPath);
+      }
+    });
     const queryObj = {
-      dimensions: orderedDimensionsOnly.map(dim => dim.fullPath),
-      metrics: report.metrics.map(metric => metric.fullPath),
+      dimensions: uniqueDimensionsByPath.map(dim => dim.fullPath),
+      metrics: uniqueMetricPaths,
       order_by: orderBy
     };
 
@@ -6700,7 +7068,9 @@ const ReportBuilder = ({
 
     // 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.
+    // same order they were arranged in the builder. Entries use each
+    // dimension's instance id as `ref`, so deliberate duplicates (the nth
+    // occurrence of a fullPath is suffixed `#n`) round-trip correctly.
     if (report.dimensionOrder.length > 0) {
       queryObj.ordered_dimensions = report.dimensionOrder.map(entry => ({
         type: entry.type,
@@ -6708,6 +7078,23 @@ const ReportBuilder = ({
       }));
     }
 
+    // Persist metric instance order/identity the same way (metrics have no
+    // other unified-order field to piggyback on).
+    if (report.metrics.length > 0) {
+      queryObj.ordered_metrics = report.metrics.map(metric => metric.id);
+    }
+
+    // Persist the optional unified column order (Column Order tab) so the
+    // results grid can reproduce it on reload. Absent when no custom order
+    // has been defined, so old/untouched reports keep their current
+    // dimensions-then-metrics column order unchanged.
+    if (report.columnOrder.length > 0) {
+      queryObj.ordered_columns = report.columnOrder.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;
@@ -6767,8 +7154,8 @@ const ReportBuilder = ({
   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);
+    // Switch to Results tab after running report (index 4: Dimensions, Metrics, Filters, Column Order, Results)
+    setActiveTab(4);
   };
   const handleDownloadReport = async () => {
     try {
@@ -6866,15 +7253,20 @@ const ReportBuilder = ({
 
   // 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 dimensionById = Object.fromEntries(report.dimensions.map(d => [d.id, 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]
+    data: dimensionById[entry.key]
   } : {
     kind: "computed",
     data: computedDimensionByName[entry.key]
   }).filter(item => item.data);
+
+  // Final column list for the results grid: the explicit Column Order tab
+  // arrangement when defined, otherwise dimensions/computed (in their own
+  // order) followed by metrics (in their own order) — today's behavior.
+  const columnItems = resolveColumnOrder(report.columnOrder, orderedDimensionItems, report.metrics);
   return /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       p: 3,
@@ -7129,9 +7521,36 @@ const ReportBuilder = ({
       }
     }
   }), /*#__PURE__*/React__default.createElement(Tab, {
-    label: reportData ? "Results" : "Results (Run report first)",
+    label: /*#__PURE__*/React__default.createElement(Badge, {
+      variant: "dot",
+      invisible: report.columnOrder.length === 0,
+      sx: {
+        "& .MuiBadge-dot": {
+          backgroundColor: "rgb(70, 134, 128)"
+        }
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        marginRight: report.columnOrder.length > 0 ? "8px" : "0"
+      }
+    }, "Column Order")),
     id: "report-tab-3",
     "aria-controls": "report-tabpanel-3",
+    sx: {
+      height: "41px",
+      fontFamily: "system-ui",
+      borderRadius: "0.5rem",
+      boxShadow: "none",
+      textTransform: "none",
+      color: "rgb(37, 37, 37)",
+      "&.Mui-selected": {
+        color: "rgb(70, 134, 128)"
+      }
+    }
+  }), /*#__PURE__*/React__default.createElement(Tab, {
+    label: reportData ? "Results" : "Results (Run report first)",
+    id: "report-tab-4",
+    "aria-controls": "report-tabpanel-4",
     disabled: !reportData,
     sx: {
       height: "41px",
@@ -7198,10 +7617,18 @@ const ReportBuilder = ({
   })), /*#__PURE__*/React__default.createElement(TabPanel, {
     value: activeTab,
     index: 3
-  }, reportData && /*#__PURE__*/React__default.createElement(ReportDataGrid, {
-    reportData: reportData,
+  }, /*#__PURE__*/React__default.createElement(ColumnOrder, {
     orderedDimensionItems: orderedDimensionItems,
     metrics: report.metrics,
+    columnOrder: report.columnOrder,
+    onReorderColumnItems: handleReorderColumnItems,
+    titleOverrides: titleOverrides
+  })), /*#__PURE__*/React__default.createElement(TabPanel, {
+    value: activeTab,
+    index: 4
+  }, reportData && /*#__PURE__*/React__default.createElement(ReportDataGrid, {
+    reportData: reportData,
+    columnItems: columnItems,
     loading: loading,
     onPageChange: handlePageChange,
     totalRows: totalRows,
@@ -7289,6 +7716,12 @@ const CurrencySelector = () => {
     parameters,
     setParameters
   } = useReportingContext();
+
+  // Hidden by default; only shown when a `cur` query parameter is present in the top-level URL.
+  const showCurrencySelector = new URLSearchParams(window.location.search).has("cur");
+  if (!showCurrencySelector) {
+    return null;
+  }
   return /*#__PURE__*/React__default.createElement(SingleSelect, {
     items: CURRENCY_OPTIONS,
     value: parameters.base_currency,