(function initValuationsModule(global) {
  const appUtils = global.PortfolioApp || {};
  const getValidationMessage = typeof appUtils.getValidationMessage === 'function'
    ? appUtils.getValidationMessage
    : ((message) => message || 'An error has occurred.');

  function readPortfolioSelectionApi() {
    return global.PortfolioSelection || {};
  }

  function usePortfoliosSafe() {
    const api = readPortfolioSelectionApi();
    if (typeof api.usePortfolios === 'function') {
      return api.usePortfolios();
    }

    return {
      portfolios: [],
      setPortfolios: () => {},
      isLoading: false
    };
  }

  function PortfolioSelectFieldSafe(props) {
    const api = readPortfolioSelectionApi();
    if (typeof api.PortfolioSelectField === 'function') {
      return api.PortfolioSelectField(props);
    }

    const items = Array.isArray(props.portfolios) ? props.portfolios : [];
    const currentValue = props.value == null ? '' : String(props.value);
    const allLabel = props.allLabel || 'All Portfolios';
    const allValue = props.allValue || 'All';
    const showLabel = props.showLabel !== false;

    return (
      <label className="field">
        {showLabel ? <span>{props.label || 'Portfolio Selection'}</span> : null}
        <select value={currentValue} onChange={(event) => props.onChange(event.target.value)}>
          {props.includeAll ? <option value={allValue}>{allLabel}</option> : null}
          {items.map((portfolio) => (
            <option key={portfolio.id} value={String(portfolio.id)}>{portfolio.name}</option>
          ))}
        </select>
      </label>
    );
  }

  function getAuthorizedJsonHeadersSafe() {
    const api = readPortfolioSelectionApi();
    if (typeof api.getAuthorizedJsonHeaders === 'function') {
      return api.getAuthorizedJsonHeaders();
    }

    let token = null;
    try {
      token = window.sessionStorage.getItem('portfolio-auth-token');
    } catch (error) {
      token = null;
    }

    return token
      ? { Accept: 'application/json', Authorization: `Bearer ${token}` }
      : { Accept: 'application/json' };
  }

  function handleUnauthorizedApiResponseSafe() {
    const api = readPortfolioSelectionApi();
    if (typeof api.handleUnauthorizedApiResponse === 'function') {
      api.handleUnauthorizedApiResponse();
      return;
    }

    window.location.assign('/auth/login');
  }

  const sharedComponents = global.PortfolioSharedComponents || {};
  const BlockingScreenLoader = sharedComponents.BlockingScreenLoader;
  const valuationsUploadModule = global.PortfolioValuationsUpload || {};
  const ValuationsUploadPanel = valuationsUploadModule.ValuationsUploadPanel;
  const valuationsAddModule = global.PortfolioValuationsAdd || {};
  const ValuationsAddPanel = valuationsAddModule.ValuationsAddPanel;

  const PERFORMANCE_RANGE_OPTIONS = [
    { label: 'YTD', value: 'YTD' },
    { label: '1Y', value: '1Y' },
    { label: '5Y', value: '5Y' },
    { label: '10Y', value: '10Y' },
    { label: 'All', value: 'All' }
  ];

  const PORTFOLIO_DATE_RANGE_STORAGE_KEY = 'portfolio-date-range';

  function readPersistedDateRange() {
    try {
      const storedRange = JSON.parse(window.sessionStorage.getItem(PORTFOLIO_DATE_RANGE_STORAGE_KEY) || 'null');
      const range = storedRange && typeof storedRange.range === 'string' ? storedRange.range : 'YTD';
      const startDate = typeof (storedRange && storedRange.startDate) === 'string' ? storedRange.startDate : null;
      const endDate = typeof (storedRange && storedRange.endDate) === 'string' ? storedRange.endDate : null;

      if (range === 'Custom' && startDate && endDate && startDate <= endDate) {
        return { range, startDate, endDate };
      }

      return PERFORMANCE_RANGE_OPTIONS.some((option) => option.value === range)
        ? { range, startDate: null, endDate: null }
        : { range: 'YTD', startDate: null, endDate: null };
    } catch (error) {
      return { range: 'YTD', startDate: null, endDate: null };
    }
  }

  function persistDateRange(dateRange) {
    try {
      window.sessionStorage.setItem(PORTFOLIO_DATE_RANGE_STORAGE_KEY, JSON.stringify(dateRange));
    } catch (error) {
      // Ignore storage failures.
    }
  }

  function formatCustomDateRangeLabel(startDate, endDate) {
    if (!startDate || !endDate) {
      return '...';
    }

    if (typeof appUtils.formatDate === 'function') {
      return `${appUtils.formatDate(startDate)} - ${appUtils.formatDate(endDate)}`;
    }

    return `${startDate} - ${endDate}`;
  }

  function DateRangeSelector({ value, onChange, ariaLabel, className }) {
    const selectedRange = value && typeof value === 'object' ? value : { range: 'All' };
    const [isCustomRangeOpen, setIsCustomRangeOpen] = React.useState(false);
    const [customStartDate, setCustomStartDate] = React.useState(selectedRange.startDate || '');
    const [customEndDate, setCustomEndDate] = React.useState(selectedRange.endDate || '');

    const selectPresetRange = (range) => {
      setIsCustomRangeOpen(false);
      if (typeof onChange === 'function') {
        onChange({ range, startDate: null, endDate: null });
      }
    };

    const updateCustomDateRange = (nextStartDate, nextEndDate) => {
      setCustomStartDate(nextStartDate);
      setCustomEndDate(nextEndDate);
      if (!nextStartDate || !nextEndDate || nextStartDate > nextEndDate) {
        return;
      }

      setIsCustomRangeOpen(false);
      if (typeof onChange === 'function') {
        onChange({ range: 'Custom', startDate: nextStartDate, endDate: nextEndDate });
      }
    };

    const customRangeLabel = selectedRange.range === 'Custom'
      ? formatCustomDateRangeLabel(selectedRange.startDate, selectedRange.endDate)
      : '...';

    return (
      <div className={`shared-segmented-control date-range-selector ${className || ''}`.trim()} role="group" aria-label={ariaLabel || 'Date range'}>
        {PERFORMANCE_RANGE_OPTIONS.slice(0, -1).map((option, index) => (
          <React.Fragment key={option.value}>
            {index > 0 ? <span className="shared-segmented-divider" aria-hidden="true" /> : null}
            <button
              type="button"
              className={`shared-segmented-option ${selectedRange.range === option.value ? 'active' : ''}`.trim()}
              aria-pressed={selectedRange.range === option.value}
              onClick={() => selectPresetRange(option.value)}
            >
              {option.label}
            </button>
          </React.Fragment>
        ))}
        <span className="shared-segmented-divider" aria-hidden="true" />
        <div className="date-range-selector-custom">
          <button
            type="button"
            className={`shared-segmented-option ${selectedRange.range === 'Custom' ? 'active' : ''}`.trim()}
            aria-label="Select custom date range"
            aria-expanded={isCustomRangeOpen}
            onClick={() => setIsCustomRangeOpen((isOpen) => !isOpen)}
          >
            {customRangeLabel}
          </button>
          {isCustomRangeOpen ? (
            <div className="date-range-selector-popover">
              <div className="date-range-selector-inputs">
                <input
                  type="date"
                  aria-label="Custom range start date"
                  value={customStartDate}
                  onChange={(event) => updateCustomDateRange(event.target.value, customEndDate)}
                />
                <span aria-hidden="true">&#8594;</span>
                <input
                  type="date"
                  aria-label="Custom range end date"
                  value={customEndDate}
                  onChange={(event) => updateCustomDateRange(customStartDate, event.target.value)}
                />
              </div>
            </div>
          ) : null}
        </div>
        <span className="shared-segmented-divider" aria-hidden="true" />
        <button
          type="button"
          className={`shared-segmented-option ${selectedRange.range === 'All' ? 'active' : ''}`.trim()}
          aria-pressed={selectedRange.range === 'All'}
          onClick={() => selectPresetRange('All')}
        >
          All
        </button>
      </div>
    );
  }

  function formatAmount(value) {
    if (typeof appUtils.formatAmount === 'function') {
      const formatted = appUtils.formatAmount(value);
      return formatted == null ? '0.00' : String(formatted);
    }

    const numeric = Number.parseFloat(value);
    if (!Number.isFinite(numeric)) {
      return '0.00';
    }

    return numeric.toFixed(2);
  }

  function formatAmountFourDecimals(value) {
    const numeric = Number.parseFloat(value);
    if (!Number.isFinite(numeric)) {
      return '0.0000';
    }

    return numeric.toFixed(4);
  }

  function formatQuantity(value) {
    const numeric = Number.parseFloat(value);
    if (!Number.isFinite(numeric)) {
      return '-';
    }

    return numeric.toLocaleString(undefined, {
      minimumFractionDigits: 0,
      maximumFractionDigits: 6
    });
  }

  function getValuationDeltaPresentation(currentValue, previousValue, label, formatFn) {
    if (!Number.isFinite(currentValue) || !Number.isFinite(previousValue)) {
      return {
        className: 'valuations-total-neutral',
        tooltip: `${label} change vs previous valuation: n/a`
      };
    }

    const delta = currentValue - previousValue;
    const normalizedDelta = Math.abs(delta) < 0.0000001 ? 0 : delta;

    if (normalizedDelta > 0) {
      return {
        className: 'valuations-total-positive',
        tooltip: `${label} change vs previous valuation: +${formatFn(normalizedDelta)}`
      };
    }

    if (normalizedDelta < 0) {
      return {
        className: 'valuations-total-negative',
        tooltip: `${label} change vs previous valuation: ${formatFn(normalizedDelta)}`
      };
    }

    return {
      className: 'valuations-total-neutral',
      tooltip: `${label} change vs previous valuation: ${formatFn(0)}`
    };
  }

  function formatDisplayDate(value) {
    if (typeof appUtils.formatDate === 'function') {
      return appUtils.formatDate(value);
    }
    return value == null || value === '' ? '-' : String(value);
  }

  function buildFxTooltip(fxName, fxRate, fxDate) {
    const parts = [];
    if (typeof fxName === 'string' && fxName.trim()) {
      parts.push(`FX Pair: ${fxName.trim()}`);
    }

    if (Number.isFinite(Number(fxRate))) {
      parts.push(`FX Rate: ${formatAmountFourDecimals(Number(fxRate))}`);
    }

    if (typeof fxDate === 'string' && fxDate.trim()) {
      parts.push(`FX Date: ${formatDisplayDate(fxDate.trim())}`);
    }

    return parts.length > 0 ? parts.join('\n') : null;
  }

  function getCurrencySymbol(currency) {
    if (sharedComponents && typeof sharedComponents.getCurrencySymbol === 'function') {
      return sharedComponents.getCurrencySymbol(currency);
    }
    return '';
  }

  function toComparableDateValue(dateValue) {
    if (typeof dateValue !== 'string') {
      return '';
    }

    return dateValue;
  }

  function getTodayIsoDate() {
    return new Date().toISOString().slice(0, 10);
  }

  function getLastFridayIsoDate(referenceIsoDate) {
    const seed = typeof referenceIsoDate === 'string' && referenceIsoDate
      ? referenceIsoDate
      : getTodayIsoDate();
    const date = new Date(`${seed}T00:00:00.000Z`);
    if (!Number.isFinite(date.getTime())) {
      return getTodayIsoDate();
    }

    // "Last Friday" means the previous Friday, not including today when today is Friday.
    date.setUTCDate(date.getUTCDate() - 1);
    while (date.getUTCDay() !== 5) {
      date.setUTCDate(date.getUTCDate() - 1);
    }

    return date.toISOString().slice(0, 10);
  }

  function getDefaultCalculationDateRange() {
    const endDate = getTodayIsoDate();
    const startDate = getLastFridayIsoDate(endDate);
    return { startDate, endDate };
  }

  function ValuationsModulePage({ route, navigate }) {
    const { portfolios, isLoading: isLoadingPortfolios } = usePortfoliosSafe();

    const [selectedPortfolio, setSelectedPortfolio] = React.useState('All');
    const [selectedDateRange, setSelectedDateRange] = React.useState(readPersistedDateRange);
    const [valuations, setValuations] = React.useState([]);
    const [isLoadingValuations, setIsLoadingValuations] = React.useState(false);
    const [valuationsStatus, setValuationsStatus] = React.useState(null);
    const [showValuationPortfolioColumns, setShowValuationPortfolioColumns] = React.useState(false);
    const [showValuationCashflowColumn, setShowValuationCashflowColumn] = React.useState(false);
    const [showValuationBenchmarkDetails, setShowValuationBenchmarkDetails] = React.useState(false);

    const [expandedValuationDate, setExpandedValuationDate] = React.useState(null);
    const [valuationPositionsByDate, setValuationPositionsByDate] = React.useState({});
    const [valuationPositionTotalsByDate, setValuationPositionTotalsByDate] = React.useState({});
    const [valuationPositionsStatusByDate, setValuationPositionsStatusByDate] = React.useState({});
    const [loadingValuationPositionsDate, setLoadingValuationPositionsDate] = React.useState(null);
    const [isCalculationPopupOpen, setIsCalculationPopupOpen] = React.useState(false);
    const [calculationStartDate, setCalculationStartDate] = React.useState('');
    const [calculationEndDate, setCalculationEndDate] = React.useState('');
    const [isCalculatingValuations, setIsCalculatingValuations] = React.useState(false);
    const [isUploadingValuations, setIsUploadingValuations] = React.useState(false);
    const [calculationStatus, setCalculationStatus] = React.useState(null);
    const [calculationResult, setCalculationResult] = React.useState(null);

    const isValuationsView = route && route.view === 'valuations';
    const isValuationsUploadView = route && route.view === 'valuations-upload';
    const isValuationsAddView = route && route.view === 'valuations-add';

    const portfolioSelectionApi = readPortfolioSelectionApi();
    const primaryCurrency = portfolioSelectionApi && typeof portfolioSelectionApi.getPrimaryCurrencyForSelection === 'function'
      ? portfolioSelectionApi.getPrimaryCurrencyForSelection(selectedPortfolio)
      : null;
    const primaryBenchmarkCurrency = portfolioSelectionApi && typeof portfolioSelectionApi.getPrimaryBenchmarkCurrencyForSelection === 'function'
      ? portfolioSelectionApi.getPrimaryBenchmarkCurrencyForSelection(selectedPortfolio)
      : null;

    React.useEffect(() => {
      persistDateRange(selectedDateRange);
    }, [selectedDateRange]);

    const visiblePortfolioColumns = React.useMemo(() => {
      if (selectedPortfolio === 'All') {
        return Array.isArray(portfolios) ? portfolios : [];
      }

      return (Array.isArray(portfolios) ? portfolios : [])
        .filter((portfolio) => String(portfolio && portfolio.id) === String(selectedPortfolio));
    }, [portfolios, selectedPortfolio]);

    const canToggleValuationPortfolioColumns = React.useMemo(() => {
      return Array.isArray(portfolios) && portfolios.length > 1;
    }, [portfolios]);

    const displayedPortfolioColumns = React.useMemo(() => {
      return showValuationPortfolioColumns ? visiblePortfolioColumns : [];
    }, [showValuationPortfolioColumns, visiblePortfolioColumns]);

    const valuationTotalLabel = React.useMemo(() => {
      const hasSingleSelection = selectedPortfolio && String(selectedPortfolio).toLowerCase() !== 'all';
      const hasOnePortfolio = Array.isArray(portfolios) && portfolios.length === 1;
      return (hasSingleSelection || hasOnePortfolio) ? 'Portfolio' : 'Portfolios';
    }, [selectedPortfolio, portfolios]);

    const portfolioById = React.useMemo(() => {
      const map = new Map();
      (Array.isArray(portfolios) ? portfolios : []).forEach((portfolio) => {
        const id = Number.parseInt(portfolio && portfolio.id, 10);
        if (!Number.isFinite(id)) {
          return;
        }

        map.set(id, portfolio);
      });

      return map;
    }, [portfolios]);

    const sortedValuations = React.useMemo(() => {
      return (Array.isArray(valuations) ? valuations.slice() : [])
        .sort((left, right) => toComparableDateValue(left && left.date).localeCompare(toComparableDateValue(right && right.date)));
    }, [valuations]);

    const valuationsTableColSpan = displayedPortfolioColumns.length + 5 + (showValuationCashflowColumn ? 1 : 0) + (showValuationBenchmarkDetails ? 2 : 0);

    const resolveValuationIdsForRow = React.useCallback((valuation) => {
      const ids = Object.values(valuation && valuation.valuationIds && typeof valuation.valuationIds === 'object' ? valuation.valuationIds : {})
        .map((value) => Number.parseInt(value, 10))
        .filter((value) => Number.isFinite(value));

      return Array.from(new Set(ids));
    }, []);

    const isValuationRowExpandable = React.useCallback((valuation) => {
      return valuation && valuation.positions === true && resolveValuationIdsForRow(valuation).length > 0;
    }, [resolveValuationIdsForRow]);

    React.useEffect(() => {
      setShowValuationPortfolioColumns(false);
      setShowValuationCashflowColumn(false);
      setShowValuationBenchmarkDetails(false);
      setExpandedValuationDate(null);
      setValuationPositionsByDate({});
      setValuationPositionTotalsByDate({});
      setValuationPositionsStatusByDate({});
      setLoadingValuationPositionsDate(null);
    }, [selectedPortfolio]);

    React.useEffect(() => {
      if (!isValuationsView) {
        return;
      }

      let active = true;

      async function loadValuations() {
        const query = new URLSearchParams();
        query.set('portfolioId', selectedPortfolio || 'All');
        query.set('range', selectedDateRange.range || 'YTD');
        if (selectedDateRange.range === 'Custom') {
          query.set('startDate', selectedDateRange.startDate);
          query.set('endDate', selectedDateRange.endDate);
        }

        setIsLoadingValuations(true);
        setValuationsStatus(null);

        try {
          const response = await fetch(`/api/valuations?${query.toString()}`, {
            method: 'GET',
            headers: getAuthorizedJsonHeadersSafe()
          });

          if (response.status === 401 || response.status === 403) {
            handleUnauthorizedApiResponseSafe();
            return;
          }

          if (response.status === 422) {
            const payload = await response.json().catch(() => ({}));
            if (active) {
              setValuations([]);
              setValuationsStatus({
                type: 'error',
                message: getValidationMessage('A Validation Issue occurred.', payload.code)
              });
            }
            return;
          }

          if (response.status === 500) {
            const payload = await response.json().catch(() => ({}));
            if (active) {
              setValuations([]);
              setValuationsStatus({
                type: 'error',
                message: getValidationMessage('A Technical Error occurred.', payload.code != null ? payload.code : 2102)
              });
            }
            return;
          }

          if (!response.ok) {
            throw new Error('Valuations request failed.');
          }

          const payload = await response.json().catch(() => ({}));
          const items = Array.isArray(payload && payload.valuations) ? payload.valuations : [];

          if (active) {
            setValuations(items);
          }
        } catch (error) {
          if (active) {
            setValuations([]);
            setValuationsStatus({
              type: 'error',
              message: getValidationMessage('A Technical Error occurred.', 2102)
            });
          }
        } finally {
          if (active) {
            setIsLoadingValuations(false);
          }
        }
      }

      loadValuations();

      return () => {
        active = false;
      };
    }, [isValuationsView, selectedPortfolio, selectedDateRange]);

    React.useEffect(() => {
      if (!expandedValuationDate) {
        return;
      }

      const hasRow = sortedValuations.some((valuation) => String(valuation && valuation.date) === String(expandedValuationDate));
      if (!hasRow) {
        setExpandedValuationDate(null);
      }
    }, [sortedValuations, expandedValuationDate]);

    React.useEffect(() => {
      if (!expandedValuationDate) {
        return;
      }

      const expandedDate = String(expandedValuationDate);
      const expandedValuation = sortedValuations.find((item) => String(item && item.date) === expandedDate);
      if (!expandedValuation || !isValuationRowExpandable(expandedValuation)) {
        return;
      }

      if (Object.prototype.hasOwnProperty.call(valuationPositionsByDate, expandedDate)) {
        return;
      }

      let active = true;

      async function loadValuationPositions() {
        setLoadingValuationPositionsDate(expandedDate);
        setValuationPositionsStatusByDate((current) => ({
          ...current,
          [expandedDate]: null
        }));

        try {
          const valuationIds = resolveValuationIdsForRow(expandedValuation);
          const allRows = [];
          const totalsByPortfolioId = new Map();

          for (const valuationId of valuationIds) {
            const query = new URLSearchParams({ valuationId: String(valuationId) });
            const response = await fetch(`/api/valuation-positions?${query.toString()}`, {
              method: 'GET',
              headers: getAuthorizedJsonHeadersSafe()
            });

            if (response.status === 401 || response.status === 403) {
              handleUnauthorizedApiResponseSafe();
              return;
            }

            if (response.status === 500 || response.status === 422) {
              const payload = await response.json().catch(() => ({}));
              throw new Error(getValidationMessage('A Technical Error occurred.', payload.code != null ? payload.code : 4103));
            }

            if (!response.ok) {
              throw new Error('Valuation positions request failed.');
            }

            const payload = await response.json().catch(() => ({}));
            const rows = Array.isArray(payload && payload.positions) ? payload.positions : [];
            const portfolioTotals = Array.isArray(payload && payload.portfolioTotals) ? payload.portfolioTotals : [];
            rows.forEach((row) => allRows.push(row));

            portfolioTotals.forEach((totalRow) => {
              const portfolioId = Number.parseInt(totalRow && totalRow.portfolioId, 10);
              if (!Number.isFinite(portfolioId)) {
                return;
              }

              const enteredTotal = Number.parseFloat(totalRow && totalRow.EnteredTotalValueConverted);
              const calculatedTotal = Number.parseFloat(totalRow && totalRow.CalculatedTotalValueConverted);
              if (!totalsByPortfolioId.has(portfolioId)) {
                totalsByPortfolioId.set(portfolioId, {
                  EnteredTotalValueConverted: 0,
                  CalculatedTotalValueConverted: 0
                });
              }

              const totals = totalsByPortfolioId.get(portfolioId);
              if (Number.isFinite(enteredTotal)) {
                totals.EnteredTotalValueConverted += enteredTotal;
              }
              if (Number.isFinite(calculatedTotal)) {
                totals.CalculatedTotalValueConverted += calculatedTotal;
              }
            });
          }

          if (active) {
            setValuationPositionsByDate((current) => ({
              ...current,
              [expandedDate]: allRows
            }));
            setValuationPositionTotalsByDate((current) => ({
              ...current,
              [expandedDate]: Object.fromEntries(totalsByPortfolioId)
            }));
          }
        } catch (error) {
          if (active) {
            setValuationPositionsByDate((current) => ({
              ...current,
              [expandedDate]: []
            }));
            setValuationPositionTotalsByDate((current) => ({
              ...current,
              [expandedDate]: {}
            }));
            setValuationPositionsStatusByDate((current) => ({
              ...current,
              [expandedDate]: {
                type: 'error',
                message: error && error.message ? error.message : getValidationMessage('A Technical Error occurred.', 4103)
              }
            }));
          }
        } finally {
          if (active) {
            setLoadingValuationPositionsDate((current) => (current === expandedDate ? null : current));
          }
        }
      }

      loadValuationPositions();

      return () => {
        active = false;
      };
    }, [
      expandedValuationDate,
      sortedValuations,
      valuationPositionsByDate,
      resolveValuationIdsForRow,
      isValuationRowExpandable
    ]);

    const handleDateRangeChange = (nextDateRange) => {
      const resolvedDateRange = nextDateRange && typeof nextDateRange === 'object'
        ? nextDateRange
        : { range: 'All', startDate: null, endDate: null };
      setSelectedDateRange(resolvedDateRange);
    };

    const openCalculationPopup = () => {
      const defaults = getDefaultCalculationDateRange();
      setCalculationStartDate(defaults.startDate);
      setCalculationEndDate(defaults.endDate);
      setCalculationStatus(null);
      setCalculationResult(null);
      setIsCalculationPopupOpen(true);
    };

    const closeCalculationPopup = () => {
      if (isCalculatingValuations) {
        return;
      }

      setIsCalculationPopupOpen(false);
    };

    const runCalculateValuations = async () => {
      const startDate = String(calculationStartDate || '').trim();
      const endDate = String(calculationEndDate || '').trim();

      if (!startDate || !endDate || startDate > endDate) {
        setCalculationStatus({
          type: 'error',
          message: getValidationMessage('A Validation Issue occurred.', 1005)
        });
        setCalculationResult(null);
        return;
      }

      const selectedPortfolioIds = selectedPortfolio === 'All'
        ? (Array.isArray(portfolios) ? portfolios : [])
          .map((portfolio) => Number.parseInt(portfolio && portfolio.id, 10))
          .filter((value) => Number.isFinite(value))
        : [Number.parseInt(selectedPortfolio, 10)].filter((value) => Number.isFinite(value));

      if (selectedPortfolioIds.length === 0) {
        setCalculationStatus({
          type: 'error',
          message: getValidationMessage('A Validation Issue occurred.', 4004)
        });
        setCalculationResult(null);
        return;
      }

      setIsCalculatingValuations(true);
      setCalculationStatus(null);
      setCalculationResult(null);

      try {
        const response = await fetch('/api/valuations/calculation', {
          method: 'POST',
          headers: Object.assign({ 'Content-Type': 'application/json' }, getAuthorizedJsonHeadersSafe()),
          body: JSON.stringify({
            portfolioIds: selectedPortfolioIds,
            startDate,
            endDate
          })
        });

        if (response.status === 401 || response.status === 403) {
          handleUnauthorizedApiResponseSafe();
          return;
        }

        if (response.status === 422) {
          const payload = await response.json().catch(() => ({}));
          setCalculationStatus({
            type: 'error',
            message: getValidationMessage('A Validation Issue occurred.', payload.code)
          });
          return;
        }

        if (response.status === 500) {
          const payload = await response.json().catch(() => ({}));
          setCalculationStatus({
            type: 'error',
            message: getValidationMessage('A Technical Error occurred.', payload.code != null ? payload.code : 2102)
          });
          return;
        }

        if (!response.ok) {
          throw new Error('Calculate valuations request failed.');
        }

        const payload = await response.json().catch(() => ({}));
        setCalculationResult(payload);
        setCalculationStatus({
          type: 'success',
          message: 'Valuation calculation completed.'
        });
      } catch (error) {
        setCalculationStatus({
          type: 'error',
          message: getValidationMessage('A Technical Error occurred.', 2102)
        });
      } finally {
        setIsCalculatingValuations(false);
      }
    };

    if (isValuationsUploadView) {
      return typeof ValuationsUploadPanel === 'function' ? (
        <React.Fragment>
          {typeof BlockingScreenLoader === 'function' ? (
            <BlockingScreenLoader
              isActive={isUploadingValuations}
              title="Uploading valuations"
              message="Please wait while valuations are uploaded."
            />
          ) : null}
          <div className="content auth-shell" style={{ marginTop: '0.5rem' }}>
            <ValuationsUploadPanel
              portfolios={portfolios}
              navigate={navigate}
              formatDisplayDate={formatDisplayDate}
              formatAmount={formatAmount}
              getAuthorizedJsonHeaders={getAuthorizedJsonHeadersSafe}
              onUnauthorized={handleUnauthorizedApiResponseSafe}
              getValidationMessage={getValidationMessage}
              onUploadingChange={setIsUploadingValuations}
            />
          </div>
        </React.Fragment>
      ) : (
        <div className="content auth-shell" style={{ marginTop: '0.5rem' }}>
          <section className="panel-card valuations-panel-card upload-panel">
            <div className="valuations-header-row">
              <h3 style={{ marginTop: 0, marginBottom: 0 }}>Upload Valuations</h3>
              <button type="button" className="secondary-btn" onClick={() => navigate('/valuations')}>Back to Valuations</button>
            </div>
            <p className="muted" style={{ marginBottom: 0 }}>Loading valuations upload module...</p>
          </section>
        </div>
      );
    }

    if (isValuationsAddView) {
      return typeof ValuationsAddPanel === 'function' ? (
        <div className="content auth-shell" style={{ marginTop: '0.5rem' }}>
          <ValuationsAddPanel
            portfolios={portfolios}
            navigate={navigate}
            getAuthorizedJsonHeaders={getAuthorizedJsonHeadersSafe}
            onUnauthorized={handleUnauthorizedApiResponseSafe}
          />
        </div>
      ) : (
        <div className="content auth-shell" style={{ marginTop: '0.5rem' }}>
          <section className="panel-card valuations-panel-card">
            <div className="valuations-header-row">
              <h3 style={{ marginTop: 0, marginBottom: 0 }}>Add Valuation</h3>
              <button type="button" className="secondary-btn" onClick={() => navigate('/valuations')}>Back to Valuations</button>
            </div>
            <p className="muted" style={{ marginBottom: 0 }}>Loading Add Valuation module...</p>
          </section>
        </div>
      );
    }

    return (
      <div className="content auth-shell" style={{ marginTop: '0.5rem' }}>
        <section className="panel-card valuations-panel-card">
          <div className="valuations-header-row performance-header-row">
            <h1 className="hero-title" style={{ marginTop: 0, marginBottom: 0, fontSize: 'clamp(1.8rem, 2.4vw, 2.4rem)' }}>Valuations</h1>
            <DateRangeSelector
              className="valuations-range-segmented performance-range-segmented"
              ariaLabel="Valuations date range"
              value={selectedDateRange}
              onChange={handleDateRangeChange}
            />
            <div className="portfolios-actions-row valuations-actions-row">
              <button type="button" className="secondary-btn" onClick={() => navigate('/valuations/add')}>Add</button>
              <button type="button" className="secondary-btn" onClick={() => navigate('/valuations/upload')}>Upload</button>
              <div className="portfolios-header-selection valuations-header-selection valuations-header-selection-inline">
                <PortfolioSelectFieldSafe
                  portfolios={portfolios}
                  value={selectedPortfolio}
                  onChange={(value) => setSelectedPortfolio(value)}
                  includeAll
                  allLabel="All Portfolios"
                  allValue="All"
                  label="Portfolio Selection"
                  showLabel={false}
                />
              </div>
            </div>
          </div>

          {isLoadingPortfolios ? <p className="muted">Loading portfolios...</p> : null}

          {valuationsStatus ? (
            <div className={`status-message ${valuationsStatus.type}`} role="status">
              <span>{valuationsStatus.message}</span>
            </div>
          ) : null}

          <div className="valuations-grid-wrap">
            <table className="valuations-table">
              <thead>
                <tr>
                  <th className="valuations-date-column">Date</th>
                  {displayedPortfolioColumns.map((portfolio) => (
                    <th key={portfolio.id} className="valuations-cell-number valuations-summary-column">{portfolio.name}</th>
                  ))}
                  <th className="valuations-cell-number valuations-summary-column">
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.45rem' }}>
                      {canToggleValuationPortfolioColumns ? (
                        <button
                          type="button"
                          className="performance-absolute-iir-help-btn"
                          aria-label={showValuationPortfolioColumns ? 'Hide individual portfolio columns' : 'Show individual portfolio columns'}
                          title={showValuationPortfolioColumns ? 'Hide individual portfolio columns' : 'Show individual portfolio columns'}
                          onClick={() => {
                            setShowValuationPortfolioColumns((v) => {
                              const next = !v;
                              if (next) {
                                setShowValuationCashflowColumn(false);
                                setShowValuationBenchmarkDetails(false);
                              }
                              return next;
                            });
                          }}
                        >
                          <span className="valuations-expand-btn-glyph" aria-hidden="true">{showValuationPortfolioColumns ? '-' : '+'}</span>
                        </button>
                      ) : null}
                      <span>{valuationTotalLabel}</span>
                    </span>
                  </th>
                  {showValuationCashflowColumn ? (
                    <th className="valuations-cell-number valuations-summary-column">Cashflow</th>
                  ) : null}
                  <th className="valuations-cell-number valuations-summary-column">
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.45rem' }}>
                      <button
                        type="button"
                        className="performance-absolute-iir-help-btn"
                        aria-label={showValuationCashflowColumn ? 'Hide cashflow column' : 'Show cashflow column'}
                        title={showValuationCashflowColumn ? 'Hide cashflow column' : 'Show cashflow column'}
                        onClick={() => {
                          setShowValuationCashflowColumn((v) => {
                            const next = !v;
                            if (next) {
                              setShowValuationPortfolioColumns(false);
                              setShowValuationBenchmarkDetails(false);
                            }
                            return next;
                          });
                        }}
                      >
                        <span className="valuations-expand-btn-glyph" aria-hidden="true">{showValuationCashflowColumn ? '-' : '+'}</span>
                      </button>
                      <span>Invested</span>
                    </span>
                  </th>
                  {showValuationBenchmarkDetails ? (
                    <th className="valuations-cell-number valuations-summary-column" title="Benchmark FX">BM FX</th>
                  ) : null}
                  {showValuationBenchmarkDetails ? (
                    <th className="valuations-cell-number valuations-summary-column" title="Benchmark Price">BM Price</th>
                  ) : null}
                  <th className="valuations-cell-number valuations-summary-column" title="Benchmark Converted">
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.45rem' }}>
                      <button
                        type="button"
                        className="performance-absolute-iir-help-btn"
                        aria-label={showValuationBenchmarkDetails ? 'Hide benchmark detail columns' : 'Show benchmark detail columns'}
                        title={showValuationBenchmarkDetails ? 'Hide benchmark detail columns' : 'Show benchmark detail columns'}
                        onClick={() => {
                          setShowValuationBenchmarkDetails((v) => {
                            const next = !v;
                            if (next) {
                              setShowValuationPortfolioColumns(false);
                              setShowValuationCashflowColumn(false);
                            }
                            return next;
                          });
                        }}
                      >
                        <span className="valuations-expand-btn-glyph" aria-hidden="true">{showValuationBenchmarkDetails ? '-' : '+'}</span>
                      </button>
                      <span>Benchmark</span>
                    </span>
                  </th>
                  <th className="txn-expand-column"><span className="sr-only">Expand</span></th>
                </tr>
              </thead>
              <tbody>
                {isLoadingValuations ? (
                  <tr>
                    <td colSpan={valuationsTableColSpan} className="muted valuations-loading-cell">
                      <span className="inline-loading-indicator" role="status" aria-live="polite" aria-label="Loading Valuations. Please wait...">
                        <span className="screen-loading-spinner" aria-hidden="true" />
                        <span>Loading Valuations. Please wait...</span>
                      </span>
                    </td>
                  </tr>
                ) : sortedValuations.length === 0 ? (
                  <tr>
                    <td colSpan={valuationsTableColSpan} className="muted">No valuations found for the selected filters.</td>
                  </tr>
                ) : sortedValuations.map((valuation, index) => {
                  const total = Number.parseFloat(valuation && valuation.total);
                  const cashflow = Number.parseFloat(valuation && valuation.cashflow);
                  const invested = Number.parseFloat(valuation && valuation.invested);
                  const benchmarkFx = Number.parseFloat(valuation && valuation.benchmarkFx);
                  const benchmarkPrice = Number.parseFloat(valuation && valuation.benchmarkPrice);
                  const benchmarkValueConverted = Number.parseFloat(valuation && valuation.benchmarkValueConverted);
                  const previousValuation = index > 0 ? sortedValuations[index - 1] : null;
                  const previousTotal = Number.parseFloat(previousValuation && previousValuation.total);
                  const previousInvested = Number.parseFloat(previousValuation && previousValuation.invested);
                  const previousBenchmarkValueConverted = Number.parseFloat(previousValuation && previousValuation.benchmarkValueConverted);
                  const totalPresentation = getValuationDeltaPresentation(total, previousTotal, 'Total', formatAmount);
                  const investedPresentation = getValuationDeltaPresentation(invested, previousInvested, 'Invested', formatAmount);
                  const benchmarkPresentation = getValuationDeltaPresentation(benchmarkValueConverted, previousBenchmarkValueConverted, 'Benchmark', formatAmount);
                  const rowKey = String(valuation && valuation.date);
                  const isExpandable = isValuationRowExpandable(valuation);
                  const isExpanded = isExpandable && expandedValuationDate === rowKey;
                  const valuationPositions = Array.isArray(valuationPositionsByDate[rowKey]) ? valuationPositionsByDate[rowKey] : [];
                  const valuationPositionTotals = valuationPositionTotalsByDate[rowKey] && typeof valuationPositionTotalsByDate[rowKey] === 'object'
                    ? valuationPositionTotalsByDate[rowKey]
                    : {};
                  const valuationPositionsStatus = valuationPositionsStatusByDate[rowKey];
                  const isLoadingValuationPositions = loadingValuationPositionsDate === rowKey;

                  const toggleValuationRow = () => {
                    if (!isExpandable) {
                      return;
                    }

                    setExpandedValuationDate((current) => (current === rowKey ? null : rowKey));
                  };

                  return (
                    <React.Fragment key={rowKey}>
                      <tr
                        className={isExpandable ? 'txn-summary-row txn-summary-row-expandable' : 'txn-summary-row'}
                        onClick={isExpandable ? toggleValuationRow : undefined}
                        onKeyDown={isExpandable ? (event) => {
                          if (event.key === 'Enter' || event.key === ' ') {
                            event.preventDefault();
                            toggleValuationRow();
                          }
                        } : undefined}
                        tabIndex={isExpandable ? 0 : undefined}
                        aria-expanded={isExpandable ? isExpanded : undefined}
                      >
                        <td className="valuations-date-column">{formatDisplayDate(valuation.date)}</td>
                        {displayedPortfolioColumns.map((portfolio) => {
                          const rawValue = valuation && valuation.values ? valuation.values[String(portfolio.id)] : null;
                          const value = Number.parseFloat(rawValue);
                          const portfolioCurrency = portfolio && portfolio.baseCurrency ? String(portfolio.baseCurrency).toUpperCase() : null;
                          const portfolioSymbol = getCurrencySymbol(portfolioCurrency);
                          return <td key={`${valuation.date}-${portfolio.id}`} className="valuations-cell-number valuations-summary-column">{Number.isFinite(value) ? `${portfolioSymbol}${formatAmount(value)}` : '-'}</td>;
                        })}
                        <td title={totalPresentation.tooltip} className={`valuations-cell-number valuations-summary-column ${totalPresentation.className}`.trim()}>{Number.isFinite(total) ? `${getCurrencySymbol(primaryCurrency)}${formatAmount(total)}` : '-'}</td>
                        {showValuationCashflowColumn ? (
                          <td className={`valuations-cell-number valuations-summary-column ${Number.isFinite(cashflow) ? (cashflow < 0 ? 'valuations-total-negative' : (cashflow > 0 ? 'valuations-total-positive' : 'valuations-total-neutral')) : ''}`.trim()}>
                            {Number.isFinite(cashflow) ? (cashflow === 0 ? '' : `${getCurrencySymbol(primaryCurrency)}${formatAmount(cashflow)}`) : '-'}
                          </td>
                        ) : null}
                        <td title={investedPresentation.tooltip} className={`valuations-cell-number valuations-summary-column ${investedPresentation.className}`.trim()}>{Number.isFinite(invested) ? `${getCurrencySymbol(primaryCurrency)}${formatAmount(invested)}` : '-'}</td>
                        {showValuationBenchmarkDetails ? (
                          <td className="valuations-cell-number valuations-summary-column">{Number.isFinite(benchmarkFx) ? `${getCurrencySymbol(primaryBenchmarkCurrency)}${formatAmountFourDecimals(benchmarkFx)}` : '-'}</td>
                        ) : null}
                        {showValuationBenchmarkDetails ? (
                          <td className="valuations-cell-number valuations-summary-column">{Number.isFinite(benchmarkPrice) ? `${getCurrencySymbol(primaryBenchmarkCurrency)}${formatAmount(benchmarkPrice)}` : '-'}</td>
                        ) : null}
                        <td title={benchmarkPresentation.tooltip} className={`valuations-cell-number valuations-summary-column ${benchmarkPresentation.className}`.trim()}>{Number.isFinite(benchmarkValueConverted) ? `${getCurrencySymbol(primaryCurrency)}${formatAmount(benchmarkValueConverted)}` : '-'}</td>
                        <td className="txn-expand-column">
                          {isExpandable ? (
                            <span className="txn-expand-toggle" aria-hidden="true">
                              <span className={isExpanded ? 'txn-expand-arrow txn-expand-arrow-open' : 'txn-expand-arrow'} />
                            </span>
                          ) : (
                            <span className="txn-expand-placeholder" aria-hidden="true" />
                          )}
                        </td>
                      </tr>

                      {isExpanded ? (
                        <tr className="txn-expanded-row">
                          <td colSpan={valuationsTableColSpan}>
                            <div className="txn-expanded-panel valuation-positions-panel">
                              {isLoadingValuationPositions ? (
                                <p className="muted inline-loading-indicator" role="status" aria-live="polite" style={{ margin: 0 }}>
                                  <span className="screen-loading-spinner" aria-hidden="true" />
                                  <span>Loading valuation positions...</span>
                                </p>
                              ) : valuationPositionsStatus ? (
                                <div className={`status-message ${valuationPositionsStatus.type}`} role="status" style={{ marginTop: 0 }}>
                                  <span>{valuationPositionsStatus.message}</span>
                                </div>
                              ) : valuationPositions.length === 0 ? (
                                <p className="muted" style={{ margin: 0 }}>No valuation positions found for this date.</p>
                              ) : (
                                <div className="valuations-grid-wrap valuation-positions-grid-wrap">
                                  <table className="transactions-table valuation-positions-table">
                                    <thead>
                                      <tr>
                                        <th rowSpan="2">Portfolio</th>
                                        <th rowSpan="2" className="positions-cell-index">#</th>
                                        <th rowSpan="2" className="positions-cell-logo" aria-label="Logo" />
                                        <th rowSpan="2">Position</th>
                                        <th className="valuation-positions-group-title" colSpan="3">Entered</th>
                                        <th className="valuation-positions-group-title" colSpan="3">Calculated</th>
                                      </tr>
                                      <tr>
                                        <th className="txn-cell-amount">Shares</th>
                                        <th className="txn-cell-amount">Price</th>
                                        <th className="txn-cell-amount">Value</th>
                                        <th className="txn-cell-amount">Shares</th>
                                        <th className="txn-cell-amount">Price</th>
                                        <th className="txn-cell-amount">Value</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      {(() => {
                                        const grouped = new Map();
                                        valuationPositions.forEach((position) => {
                                          const portfolioId = Number.parseInt(position && position.portfolioId, 10);
                                          const key = Number.isFinite(portfolioId) ? String(portfolioId) : 'unknown';
                                          if (!grouped.has(key)) {
                                            grouped.set(key, {
                                              portfolioId,
                                              rows: []
                                            });
                                          }
                                          grouped.get(key).rows.push(position);
                                        });

                                        grouped.forEach((group) => {
                                          group.rows.sort((left, right) => {
                                            const leftIsin = left && left.ISIN != null ? String(left.ISIN).trim() : '';
                                            const rightIsin = right && right.ISIN != null ? String(right.ISIN).trim() : '';
                                            const leftIsCash = leftIsin === '';
                                            const rightIsCash = rightIsin === '';

                                            if (leftIsCash !== rightIsCash) {
                                              return leftIsCash ? 1 : -1;
                                            }

                                            const leftEnteredValue = Number.parseFloat(left && left.entered && left.entered.Value);
                                            const leftCalculatedValue = Number.parseFloat(left && left.calculated && left.calculated.Value);
                                            const leftValue = Number.isFinite(leftEnteredValue) ? leftEnteredValue : leftCalculatedValue;
                                            const rightEnteredValue = Number.parseFloat(right && right.entered && right.entered.Value);
                                            const rightCalculatedValue = Number.parseFloat(right && right.calculated && right.calculated.Value);
                                            const rightValue = Number.isFinite(rightEnteredValue) ? rightEnteredValue : rightCalculatedValue;

                                            const normalizedLeft = Number.isFinite(leftValue) ? leftValue : Number.NEGATIVE_INFINITY;
                                            const normalizedRight = Number.isFinite(rightValue) ? rightValue : Number.NEGATIVE_INFINITY;

                                            if (normalizedLeft === normalizedRight) {
                                              return leftIsin.localeCompare(rightIsin);
                                            }

                                            return normalizedRight - normalizedLeft;
                                          });
                                        });

                                        let displayIndex = 0;
                                        return Array.from(grouped.values()).flatMap((group, groupIndex) => {
                                          const portfolio = portfolioById.get(group.portfolioId) || null;
                                          const portfolioName = portfolio && portfolio.name ? String(portfolio.name) : (Number.isFinite(group.portfolioId) ? `Portfolio ${group.portfolioId}` : '-');
                                          const portfolioCurrency = portfolio && portfolio.baseCurrency ? String(portfolio.baseCurrency).toUpperCase() : null;
                                          const portfolioCurrencySymbol = getCurrencySymbol(portfolioCurrency);
                                          const totals = valuationPositionTotals[String(group.portfolioId)] || {};
                                          const enteredTotalValueConverted = Number.parseFloat(totals && totals.EnteredTotalValueConverted);
                                          const calculatedTotalValueConverted = Number.parseFloat(totals && totals.CalculatedTotalValueConverted);

                                          const groupRows = group.rows.map((position, rowIndex) => {
                                            displayIndex += 1;

                                            const entered = position && position.entered ? position.entered : null;
                                            const calculated = position && position.calculated ? position.calculated : null;

                                            const enteredPrice = Number.parseFloat(entered && entered.Price);
                                            const enteredPriceDate = entered && entered.PriceDate ? String(entered.PriceDate) : null;
                                            const enteredFxName = entered && entered.FxName ? String(entered.FxName) : null;
                                            const enteredFxDate = entered && entered.FxDate ? String(entered.FxDate) : null;
                                            const enteredFxRate = Number.parseFloat(entered && entered.FxRate);
                                            const enteredValueConvertedTooltip = buildFxTooltip(enteredFxName, enteredFxRate, enteredFxDate);
                                            const enteredQuantity = Number.parseInt(entered && entered.Quantity, 10);
                                            const enteredValueConverted = Number.parseFloat(entered && entered.ValueConverted);
                                            const enteredValue = Number.parseFloat(entered && entered.Value);
                                            const enteredCurrency = entered && entered.Currency ? String(entered.Currency).trim().toUpperCase() : null;
                                            const enteredCurrencySymbol = getCurrencySymbol(enteredCurrency);

                                            const calculatedPrice = Number.parseFloat(calculated && calculated.Price);
                                            const calculatedPriceDate = calculated && calculated.PriceDate ? String(calculated.PriceDate) : null;
                                            const calculatedFxName = calculated && calculated.FxName ? String(calculated.FxName) : null;
                                            const calculatedFxDate = calculated && calculated.FxDate ? String(calculated.FxDate) : null;
                                            const calculatedFxRate = Number.parseFloat(calculated && calculated.FxRate);
                                            const calculatedValueConvertedTooltip = buildFxTooltip(calculatedFxName, calculatedFxRate, calculatedFxDate);
                                            const calculatedQuantity = Number.parseInt(calculated && calculated.Quantity, 10);
                                            const calculatedValueConverted = Number.parseFloat(calculated && calculated.ValueConverted);
                                            const calculatedValue = Number.parseFloat(calculated && calculated.Value);
                                            const calculatedCurrency = calculated && calculated.Currency ? String(calculated.Currency).trim().toUpperCase() : null;
                                            const calculatedCurrencySymbol = getCurrencySymbol(calculatedCurrency);
                                            const isin = position && position.ISIN != null ? String(position.ISIN).trim() : '';
                                            const isCashRow = isin === '';

                                            return (
                                              <tr
                                                key={`${position && position.ISIN ? position.ISIN : 'position'}-${groupIndex}-${rowIndex}`}
                                                className={rowIndex === 0 && groupIndex > 0 ? 'valuation-position-group-start' : ''}
                                              >
                                                {rowIndex === 0 ? (
                                                  <td rowSpan={group.rows.length + 1} className="valuation-position-portfolio-cell">{portfolioName}</td>
                                                ) : null}
                                                <td className="positions-cell-index valuation-position-index">{displayIndex}</td>
                                                <td className="positions-cell-logo valuation-position-logo-cell">
                                                  {position && position.ISIN ? (
                                                    <img
                                                      src={`https://img.logo.dev/isin/${position.ISIN}?token=pk_KdHU8UyIT7moWKjSECXodA`}
                                                      alt={`${position.name || position.ISIN} logo`}
                                                      className="valuation-position-logo"
                                                    />
                                                  ) : null}
                                                </td>
                                                <td>
                                                  {position && position.name ? position.name : (position && position.ISIN ? position.ISIN : 'Cash')}
                                                  {(position && (position.ISIN || position.ticker)) ? (
                                                    <div className="muted valuation-position-meta">{(position.ISIN || '') + ((position.ISIN && position.ticker) ? ' | ' : '') + (position.ticker || '')}</div>
                                                  ) : null}
                                                </td>
                                                <td className="txn-cell-amount">{isCashRow ? '' : (Number.isFinite(enteredQuantity) ? formatQuantity(enteredQuantity) : '-')}</td>
                                                <td className="txn-cell-amount">
                                                  {isCashRow ? '' : (Number.isFinite(enteredPrice) ? `${enteredCurrencySymbol}${formatAmount(enteredPrice)}` : '-')}
                                                  {!isCashRow && enteredPriceDate ? (
                                                    <div className="muted valuation-position-subvalue">{formatDisplayDate(enteredPriceDate)}</div>
                                                  ) : null}
                                                </td>
                                                <td className="txn-cell-amount" title={enteredValueConvertedTooltip || undefined}>
                                                  {Number.isFinite(enteredValueConverted) ? `${portfolioCurrencySymbol}${formatAmount(enteredValueConverted)}` : '-'}
                                                  {Number.isFinite(enteredValue) ? (
                                                    <div className="muted valuation-position-subvalue">{enteredCurrencySymbol}{formatAmount(enteredValue)}</div>
                                                  ) : null}
                                                </td>
                                                <td className="txn-cell-amount">{isCashRow ? '' : (Number.isFinite(calculatedQuantity) ? formatQuantity(calculatedQuantity) : '-')}</td>
                                                <td className="txn-cell-amount">
                                                  {isCashRow ? '' : (Number.isFinite(calculatedPrice) ? `${calculatedCurrencySymbol}${formatAmount(calculatedPrice)}` : '-')}
                                                  {!isCashRow && calculatedPriceDate ? (
                                                    <div className="muted valuation-position-subvalue">{formatDisplayDate(calculatedPriceDate)}</div>
                                                  ) : null}
                                                </td>
                                                <td className="txn-cell-amount" title={calculatedValueConvertedTooltip || undefined}>
                                                  {Number.isFinite(calculatedValueConverted) ? `${portfolioCurrencySymbol}${formatAmount(calculatedValueConverted)}` : '-'}
                                                  {Number.isFinite(calculatedValue) ? (
                                                    <div className="muted valuation-position-subvalue">{calculatedCurrencySymbol}{formatAmount(calculatedValue)}</div>
                                                  ) : null}
                                                </td>
                                              </tr>
                                            );
                                          });

                                          groupRows.push(
                                            <tr
                                              key={`total-${groupIndex}-${group.portfolioId}`}
                                              className="valuation-position-total-row"
                                            >
                                              <td className="positions-cell-index valuation-position-index" />
                                              <td className="positions-cell-logo valuation-position-logo-cell" />
                                              <td className="valuation-position-total-label">Total</td>
                                              <td className="txn-cell-amount" />
                                              <td className="txn-cell-amount" />
                                              <td className="txn-cell-amount valuation-position-total-value">
                                                {Number.isFinite(enteredTotalValueConverted) ? `${portfolioCurrencySymbol}${formatAmount(enteredTotalValueConverted)}` : '-'}
                                              </td>
                                              <td className="txn-cell-amount" />
                                              <td className="txn-cell-amount" />
                                              <td className="txn-cell-amount valuation-position-total-value">
                                                {Number.isFinite(calculatedTotalValueConverted) ? `${portfolioCurrencySymbol}${formatAmount(calculatedTotalValueConverted)}` : '-'}
                                              </td>
                                            </tr>
                                          );

                                          return groupRows;
                                        });
                                      })()}
                                    </tbody>
                                  </table>
                                </div>
                              )}
                            </div>
                          </td>
                        </tr>
                      ) : null}
                    </React.Fragment>
                  );
                })}
              </tbody>
            </table>
          </div>

          <div className="valuations-calculate-actions">
            <button type="button" className="secondary-btn" onClick={openCalculationPopup}>Calculate</button>
          </div>

          {isCalculationPopupOpen ? (
            <div className="valuations-calculate-overlay" role="dialog" aria-modal="true" aria-label="Calculate valuations">
              <section className="panel-card valuations-calculate-popup">
                <div className="valuations-header-row">
                  <h3 style={{ marginTop: 0, marginBottom: 0 }}>Calculate Valuations</h3>
                  {!isCalculatingValuations ? (
                    <button type="button" className="secondary-btn" onClick={closeCalculationPopup}>Close</button>
                  ) : null}
                </div>

                <div className="valuations-calculate-fields">
                  <label className="field valuations-calculate-field">
                    <span>Start Date</span>
                    <input
                      type="date"
                      value={calculationStartDate}
                      onChange={(event) => setCalculationStartDate(event.target.value)}
                      disabled={isCalculatingValuations}
                    />
                  </label>
                  <label className="field valuations-calculate-field">
                    <span>End Date</span>
                    <input
                      type="date"
                      value={calculationEndDate}
                      onChange={(event) => setCalculationEndDate(event.target.value)}
                      disabled={isCalculatingValuations}
                    />
                  </label>
                </div>

                <div className="valuations-calculate-actions">
                  <button
                    type="button"
                    className="primary-btn"
                    onClick={runCalculateValuations}
                    disabled={isCalculatingValuations}
                  >
                    Calculate Valuations
                  </button>
                </div>

                {isCalculatingValuations ? (
                  <p className="muted inline-loading-indicator" role="status" aria-live="polite" style={{ margin: 0 }}>
                    <span className="screen-loading-spinner" aria-hidden="true" />
                    <span>Calculating valuations. Please wait...</span>
                  </p>
                ) : null}

                {calculationStatus ? (
                  <div className={`status-message ${calculationStatus.type}`} role="status">
                    <span>{calculationStatus.message}</span>
                  </div>
                ) : null}

                {calculationResult ? (
                  <pre className="valuations-calculate-result">{JSON.stringify(calculationResult, null, 2)}</pre>
                ) : null}
              </section>
            </div>
          ) : null}
        </section>
      </div>
    );
  }

  global.PortfolioValuations = {
    ValuationsModulePage
  };
})(window);