@bygd/nc-report-ui 0.1.43 → 0.1.45

package/dist/app/esm/index.js

@@ -77759,6 +77759,16 @@ const SortableComputedChip = ({
       handleCancel();
     }
   };
+
+  // The value field is multiline, so Enter inserts a newline instead of
+  // saving; only Escape (cancel) and Cmd/Ctrl+Enter (save) are handled here.
+  const handleValueKeyDown = e => {
+    if (e.key === "Escape") {
+      handleCancel();
+    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      handleSave();
+    }
+  };
   return /*#__PURE__*/gn.createElement("div", _extends({
     ref: setNodeRef,
     style: style
@@ -77862,10 +77872,13 @@ const SortableComputedChip = ({
   }), /*#__PURE__*/gn.createElement(TextField, {
     value: editValue,
     onChange: e => setEditValue(e.target.value),
-    onKeyDown: handleKeyDown,
+    onKeyDown: handleValueKeyDown,
     size: "small",
     label: "Value",
-    helperText: " ",
+    helperText: "Cmd/Ctrl+Enter to save",
+    multiline: true,
+    minRows: 2,
+    maxRows: 10,
     sx: {
       flex: 1,
       minWidth: "200px",
@@ -78275,6 +78288,9 @@ const Dimensions = ({
     value: computedValue,
     onChange: e => setComputedValue(e.target.value),
     size: "small",
+    multiline: true,
+    minRows: 2,
+    maxRows: 10,
     sx: {
       width: "400px",
       "& .MuiInputBase-input": {
@@ -90517,6 +90533,50 @@ class AdapterDayjs {
   };
 }
 
+// Small text input + button for adding a filter value that isn't present in
+// the "Select Filter Values" dropdown (e.g. because no existing row has that
+// value). Kept as an uncontrolled local field so it clears itself after add.
+const CustomFilterValueInput = ({
+  onAdd
+}) => {
+  const [value, setValue] = d('');
+  const handleAdd = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onAdd(trimmed);
+    setValue('');
+  };
+  return /*#__PURE__*/gn.createElement(Box, {
+    sx: {
+      display: 'flex',
+      gap: 1,
+      mt: 1
+    }
+  }, /*#__PURE__*/gn.createElement(TextField, {
+    size: "small",
+    fullWidth: true,
+    placeholder: "Add a value not in the list above",
+    value: value,
+    onChange: e => setValue(e.target.value),
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleAdd();
+      }
+    }
+  }), /*#__PURE__*/gn.createElement(Button, {
+    variant: "outlined",
+    size: "small",
+    onClick: handleAdd,
+    disabled: !value.trim(),
+    sx: {
+      textTransform: 'none',
+      whiteSpace: 'nowrap',
+      borderColor: "rgb(70, 134, 128)",
+      color: "rgb(70, 134, 128)"
+    }
+  }, "Add"));
+};
 const Filters = ({
   providersData,
   rootProvider,
@@ -90656,8 +90716,9 @@ const Filters = ({
       }
     } else {
       // For regular filters, set selected values and fetch available values
-      setSelectedFilterValues(filter.values || []);
-      await fetchFilterValues(fullPath);
+      const currentValues = filter.values || [];
+      setSelectedFilterValues(currentValues);
+      await fetchFilterValues(fullPath, '', currentValues);
     }
   };
   const handleSaveEditedFilter = fullPath => {
@@ -90666,11 +90727,6 @@ const Filters = ({
 
     // Check if this is a date filter
     if (isDateDimension(existingFilter.dimension)) {
-      // For date filters, validate that at least one date is provided
-      if (!dateRangeFrom && !dateRangeTo) {
-        return; // Don't save if no dates provided
-      }
-
       // Update with new date range values (only include provided dates)
       const dateValues = {};
       if (dateRangeFrom) {
@@ -90687,11 +90743,6 @@ const Filters = ({
       // Save the updated filter
       onSaveFilter(fullPath, updatedFilter);
     } else {
-      // For regular filters, validate selected values
-      if (selectedFilterValues.length === 0) {
-        return; // Don't save if no values selected
-      }
-
       // Update with new values
       const updatedFilter = {
         ...existingFilter,
@@ -90752,7 +90803,11 @@ const Filters = ({
   };
 
   // Fetch distinct values for the selected dimension
-  const fetchFilterValues = async (fullPath, searchText = '') => {
+  // preserveValues lets a caller pass the values that must survive the merge
+  // explicitly, instead of relying on the selectedFilterValues closure - a
+  // setSelectedFilterValues() call right before fetchFilterValues() hasn't
+  // committed yet by the time this function reads that state.
+  const fetchFilterValues = async (fullPath, searchText = '', preserveValues = null) => {
     setLoadingFilterValues(true);
     try {
       // Get parameters from context if available, otherwise use default
@@ -90825,7 +90880,8 @@ const Filters = ({
       // Merge with currently selected values to ensure they're always available
       // This is important when editing filters with search text - we don't want to lose
       // previously selected values that don't match the current search
-      const selectedValueItems = selectedFilterValues.map(key => ({
+      const valuesToPreserve = preserveValues !== null ? preserveValues : selectedFilterValues;
+      const selectedValueItems = valuesToPreserve.map(key => ({
         key: String(key),
         value: String(key)
       }));
@@ -90860,13 +90916,6 @@ const Filters = ({
 
     // Check if this is a date filter
     const isDate = isDateDimension(selectedItem.dimension);
-
-    // Validate based on filter type
-    if (isDate) {
-      if (!dateRangeFrom && !dateRangeTo) return; // At least one date must be provided
-    } else {
-      if (selectedFilterValues.length === 0) return; // Regular filters must have values
-    }
     if (!selectedDimension) return;
 
     // Build the complete relation objects array
@@ -90941,13 +90990,6 @@ const Filters = ({
     // Check if this is a date filter
     const isDate = isDateDimension(dimensionData.dimension);
 
-    // Validate based on filter type
-    if (isDate) {
-      if (!dateRangeFrom && !dateRangeTo) return; // At least one date must be provided
-    } else {
-      if (selectedFilterValues.length === 0) return; // Regular filters must have values
-    }
-
     // Prepare filter values based on type
     let filterValues;
     if (isDate) {
@@ -91054,6 +91096,21 @@ const Filters = ({
     }
   };
 
+  // Add a value typed in the "custom value" box directly into the selected
+  // filter values, and inject it into availableFilterValues too, since
+  // CheckboxMultiAutocomplete only renders a chip for keys it can resolve
+  // against its items list.
+  const handleAddCustomFilterValue = rawValue => {
+    const value = rawValue.trim();
+    if (!value) return;
+    if (selectedFilterValues.includes(value)) return;
+    setAvailableFilterValues(prev => prev.some(item => item.key === value) ? prev : [{
+      key: value,
+      value
+    }, ...prev]);
+    setSelectedFilterValues(prev => [...prev, value]);
+  };
+
   // Handler for search text input in filter values dropdown (debounced - triggers API call)
   const handleFilterSearchChange = searchText => {
     // Determine the fullPath based on current mode
@@ -91273,6 +91330,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/gn.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })));
   })(), /*#__PURE__*/gn.createElement(Box, {
     sx: {
@@ -91302,14 +91361,7 @@ const Filters = ({
   }, "Cancel"), /*#__PURE__*/gn.createElement(Button, {
     variant: "contained",
     onClick: handleSave,
-    disabled: (() => {
-      if (!selectedDimension) return true;
-      const dimensionItems = getDimensionItems();
-      const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
-      if (!selectedItem) return true;
-      const isDate = isDateDimension(selectedItem.dimension);
-      return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
-    })(),
+    disabled: !selectedDimension,
     sx: {
       height: "40px",
       fontFamily: "system-ui",
@@ -91424,6 +91476,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/gn.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })));
   })(), /*#__PURE__*/gn.createElement(Box, {
     sx: {
@@ -91453,13 +91507,7 @@ const Filters = ({
   }, "Cancel"), /*#__PURE__*/gn.createElement(Button, {
     variant: "contained",
     onClick: handleSaveFromDimension,
-    disabled: (() => {
-      if (!selectedExistingDimension) return true;
-      const dimensionData = existingDimensions.find(dim => dim.fullPath === selectedExistingDimension);
-      if (!dimensionData) return true;
-      const isDate = isDateDimension(dimensionData.dimension);
-      return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
-    })(),
+    disabled: !selectedExistingDimension,
     sx: {
       height: "40px",
       fontFamily: "system-ui",
@@ -91713,6 +91761,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/gn.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })), /*#__PURE__*/gn.createElement(Box, {
       sx: {
         display: 'flex',
@@ -91731,7 +91781,6 @@ const Filters = ({
       variant: "contained",
       size: "small",
       onClick: () => handleSaveEditedFilter(fullPath),
-      disabled: isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0,
       sx: {
         textTransform: 'none',
         borderRadius: '6px',
@@ -93027,20 +93076,12 @@ const ReportBuilder = ({
     if (report.filters && Object.keys(report.filters).length > 0) {
       Object.entries(report.filters).forEach(([fullPath, filterData]) => {
         if (filterData.values) {
-          // Check if values is an object (date range) or array (regular filter)
-          if (Array.isArray(filterData.values)) {
-            // Regular filter - only add if array has values
-            if (filterData.values.length > 0) {
-              conditions.push({
-                [fullPath]: filterData.values
-              });
-            }
-          } else if (typeof filterData.values === "object") {
-            // Date range filter - add the object as-is
-            conditions.push({
-              [fullPath]: filterData.values
-            });
-          }
+          // Include the condition as-is regardless of whether the array/object
+          // has any entries - an explicitly saved (but empty) filter should
+          // still appear in the query.
+          conditions.push({
+            [fullPath]: filterData.values
+          });
         }
       });
     }
@@ -93104,14 +93145,24 @@ const ReportBuilder = ({
       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
+    // Persist the full resolved column order - the explicit Column Order tab
+    // arrangement when defined, otherwise dimensions/computed (in their own
+    // order) followed by metrics (in their own order), same as what the
+    // results grid renders. Always emitted (not just when a custom order
+    // exists) so the API/results grid get an explicit order even for
+    // untouched reports, rather than having to fall back to guessing it.
+    const orderedDimensionItems = report.dimensionOrder.map(entry => entry.type === "dimension" ? {
+      kind: "dimension",
+      data: dimensionById[entry.key]
+    } : {
+      kind: "computed",
+      data: computedByName[entry.key]
+    }).filter(item => item.data);
+    const resolvedColumnItems = resolveColumnOrder(report.columnOrder, orderedDimensionItems, report.metrics);
+    if (resolvedColumnItems.length > 0) {
+      queryObj.ordered_columns = resolvedColumnItems.map(item => ({
+        type: item.kind,
+        ref: item.key
       }));
     }
 
@@ -93834,6 +93885,7 @@ const Root = () => {
   const config = useConfig();
   const client = config.client;
   const merchants = config.merchants;
+  const organizations = config.organizations;
 
   //const test_token = config.test_token;
   const token = config.tokens[config.active_user];
@@ -93851,8 +93903,10 @@ const Root = () => {
     // client:"7774bcad-05dc-48cf-a52b-9a8a56168818",
     // client:"7774bcad-05dc-48cf-a52b-9a8a56168829" // this is some wrong client id for testing
     // client: undefined
-    client: client || "7774bcad-05dc-48cf-a52b-9a8a56168818",
-    merchants: merchants || []
+    //client: client || "7774bcad-05dc-48cf-a52b-9a8a56168818",
+    client: client || [],
+    merchants: merchants || [],
+    organizations: organizations || []
   };
 
   // Api.setBaseUrl(apiDefaults.base_url);
@@ -93891,8 +93945,9 @@ var tokens = {
   "serdar.kizilkurt@gmail.com": "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJXeFB6alpqaXJUcm5ienYwZW5iWHBhUjhoWklNQWRxb29FdEhaY0Nmbl9zIn0.eyJleHAiOjE3NjU5ODIzMjcsImlhdCI6MTc2NTk4MTQyNywianRpIjoiYjA4ZWMyMmYtN2IxMC00YzVjLWEwODgtNzA5MDhmNzJlNGIxIiwiaXNzIjoiaHR0cHM6Ly9pZHAubmV0Y2FwaXRhbC5wcm8vcmVhbG1zL25ldGNhcGl0YWwiLCJhdWQiOiJhY2NvdW50Iiwic3ViIjoiNjAzNGI5NzktNzkyNi00NjJlLTljYjQtYjJmZWMzYjNjYzhjIiwidHlwIjoiQmVhcmVyIiwiYXpwIjoiYXBwIiwic2lkIjoiMjczYzA0OTItYjQwZS00ZmIwLWEwYWItMTRmMDU5NzUzYTM2IiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwOi8vbG9jYWxob3N0OjMxMDIiLCJodHRwczovL2FwcC5uZXRjYXBpdGFsLnBybyIsImh0dHBzOi8vZGV2Lm5ldGNhcGl0YWwucHJvIl0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLW5ldGNhcGl0YWwiLCJvZmZsaW5lX2FjY2VzcyIsInVtYV9hdXRob3JpemF0aW9uIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJvcGVuaWQgZW1haWwgcHJvZmlsZSIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJuYW1lIjoiU2VyZGFyIFJlZFdvbGYiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJzZXJkYXIua2l6aWxrdXJ0QGdtYWlsLmNvbSIsImdpdmVuX25hbWUiOiJTZXJkYXIiLCJmYW1pbHlfbmFtZSI6IlJlZFdvbGYiLCJlbWFpbCI6InNlcmRhci5raXppbGt1cnRAZ21haWwuY29tIn0.mIrffBy6n4HmCnFJAX7Njl8fR-m-QQtsn2iGbyefXXK17lCP8b_lUlAvHHFaan7Te8OT8P8rHu9FgfSyPQkBMqZ0AVVf6VrhUmEO12wZx71Di59QNHjcZKfljNykPKLXXWEIWlulvScrLUsxuR5emufTJaxD9zU4fJzRh00vDCIuzIyl9o51asLmhNAtNnW8QUtT-rWOM6Fgh3pskP4yrGUe5dI17DpAYafcWgUNx86Qi9E09nzUE5IToKgXfQvVpPs7_ZwlcfOE95VNcO_pwRQQ85sJmFiUCg5_TWzNFJKoTui5barb74oBCP7OCJTb5yj5KeriL2ozg0e2IyVrHA"
 };
 var active_user = "s.kizilkurt@azerion.com";
-var client = "7774bcad-05dc-48cf-a52b-9a8a56168818";
+var client = [];
 var merchants = [];
+var organizations = [];
 var base_url_local = "http://localhost:8081";
 var base_url_prod = "https://dev-report-api.netcapital.pro";
 var base_url = "http://localhost:8081";
@@ -93904,6 +93959,7 @@ var config = {
   active_user: active_user,
   client: client,
   merchants: merchants,
+  organizations: organizations,
   base_url_local: base_url_local,
   base_url_prod: base_url_prod,
   base_url: base_url,

package/dist/default/cjs/index.cjs

@@ -3172,6 +3172,16 @@ const SortableComputedChip = ({
       handleCancel();
     }
   };
+
+  // The value field is multiline, so Enter inserts a newline instead of
+  // saving; only Escape (cancel) and Cmd/Ctrl+Enter (save) are handled here.
+  const handleValueKeyDown = e => {
+    if (e.key === "Escape") {
+      handleCancel();
+    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      handleSave();
+    }
+  };
   return /*#__PURE__*/React__namespace.default.createElement("div", _extends({
     ref: setNodeRef,
     style: style
@@ -3275,10 +3285,13 @@ const SortableComputedChip = ({
   }), /*#__PURE__*/React__namespace.default.createElement(material.TextField, {
     value: editValue,
     onChange: e => setEditValue(e.target.value),
-    onKeyDown: handleKeyDown,
+    onKeyDown: handleValueKeyDown,
     size: "small",
     label: "Value",
-    helperText: " ",
+    helperText: "Cmd/Ctrl+Enter to save",
+    multiline: true,
+    minRows: 2,
+    maxRows: 10,
     sx: {
       flex: 1,
       minWidth: "200px",
@@ -3688,6 +3701,9 @@ const Dimensions = ({
     value: computedValue,
     onChange: e => setComputedValue(e.target.value),
     size: "small",
+    multiline: true,
+    minRows: 2,
+    maxRows: 10,
     sx: {
       width: "400px",
       "& .MuiInputBase-input": {
@@ -4582,6 +4598,50 @@ const Metrics = ({
   })))));
 };
 
+// Small text input + button for adding a filter value that isn't present in
+// the "Select Filter Values" dropdown (e.g. because no existing row has that
+// value). Kept as an uncontrolled local field so it clears itself after add.
+const CustomFilterValueInput = ({
+  onAdd
+}) => {
+  const [value, setValue] = React.useState('');
+  const handleAdd = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onAdd(trimmed);
+    setValue('');
+  };
+  return /*#__PURE__*/React__namespace.default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      gap: 1,
+      mt: 1
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(material.TextField, {
+    size: "small",
+    fullWidth: true,
+    placeholder: "Add a value not in the list above",
+    value: value,
+    onChange: e => setValue(e.target.value),
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleAdd();
+      }
+    }
+  }), /*#__PURE__*/React__namespace.default.createElement(material.Button, {
+    variant: "outlined",
+    size: "small",
+    onClick: handleAdd,
+    disabled: !value.trim(),
+    sx: {
+      textTransform: 'none',
+      whiteSpace: 'nowrap',
+      borderColor: "rgb(70, 134, 128)",
+      color: "rgb(70, 134, 128)"
+    }
+  }, "Add"));
+};
 const Filters = ({
   providersData,
   rootProvider,
@@ -4721,8 +4781,9 @@ const Filters = ({
       }
     } else {
       // For regular filters, set selected values and fetch available values
-      setSelectedFilterValues(filter.values || []);
-      await fetchFilterValues(fullPath);
+      const currentValues = filter.values || [];
+      setSelectedFilterValues(currentValues);
+      await fetchFilterValues(fullPath, '', currentValues);
     }
   };
   const handleSaveEditedFilter = fullPath => {
@@ -4731,11 +4792,6 @@ const Filters = ({
 
     // Check if this is a date filter
     if (isDateDimension(existingFilter.dimension)) {
-      // For date filters, validate that at least one date is provided
-      if (!dateRangeFrom && !dateRangeTo) {
-        return; // Don't save if no dates provided
-      }
-
       // Update with new date range values (only include provided dates)
       const dateValues = {};
       if (dateRangeFrom) {
@@ -4752,11 +4808,6 @@ const Filters = ({
       // Save the updated filter
       onSaveFilter(fullPath, updatedFilter);
     } else {
-      // For regular filters, validate selected values
-      if (selectedFilterValues.length === 0) {
-        return; // Don't save if no values selected
-      }
-
       // Update with new values
       const updatedFilter = {
         ...existingFilter,
@@ -4817,7 +4868,11 @@ const Filters = ({
   };
 
   // Fetch distinct values for the selected dimension
-  const fetchFilterValues = async (fullPath, searchText = '') => {
+  // preserveValues lets a caller pass the values that must survive the merge
+  // explicitly, instead of relying on the selectedFilterValues closure - a
+  // setSelectedFilterValues() call right before fetchFilterValues() hasn't
+  // committed yet by the time this function reads that state.
+  const fetchFilterValues = async (fullPath, searchText = '', preserveValues = null) => {
     setLoadingFilterValues(true);
     try {
       // Get parameters from context if available, otherwise use default
@@ -4890,7 +4945,8 @@ const Filters = ({
       // Merge with currently selected values to ensure they're always available
       // This is important when editing filters with search text - we don't want to lose
       // previously selected values that don't match the current search
-      const selectedValueItems = selectedFilterValues.map(key => ({
+      const valuesToPreserve = preserveValues !== null ? preserveValues : selectedFilterValues;
+      const selectedValueItems = valuesToPreserve.map(key => ({
         key: String(key),
         value: String(key)
       }));
@@ -4925,13 +4981,6 @@ const Filters = ({
 
     // Check if this is a date filter
     const isDate = isDateDimension(selectedItem.dimension);
-
-    // Validate based on filter type
-    if (isDate) {
-      if (!dateRangeFrom && !dateRangeTo) return; // At least one date must be provided
-    } else {
-      if (selectedFilterValues.length === 0) return; // Regular filters must have values
-    }
     if (!selectedDimension) return;
 
     // Build the complete relation objects array
@@ -5006,13 +5055,6 @@ const Filters = ({
     // Check if this is a date filter
     const isDate = isDateDimension(dimensionData.dimension);
 
-    // Validate based on filter type
-    if (isDate) {
-      if (!dateRangeFrom && !dateRangeTo) return; // At least one date must be provided
-    } else {
-      if (selectedFilterValues.length === 0) return; // Regular filters must have values
-    }
-
     // Prepare filter values based on type
     let filterValues;
     if (isDate) {
@@ -5119,6 +5161,21 @@ const Filters = ({
     }
   };
 
+  // Add a value typed in the "custom value" box directly into the selected
+  // filter values, and inject it into availableFilterValues too, since
+  // CheckboxMultiAutocomplete only renders a chip for keys it can resolve
+  // against its items list.
+  const handleAddCustomFilterValue = rawValue => {
+    const value = rawValue.trim();
+    if (!value) return;
+    if (selectedFilterValues.includes(value)) return;
+    setAvailableFilterValues(prev => prev.some(item => item.key === value) ? prev : [{
+      key: value,
+      value
+    }, ...prev]);
+    setSelectedFilterValues(prev => [...prev, value]);
+  };
+
   // Handler for search text input in filter values dropdown (debounced - triggers API call)
   const handleFilterSearchChange = searchText => {
     // Determine the fullPath based on current mode
@@ -5338,6 +5395,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/React__namespace.default.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })));
   })(), /*#__PURE__*/React__namespace.default.createElement(material.Box, {
     sx: {
@@ -5367,14 +5426,7 @@ const Filters = ({
   }, "Cancel"), /*#__PURE__*/React__namespace.default.createElement(material.Button, {
     variant: "contained",
     onClick: handleSave,
-    disabled: (() => {
-      if (!selectedDimension) return true;
-      const dimensionItems = getDimensionItems();
-      const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
-      if (!selectedItem) return true;
-      const isDate = isDateDimension(selectedItem.dimension);
-      return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
-    })(),
+    disabled: !selectedDimension,
     sx: {
       height: "40px",
       fontFamily: "system-ui",
@@ -5489,6 +5541,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/React__namespace.default.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })));
   })(), /*#__PURE__*/React__namespace.default.createElement(material.Box, {
     sx: {
@@ -5518,13 +5572,7 @@ const Filters = ({
   }, "Cancel"), /*#__PURE__*/React__namespace.default.createElement(material.Button, {
     variant: "contained",
     onClick: handleSaveFromDimension,
-    disabled: (() => {
-      if (!selectedExistingDimension) return true;
-      const dimensionData = existingDimensions.find(dim => dim.fullPath === selectedExistingDimension);
-      if (!dimensionData) return true;
-      const isDate = isDateDimension(dimensionData.dimension);
-      return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
-    })(),
+    disabled: !selectedExistingDimension,
     sx: {
       height: "40px",
       fontFamily: "system-ui",
@@ -5778,6 +5826,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/React__namespace.default.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })), /*#__PURE__*/React__namespace.default.createElement(material.Box, {
       sx: {
         display: 'flex',
@@ -5796,7 +5846,6 @@ const Filters = ({
       variant: "contained",
       size: "small",
       onClick: () => handleSaveEditedFilter(fullPath),
-      disabled: isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0,
       sx: {
         textTransform: 'none',
         borderRadius: '6px',
@@ -7088,20 +7137,12 @@ const ReportBuilder = ({
     if (report.filters && Object.keys(report.filters).length > 0) {
       Object.entries(report.filters).forEach(([fullPath, filterData]) => {
         if (filterData.values) {
-          // Check if values is an object (date range) or array (regular filter)
-          if (Array.isArray(filterData.values)) {
-            // Regular filter - only add if array has values
-            if (filterData.values.length > 0) {
-              conditions.push({
-                [fullPath]: filterData.values
-              });
-            }
-          } else if (typeof filterData.values === "object") {
-            // Date range filter - add the object as-is
-            conditions.push({
-              [fullPath]: filterData.values
-            });
-          }
+          // Include the condition as-is regardless of whether the array/object
+          // has any entries - an explicitly saved (but empty) filter should
+          // still appear in the query.
+          conditions.push({
+            [fullPath]: filterData.values
+          });
         }
       });
     }
@@ -7165,14 +7206,24 @@ const ReportBuilder = ({
       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
+    // Persist the full resolved column order - the explicit Column Order tab
+    // arrangement when defined, otherwise dimensions/computed (in their own
+    // order) followed by metrics (in their own order), same as what the
+    // results grid renders. Always emitted (not just when a custom order
+    // exists) so the API/results grid get an explicit order even for
+    // untouched reports, rather than having to fall back to guessing it.
+    const orderedDimensionItems = report.dimensionOrder.map(entry => entry.type === "dimension" ? {
+      kind: "dimension",
+      data: dimensionById[entry.key]
+    } : {
+      kind: "computed",
+      data: computedByName[entry.key]
+    }).filter(item => item.data);
+    const resolvedColumnItems = resolveColumnOrder(report.columnOrder, orderedDimensionItems, report.metrics);
+    if (resolvedColumnItems.length > 0) {
+      queryObj.ordered_columns = resolvedColumnItems.map(item => ({
+        type: item.kind,
+        ref: item.key
       }));
     }
 

package/dist/default/esm/index.js

@@ -3091,6 +3091,16 @@ const SortableComputedChip = ({
       handleCancel();
     }
   };
+
+  // The value field is multiline, so Enter inserts a newline instead of
+  // saving; only Escape (cancel) and Cmd/Ctrl+Enter (save) are handled here.
+  const handleValueKeyDown = e => {
+    if (e.key === "Escape") {
+      handleCancel();
+    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      handleSave();
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: setNodeRef,
     style: style
@@ -3194,10 +3204,13 @@ const SortableComputedChip = ({
   }), /*#__PURE__*/React__default.createElement(TextField, {
     value: editValue,
     onChange: e => setEditValue(e.target.value),
-    onKeyDown: handleKeyDown,
+    onKeyDown: handleValueKeyDown,
     size: "small",
     label: "Value",
-    helperText: " ",
+    helperText: "Cmd/Ctrl+Enter to save",
+    multiline: true,
+    minRows: 2,
+    maxRows: 10,
     sx: {
       flex: 1,
       minWidth: "200px",
@@ -3607,6 +3620,9 @@ const Dimensions = ({
     value: computedValue,
     onChange: e => setComputedValue(e.target.value),
     size: "small",
+    multiline: true,
+    minRows: 2,
+    maxRows: 10,
     sx: {
       width: "400px",
       "& .MuiInputBase-input": {
@@ -4501,6 +4517,50 @@ const Metrics = ({
   })))));
 };
 
+// Small text input + button for adding a filter value that isn't present in
+// the "Select Filter Values" dropdown (e.g. because no existing row has that
+// value). Kept as an uncontrolled local field so it clears itself after add.
+const CustomFilterValueInput = ({
+  onAdd
+}) => {
+  const [value, setValue] = useState('');
+  const handleAdd = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onAdd(trimmed);
+    setValue('');
+  };
+  return /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      gap: 1,
+      mt: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(TextField, {
+    size: "small",
+    fullWidth: true,
+    placeholder: "Add a value not in the list above",
+    value: value,
+    onChange: e => setValue(e.target.value),
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleAdd();
+      }
+    }
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outlined",
+    size: "small",
+    onClick: handleAdd,
+    disabled: !value.trim(),
+    sx: {
+      textTransform: 'none',
+      whiteSpace: 'nowrap',
+      borderColor: "rgb(70, 134, 128)",
+      color: "rgb(70, 134, 128)"
+    }
+  }, "Add"));
+};
 const Filters = ({
   providersData,
   rootProvider,
@@ -4640,8 +4700,9 @@ const Filters = ({
       }
     } else {
       // For regular filters, set selected values and fetch available values
-      setSelectedFilterValues(filter.values || []);
-      await fetchFilterValues(fullPath);
+      const currentValues = filter.values || [];
+      setSelectedFilterValues(currentValues);
+      await fetchFilterValues(fullPath, '', currentValues);
     }
   };
   const handleSaveEditedFilter = fullPath => {
@@ -4650,11 +4711,6 @@ const Filters = ({
 
     // Check if this is a date filter
     if (isDateDimension(existingFilter.dimension)) {
-      // For date filters, validate that at least one date is provided
-      if (!dateRangeFrom && !dateRangeTo) {
-        return; // Don't save if no dates provided
-      }
-
       // Update with new date range values (only include provided dates)
       const dateValues = {};
       if (dateRangeFrom) {
@@ -4671,11 +4727,6 @@ const Filters = ({
       // Save the updated filter
       onSaveFilter(fullPath, updatedFilter);
     } else {
-      // For regular filters, validate selected values
-      if (selectedFilterValues.length === 0) {
-        return; // Don't save if no values selected
-      }
-
       // Update with new values
       const updatedFilter = {
         ...existingFilter,
@@ -4736,7 +4787,11 @@ const Filters = ({
   };
 
   // Fetch distinct values for the selected dimension
-  const fetchFilterValues = async (fullPath, searchText = '') => {
+  // preserveValues lets a caller pass the values that must survive the merge
+  // explicitly, instead of relying on the selectedFilterValues closure - a
+  // setSelectedFilterValues() call right before fetchFilterValues() hasn't
+  // committed yet by the time this function reads that state.
+  const fetchFilterValues = async (fullPath, searchText = '', preserveValues = null) => {
     setLoadingFilterValues(true);
     try {
       // Get parameters from context if available, otherwise use default
@@ -4809,7 +4864,8 @@ const Filters = ({
       // Merge with currently selected values to ensure they're always available
       // This is important when editing filters with search text - we don't want to lose
       // previously selected values that don't match the current search
-      const selectedValueItems = selectedFilterValues.map(key => ({
+      const valuesToPreserve = preserveValues !== null ? preserveValues : selectedFilterValues;
+      const selectedValueItems = valuesToPreserve.map(key => ({
         key: String(key),
         value: String(key)
       }));
@@ -4844,13 +4900,6 @@ const Filters = ({
 
     // Check if this is a date filter
     const isDate = isDateDimension(selectedItem.dimension);
-
-    // Validate based on filter type
-    if (isDate) {
-      if (!dateRangeFrom && !dateRangeTo) return; // At least one date must be provided
-    } else {
-      if (selectedFilterValues.length === 0) return; // Regular filters must have values
-    }
     if (!selectedDimension) return;
 
     // Build the complete relation objects array
@@ -4925,13 +4974,6 @@ const Filters = ({
     // Check if this is a date filter
     const isDate = isDateDimension(dimensionData.dimension);
 
-    // Validate based on filter type
-    if (isDate) {
-      if (!dateRangeFrom && !dateRangeTo) return; // At least one date must be provided
-    } else {
-      if (selectedFilterValues.length === 0) return; // Regular filters must have values
-    }
-
     // Prepare filter values based on type
     let filterValues;
     if (isDate) {
@@ -5038,6 +5080,21 @@ const Filters = ({
     }
   };
 
+  // Add a value typed in the "custom value" box directly into the selected
+  // filter values, and inject it into availableFilterValues too, since
+  // CheckboxMultiAutocomplete only renders a chip for keys it can resolve
+  // against its items list.
+  const handleAddCustomFilterValue = rawValue => {
+    const value = rawValue.trim();
+    if (!value) return;
+    if (selectedFilterValues.includes(value)) return;
+    setAvailableFilterValues(prev => prev.some(item => item.key === value) ? prev : [{
+      key: value,
+      value
+    }, ...prev]);
+    setSelectedFilterValues(prev => [...prev, value]);
+  };
+
   // Handler for search text input in filter values dropdown (debounced - triggers API call)
   const handleFilterSearchChange = searchText => {
     // Determine the fullPath based on current mode
@@ -5257,6 +5314,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/React__default.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })));
   })(), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
@@ -5286,14 +5345,7 @@ const Filters = ({
   }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
     onClick: handleSave,
-    disabled: (() => {
-      if (!selectedDimension) return true;
-      const dimensionItems = getDimensionItems();
-      const selectedItem = dimensionItems.find(item => item.key === selectedDimension);
-      if (!selectedItem) return true;
-      const isDate = isDateDimension(selectedItem.dimension);
-      return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
-    })(),
+    disabled: !selectedDimension,
     sx: {
       height: "40px",
       fontFamily: "system-ui",
@@ -5408,6 +5460,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/React__default.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })));
   })(), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
@@ -5437,13 +5491,7 @@ const Filters = ({
   }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
     onClick: handleSaveFromDimension,
-    disabled: (() => {
-      if (!selectedExistingDimension) return true;
-      const dimensionData = existingDimensions.find(dim => dim.fullPath === selectedExistingDimension);
-      if (!dimensionData) return true;
-      const isDate = isDateDimension(dimensionData.dimension);
-      return isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0;
-    })(),
+    disabled: !selectedExistingDimension,
     sx: {
       height: "40px",
       fontFamily: "system-ui",
@@ -5697,6 +5745,8 @@ const Filters = ({
       loading: loadingFilterValues,
       helperText: selectedFilterValues.length > 0 ? `${selectedFilterValues.length} value(s) selected` : 'Select at least one value',
       debounceMs: 1000
+    }), /*#__PURE__*/React__default.createElement(CustomFilterValueInput, {
+      onAdd: handleAddCustomFilterValue
     })), /*#__PURE__*/React__default.createElement(Box$1, {
       sx: {
         display: 'flex',
@@ -5715,7 +5765,6 @@ const Filters = ({
       variant: "contained",
       size: "small",
       onClick: () => handleSaveEditedFilter(fullPath),
-      disabled: isDate ? !dateRangeFrom && !dateRangeTo : selectedFilterValues.length === 0,
       sx: {
         textTransform: 'none',
         borderRadius: '6px',
@@ -7007,20 +7056,12 @@ const ReportBuilder = ({
     if (report.filters && Object.keys(report.filters).length > 0) {
       Object.entries(report.filters).forEach(([fullPath, filterData]) => {
         if (filterData.values) {
-          // Check if values is an object (date range) or array (regular filter)
-          if (Array.isArray(filterData.values)) {
-            // Regular filter - only add if array has values
-            if (filterData.values.length > 0) {
-              conditions.push({
-                [fullPath]: filterData.values
-              });
-            }
-          } else if (typeof filterData.values === "object") {
-            // Date range filter - add the object as-is
-            conditions.push({
-              [fullPath]: filterData.values
-            });
-          }
+          // Include the condition as-is regardless of whether the array/object
+          // has any entries - an explicitly saved (but empty) filter should
+          // still appear in the query.
+          conditions.push({
+            [fullPath]: filterData.values
+          });
         }
       });
     }
@@ -7084,14 +7125,24 @@ const ReportBuilder = ({
       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
+    // Persist the full resolved column order - the explicit Column Order tab
+    // arrangement when defined, otherwise dimensions/computed (in their own
+    // order) followed by metrics (in their own order), same as what the
+    // results grid renders. Always emitted (not just when a custom order
+    // exists) so the API/results grid get an explicit order even for
+    // untouched reports, rather than having to fall back to guessing it.
+    const orderedDimensionItems = report.dimensionOrder.map(entry => entry.type === "dimension" ? {
+      kind: "dimension",
+      data: dimensionById[entry.key]
+    } : {
+      kind: "computed",
+      data: computedByName[entry.key]
+    }).filter(item => item.data);
+    const resolvedColumnItems = resolveColumnOrder(report.columnOrder, orderedDimensionItems, report.metrics);
+    if (resolvedColumnItems.length > 0) {
+      queryObj.ordered_columns = resolvedColumnItems.map(item => ({
+        type: item.kind,
+        ref: item.key
       }));
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bygd/nc-report-ui",
-	"version": "0.1.43",
+	"version": "0.1.45",
 	"files": [
 		"dist/*",
 		"fnet/input.yaml",