@visns-studio/visns-components 5.15.35 → 5.16.1

package/package.json

@@ -12,11 +12,11 @@
         "@nivo/core": "^0.87.0",
         "@nivo/line": "^0.87.0",
         "@nivo/pie": "^0.87.0",
-        "@react-pdf/renderer": "^4.3.2",
-        "@tanstack/react-query": "^5.95.2",
+        "@react-pdf/renderer": "^4.5.1",
+        "@tanstack/react-query": "^5.99.2",
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.3.0",
-        "@uiw/react-color": "^2.9.6",
+        "@uiw/react-color": "^2.10.1",
         "@visns-studio/visns-datagrid-community": "1.1.0",
         "@visns-studio/visns-datagrid-enterprise": "1.1.0",
         "@vitejs/plugin-react": "^4.7.0",
@@ -30,10 +30,10 @@
         "framer-motion": "^12.38.0",
         "html-react-parser": "^5.2.17",
         "html2canvas": "^1.4.1",
-        "lodash": "^4.17.23",
+        "lodash": "^4.18.1",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.544.0",
-        "mapbox-gl": "^3.20.0",
+        "mapbox-gl": "^3.22.0",
         "moment": "^2.30.1",
         "motion": "^12.38.0",
         "numeral": "^2.0.6",
@@ -57,9 +57,9 @@
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
         "react-to-print": "^3.3.0",
-        "react-toastify": "^11.0.5",
+        "react-toastify": "^11.1.0",
         "react-toggle": "^4.1.3",
-        "react-tooltip": "^5.30.0",
+        "react-tooltip": "^5.30.1",
         "react-window": "^1.8.11",
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
@@ -68,11 +68,11 @@
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
-        "validator": "^13.15.26",
-        "vite": "^6.4.1",
+        "validator": "^13.15.35",
+        "vite": "^6.4.2",
         "xlsx": "^0.18.5",
         "yarn": "^1.22.22",
-        "yet-another-react-lightbox": "^3.29.2"
+        "yet-another-react-lightbox": "^3.31.0"
     },
     "devDependencies": {
         "@babel/core": "^7.29.0",
@@ -83,10 +83,10 @@
         "copy-webpack-plugin": "^13.0.1",
         "css-loader": "^7.1.4",
         "css-minimizer-webpack-plugin": "^7.0.4",
-        "mini-css-extract-plugin": "^2.10.1",
+        "mini-css-extract-plugin": "^2.10.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.98.0",
+        "sass": "^1.99.0",
         "sass-loader": "^16.0.7"
     },
     "peerDependencies": {
@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.35",
+    "version": "5.16.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -472,16 +472,19 @@ const DataGrid = forwardRef(
                         setColumnsMetadata(res.metadata);
                     }
 
-                    // Sort data by grouping field if grouping is enabled
+                    // Group rows together while preserving the backend's sortBy order:
+                    // first appearance of each group key determines group order, so when
+                    // the backend sorts by e.g. pickling_completed_at desc, groups appear
+                    // in the order their most-recent member finished.
                     if (ajaxSetting?.groupBy?.length > 0) {
                         const groupField = ajaxSetting.groupBy[0]; // groupBy is array of strings
-                        res.data.sort((a, b) => {
-                            const aValue = a[groupField] || '';
-                            const bValue = b[groupField] || '';
-                            return aValue
-                                .toString()
-                                .localeCompare(bValue.toString());
-                        });
+                        const buckets = new Map();
+                        for (const row of res.data) {
+                            const key = (row[groupField] ?? '').toString();
+                            if (!buckets.has(key)) buckets.set(key, []);
+                            buckets.get(key).push(row);
+                        }
+                        res.data = Array.from(buckets.values()).flat();
 
                         // Initialize all groups as collapsed when data is first loaded
                         if (
@@ -3933,6 +3936,89 @@ const DataGrid = forwardRef(
                                                                   />
                                                               )}
                                                           </strong>
+                                                          {/* Display fields surfaced from the group's rows. Assumes value is consistent
+                                                              across the group (e.g. set via groupUpdate). Skips empty values. */}
+                                                          {(() => {
+                                                              const displayFields =
+                                                                  ajaxSetting
+                                                                      ?.groupBySetting
+                                                                      ?.displayFields ||
+                                                                  [];
+                                                              if (
+                                                                  !displayFields.length ||
+                                                                  !ajaxSetting?.groupBy
+                                                              )
+                                                                  return null;
+                                                              const groupField =
+                                                                  ajaxSetting
+                                                                      .groupBy[0];
+                                                              const groupRow =
+                                                                  dataRef.current?.find(
+                                                                      (row) =>
+                                                                          row[
+                                                                              groupField
+                                                                          ] ===
+                                                                          groupValue
+                                                                  );
+                                                              if (!groupRow)
+                                                                  return null;
+                                                              return displayFields.map(
+                                                                  (fieldId) => {
+                                                                      const value =
+                                                                          groupRow[
+                                                                              fieldId
+                                                                          ];
+                                                                      if (
+                                                                          value ===
+                                                                              null ||
+                                                                          value ===
+                                                                              undefined ||
+                                                                          value ===
+                                                                              ''
+                                                                      )
+                                                                          return null;
+                                                                      const colDef =
+                                                                          columns?.find(
+                                                                              (
+                                                                                  c
+                                                                              ) =>
+                                                                                  c.id ===
+                                                                                  fieldId
+                                                                          );
+                                                                      const label =
+                                                                          colDef?.label ||
+                                                                          fieldId;
+                                                                      return (
+                                                                          <span
+                                                                              key={`group-display-${fieldId}`}
+                                                                              className={
+                                                                                  styles.groupHeaderDisplayField
+                                                                              }
+                                                                          >
+                                                                              <span
+                                                                                  className={
+                                                                                      styles.groupHeaderDisplayFieldLabel
+                                                                                  }
+                                                                              >
+                                                                                  {
+                                                                                      label
+                                                                                  }
+                                                                                  :
+                                                                              </span>{' '}
+                                                                              <span
+                                                                                  className={
+                                                                                      styles.groupHeaderDisplayFieldValue
+                                                                                  }
+                                                                              >
+                                                                                  {
+                                                                                      value
+                                                                                  }
+                                                                              </span>
+                                                                          </span>
+                                                                      );
+                                                                  }
+                                                              );
+                                                          })()}
                                                           {/* Click indicator */}
                                                           <span
                                                               className={

package/src/components/generic/ConditionalDisplayEditor.jsx

@@ -0,0 +1,448 @@
+import React, { useMemo } from 'react';
+import { X as CircleX } from 'lucide-react';
+import Select, { components } from 'react-select';
+import styles from '../styles/GenericFormBuilder.module.scss';
+
+// Field types that cannot produce a value we can compare against — disabled in the picker.
+const NON_VALUE_TYPES = new Set([
+    'plaintext',
+    'plaintextheading',
+    'signature',
+    'canvas',
+    'file',
+    'image',
+    'videoUpload',
+    'table_text',
+]);
+
+// Field types whose `options` array should populate the Value dropdown.
+const OPTION_VALUE_TYPES = new Set([
+    'checkbox',
+    'dropdown',
+    'radio',
+    'toggle',
+    'table_radio',
+]);
+
+// Stored as a literal string so the existing PDF blade (pdf/form.blade.php:132) keeps working.
+const FILLED_IN_SENTINEL = 'not null';
+
+const operatorOf = (conditionalValue) =>
+    conditionalValue === FILLED_IN_SENTINEL ? 'is filled in' : 'is';
+
+// Group fields by their preceding `type: 'section'` header. Fields that can't be
+// used in a condition (non-value types, or fields that appear after the current
+// one so their value isn't yet known) are omitted from the list entirely.
+const buildGroupedOptions = (allFields, currentField, typeLabelFor) => {
+    const currentIndex = allFields.findIndex(
+        (f) => f.id === currentField.id
+    );
+    // Brand-new field not yet in the array → treat as "at the end" so every
+    // existing field qualifies as an earlier reference.
+    const currentPos = currentIndex === -1 ? allFields.length : currentIndex;
+
+    const groups = [];
+    let group = { label: 'General', options: [] };
+    groups.push(group);
+
+    allFields.forEach((f, idx) => {
+        if (!f || !f.id) return;
+        if (f.type === 'section') {
+            group = { label: f.label || 'Section', options: [] };
+            groups.push(group);
+            return;
+        }
+        if (f.id === currentField.id) return;
+        if (NON_VALUE_TYPES.has(f.type)) return;
+        if (idx >= currentPos) return;
+
+        group.options.push({
+            value: f.id,
+            label: f.label || '(untitled)',
+            type: f.type,
+            typeLabel: typeLabelFor(f.type),
+            sectionLabel: group.label,
+            hasOptions: OPTION_VALUE_TYPES.has(f.type),
+        });
+    });
+
+    // Within each group, surface option-bearing fields first; preserve document
+    // order inside each bucket via a stable sort index.
+    groups.forEach((g) => {
+        g.options = g.options
+            .map((o, i) => ({ ...o, __i: i }))
+            .sort((a, b) => {
+                if (a.hasOptions !== b.hasOptions)
+                    return a.hasOptions ? -1 : 1;
+                return a.__i - b.__i;
+            })
+            .map(({ __i, ...rest }) => rest);
+    });
+
+    return groups.filter((g) => g.options.length > 0);
+};
+
+// Custom Option renderer — shows the field label alongside a small type pill
+// so duplicate labels stay distinguishable.
+const FieldOption = (props) => {
+    const { data } = props;
+    return (
+        <components.Option {...props}>
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 8,
+                }}
+            >
+                <span
+                    style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    {data.label}
+                </span>
+                <span
+                    style={{
+                        fontSize: '0.72rem',
+                        color: '#666',
+                        background: 'rgba(0,0,0,0.06)',
+                        borderRadius: 4,
+                        padding: '1px 6px',
+                        flexShrink: 0,
+                    }}
+                >
+                    {data.typeLabel}
+                </span>
+            </div>
+        </components.Option>
+    );
+};
+
+// Collapsed (selected) display carries the section breadcrumb so duplicate labels
+// (e.g. many "Notes" fields) remain distinguishable after selection.
+const FieldSingleValue = (props) => {
+    const { data } = props;
+    return (
+        <components.SingleValue {...props}>
+            {data.sectionLabel && data.sectionLabel !== 'General' ? (
+                <span style={{ color: '#888' }}>
+                    {data.sectionLabel} ›{' '}
+                </span>
+            ) : null}
+            {data.label}
+            {data.typeLabel ? (
+                <span style={{ color: '#888' }}> — {data.typeLabel}</span>
+            ) : null}
+        </components.SingleValue>
+    );
+};
+
+function ConditionalDisplayEditor({
+    currentField,
+    allFields = [],
+    fieldTypes = [],
+    onChange,
+}) {
+    const conditionalFieldId = currentField.conditional_field || '';
+    const conditionalValue = currentField.conditional_value || '';
+    const operator = operatorOf(conditionalValue);
+
+    const selectedField = allFields.find((f) => f.id === conditionalFieldId);
+    const referenceMissing = conditionalFieldId && !selectedField;
+
+    const typeLabelFor = (type) =>
+        fieldTypes.find((t) => t.value === type)?.label || type;
+
+    const groupedOptions = useMemo(
+        () => buildGroupedOptions(allFields, currentField, typeLabelFor),
+        // typeLabelFor is pure over fieldTypes; depend on its source array.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [allFields, currentField.id, fieldTypes]
+    );
+
+    const selectedOption = useMemo(() => {
+        if (!conditionalFieldId) return null;
+        for (const g of groupedOptions) {
+            const match = g.options.find((o) => o.value === conditionalFieldId);
+            if (match) return match;
+        }
+        return null;
+    }, [groupedOptions, conditionalFieldId]);
+
+    const targetHasOptions =
+        selectedField && OPTION_VALUE_TYPES.has(selectedField.type);
+    const targetOptions = targetHasOptions ? selectedField.options || [] : [];
+    const selectedValueOption = targetOptions.find(
+        (o) => o.id === conditionalValue
+    );
+
+    const emitChange = (patch) => {
+        if (onChange) onChange(patch);
+    };
+
+    const handleFieldChange = (option) => {
+        emitChange({
+            conditional_field: option ? option.value : '',
+            conditional_value: '',
+        });
+    };
+
+    const handleOperatorChange = (e) => {
+        const nextOperator = e.target.value;
+        if (nextOperator === 'is filled in') {
+            emitChange({ conditional_value: FILLED_IN_SENTINEL });
+        } else if (conditionalValue === FILLED_IN_SENTINEL) {
+            emitChange({ conditional_value: '' });
+        }
+    };
+
+    const handleValueChange = (e) => {
+        emitChange({ conditional_value: e.target.value });
+    };
+
+    const handleClear = (e) => {
+        e.preventDefault();
+        emitChange({ conditional_field: '', conditional_value: '' });
+    };
+
+    const renderValueControl = () => {
+        if (operator === 'is filled in') return null;
+        if (!selectedField) return null;
+
+        if (targetHasOptions) {
+            return (
+                <select
+                    name="conditional_value"
+                    value={conditionalValue}
+                    onChange={handleValueChange}
+                >
+                    <option value="">Please select a value</option>
+                    {targetOptions.map((opt, i) => (
+                        <option
+                            value={opt.id}
+                            key={`cond-value-${opt.id}-${i}`}
+                        >
+                            {opt.label}
+                        </option>
+                    ))}
+                </select>
+            );
+        }
+
+        const inputType = selectedField.type === 'number' ? 'number' : 'text';
+        return (
+            <input
+                name="conditional_value"
+                value={conditionalValue}
+                type={inputType}
+                onChange={handleValueChange}
+            />
+        );
+    };
+
+    const fieldBreadcrumb = selectedOption
+        ? `${
+              selectedOption.sectionLabel &&
+              selectedOption.sectionLabel !== 'General'
+                  ? `${selectedOption.sectionLabel} › `
+                  : ''
+          }${selectedOption.label}`
+        : selectedField
+        ? selectedField.label
+        : '…';
+
+    const renderPreview = () => {
+        if (!conditionalFieldId && !conditionalValue) {
+            return (
+                <span>
+                    No condition set — this field will always be shown.
+                </span>
+            );
+        }
+
+        if (referenceMissing) return null;
+
+        if (operator === 'is filled in') {
+            return (
+                <span>
+                    This field will only show when{' '}
+                    <strong>{fieldBreadcrumb}</strong> is filled in.
+                </span>
+            );
+        }
+
+        if (!conditionalValue) {
+            return (
+                <span>
+                    Pick a value for <strong>{fieldBreadcrumb}</strong> to
+                    finish the rule.
+                </span>
+            );
+        }
+
+        const valueLabel = targetHasOptions
+            ? selectedValueOption?.label || conditionalValue
+            : conditionalValue;
+
+        return (
+            <span>
+                This field will only show when{' '}
+                <strong>{fieldBreadcrumb}</strong> is{' '}
+                <strong>{valueLabel}</strong>.
+            </span>
+        );
+    };
+
+    const hasAnyRule = !!(conditionalFieldId || conditionalValue);
+
+    const reactSelectStyles = {
+        menu: (provided) => ({ ...provided, zIndex: 99999 }),
+        menuPortal: (base) => ({ ...base, zIndex: 99999 }),
+        control: (base) => ({
+            ...base,
+            minHeight: 44,
+            borderRadius: 6,
+        }),
+        groupHeading: (base) => ({
+            ...base,
+            fontSize: '0.7rem',
+            textTransform: 'uppercase',
+            letterSpacing: '0.04em',
+            color: 'var(--primary-color)',
+            fontWeight: 700,
+            padding: '6px 12px',
+            background: 'rgba(var(--primary-rgb), 0.05)',
+        }),
+        option: (base, state) => ({
+            ...base,
+            cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+        }),
+    };
+
+    return (
+        <>
+            <div className={`${styles.formItem} ${styles.fwItem}`}>
+                <div className={styles.gridtxt__header}>
+                    <span>Conditional Field Display Criteria</span>
+                </div>
+            </div>
+
+            {referenceMissing ? (
+                <div
+                    className={`${styles.formItem} ${styles.fwItem}`}
+                    style={{
+                        background: '#fff8e1',
+                        border: '1px solid #f4c544',
+                        borderRadius: 6,
+                        padding: '8px 12px',
+                        color: '#7a5c00',
+                        fontSize: '0.85rem',
+                    }}
+                >
+                    The field this rule references no longer exists. Pick
+                    another field or clear the rule.
+                </div>
+            ) : null}
+
+            <div className={styles.formItem}>
+                <label className={styles.fi__label}>
+                    <Select
+                        inputId="conditional_field"
+                        classNamePrefix="visns-select"
+                        options={groupedOptions}
+                        value={selectedOption}
+                        onChange={handleFieldChange}
+                        isClearable
+                        isSearchable
+                        placeholder="Always show this field (type to search…)"
+                        menuPortalTarget={
+                            typeof document !== 'undefined'
+                                ? document.body
+                                : undefined
+                        }
+                        menuPlacement="auto"
+                        components={{
+                            Option: FieldOption,
+                            SingleValue: FieldSingleValue,
+                        }}
+                        styles={reactSelectStyles}
+                        noOptionsMessage={() => 'No matching fields'}
+                    />
+                    <span
+                        className={`${styles.fi__span} ${styles.prefocus}`}
+                    >
+                        Show only when
+                    </span>
+                </label>
+            </div>
+
+            <div className={styles.formItem}>
+                <label className={styles.fi__label}>
+                    <select
+                        name="conditional_operator"
+                        value={operator}
+                        onChange={handleOperatorChange}
+                        disabled={!conditionalFieldId}
+                    >
+                        <option value="is">is</option>
+                        <option value="is filled in">is filled in</option>
+                    </select>
+                    <span className={styles.fi__span}>Condition</span>
+                </label>
+            </div>
+
+            {(() => {
+                const valueControl = renderValueControl();
+                if (!valueControl) return null;
+                return (
+                    <div className={styles.formItem}>
+                        <label className={styles.fi__label}>
+                            {valueControl}
+                            <span className={styles.fi__span}>Value</span>
+                        </label>
+                    </div>
+                );
+            })()}
+
+            <div
+                className={`${styles.formItem} ${styles.fwItem}`}
+                style={{
+                    background: 'rgba(0,0,0,0.03)',
+                    borderRadius: 6,
+                    padding: '8px 12px',
+                    color: 'var(--paragraph-color)',
+                    fontSize: '0.85rem',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 8,
+                }}
+            >
+                <div>{renderPreview()}</div>
+                {hasAnyRule ? (
+                    <button
+                        type="button"
+                        onClick={handleClear}
+                        title="Clear rule"
+                        style={{
+                            background: 'transparent',
+                            border: 'none',
+                            cursor: 'pointer',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            color: '#666',
+                        }}
+                    >
+                        <CircleX size={16} />
+                    </button>
+                ) : null}
+            </div>
+        </>
+    );
+}
+
+export default ConditionalDisplayEditor;

package/src/components/generic/GenericFormBuilder.jsx

@@ -47,6 +47,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
 import SketchConfig from '../sketch/json/config.json';
+import ConditionalDisplayEditor from './ConditionalDisplayEditor';
 
 import styles from '../styles/GenericFormBuilder.module.scss'; // Import the CSS module
 
@@ -69,6 +70,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         size: 'half',
         required: 'no',
         textareaHeight: 'normal',
+        conditional_field: '',
+        conditional_value: '',
     });
     const [dataOption, setDataOption] = useState({
         id: '',
@@ -657,6 +660,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
             size: 'half',
             required: 'no',
             textareaHeight: 'normal',
+            conditional_field: '',
+            conditional_value: '',
         }));
         setModalType(() => ({
             type: 'create',
@@ -739,11 +744,32 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                             let newDetail = [...data.detail];
                             newDetail.splice(index, 1);
 
+                            let orphanCount = 0;
+                            newDetail = newDetail.map((item) => {
+                                if (item.conditional_field === id) {
+                                    orphanCount += 1;
+                                    return {
+                                        ...item,
+                                        conditional_field: '',
+                                        conditional_value: '',
+                                    };
+                                }
+                                return item;
+                            });
+
                             setData((items) => ({
                                 ...items,
                                 detail: newDetail,
                             }));
 
+                            if (orphanCount > 0) {
+                                toast.info(
+                                    `Cleared ${orphanCount} conditional rule${
+                                        orphanCount === 1 ? '' : 's'
+                                    } that referenced the deleted field.`
+                                );
+                            }
+
                             handleCloseModal();
                         }
                     },
@@ -2214,63 +2240,17 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                         </div>
                                     ) : null}
 
-                                    <div
-                                        className={`${styles.formItem} ${styles.fwItem}`}
-                                    >
-                                        <div className={styles.gridtxt__header}>
-                                            <span>
-                                                Conditional Field Display
-                                                Criteria
-                                            </span>
-                                        </div>
-                                    </div>
-
-                                    <div className={styles.formItem}>
-                                        <label className={styles.fi__label}>
-                                            <select
-                                                name="conditional_field"
-                                                value={
-                                                    dataField.conditional_field
-                                                }
-                                                onChange={handleChangeForm}
-                                            >
-                                                <option>
-                                                    Please Select an Option
-                                                </option>
-                                                {data.detail &&
-                                                    data.detail.length > 0 &&
-                                                    data.detail.map(
-                                                        (item, key) => (
-                                                            <option
-                                                                value={item.id}
-                                                                key={`conditional-field-${item.id}-${key}`}
-                                                            >
-                                                                {item.label}
-                                                            </option>
-                                                        )
-                                                    )}
-                                            </select>
-                                            <span className={styles.fi__span}>
-                                                Field
-                                            </span>
-                                        </label>
-                                    </div>
-
-                                    <div className={styles.formItem}>
-                                        <label className={styles.fi__label}>
-                                            <input
-                                                name="conditional_value"
-                                                value={
-                                                    dataField.conditional_value
-                                                }
-                                                type="text"
-                                                onChange={handleChangeForm}
-                                            />
-                                            <span className={styles.fi__span}>
-                                                Value
-                                            </span>
-                                        </label>
-                                    </div>
+                                    <ConditionalDisplayEditor
+                                        currentField={dataField}
+                                        allFields={data.detail || []}
+                                        fieldTypes={fieldTypes}
+                                        onChange={(patch) =>
+                                            setDataField((prev) => ({
+                                                ...prev,
+                                                ...patch,
+                                            }))
+                                        }
+                                    />
 
                                     <div
                                         className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}

package/src/components/styles/DataGrid.module.scss

@@ -1050,6 +1050,32 @@
     user-select: none;
 }
 
+.groupHeaderDisplayField {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 4px;
+    padding: 2px 8px;
+    margin-left: 4px;
+    background: rgba(59, 130, 246, 0.08);
+    border: 1px solid rgba(59, 130, 246, 0.18);
+    border-radius: 10px;
+    font-size: 0.72rem;
+    line-height: 1.2;
+    white-space: nowrap;
+}
+
+.groupHeaderDisplayFieldLabel {
+    color: #6b7280;
+    font-weight: 500;
+    text-transform: none;
+    letter-spacing: 0;
+}
+
+.groupHeaderDisplayFieldValue {
+    color: var(--secondary-color, #1f2937);
+    font-weight: 600;
+}
+
 .groupHeaderContainer {
     display: flex;
     align-items: center;