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

  const DEFAULT_POSITION_METRIC_THRESHOLDS = {
    roce: {
      greenMin: 0.25,
      amberMin: 0.15
    },
    profitMargin: {
      greenMin: 0.20,
      amberMin: 0.10
    }
  };

  const POSITION_METRIC_THRESHOLDS = appConfig
    && appConfig.POSITION_METRIC_THRESHOLDS
    && typeof appConfig.POSITION_METRIC_THRESHOLDS === 'object'
    ? appConfig.POSITION_METRIC_THRESHOLDS
    : DEFAULT_POSITION_METRIC_THRESHOLDS;
  const DEFAULT_QUARTERLY_YEARLY_BOUNDARY_GRACE_DAYS = 7;
  const QUARTERLY_YEARLY_BOUNDARY_GRACE_DAYS = Number.isFinite(Number(appConfig && appConfig.QUARTERLY_YEARLY_BOUNDARY_GRACE_DAYS))
    ? Math.max(0, Math.floor(Number(appConfig.QUARTERLY_YEARLY_BOUNDARY_GRACE_DAYS)))
    : DEFAULT_QUARTERLY_YEARLY_BOUNDARY_GRACE_DAYS;

  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');
  }

  function writePortfoliosToSessionCacheSafe(portfolios) {
    const api = readPortfolioSelectionApi();
    if (typeof api.writePortfoliosToSessionCache === 'function') {
      api.writePortfoliosToSessionCache(portfolios);
      return;
    }

    try {
      window.sessionStorage.setItem('portfolio-linked-portfolios', JSON.stringify(portfolios));
    } catch (error) {
      // Ignore storage failures.
    }
  }

  const sharedComponents = global.PortfolioSharedComponents || {};
  const BlockingScreenLoader = sharedComponents.BlockingScreenLoader;
  const LineChart = sharedComponents.LineChart;
  const PieChart = sharedComponents.PieChart;

  const BENCHMARK_INDEX_OPTIONS = [
    { id: 1, text: 'S&P 500' }
  ];

  const BASE_CURRENCY_OPTIONS = [
    'EUR'
  ];

  const FORM_MODES = {
    none: 'none',
    add: 'add',
    edit: 'edit'
  };

  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 POSITION_PANEL_OPTIONS = [
    { label: 'Price', value: 'price' },
    { label: 'Valuation', value: 'valuation' },
    { label: 'Quality', value: 'quality' },
    { label: 'Growth', value: 'growth' }
  ];
  const STOCK_EVENT_IDS = {
    BUY: 1,
    SELL: 2,
    WRITE_OFF: 3,
    SPLIT: 9,
    TRANSFER_IN: 10,
    TRANSFER_OUT: 14
  };
  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 PositionPanelSelector({ value, onChange, ariaLabel, className }) {
    const selectedPanel = typeof value === 'string' ? value : 'price';

    return (
      <div className={`shared-segmented-control ${className || ''}`.trim()} role="group" aria-label={ariaLabel || 'Position detail selector'}>
        {POSITION_PANEL_OPTIONS.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 ${selectedPanel === option.value ? 'active' : ''}`.trim()}
              aria-pressed={selectedPanel === option.value}
              onClick={() => {
                if (typeof onChange === 'function') {
                  onChange(option.value);
                }
              }}
            >
              {option.label}
            </button>
          </React.Fragment>
        ))}
      </div>
    );
  }

  function createInitialFormValues() {
    return {
      name: '',
      baseCurrency: 'EUR',
      benchmarkIndexId: '1',
      cashPosition: true
    };
  }

  function persistAuthToken(token) {
    if (typeof token !== 'string' || !token) {
      return;
    }

    try {
      window.sessionStorage.setItem('portfolio-auth-token', token);
    } catch (error) {
      // Ignore storage failures.
    }
  }

  function validatePortfolioFields(values) {
    const errors = {};
    const name = String(values.name || '').trim();
    const baseCurrency = String(values.baseCurrency || '').trim().toUpperCase();
    const benchmarkIndexId = Number.parseInt(values.benchmarkIndexId, 10);

    if (!name) {
      errors.name = 'Name is required.';
    } else if (name.length > 100) {
      errors.name = 'Name must be 100 characters or less.';
    }

    if (baseCurrency !== 'EUR') {
      errors.baseCurrency = 'Base Currency must be EUR.';
    }

    if (!Number.isFinite(benchmarkIndexId) || benchmarkIndexId !== 1) {
      errors.benchmarkIndexId = 'Benchmark Index is required.';
    }

    return errors;
  }

  function mapPortfolioToFormValues(portfolio) {
    return {
      name: typeof portfolio.name === 'string' ? portfolio.name : '',
      baseCurrency: typeof portfolio.baseCurrency === 'string' ? portfolio.baseCurrency : '',
      benchmarkIndexId: String(portfolio.benchmarkIndexId || 1),
      cashPosition: typeof portfolio.cashPosition === 'boolean' ? portfolio.cashPosition : true
    };
  }

  function toSavedPortfolio(portfolio) {
    if (!portfolio || typeof portfolio !== 'object') {
      return null;
    }

    const id = Number.parseInt(portfolio.id, 10);
    if (!Number.isFinite(id)) {
      return null;
    }

    return {
      id,
      name: typeof portfolio.name === 'string' && portfolio.name.trim()
        ? portfolio.name.trim()
        : `Portfolio ${id}`,
      baseCurrency: typeof portfolio.baseCurrency === 'string' ? portfolio.baseCurrency : null,
      benchmarkIndexId: Number.parseInt(portfolio.benchmarkIndexId, 10),
      cashPosition: typeof portfolio.cashPosition === 'boolean' ? portfolio.cashPosition : true
    };
  }

  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 formatQuantity(value) {
    const numeric = Number.parseFloat(value);
    if (!Number.isFinite(numeric)) {
      return '-';
    }

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

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

    const absolute = Math.abs(numeric);
    if (absolute >= 10000) {
      const scaled = numeric / 1000;
      const rounded = Math.abs(scaled % 1) < 0.000001 ? scaled.toFixed(0) : scaled.toFixed(1);
      return `${rounded}k`;
    }

    return numeric.toFixed(2);
  }

  function parseNullableFiniteNumber(value) {
    if (value == null || value === '') {
      return null;
    }

    const parsed = Number(value);
    return Number.isFinite(parsed) ? parsed : null;
  }

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

    return numeric.toFixed(4);
  }

  function formatRatioMetric(value) {
    return Number.isFinite(value) ? formatAmount(value) : 'n/a';
  }

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

  function formatPercent(value) {
    if (!Number.isFinite(value)) {
      return '-';
    }
    return `${(value * 100).toFixed(1)}%`;
  }

  function formatPercentForPosition(value, isCash) {
    if (!Number.isFinite(value)) {
      return isCash ? '' : '-';
    }
    const decimals = isCash ? 2 : 1;
    const formatted = `${(value * 100).toFixed(decimals)}%`;

    if (!isCash) {
      return formatted;
    }

    const className = value < 0
      ? 'valuations-total-negative'
      : (value > 0 ? 'valuations-total-positive' : 'valuations-total-neutral');

    return <span className={className}>{formatted}</span>;
  }

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

  function getMwrComparisonClassName(mwr, benchmarkMwr) {
    if (!Number.isFinite(mwr) || !Number.isFinite(benchmarkMwr)) {
      return 'valuations-total-neutral';
    }

    const diffPercentagePoints = (mwr - benchmarkMwr) * 100;
    if (Math.abs(diffPercentagePoints) <= 0.01) {
      return 'valuations-total-neutral';
    }
    if (diffPercentagePoints > 0) {
      return 'valuations-total-positive';
    }
    if (diffPercentagePoints >= -1) {
      return 'performance-metric-amber';
    }
    return 'valuations-total-negative';
  }

  function getTotalVsBMClassName(value, isPercentage = false) {
    if (!Number.isFinite(value) || value === 0) {
      return 'valuations-total-neutral';
    }
    if (value > 0) {
      return 'valuations-total-positive';
    }
    if (isPercentage && value > -0.01) {
      return 'performance-metric-amber';
    }
    return 'valuations-total-negative';
  }

  function getMetricClassName(value, thresholds = {}) {
    if (!Number.isFinite(value)) {
      return 'valuations-total-neutral';
    }

    const greenMin = Number(thresholds.greenMin);
    const amberMin = Number(thresholds.amberMin);
    if (!Number.isFinite(greenMin) || !Number.isFinite(amberMin)) {
      return 'valuations-total-neutral';
    }

    if (value >= greenMin) {
      return 'valuations-total-positive';
    }

    if (value >= amberMin) {
      return 'performance-metric-amber';
    }

    return 'valuations-total-negative';
  }

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

    return dateValue;
  }

  function buildTimeBoundaryGroups(historyRows = [], options = {}) {
    const boundaryGraceDays = Number.isFinite(Number(options && options.boundaryGraceDays))
      ? Math.max(0, Math.floor(Number(options.boundaryGraceDays)))
      : 0;
    const toGroupingDate = (dateValue) => {
      const parsedDate = new Date(`${dateValue}T00:00:00.000Z`);
      if (!Number.isFinite(parsedDate.getTime())) {
        return null;
      }

      if (boundaryGraceDays <= 0) {
        return parsedDate;
      }

      // For quarterly/yearly boundary rows, treat a small post-period date drift
      // as belonging to the prior period (for example Jul 4 -> prior quarter/half-year).
      const adjustedDate = new Date(parsedDate.getTime());
      adjustedDate.setUTCDate(adjustedDate.getUTCDate() - boundaryGraceDays);
      return adjustedDate;
    };

    const firstDate = toGroupingDate(historyRows[0].date);
    const lastDate = toGroupingDate(historyRows[historyRows.length - 1].date);
    const yearsSpan = firstDate && lastDate
      && Number.isFinite(firstDate.getTime()) && Number.isFinite(lastDate.getTime())
      ? (lastDate.getTime() - firstDate.getTime()) / (365.2425 * 24 * 60 * 60 * 1000)
      : null;

    const showQuarterGroups = Number.isFinite(yearsSpan) && yearsSpan < 3;
    const showHalfYearGroups = Number.isFinite(yearsSpan) && yearsSpan >= 3 && yearsSpan <= 7;
    const periodEndByGroup = new Map();
    const yearEndByYear = new Map();

    historyRows.forEach((item, index) => {
      const parsedDate = toGroupingDate(item.date);
      if (!Number.isFinite(parsedDate.getTime())) {
        return;
      }

      const year = parsedDate.getUTCFullYear();
      const month = parsedDate.getUTCMonth();
      yearEndByYear.set(year, { year, endIndex: index });

      if (showQuarterGroups || showHalfYearGroups) {
        const periodNumber = showQuarterGroups ? (Math.floor(month / 3) + 1) : (Math.floor(month / 6) + 1);
        const periodPrefix = showQuarterGroups ? 'Q' : 'H';
        const key = `${year}-${periodPrefix}${periodNumber}`;
        periodEndByGroup.set(key, { label: `${periodPrefix}${periodNumber}`, endIndex: index });
      }
    });

    const sortedPeriodEnds = Array.from(periodEndByGroup.values())
      .sort((left, right) => left.endIndex - right.endIndex);
    const periodBoundaryGroups = sortedPeriodEnds.map((marker, markerIndex) => ({
      tickIndex: marker.endIndex,
      labelStartIndex: markerIndex === 0 ? 0 : sortedPeriodEnds[markerIndex - 1].endIndex,
      labelEndIndex: marker.endIndex,
      label: marker.label
    }));

    if (sortedPeriodEnds.length > 0 && sortedPeriodEnds[0].endIndex !== 0) {
      periodBoundaryGroups.unshift({ tickIndex: 0, labelStartIndex: null, labelEndIndex: null, label: null });
    }

    const sortedYearEnds = Array.from(yearEndByYear.values())
      .sort((left, right) => left.endIndex - right.endIndex);
    const yearBoundaryGroups = sortedYearEnds.map((marker, markerIndex) => ({
      tickIndex: marker.endIndex,
      labelStartIndex: markerIndex === 0 ? 0 : sortedYearEnds[markerIndex - 1].endIndex,
      labelEndIndex: marker.endIndex,
      label: String(marker.year)
    }));

    if (sortedYearEnds.length > 0 && sortedYearEnds[0].endIndex !== 0) {
      yearBoundaryGroups.unshift({ tickIndex: 0, labelStartIndex: null, labelEndIndex: null, label: null });
    }

    return {
      periodBoundaryGroups,
      yearBoundaryGroups
    };
  }

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

    const [selectedPortfolio, setSelectedPortfolio] = React.useState('All');
    const [mode, setMode] = React.useState(FORM_MODES.none);
    const [formValues, setFormValues] = React.useState(createInitialFormValues);
    const [errors, setErrors] = React.useState({});
    const [status, setStatus] = React.useState(null);
    const [isSubmitting, setIsSubmitting] = React.useState(false);
    const [isLoadingEdit, setIsLoadingEdit] = React.useState(false);
    const [performanceValuations, setPerformanceValuations] = React.useState([]);
    const [isLoadingPerformance, setIsLoadingPerformance] = React.useState(false);
    const [performanceStatus, setPerformanceStatus] = React.useState(null);
    const [selectedDateRange, setSelectedDateRange] = React.useState(readPersistedDateRange);
    const [absoluteMWR, setAbsoluteMWR] = React.useState(() => {
      try {
        const initial = readPersistedDateRange && typeof readPersistedDateRange === 'function'
          ? readPersistedDateRange()
          : { range: 'YTD' };
        return initial && initial.range === 'YTD';
      } catch (err) {
        return false;
      }
    });
    const [isAbsoluteMWRHelpOpen, setIsAbsoluteMWRHelpOpen] = React.useState(false);
    const [isPercentHelpOpen, setIsPercentHelpOpen] = React.useState(false);
    const [isPriceHelpOpen, setIsPriceHelpOpen] = React.useState(false);
    const [positions, setPositions] = React.useState([]);
    const [isLoadingPositions, setIsLoadingPositions] = React.useState(false);
    const [fxRates, setFxRates] = React.useState([]);
    const [totalAssets, setTotalAssets] = React.useState(null);
    const [totalEquity, setTotalEquity] = React.useState(null);
    const [totalPe, setTotalPe] = React.useState(null);
    const [totalRoce, setTotalRoce] = React.useState(null);
    const [netMarginTTM, setNetMarginTTM] = React.useState(null);
    const [positionsStatus, setPositionsStatus] = React.useState(null);
    const [positionsDate, setPositionsDate] = React.useState(() => new Date().toISOString().slice(0, 10));
    const [positionsView, setPositionsView] = React.useState('open');
    const [isPositionsDetailedView, setIsPositionsDetailedView] = React.useState(false);
    const [selectedPositionIsin, setSelectedPositionIsin] = React.useState(null);
    const [selectedPositionPanel, setSelectedPositionPanel] = React.useState('price');
    const [includeSbcInPfcf, setIncludeSbcInPfcf] = React.useState(false);
    const [includeTtmMarginInQuality, setIncludeTtmMarginInQuality] = React.useState(true);
    const [includeTtmInGrowth, setIncludeTtmInGrowth] = React.useState(true);
    const [selectedPositionPayload, setSelectedPositionPayload] = React.useState(null);
    const [selectedPositionFinancialsPayload, setSelectedPositionFinancialsPayload] = React.useState(null);
    const [isLoadingPositionDetail, setIsLoadingPositionDetail] = React.useState(false);
    const [positionDetailStatus, setPositionDetailStatus] = React.useState(null);
    const [isLoadingPositionFinancials, setIsLoadingPositionFinancials] = React.useState(false);
    const [positionFinancialsStatus, setPositionFinancialsStatus] = React.useState(null);
    const editLoadRequestRef = React.useRef(0);

    const renderPositionsPriceHeader = () => (
      <th className="valuations-cell-number">
        <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-end', lineHeight: 1.2 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.45rem' }}>
            <span>Price</span>
            <span className="performance-absolute-iir-help">
              <button
                type="button"
                className="performance-absolute-iir-help-btn"
                aria-label="About Price for selected date"
                aria-expanded={isPriceHelpOpen}
                onClick={() => setIsPriceHelpOpen((v) => !v)}
              >?
              </button>
              {isPriceHelpOpen ? (
                <div className="performance-absolute-iir-help-panel" role="tooltip">
                  <p>The Price of the Security on (or most recent prior Price available to) the input date selected.</p>
                </div>
              ) : null}
            </span>
          </span>
          <span className="muted" style={{ fontSize: '0.78em' }} title="Average Price Paid">Avg Price Paid</span>
        </span>
      </th>
    );

    const renderPositionGainsCell = (position, options = {}) => {
      const showRealizedInCell = options.showRealized !== false;
      if (position && position.isCash) {
        return '';
      }

      const primaryCur = primaryCurrency ? String(primaryCurrency).toUpperCase() : null;
      const symbol = primaryCur ? getCurrencySymbol(primaryCur) : '';
      const gainValue = Number(position && position.gains);

      if (!Number.isFinite(gainValue)) {
        return '-';
      }

      const gainClassName = gainValue < 0
        ? 'valuations-total-negative'
        : (gainValue > 0 ? 'valuations-total-positive' : 'valuations-total-neutral');

      const realizedGainValue = Number(position && position.realizedGains);
      const showRealized = showRealizedInCell
        && isPositionsDetailedView
        && Number.isFinite(realizedGainValue)
        && realizedGainValue !== 0;
      const realizedClassName = realizedGainValue < 0 ? 'valuations-total-negative' : 'valuations-total-positive';

      return (
        <span>
          <strong className={gainClassName}>{symbol}{formatAmount(gainValue)}</strong>
          {showRealized ? (
            <div className="muted" style={{ fontSize: '0.8em' }}>
              <span>Realized: </span>
              <span className={realizedClassName}>{symbol}{formatAmount(realizedGainValue)}</span>
            </div>
          ) : null}
        </span>
      );
    };

    const renderPositionRoceCell = (position) => {
      if (position && position.isCash) {
        return '';
      }

      const toNullableFiniteNumber = (value) => {
        if (value == null || value === '') {
          return null;
        }

        const parsed = Number(value);
        return Number.isFinite(parsed) ? parsed : null;
      };

      const roce = toNullableFiniteNumber(position && position.Roce);
      const profitMargin = toNullableFiniteNumber(position && position.NetProfitMarginTTM);
      const showRoce = Number.isFinite(roce);
      const showProfitMargin = Number.isFinite(profitMargin);

      if (!showRoce && !showProfitMargin) {
        return '-';
      }

      const roceClassName = getMetricClassName(roce, POSITION_METRIC_THRESHOLDS.roce);
      const profitMarginClassName = getMetricClassName(
        profitMargin,
        POSITION_METRIC_THRESHOLDS.profitMargin
      );

      return (
        <React.Fragment>
          <div className={roceClassName} title="Return on Capital Employed">{showRoce ? formatPercent(roce) : '-'}</div>
          <div
            className={profitMarginClassName}
            style={{ fontSize: '0.8em' }}
            title="Net Profit Margin (TTM)"
          >
            {showProfitMargin ? formatPercent(profitMargin) : '-'}
          </div>
        </React.Fragment>
      );
    };

    const canEdit = selectedPortfolio !== 'All';
    const portfolioSelectionApi = readPortfolioSelectionApi();
    const primaryCurrency = portfolioSelectionApi && typeof portfolioSelectionApi.getPrimaryCurrencyForSelection === 'function'
      ? portfolioSelectionApi.getPrimaryCurrencyForSelection(selectedPortfolio)
      : null;

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

    // Auto-toggle Absolute MWR for YTD and unset for other ranges.
    React.useEffect(() => {
      try {
        setAbsoluteMWR(selectedDateRange && selectedDateRange.range === 'YTD');
      } catch (err) {
        // ignore
      }
    }, [selectedDateRange]);

    const modeSubtitle = mode === FORM_MODES.add
      ? 'Add a new Portfolio'
      : (mode === FORM_MODES.edit && canEdit ? `Edit Portfolio #${selectedPortfolio}` : '');

    const handleFormChange = (event) => {
      const { name, value, type, checked } = event.target;
      const nextValue = type === 'checkbox' ? checked : value;
      setFormValues((current) => ({ ...current, [name]: nextValue }));

      if (errors[name]) {
        setErrors((current) => ({ ...current, [name]: undefined }));
      }

      if (status) {
        setStatus(null);
      }
    };

    const loadPortfolioForEdit = async (portfolioId) => {
      const requestedPortfolioId = String(portfolioId || '').trim();
      if (!requestedPortfolioId || requestedPortfolioId.toLowerCase() === 'all') {
        setMode(FORM_MODES.none);
        setIsLoadingEdit(false);
        return;
      }

      const requestId = editLoadRequestRef.current + 1;
      editLoadRequestRef.current = requestId;

      setMode(FORM_MODES.edit);
      setErrors({});
      setStatus(null);
      setIsLoadingEdit(true);

      try {
        const response = await fetch(`/api/portfolio/${requestedPortfolioId}`, {
          method: 'GET',
          headers: getAuthorizedJsonHeadersSafe()
        });

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

        if (response.status === 500) {
          const payload = await response.json().catch(() => ({}));
          if (editLoadRequestRef.current !== requestId) {
            return;
          }

          setStatus({
            type: 'error',
            message: getValidationMessage('A Technical Error occurred.', payload.code != null ? payload.code : 2102)
          });
          return;
        }

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

        const payload = await response.json();
        if (!payload || !payload.portfolio) {
          throw new Error('Portfolio payload missing from response.');
        }

        if (editLoadRequestRef.current !== requestId) {
          return;
        }

        setFormValues(mapPortfolioToFormValues(payload.portfolio));
      } catch (error) {
        if (editLoadRequestRef.current !== requestId) {
          return;
        }

        setStatus({
          type: 'error',
          message: getValidationMessage('A Technical Error occurred.', 2102)
        });
      } finally {
        if (editLoadRequestRef.current === requestId) {
          setIsLoadingEdit(false);
        }
      }
    };

    const handlePortfolioSelectionChange = (value) => {
      setSelectedPortfolio(value);

      const isFormOpen = mode === FORM_MODES.add || mode === FORM_MODES.edit;
      const nextSelection = String(value || '').trim();
      const canLoadEdit = nextSelection && nextSelection.toLowerCase() !== 'all';

      if (isFormOpen && canLoadEdit) {
        loadPortfolioForEdit(nextSelection);
        return;
      }

      setMode(FORM_MODES.none);
      setErrors({});
      setStatus(null);
    };

    const handleAdd = () => {
      editLoadRequestRef.current += 1;
      setMode(FORM_MODES.add);
      setIsLoadingEdit(false);
      setFormValues(createInitialFormValues());
      setErrors({});
      setStatus(null);
    };

    const handleCancelForm = () => {
      editLoadRequestRef.current += 1;
      setMode(FORM_MODES.none);
      setIsLoadingEdit(false);
      setErrors({});
      setStatus(null);
    };

    const handleEdit = async () => {
      if (!canEdit) {
        return;
      }

      await loadPortfolioForEdit(selectedPortfolio);
    };

    const handleSavePortfolio = async (event) => {
      event.preventDefault();
      setStatus(null);

      const disableClientValidation = Boolean(window.disableClientValidation);
      const nextErrors = disableClientValidation ? {} : validatePortfolioFields(formValues);
      setErrors(nextErrors);
      if (!disableClientValidation && Object.keys(nextErrors).length > 0) {
        setStatus({ type: 'error', message: 'A Validation Issue occurred.' });
        return;
      }

      const isEdit = mode === FORM_MODES.edit && canEdit;
      const requestUrl = isEdit ? `/api/portfolio/${selectedPortfolio}` : '/api/portfolio';
      const requestMethod = isEdit ? 'PUT' : 'POST';

      setIsSubmitting(true);
      try {
        const response = await fetch(requestUrl, {
          method: requestMethod,
          headers: Object.assign({ 'Content-Type': 'application/json' }, getAuthorizedJsonHeadersSafe()),
          body: JSON.stringify({
            name: String(formValues.name || '').trim(),
            baseCurrency: String(formValues.baseCurrency || '').trim().toUpperCase(),
            benchmarkIndexId: Number.parseInt(formValues.benchmarkIndexId, 10),
            cashPosition: Boolean(formValues.cashPosition)
          })
        });

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

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

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

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

        const payload = await response.json();
        const savedPortfolio = toSavedPortfolio(payload.portfolio);

        if (savedPortfolio) {
          setPortfolios((current) => {
            const existing = Array.isArray(current) ? current.slice() : [];
            const existingIndex = existing.findIndex((item) => Number.parseInt(item && item.id, 10) === savedPortfolio.id);
            if (existingIndex >= 0) {
              existing[existingIndex] = savedPortfolio;
            } else {
              existing.push(savedPortfolio);
            }
            existing.sort((left, right) => Number(left.id) - Number(right.id));
            writePortfoliosToSessionCacheSafe(existing);
            return existing;
          });

          if (!isEdit) {
            const refreshTokenResponse = await fetch('/api/auth/updateportfolios', {
              method: 'POST',
              headers: getAuthorizedJsonHeadersSafe()
            });

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

            if (!refreshTokenResponse.ok) {
              const refreshPayload = await refreshTokenResponse.json().catch(() => ({}));
              setStatus({
                type: 'error',
                message: getValidationMessage('A Technical Error occurred.', refreshPayload.code)
              });
              return;
            }

            const refreshPayload = await refreshTokenResponse.json().catch(() => ({}));
            persistAuthToken(refreshPayload && refreshPayload.token);
            setSelectedPortfolio(String(savedPortfolio.id));
          }
        }

        setStatus({
          type: 'success',
          message: isEdit ? 'Portfolio updated successfully.' : 'Portfolio added successfully.'
        });
      } catch (error) {
        setStatus({
          type: 'error',
          message: getValidationMessage('A Technical Error occurred.', 4101)
        });
      } finally {
        setIsSubmitting(false);
      }
    };

    React.useEffect(() => {
      let active = true;

      async function loadPerformanceValuations() {
        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);
        }
        if (absoluteMWR) {
          query.set('absoluteMWR', 'true');
        }

        setIsLoadingPerformance(true);
        setPerformanceStatus(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) {
              setPerformanceValuations([]);
              setPerformanceStatus({
                type: 'error',
                message: getValidationMessage('A Validation Issue occurred.', payload.code)
              });
            }
            return;
          }

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

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

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

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

      loadPerformanceValuations();

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

    React.useEffect(() => {
      let active = true;

      async function loadPositions() {
        const isClosedView = positionsView === 'closed';
        const query = new URLSearchParams();
        query.set('portfolioIds', selectedPortfolio || 'All');
        if (positionsDate) {
          query.set('date', positionsDate);
        }
        query.set('includeOpenPositions', isClosedView ? 'false' : 'true');
        query.set('includeClosedPositions', isClosedView ? 'true' : 'false');

        setIsLoadingPositions(true);
        setPositionsStatus(null);

        try {
          const response = await fetch(`/api/positions?${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) {
              setPositions([]);
              setTotalPe(null);
              setTotalRoce(null);
              setNetMarginTTM(null);
              setPositionsStatus({
                type: 'error',
                message: getValidationMessage('A Validation Issue occurred.', payload.code)
              });
            }
            return;
          }

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

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

          const payload = await response.json().catch(() => ({}));
          const items = Array.isArray(payload && payload.positions) ? payload.positions : [];
          const rates = Array.isArray(payload && payload.fxRates) ? payload.fxRates : [];
          const ta = (payload && Number.isFinite(Number(payload.totalAssets))) ? Number(payload.totalAssets) : null;
          const te = (payload && Number.isFinite(Number(payload.totalEquity))) ? Number(payload.totalEquity) : null;
          const tpe = (payload && payload.totalPe != null && Number.isFinite(Number(payload.totalPe)))
            ? Number(payload.totalPe)
            : null;
          const troce = (payload && payload.totalRoce != null && Number.isFinite(Number(payload.totalRoce)))
            ? Number(payload.totalRoce)
            : null;
          const tnetMargin = (payload && payload.NetMarginTTM != null && Number.isFinite(Number(payload.NetMarginTTM)))
            ? Number(payload.NetMarginTTM)
            : null;

          if (active) {
            setPositions(items);
            setFxRates(rates);
            setTotalAssets(ta);
            setTotalEquity(te);
            setTotalPe(tpe);
            setTotalRoce(troce);
            setNetMarginTTM(tnetMargin);
          }
        } catch (error) {
          if (active) {
            setPositions([]);
            setFxRates([]);
            setTotalPe(null);
            setTotalRoce(null);
            setNetMarginTTM(null);
            setPositionsStatus({
              type: 'error',
              message: getValidationMessage('A Technical Error occurred.', 6101)
            });
          }
        } finally {
          if (active) {
            setIsLoadingPositions(false);
          }
        }
      }

      loadPositions();

      return () => {
        active = false;
      };
    }, [selectedPortfolio, positionsDate, positionsView]);

    React.useEffect(() => {
      if (!selectedPositionIsin) {
        setSelectedPositionPayload(null);
        setSelectedPositionFinancialsPayload(null);
        setIncludeSbcInPfcf(false);
        setIncludeTtmMarginInQuality(true);
        setIncludeTtmInGrowth(true);
        setPositionDetailStatus(null);
        setPositionFinancialsStatus(null);
        setIsLoadingPositionDetail(false);
        setIsLoadingPositionFinancials(false);
        return;
      }

      let active = true;

      async function loadPositionDetail() {
        const query = new URLSearchParams();
        query.set('isin', selectedPositionIsin);
        if (selectedPortfolio) {
          query.set('portfolioIds', selectedPortfolio);
        }
        if (positionsDate) {
          query.set('date', positionsDate);
        }

        setIsLoadingPositionDetail(true);
        setPositionDetailStatus(null);

        try {
          const response = await fetch(`/api/position?${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) {
              setSelectedPositionPayload(null);
              setPositionDetailStatus({
                type: 'error',
                message: getValidationMessage('A Validation Issue occurred.', payload.code)
              });
            }
            return;
          }

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

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

          const payload = await response.json().catch(() => ({}));
          if (active) {
            setSelectedPositionPayload(payload || null);
          }
        } catch (error) {
          if (active) {
            setSelectedPositionPayload(null);
            setPositionDetailStatus({
              type: 'error',
              message: getValidationMessage('A Technical Error occurred.', 6101)
            });
          }
        } finally {
          if (active) {
            setIsLoadingPositionDetail(false);
          }
        }
      }

      loadPositionDetail();

      return () => {
        active = false;
      };
    }, [selectedPositionIsin, selectedPortfolio, positionsDate]);

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

      let active = true;

      async function loadPositionFinancials() {
        const query = new URLSearchParams();
        query.set('isin', selectedPositionIsin);
        if (selectedPortfolio) {
          query.set('portfolioIds', selectedPortfolio);
        }
        if (positionsDate) {
          query.set('date', positionsDate);
        }

        setIsLoadingPositionFinancials(true);
        setPositionFinancialsStatus(null);

        try {
          const response = await fetch(`/api/position-financials?${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) {
              setSelectedPositionFinancialsPayload(null);
              setPositionFinancialsStatus({
                type: 'error',
                message: getValidationMessage('A Validation Issue occurred.', payload.code)
              });
            }
            return;
          }

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

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

          const payload = await response.json().catch(() => ({}));
          if (active) {
            setSelectedPositionFinancialsPayload(payload || null);
          }
        } catch (error) {
          if (active) {
            setSelectedPositionFinancialsPayload(null);
            setPositionFinancialsStatus({
              type: 'error',
              message: getValidationMessage('A Technical Error occurred.', 6101)
            });
          }
        } finally {
          if (active) {
            setIsLoadingPositionFinancials(false);
          }
        }
      }

      loadPositionFinancials();

      return () => {
        active = false;
      };
    }, [selectedPositionIsin, selectedPortfolio, positionsDate]);

    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 sortedPerformanceValuations = React.useMemo(() => {
      return (Array.isArray(performanceValuations) ? performanceValuations.slice() : [])
        .sort((left, right) => toComparableDateValue(left && left.date).localeCompare(toComparableDateValue(right && right.date)));
    }, [performanceValuations]);

    const performanceSeries = React.useMemo(() => {
      const rows = sortedPerformanceValuations
        .map((item) => ({
          date: item && item.date ? String(item.date) : '',
          total: Number.parseFloat(item && item.total),
          invested: Number.parseFloat(item && item.invested),
          benchmarkValueConverted: Number.parseFloat(item && item.benchmarkValueConverted),
          mwr: Number.parseFloat(item && item.mwr),
          benchmarkMwr: Number.parseFloat(item && item.benchmarkMwr),
          totalVsBM: Number.parseFloat(item && item.totalVsBM),
          totalVsBMPercent: Number.parseFloat(item && item.totalVsBMPercent)
        }))
        .filter((item) => item.date && Number.isFinite(item.total));

      if (rows.length === 0) {
        return {
          labels: [],
          values: [],
          investedValues: [],
          benchmarkValues: [],
          emphasizedMarkers: [],
          lightMarkers: [],
          periodBoundaryGroups: [],
          yearBoundaryGroups: [],
          latest: null,
          min: 0,
          max: 0
        };
      }

      const totals = rows.map((item) => item.total);

      const useQuarterAndMonthMarkers = selectedDateRange.range === 'YTD' || selectedDateRange.range === '1Y';
      const emphasizedByGroup = new Map();
      const lightByGroup = new Map();

      rows.forEach((item, index) => {
        const parsedDate = new Date(`${item.date}T00:00:00.000Z`);
        if (!Number.isFinite(parsedDate.getTime())) {
          return;
        }

        const year = parsedDate.getUTCFullYear();
        const month = parsedDate.getUTCMonth();

        if (useQuarterAndMonthMarkers) {
          const quarter = Math.floor(month / 3);
          emphasizedByGroup.set(`${year}-Q${quarter}`, { index, date: item.date });
          lightByGroup.set(`${year}-${month}`, { index, date: item.date });
        } else {
          emphasizedByGroup.set(year, { index, date: item.date });
          if (month === 5) {
            lightByGroup.set(year, { index, date: item.date });
          }
        }
      });

      const emphasizedIndices = new Set(Array.from(emphasizedByGroup.values(), (marker) => marker.index));
      const lightMarkers = Array.from(lightByGroup.values()).filter((marker) => !emphasizedIndices.has(marker.index));

      const yearEndIndexByYear = new Map();
      rows.forEach((item, index) => {
        const parsedDate = new Date(`${item.date}T00:00:00.000Z`);
        if (!Number.isFinite(parsedDate.getTime())) {
          return;
        }

        const year = parsedDate.getUTCFullYear();
        yearEndIndexByYear.set(year, index);
      });

      const sortedYearEnds = Array.from(yearEndIndexByYear.entries())
        .map(([year, endIndex]) => ({ year, endIndex }))
        .sort((left, right) => left.endIndex - right.endIndex);

      const yearBoundaryGroups = sortedYearEnds.map((marker, markerIndex) => ({
        tickIndex: marker.endIndex,
        labelStartIndex: markerIndex === 0 ? 0 : sortedYearEnds[markerIndex - 1].endIndex,
        labelEndIndex: marker.endIndex,
        label: String(marker.year)
      }));

      if (sortedYearEnds.length > 0 && sortedYearEnds[0].endIndex !== 0) {
        yearBoundaryGroups.unshift({ tickIndex: 0, labelStartIndex: null, labelEndIndex: null, label: null });
      }

      const customRangeStart = selectedDateRange.range === 'Custom'
        ? new Date(`${selectedDateRange.startDate}T00:00:00.000Z`)
        : null;
      const customRangeEnd = selectedDateRange.range === 'Custom'
        ? new Date(`${selectedDateRange.endDate}T00:00:00.000Z`)
        : null;
      const customRangeYears = customRangeStart && customRangeEnd
        && Number.isFinite(customRangeStart.getTime()) && Number.isFinite(customRangeEnd.getTime())
        ? (customRangeEnd.getTime() - customRangeStart.getTime()) / (365.2425 * 24 * 60 * 60 * 1000)
        : null;
      const showQuarterGroups = selectedDateRange.range === 'YTD' || selectedDateRange.range === '1Y'
        || (Number.isFinite(customRangeYears) && customRangeYears < 3);
      const showHalfYearGroups = selectedDateRange.range === '5Y'
        || (Number.isFinite(customRangeYears) && customRangeYears >= 3 && customRangeYears <= 7);
      const periodEndByGroup = new Map();

      if (showQuarterGroups || showHalfYearGroups) {
        rows.forEach((item, index) => {
          const parsedDate = new Date(`${item.date}T00:00:00.000Z`);
          if (!Number.isFinite(parsedDate.getTime())) {
            return;
          }

          const year = parsedDate.getUTCFullYear();
          const month = parsedDate.getUTCMonth();
          const periodNumber = showQuarterGroups ? Math.floor(month / 3) + 1 : Math.floor(month / 6) + 1;
          const periodPrefix = showQuarterGroups ? 'Q' : 'H';
          const key = `${year}-${periodPrefix}${periodNumber}`;
          periodEndByGroup.set(key, { label: `${periodPrefix}${periodNumber}`, endIndex: index });
        });
      }

      const sortedPeriodEnds = Array.from(periodEndByGroup.values())
        .sort((left, right) => left.endIndex - right.endIndex);
      const periodBoundaryGroups = sortedPeriodEnds.map((marker, markerIndex) => ({
        tickIndex: marker.endIndex,
        labelStartIndex: markerIndex === 0 ? 0 : sortedPeriodEnds[markerIndex - 1].endIndex,
        labelEndIndex: marker.endIndex,
        label: marker.label
      }));

      if (sortedPeriodEnds.length > 0 && sortedPeriodEnds[0].endIndex !== 0) {
        periodBoundaryGroups.unshift({ tickIndex: 0, labelStartIndex: null, labelEndIndex: null, label: null });
      }

      return {
        labels: rows.map((item) => formatDisplayDate(item.date)),
        values: totals,
        investedValues: rows.map((item) => (Number.isFinite(item.invested) ? item.invested : null)),
        benchmarkValues: rows.map((item) => (Number.isFinite(item.benchmarkValueConverted) ? item.benchmarkValueConverted : null)),
        emphasizedMarkers: Array.from(emphasizedByGroup.values()),
        lightMarkers,
        periodBoundaryGroups,
        yearBoundaryGroups,
        latest: rows[rows.length - 1],
        min: Math.min.apply(null, totals),
        max: Math.max.apply(null, totals)
      };
    }, [sortedPerformanceValuations, selectedDateRange]);

    const positionsPieData = React.useMemo(() => {
      const ordered = (Array.isArray(positions) ? positions : [])
        .filter((position) => {
          // Include stock positions with positive quantity
          const hasQty = Number.isFinite(Number(position.quantity)) && Number(position.quantity) > 0;
          // Include cash only when valueConverted is positive
          const isCashPositive = position.isCash && Number.isFinite(Number(position.valueConverted)) && Number(position.valueConverted) > 0;
          return hasQty || isCashPositive;
        })
        .slice()
        .sort((left, right) => {
          const lv = Number(left.valueConverted);
          const rv = Number(right.valueConverted);
          return (Number.isFinite(rv) ? rv : 0) - (Number.isFinite(lv) ? lv : 0);
        });

      const values = ordered.map((position) => {
        const v = Number(position.valueConverted);
        return Number.isFinite(v) ? v : 0;
      });

      const total = values.reduce((s, x) => s + (Number.isFinite(x) ? x : 0), 0);
      const primaryCur = primaryCurrency ? String(primaryCurrency).toUpperCase() : null;
      const symbol = getCurrencySymbol(primaryCur);

      return {
        labels: ordered.map((position, idx) => {
          const name = position.name || position.ticker || position.isin;
          const v = values[idx] || 0;
          const pct = Number.isFinite(total) && total > 0 ? (v / total) : 0;
          return `${name} — ${symbol}${formatAmount(v)} (${formatPercent(pct)})`;
        }),
        values
      };
    }, [positions]);

    const orderedPositions = React.useMemo(() => {
      const src = Array.isArray(positions) ? positions.slice() : [];
      // Keep closed view ordering as-is, but hide cash rows.
      if (positionsView === 'closed') return src.filter((p) => !(p && p.isCash));

      const cashRows = src.filter((p) => p && p.isCash);
      const nonCash = src.filter((p) => !(p && p.isCash));

      nonCash.sort((a, b) => {
        const av = Number(a && a.valueConverted);
        const bv = Number(b && b.valueConverted);
        const na = Number.isFinite(av) ? av : 0;
        const nb = Number.isFinite(bv) ? bv : 0;
        return nb - na;
      });

      return nonCash.concat(cashRows);
    }, [positions, positionsView]);

    const performanceChartDataSets = React.useMemo(() => {
      if (performanceSeries.values.length === 0) {
        return [];
      }

      const isSingle = (Array.isArray(portfolios) && portfolios.length === 1) || (selectedPortfolio && String(selectedPortfolio).toLowerCase() !== 'all');
      const seriesLabel = isSingle ? 'Portfolio' : 'Portfolios';

      const dataSets = [{
        label: seriesLabel,
        data: performanceSeries.values,
        borderColor: '#43d0b4',
        backgroundColor: 'rgba(67, 208, 180, 0.2)',
        pointBackgroundColor: '#43d0b4',
        pointBorderColor: '#10212e',
        pointRadius: 0,
        pointHoverRadius: 0,
        pointHitRadius: 10
      }];

      if (performanceSeries.investedValues.some((value) => Number.isFinite(value))) {
        dataSets.push({
          label: 'Invested',
          data: performanceSeries.investedValues,
          borderColor: '#f6b73c',
          backgroundColor: 'rgba(246, 183, 60, 0.18)',
          pointBackgroundColor: '#f6b73c',
          pointBorderColor: '#10212e',
          pointRadius: 0,
          pointHoverRadius: 0,
          pointHitRadius: 10
        });
      }

      if (performanceSeries.benchmarkValues.some((value) => Number.isFinite(value))) {
        dataSets.push({
          label: 'Benchmark',
          data: performanceSeries.benchmarkValues,
          borderColor: '#8f7bff',
          backgroundColor: 'rgba(143, 123, 255, 0.18)',
          pointBackgroundColor: '#8f7bff',
          pointBorderColor: '#10212e',
          pointRadius: 0,
          pointHoverRadius: 0,
          pointHitRadius: 10
        });
      }

      return dataSets;
    }, [performanceSeries]);

    const performanceChartOptions = React.useMemo(() => ({
      layout: {
        padding: {
          left: 12,
          right: 12,
          bottom: 72
        }
      },
      scales: {
        x: {
          ticks: {
            display: false,
            color: '#8a8a8a'
          },
          grid: {
            color: 'rgba(159, 176, 190, 0.08)'
          }
        },
        y: {
          ticks: {
            color: '#8a8a8a',
            callback: (tickValue) => formatAxisAmount(tickValue)
          },
          grid: {
            color: 'rgba(159, 176, 190, 0.12)'
          }
        }
      },
      plugins: {
        legend: {
          display: true,
          position: 'top',
          align: 'center',
          labels: {
            color: '#8a8a8a'
          }
        },
        tooltip: {
          callbacks: {
            title: (contexts) => (contexts && contexts.length > 0 && contexts[0].label ? contexts[0].label : ''),
            label: (context) => `${context && context.dataset ? context.dataset.label : 'Value'}: ${formatAmount(context && context.parsed ? context.parsed.y : null)}`
          }
        },
        verticalMarkerLines: {
          lines: [
            ...performanceSeries.emphasizedMarkers.map((marker) => ({
              index: marker.index,
              color: 'rgba(159, 176, 190, 0.55)',
              lineWidth: 1.5
            })),
            ...performanceSeries.lightMarkers.map((marker) => ({
              index: marker.index,
              color: 'rgba(159, 176, 190, 0.25)',
              lineWidth: 1
            }))
          ]
        },
        yearBoundaryMarkers: {
          color: '#8c8c8c',
          textColor: '#8a8a8a',
          lineWidth: 1,
          edgeLabels: {
            start: performanceSeries.labels[0] || '',
            end: performanceSeries.labels[performanceSeries.labels.length - 1] || '',
            color: '#8a8a8a'
          },
          secondaryGroups: performanceSeries.periodBoundaryGroups,
          groups: performanceSeries.yearBoundaryGroups
        }
      }
    }), [performanceSeries]);

    const selectedPositionHistorySeries = React.useMemo(() => {
      const historyRows = (Array.isArray(selectedPositionPayload && selectedPositionPayload.history)
        ? selectedPositionPayload.history
        : [])
        .map((item) => ({
          date: item && item.date ? String(item.date) : '',
          price: parseNullableFiniteNumber(item && item.price),
          pe: parseNullableFiniteNumber(item && item.pe),
          eps: parseNullableFiniteNumber(item && item.eps),
          priceToFcf: parseNullableFiniteNumber(item && (item.priceToFCF != null ? item.priceToFCF : item.PriceToFCF)),
          priceToFcfExSbc: parseNullableFiniteNumber(item && (item.priceToFCFExSBC != null ? item.priceToFCFExSBC : item.PriceToFCFExSBC))
        }))
        .filter((item) => item.date && Number.isFinite(item.price))
        .sort((left, right) => toComparableDateValue(left.date).localeCompare(toComparableDateValue(right.date)));

      if (historyRows.length === 0) {
        return {
          labels: [],
          prices: [],
          peValues: [],
          periodBoundaryGroups: [],
          yearBoundaryGroups: [],
          latest: null
        };
      }

      const boundaryGroups = buildTimeBoundaryGroups(historyRows);

      return {
        labels: historyRows.map((item) => formatDisplayDate(item.date)),
        prices: historyRows.map((item) => item.price),
        peValues: historyRows.map((item) => (Number.isFinite(item.pe) ? item.pe : null)),
        pfcfValues: historyRows.map((item) => (Number.isFinite(item.priceToFcf) ? item.priceToFcf : null)),
        pfcfExSbcValues: historyRows.map((item) => (Number.isFinite(item.priceToFcfExSbc) ? item.priceToFcfExSbc : null)),
        periodBoundaryGroups: boundaryGroups.periodBoundaryGroups,
        yearBoundaryGroups: boundaryGroups.yearBoundaryGroups,
        latest: historyRows[historyRows.length - 1],
        historyRows
      };
    }, [selectedPositionPayload]);

    const selectedPositionAnnotations = React.useMemo(() => {
      const positionCurrency = selectedPositionPayload && selectedPositionPayload.currency
        ? String(selectedPositionPayload.currency).toUpperCase()
        : null;
      const positionCurrencySymbol = positionCurrency ? getCurrencySymbol(positionCurrency) : '';
      const primaryCur = primaryCurrency ? String(primaryCurrency).toUpperCase() : null;
      const primaryCurrencySymbol = primaryCur ? getCurrencySymbol(primaryCur) : '';

      const txRows = (Array.isArray(selectedPositionPayload && selectedPositionPayload.stockTransactions)
        ? selectedPositionPayload.stockTransactions
        : [])
        .map((row) => ({
          date: row && row.date ? String(row.date) : '',
          eventId: Number(row && (row.eventId != null ? row.eventId : row.EventId)),
          adjustedQuantity: Number(row && row.adjustedQuantity),
          adjustedPrice: Number(row && row.adjustedPrice),
          amount: Number(row && (row.amount != null ? row.amount : row.Amount)),
          currency: row && (row.currency || row.Currency)
            ? String(row.currency || row.Currency).toUpperCase()
            : null
        }))
        .filter((row) => row.date);

      const historyRows = selectedPositionHistorySeries.historyRows || [];
      if (txRows.length === 0 || historyRows.length === 0) {
        return [];
      }

      const lines = [];
      txRows.forEach((tx) => {
        const isBuy = tx.eventId === STOCK_EVENT_IDS.BUY || tx.eventId === STOCK_EVENT_IDS.TRANSFER_IN;
        const isSell = tx.eventId === STOCK_EVENT_IDS.SELL || tx.eventId === STOCK_EVENT_IDS.TRANSFER_OUT || tx.eventId === STOCK_EVENT_IDS.WRITE_OFF;
        if (!isBuy && !isSell) {
          return;
        }

        let index = historyRows.findIndex((row) => row.date >= tx.date);
        if (index < 0) {
          index = historyRows.length - 1;
        }

        const transactionCurrency = tx.currency || positionCurrency;
        const transactionCurrencySymbol = transactionCurrency ? getCurrencySymbol(transactionCurrency) : positionCurrencySymbol;
        const baseLine = `${isBuy ? 'Buy' : 'Sell'} ${formatQuantity(tx.adjustedQuantity)} @ ${transactionCurrencySymbol}${formatAmount(tx.adjustedPrice)}`;
        const amountLine = `Amount: ${primaryCurrencySymbol}${formatAmount(tx.amount)}`;

        lines.push({
          index,
          label: isBuy ? 'B' : 'S',
          color: isBuy ? 'rgba(67, 208, 180, 0.7)' : 'rgba(232, 90, 108, 0.72)',
          tooltip: baseLine,
          tooltipLines: [baseLine, amountLine]
        });
      });

      return lines;
    }, [selectedPositionPayload, selectedPositionHistorySeries, primaryCurrency]);

    const selectedPositionChartDataSets = React.useMemo(() => {
      if (!selectedPositionHistorySeries.prices || selectedPositionHistorySeries.prices.length === 0) {
        return [];
      }

      return [{
        label: 'Price',
        data: selectedPositionHistorySeries.prices,
        borderColor: '#4a9de0',
        backgroundColor: 'rgba(74, 157, 224, 0.2)',
        pointBackgroundColor: '#4a9de0',
        pointBorderColor: '#10212e',
        pointRadius: 0,
        pointHoverRadius: 0,
        pointHitRadius: 10
      }];
    }, [selectedPositionHistorySeries]);

    const selectedPositionValuationChartDataSets = React.useMemo(() => {
      const peValues = Array.isArray(selectedPositionHistorySeries.peValues)
        ? selectedPositionHistorySeries.peValues
        : [];
      const pfcfValues = includeSbcInPfcf
        ? (Array.isArray(selectedPositionHistorySeries.pfcfValues) ? selectedPositionHistorySeries.pfcfValues : [])
        : (Array.isArray(selectedPositionHistorySeries.pfcfExSbcValues) ? selectedPositionHistorySeries.pfcfExSbcValues : []);

      if (peValues.length === 0 && pfcfValues.length === 0) {
        return [];
      }

      const datasets = [];
      if (peValues.length > 0) {
        datasets.push({
          label: 'PE (TTM)',
          data: peValues,
          borderColor: '#f6b73c',
          backgroundColor: 'rgba(246, 183, 60, 0.2)',
          pointBackgroundColor: '#f6b73c',
          pointBorderColor: '#10212e',
          pointRadius: 0,
          pointHoverRadius: 0,
          pointHitRadius: 10,
          spanGaps: false
        });
      }

      if (pfcfValues.length > 0) {
        datasets.push({
          label: includeSbcInPfcf ? 'P/FCF' : 'P/FCF ex SBC',
          data: pfcfValues,
          borderColor: '#3a86c9',
          backgroundColor: 'rgba(58, 134, 201, 0.2)',
          pointBackgroundColor: '#3a86c9',
          pointBorderColor: '#10212e',
          pointRadius: 0,
          pointHoverRadius: 0,
          pointHitRadius: 10,
          spanGaps: false
        });
      }

      return datasets;
    }, [selectedPositionHistorySeries, includeSbcInPfcf]);

    const selectedPositionChartOptions = React.useMemo(() => ({
      layout: {
        padding: {
          left: 12,
          right: 12,
          bottom: 100
        }
      },
      scales: {
        x: {
          ticks: {
            display: false,
            color: '#8a8a8a'
          },
          grid: {
            color: 'rgba(159, 176, 190, 0.08)'
          }
        },
        y: {
          ticks: {
            color: '#8a8a8a',
            callback: (tickValue) => formatAxisAmount(tickValue)
          },
          grid: {
            color: 'rgba(159, 176, 190, 0.12)'
          }
        }
      },
      plugins: {
        legend: {
          display: true,
          labels: {
            color: '#8a8a8a'
          }
        },
        tooltip: {
          callbacks: {
            title: (contexts) => (contexts && contexts.length > 0 && contexts[0].label ? contexts[0].label : ''),
            label: (context) => {
              const positionCurrency = selectedPositionPayload && selectedPositionPayload.currency
                ? String(selectedPositionPayload.currency).toUpperCase()
                : null;
              const positionCurrencySymbol = positionCurrency ? getCurrencySymbol(positionCurrency) : '';
              const labelLines = [`Closing Price: ${positionCurrencySymbol}${formatAmount(context && context.parsed ? context.parsed.y : null)}`];
              const markerLines = selectedPositionAnnotations
                .filter((marker) => marker.index === (context && Number.isFinite(context.dataIndex) ? context.dataIndex : -1))
                .flatMap((marker) => {
                  const lines = Array.isArray(marker && marker.tooltipLines) ? marker.tooltipLines : [marker && marker.tooltip];
                  return lines.filter((text) => typeof text === 'string' && text.trim().length > 0);
                });
              return labelLines.concat(markerLines);
            }
          }
        },
        verticalMarkerLines: {
          lines: selectedPositionAnnotations.map((marker) => ({
            index: marker.index,
            color: marker.color,
            lineWidth: 1.25,
            label: marker.label,
            labelBackgroundColor: marker.color,
            labelTextColor: '#0d141b'
          }))
        },
        yearBoundaryMarkers: {
          color: '#8c8c8c',
          textColor: '#8a8a8a',
          lineWidth: 1,
          rowOffset: 16,
          rowTopGap: 24,
          rowBottomGap: 20,
          labelLift: 0,
          edgeLabels: {
            start: selectedPositionHistorySeries.labels[0] || '',
            end: selectedPositionHistorySeries.labels[selectedPositionHistorySeries.labels.length - 1] || '',
            color: '#8a8a8a'
          },
          secondaryGroups: selectedPositionHistorySeries.periodBoundaryGroups,
          groups: selectedPositionHistorySeries.yearBoundaryGroups
        }
      }
    }), [selectedPositionHistorySeries, selectedPositionAnnotations, selectedPositionPayload]);

    const selectedPositionValuationChartOptions = React.useMemo(() => ({
      layout: {
        padding: {
          left: 12,
          right: 12,
          bottom: 100
        }
      },
      scales: {
        x: {
          ticks: {
            display: false,
            color: '#8a8a8a'
          },
          grid: {
            color: 'rgba(159, 176, 190, 0.08)'
          }
        },
        y: {
          ticks: {
            color: '#8a8a8a',
            callback: (tickValue) => formatAxisAmount(tickValue)
          },
          grid: {
            color: 'rgba(159, 176, 190, 0.12)'
          }
        }
      },
      plugins: {
        legend: {
          display: true,
          labels: {
            color: '#8a8a8a'
          }
        },
        tooltip: {
          callbacks: {
            title: (contexts) => (contexts && contexts.length > 0 && contexts[0].label ? contexts[0].label : ''),
            label: (context) => {
              const datasetLabel = context && context.dataset && context.dataset.label
                ? String(context.dataset.label)
                : 'Metric';
              return `${datasetLabel}: ${formatAmount(context && context.parsed ? context.parsed.y : null)}`;
            },
            footer: (contexts) => {
              const dataIndex = Array.isArray(contexts) && contexts.length > 0 && Number.isFinite(contexts[0].dataIndex)
                ? contexts[0].dataIndex
                : -1;
              const markerLines = selectedPositionAnnotations
                .filter((marker) => marker.index === dataIndex)
                .flatMap((marker) => {
                  const lines = Array.isArray(marker && marker.tooltipLines) ? marker.tooltipLines : [marker && marker.tooltip];
                  return lines.filter((text) => typeof text === 'string' && text.trim().length > 0);
                });
              return markerLines;
            }
          }
        },
        verticalMarkerLines: {
          lines: selectedPositionAnnotations.map((marker) => ({
            index: marker.index,
            color: marker.color,
            lineWidth: 1.25,
            label: marker.label,
            labelBackgroundColor: marker.color,
            labelTextColor: '#0d141b'
          }))
        },
        yearBoundaryMarkers: {
          color: '#8c8c8c',
          textColor: '#8a8a8a',
          lineWidth: 1,
          rowOffset: 16,
          rowTopGap: 24,
          rowBottomGap: 20,
          labelLift: 0,
          edgeLabels: {
            start: selectedPositionHistorySeries.labels[0] || '',
            end: selectedPositionHistorySeries.labels[selectedPositionHistorySeries.labels.length - 1] || '',
            color: '#8a8a8a'
          },
          secondaryGroups: selectedPositionHistorySeries.periodBoundaryGroups,
          groups: selectedPositionHistorySeries.yearBoundaryGroups
        }
      }
    }), [selectedPositionHistorySeries, selectedPositionAnnotations]);

    const selectedPositionMetricValues = React.useMemo(() => {
      const latestHistory = selectedPositionHistorySeries.latest || null;
      const metricCurrency = selectedPositionPayload && selectedPositionPayload.currency
        ? String(selectedPositionPayload.currency).toUpperCase()
        : null;
      const metricCurrencySymbol = metricCurrency ? getCurrencySymbol(metricCurrency) : '';
      const primaryCur = primaryCurrency ? String(primaryCurrency).toUpperCase() : null;
      const primaryCurrencySymbol = primaryCur ? getCurrencySymbol(primaryCur) : '';
      return {
        currencySymbol: metricCurrencySymbol,
        primaryCurrencySymbol,
        totalCost: Number(selectedPositionPayload && selectedPositionPayload.totalCost),
        totalSold: Number(selectedPositionPayload && selectedPositionPayload.totalSold),
        latestPe: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.PE),
        averagePe: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.AvgPE),
        averagePePaid: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.AvgPEPaid),
        averagePeSold: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.AvgPESold),
        entryPe: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.EntryPE),
        latestPriceToFcf: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.PriceToFCF),
        averagePriceToFcf: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.AvgPriceToFCF),
        averagePriceToFcfPaid: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.AvgPriceToFCFPaid),
        averagePriceToFcfSold: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.AvgPriceToFCFSold),
        entryPriceToFcf: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.EntryAvgPriceToFCF),
        latestPriceToFcfExSbc: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.PriceToFCFExSBC),
        averagePriceToFcfExSbc: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.AvgPriceToFCFExSBC),
        averagePriceToFcfPaidExSbc: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.AvgPriceToFCFPaidExSBC),
        averagePriceToFcfSoldExSbc: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.AvgPriceToFCFSoldExSBC),
        entryPriceToFcfExSbc: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.EntryAvgPriceToFCFExSBC),
        latestPrice: latestHistory && Number.isFinite(latestHistory.price) ? latestHistory.price : null,
        averagePricePaid: Number(selectedPositionPayload && selectedPositionPayload.averagePricePaid),
        averagePriceSold: parseNullableFiniteNumber(selectedPositionPayload && selectedPositionPayload.AveragePriceSold),
        entryPrice: Number(selectedPositionPayload && selectedPositionPayload.entryPrice),
        quantity: Number(selectedPositionPayload && selectedPositionPayload.quantity)
      };
    }, [selectedPositionPayload, selectedPositionHistorySeries, primaryCurrency]);

    const selectedPositionPricePocGroups = React.useMemo(() => ([
      {
        key: 'price',
        title: 'Price Metrics',
        metrics: [
          {
            key: 'entry',
            label: 'Entry Price',
            value: Number.isFinite(selectedPositionMetricValues.entryPrice)
              ? `${selectedPositionMetricValues.currencySymbol}${formatAmount(selectedPositionMetricValues.entryPrice)}`
              : '-'
          },
          {
            key: 'avgPaid',
            label: 'Avg Price Paid',
            value: Number.isFinite(selectedPositionMetricValues.averagePricePaid)
              ? `${selectedPositionMetricValues.currencySymbol}${formatAmount(selectedPositionMetricValues.averagePricePaid)}`
              : '-'
          },
          {
            key: 'avgSold',
            label: 'Avg Price Sold',
            value: Number.isFinite(selectedPositionMetricValues.averagePriceSold)
              ? `${selectedPositionMetricValues.currencySymbol}${formatAmount(selectedPositionMetricValues.averagePriceSold)}`
              : '-'
          },
          {
            key: 'latest',
            label: 'Latest Price',
            value: Number.isFinite(selectedPositionMetricValues.latestPrice)
              ? `${selectedPositionMetricValues.currencySymbol}${formatAmount(selectedPositionMetricValues.latestPrice)}`
              : '-'
          }
        ]
      },
      {
        key: 'value-gains',
        title: 'Value & Gains',
        metrics: [
          { key: 'value', label: 'Value', value: '...' },
          { key: 'gains', label: 'Gains', value: '...' },
          { key: 'twr', label: 'TWR', value: '...' },
          { key: 'mwr', label: 'MWR', value: '...' }
        ]
      }
    ]), [selectedPositionMetricValues]);

    const selectedPositionFinancialSeries = React.useMemo(() => {
      const financialRows = (Array.isArray(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.financials)
        ? selectedPositionFinancialsPayload.financials
        : [])
        .map((item) => ({
          date: item && ((item.Date != null && item.Date !== '') ? item.Date : item.date)
            ? String((item.Date != null && item.Date !== '') ? item.Date : item.date)
            : '',
          roce: parseNullableFiniteNumber(item && ((item.Roce != null && item.Roce !== '') ? item.Roce : item.roce)),
          netProfitMargin: parseNullableFiniteNumber(item && ((item.NetProfitMargin != null && item.NetProfitMargin !== '')
            ? item.NetProfitMargin
            : item.netProfitMargin)),
          netProfitMarginTtm: parseNullableFiniteNumber(item && ((item.NetProfitMarginTTM != null && item.NetProfitMarginTTM !== '')
            ? item.NetProfitMarginTTM
            : item.netProfitMarginTTM))
        }))
        .filter((item) => item.date)
        .sort((left, right) => toComparableDateValue(left.date).localeCompare(toComparableDateValue(right.date)));

      const stockTransactionDates = (Array.isArray(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.stockTransactions)
        ? selectedPositionFinancialsPayload.stockTransactions
        : [])
        .map((row) => {
          const dateValue = row && ((row.date != null && row.date !== '') ? row.date : row.Date);
          return dateValue ? String(dateValue) : '';
        })
        .filter((dateValue) => dateValue);

      const earliestTransactionDate = stockTransactionDates.length > 0
        ? stockTransactionDates.reduce((earliest, current) => (current < earliest ? current : earliest), stockTransactionDates[0])
        : null;
      const latestFinancialDate = financialRows.length > 0 ? financialRows[financialRows.length - 1].date : null;

      const tenYearFloorDate = (() => {
        if (!latestFinancialDate) {
          return null;
        }

        const parsedLatestDate = new Date(`${latestFinancialDate}T00:00:00.000Z`);
        if (!Number.isFinite(parsedLatestDate.getTime())) {
          return null;
        }

        parsedLatestDate.setUTCFullYear(parsedLatestDate.getUTCFullYear() - 10);
        return parsedLatestDate.toISOString().slice(0, 10);
      })();

      const startDateFloor = (() => {
        if (!tenYearFloorDate) {
          return earliestTransactionDate || null;
        }

        if (earliestTransactionDate && earliestTransactionDate < tenYearFloorDate) {
          return earliestTransactionDate;
        }

        return tenYearFloorDate;
      })();

      const firstWindowIndex = startDateFloor
        ? financialRows.findIndex((item) => item.date >= startDateFloor)
        : 0;
      const windowedFinancialRows = firstWindowIndex > 0
        ? financialRows.slice(firstWindowIndex)
        : financialRows;

      const firstQualityIndex = windowedFinancialRows.findIndex((item) => (
        Number.isFinite(item.roce) || Number.isFinite(item.netProfitMarginTtm)
      ));
      const trimmedFinancialRows = firstQualityIndex > 0
        ? windowedFinancialRows.slice(firstQualityIndex)
        : windowedFinancialRows;

      if (trimmedFinancialRows.length === 0) {
        return {
          labels: [],
          roceValues: [],
          netProfitMarginValues: [],
          netProfitMarginTtmValues: [],
          periodBoundaryGroups: [],
          yearBoundaryGroups: [],
          historyRows: []
        };
      }

      const boundaryGroups = buildTimeBoundaryGroups(trimmedFinancialRows, {
        boundaryGraceDays: QUARTERLY_YEARLY_BOUNDARY_GRACE_DAYS
      });
      return {
        labels: trimmedFinancialRows.map((item) => formatDisplayDate(item.date)),
        roceValues: trimmedFinancialRows.map((item) => (Number.isFinite(item.roce) ? item.roce : null)),
        netProfitMarginValues: trimmedFinancialRows.map((item) => (Number.isFinite(item.netProfitMargin) ? item.netProfitMargin : null)),
        netProfitMarginTtmValues: trimmedFinancialRows.map((item) => (Number.isFinite(item.netProfitMarginTtm) ? item.netProfitMarginTtm : null)),
        periodBoundaryGroups: boundaryGroups.periodBoundaryGroups,
        yearBoundaryGroups: boundaryGroups.yearBoundaryGroups,
        historyRows: trimmedFinancialRows
      };
    }, [selectedPositionFinancialsPayload]);

    const selectedPositionFinancialAnnotations = React.useMemo(() => {
      const positionCurrency = selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.currency
        ? String(selectedPositionFinancialsPayload.currency).toUpperCase()
        : null;
      const positionCurrencySymbol = positionCurrency ? getCurrencySymbol(positionCurrency) : '';
      const primaryCur = primaryCurrency ? String(primaryCurrency).toUpperCase() : null;
      const primaryCurrencySymbol = primaryCur ? getCurrencySymbol(primaryCur) : '';

      const txRows = (Array.isArray(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.stockTransactions)
        ? selectedPositionFinancialsPayload.stockTransactions
        : [])
        .map((row) => ({
          date: row && row.date ? String(row.date) : '',
          eventId: Number(row && (row.eventId != null ? row.eventId : row.EventId)),
          adjustedQuantity: Number(row && row.adjustedQuantity),
          adjustedPrice: Number(row && row.adjustedPrice),
          amount: Number(row && (row.amount != null ? row.amount : row.Amount)),
          currency: row && (row.currency || row.Currency)
            ? String(row.currency || row.Currency).toUpperCase()
            : null
        }))
        .filter((row) => row.date);

      const historyRows = selectedPositionFinancialSeries.historyRows || [];
      if (txRows.length === 0 || historyRows.length === 0) {
        return [];
      }

      const lines = [];
      txRows.forEach((tx) => {
        const isBuy = tx.eventId === STOCK_EVENT_IDS.BUY || tx.eventId === STOCK_EVENT_IDS.TRANSFER_IN;
        const isSell = tx.eventId === STOCK_EVENT_IDS.SELL || tx.eventId === STOCK_EVENT_IDS.TRANSFER_OUT || tx.eventId === STOCK_EVENT_IDS.WRITE_OFF;
        if (!isBuy && !isSell) {
          return;
        }

        let index = historyRows.findIndex((row) => row.date >= tx.date);
        if (index < 0) {
          index = historyRows.length - 1;
        }

        const transactionCurrency = tx.currency || positionCurrency;
        const transactionCurrencySymbol = transactionCurrency ? getCurrencySymbol(transactionCurrency) : positionCurrencySymbol;
        const transactionDateLabel = formatDisplayDate(tx.date);
        const baseLine = `${isBuy ? 'Buy' : 'Sell'} ${formatQuantity(tx.adjustedQuantity)} @ ${transactionCurrencySymbol}${formatAmount(tx.adjustedPrice)} on ${transactionDateLabel}`;
        const amountLine = `Amount: ${primaryCurrencySymbol}${formatAmount(tx.amount)}`;

        lines.push({
          index,
          label: isBuy ? 'B' : 'S',
          color: isBuy ? 'rgba(67, 208, 180, 0.7)' : 'rgba(232, 90, 108, 0.72)',
          tooltip: baseLine,
          tooltipLines: [baseLine, amountLine]
        });
      });

      return lines;
    }, [selectedPositionFinancialsPayload, selectedPositionFinancialSeries, primaryCurrency]);

    const selectedPositionQualityChartDataSets = React.useMemo(() => {
      const roceValues = Array.isArray(selectedPositionFinancialSeries.roceValues)
        ? selectedPositionFinancialSeries.roceValues
        : [];
      const nonTtmMarginValues = Array.isArray(selectedPositionFinancialSeries.netProfitMarginValues)
        ? selectedPositionFinancialSeries.netProfitMarginValues
        : [];
      const ttmMarginValues = Array.isArray(selectedPositionFinancialSeries.netProfitMarginTtmValues)
        ? selectedPositionFinancialSeries.netProfitMarginTtmValues
        : [];
      const netProfitMarginValues = includeTtmMarginInQuality ? ttmMarginValues : nonTtmMarginValues;

      if (roceValues.length === 0 && netProfitMarginValues.length === 0) {
        return [];
      }

      return [
        {
          type: 'bar',
          label: 'ROCE',
          data: roceValues,
          backgroundColor: 'rgba(246, 183, 60, 0.65)',
          borderColor: '#f6b73c',
          borderWidth: 1,
          pointRadius: 0
        },
        {
          type: 'bar',
          label: includeTtmMarginInQuality ? 'Net Profit Margin (TTM)' : 'Net Profit Margin',
          data: netProfitMarginValues,
          backgroundColor: 'rgba(67, 208, 180, 0.65)',
          borderColor: '#43d0b4',
          borderWidth: 1,
          pointRadius: 0
        }
      ];
    }, [selectedPositionFinancialSeries, includeTtmMarginInQuality]);

    const selectedPositionQualityChartOptions = React.useMemo(() => ({
      layout: {
        padding: {
          left: 12,
          right: 12,
          bottom: 100
        }
      },
      scales: {
        x: {
          ticks: {
            display: false,
            color: '#8a8a8a'
          },
          grid: {
            color: 'rgba(159, 176, 190, 0.08)'
          }
        },
        y: {
          ticks: {
            color: '#8a8a8a',
            callback: (tickValue) => formatPercent(Number(tickValue))
          },
          grid: {
            color: 'rgba(159, 176, 190, 0.12)'
          }
        }
      },
      plugins: {
        legend: {
          display: true,
          labels: {
            color: '#8a8a8a'
          }
        },
        tooltip: {
          callbacks: {
            title: (contexts) => (contexts && contexts.length > 0 && contexts[0].label ? contexts[0].label : ''),
            label: (context) => {
              const datasetLabel = context && context.dataset && context.dataset.label
                ? String(context.dataset.label)
                : 'Metric';
              return `${datasetLabel}: ${formatPercent(context && context.parsed ? context.parsed.y : null)}`;
            },
            footer: (contexts) => {
              const dataIndex = Array.isArray(contexts) && contexts.length > 0 && Number.isFinite(contexts[0].dataIndex)
                ? contexts[0].dataIndex
                : -1;
              const markerLines = selectedPositionFinancialAnnotations
                .filter((marker) => marker.index === dataIndex)
                .flatMap((marker) => {
                  const lines = Array.isArray(marker && marker.tooltipLines) ? marker.tooltipLines : [marker && marker.tooltip];
                  return lines.filter((text) => typeof text === 'string' && text.trim().length > 0);
                });
              return markerLines;
            }
          }
        },
        verticalMarkerLines: {
          lines: selectedPositionFinancialAnnotations.map((marker) => ({
            index: marker.index,
            color: '#ffffff',
            lineWidth: 0.5,
            label: marker.label,
            labelBackgroundColor: marker.color,
            labelTextColor: '#0d141b'
          }))
        },
        yearBoundaryMarkers: {
          color: '#8c8c8c',
          textColor: '#8a8a8a',
          lineWidth: 1,
          boundaryAlignDatasetIndex: 1,
          boundaryAlignEdge: 'right',
          rowOffset: 16,
          rowTopGap: 24,
          rowBottomGap: 20,
          labelLift: 0,
          edgeLabels: {
            start: selectedPositionFinancialSeries.labels[0] || '',
            end: selectedPositionFinancialSeries.labels[selectedPositionFinancialSeries.labels.length - 1] || '',
            color: '#8a8a8a'
          },
          secondaryGroups: selectedPositionFinancialSeries.periodBoundaryGroups,
          groups: selectedPositionFinancialSeries.yearBoundaryGroups
        }
      }
    }), [selectedPositionFinancialSeries, selectedPositionFinancialAnnotations]);

    const selectedPositionQualityMetricValues = React.useMemo(() => ({
      threeYearAvgRoce: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['3YearAvgRoce']),
      fiveYearAvgRoce: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['5YearAvgRoce']),
      tenYearAvgRoce: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['10YearAvgRoce']),
      threeYearAvgNetProfitMargin: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['3YearAvgNetProfitMargin']),
      fiveYearAvgNetProfitMargin: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['5YearAvgNetProfitMargin']),
      tenYearAvgNetProfitMargin: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['10YearAvgNetProfitMargin']),
      threeYearAvgNetProfitMarginTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['3YearAvgNetProfitMarginTTM']),
      fiveYearAvgNetProfitMarginTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['5YearAvgNetProfitMarginTTM']),
      tenYearAvgNetProfitMarginTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['10YearAvgNetProfitMarginTTM'])
    }), [selectedPositionFinancialsPayload]);

    const selectedPositionQualityMarginMetrics = React.useMemo(() => ({
      threeYear: includeTtmMarginInQuality
        ? selectedPositionQualityMetricValues.threeYearAvgNetProfitMarginTtm
        : selectedPositionQualityMetricValues.threeYearAvgNetProfitMargin,
      fiveYear: includeTtmMarginInQuality
        ? selectedPositionQualityMetricValues.fiveYearAvgNetProfitMarginTtm
        : selectedPositionQualityMetricValues.fiveYearAvgNetProfitMargin,
      tenYear: includeTtmMarginInQuality
        ? selectedPositionQualityMetricValues.tenYearAvgNetProfitMarginTtm
        : selectedPositionQualityMetricValues.tenYearAvgNetProfitMargin
    }), [selectedPositionQualityMetricValues, includeTtmMarginInQuality]);

    const selectedPositionQualityPocGroups = React.useMemo(() => ([
      {
        key: 'roce',
        title: 'Average ROCE',
        metrics: [
          { key: '10y', label: '10Y Avg', value: selectedPositionQualityMetricValues.tenYearAvgRoce },
          { key: '5y', label: '5Y Avg', value: selectedPositionQualityMetricValues.fiveYearAvgRoce },
          { key: '3y', label: '3Y Avg', value: selectedPositionQualityMetricValues.threeYearAvgRoce }
        ]
      },
      {
        key: 'margin',
        title: includeTtmMarginInQuality ? 'Average Net Profit Margin (TTM)' : 'Average Net Profit Margin',
        metrics: [
          { key: '10y', label: '10Y Avg', value: selectedPositionQualityMarginMetrics.tenYear },
          { key: '5y', label: '5Y Avg', value: selectedPositionQualityMarginMetrics.fiveYear },
          { key: '3y', label: '3Y Avg', value: selectedPositionQualityMarginMetrics.threeYear }
        ]
      }
    ]), [selectedPositionQualityMetricValues, selectedPositionQualityMarginMetrics, includeTtmMarginInQuality]);

    const hasSelectedPositionQualityPocMetrics = React.useMemo(() => selectedPositionQualityPocGroups.some((group) => (
      group.metrics.some((metric) => Number.isFinite(metric.value))
    )), [selectedPositionQualityPocGroups]);

    const selectedPositionValuationPocGroups = React.useMemo(() => ([
      {
        key: 'pfcf',
        title: 'Price to FCF (P/FCF)',
        metrics: [
          {
            key: 'entry',
            label: 'Entry P/FCF',
            value: includeSbcInPfcf
              ? selectedPositionMetricValues.entryPriceToFcf
              : selectedPositionMetricValues.entryPriceToFcfExSbc
          },
          {
            key: 'avgPaid',
            label: 'Avg P/FCF Paid',
            value: includeSbcInPfcf
              ? selectedPositionMetricValues.averagePriceToFcfPaid
              : selectedPositionMetricValues.averagePriceToFcfPaidExSbc
          },
          {
            key: 'avg',
            label: 'Avg P/FCF',
            value: includeSbcInPfcf
              ? selectedPositionMetricValues.averagePriceToFcf
              : selectedPositionMetricValues.averagePriceToFcfExSbc
          },
          {
            key: 'latest',
            label: 'Latest P/FCF',
            value: includeSbcInPfcf
              ? selectedPositionMetricValues.latestPriceToFcf
              : selectedPositionMetricValues.latestPriceToFcfExSbc
          }
        ]
      },
      {
        key: 'pe',
        title: 'Price to Earnings (PE)',
        metrics: [
          { key: 'entry', label: 'Entry PE', value: selectedPositionMetricValues.entryPe },
          { key: 'avgPaid', label: 'Avg PE Paid', value: selectedPositionMetricValues.averagePePaid },
          { key: 'avg', label: 'Avg PE', value: selectedPositionMetricValues.averagePe },
          { key: 'latest', label: 'Latest PE', value: selectedPositionMetricValues.latestPe }
        ]
      }
    ]), [selectedPositionMetricValues, includeSbcInPfcf]);

    const hasSelectedPositionValuationPocMetrics = React.useMemo(() => selectedPositionValuationPocGroups.some((group) => (
      group.metrics.some((metric) => Number.isFinite(metric.value))
    )), [selectedPositionValuationPocGroups]);

    const selectedPositionGrowthSeries = React.useMemo(() => {
      const financialRows = (Array.isArray(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.financials)
        ? selectedPositionFinancialsPayload.financials
        : [])
        .map((item) => ({
          date: item && ((item.Date != null && item.Date !== '') ? item.Date : item.date)
            ? String((item.Date != null && item.Date !== '') ? item.Date : item.date)
            : '',
          revenue: parseNullableFiniteNumber(item && ((item.Revenue != null && item.Revenue !== '')
            ? item.Revenue
            : item.revenue)),
          netIncome: parseNullableFiniteNumber(item && ((item.NetIncome != null && item.NetIncome !== '')
            ? item.NetIncome
            : item.netIncome)),
          revenueTtm: parseNullableFiniteNumber(item && ((item.RevenueTTM != null && item.RevenueTTM !== '')
            ? item.RevenueTTM
            : item.revenueTTM)),
          netIncomeTtm: parseNullableFiniteNumber(item && ((item.NetIncomeTTM != null && item.NetIncomeTTM !== '')
            ? item.NetIncomeTTM
            : item.netIncomeTTM))
        }))
        .filter((item) => item.date)
        .sort((left, right) => toComparableDateValue(left.date).localeCompare(toComparableDateValue(right.date)));

      const stockTransactionDates = (Array.isArray(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.stockTransactions)
        ? selectedPositionFinancialsPayload.stockTransactions
        : [])
        .map((row) => {
          const dateValue = row && ((row.date != null && row.date !== '') ? row.date : row.Date);
          return dateValue ? String(dateValue) : '';
        })
        .filter((dateValue) => dateValue);

      const earliestTransactionDate = stockTransactionDates.length > 0
        ? stockTransactionDates.reduce((earliest, current) => (current < earliest ? current : earliest), stockTransactionDates[0])
        : null;
      const latestFinancialDate = financialRows.length > 0 ? financialRows[financialRows.length - 1].date : null;

      const tenYearFloorDate = (() => {
        if (!latestFinancialDate) {
          return null;
        }

        const parsedLatestDate = new Date(`${latestFinancialDate}T00:00:00.000Z`);
        if (!Number.isFinite(parsedLatestDate.getTime())) {
          return null;
        }

        parsedLatestDate.setUTCFullYear(parsedLatestDate.getUTCFullYear() - 10);
        return parsedLatestDate.toISOString().slice(0, 10);
      })();

      const startDateFloor = (() => {
        if (!tenYearFloorDate) {
          return earliestTransactionDate || null;
        }

        if (earliestTransactionDate && earliestTransactionDate < tenYearFloorDate) {
          return earliestTransactionDate;
        }

        return tenYearFloorDate;
      })();

      const firstWindowIndex = startDateFloor
        ? financialRows.findIndex((item) => item.date >= startDateFloor)
        : 0;
      const windowedFinancialRows = firstWindowIndex > 0
        ? financialRows.slice(firstWindowIndex)
        : financialRows;

      const firstGrowthIndex = windowedFinancialRows.findIndex((item) => (
        Number.isFinite(item.revenue)
        || Number.isFinite(item.netIncome)
        || Number.isFinite(item.revenueTtm)
        || Number.isFinite(item.netIncomeTtm)
      ));
      const trimmedFinancialRows = firstGrowthIndex > 0
        ? windowedFinancialRows.slice(firstGrowthIndex)
        : windowedFinancialRows;

      if (trimmedFinancialRows.length === 0) {
        return {
          labels: [],
          revenueValues: [],
          netIncomeValues: [],
          revenueTtmValues: [],
          netIncomeTtmValues: [],
          periodBoundaryGroups: [],
          yearBoundaryGroups: [],
          historyRows: []
        };
      }

      const boundaryGroups = buildTimeBoundaryGroups(trimmedFinancialRows, {
        boundaryGraceDays: QUARTERLY_YEARLY_BOUNDARY_GRACE_DAYS
      });
      return {
        labels: trimmedFinancialRows.map((item) => formatDisplayDate(item.date)),
        revenueValues: trimmedFinancialRows.map((item) => (Number.isFinite(item.revenue) ? item.revenue : null)),
        netIncomeValues: trimmedFinancialRows.map((item) => (Number.isFinite(item.netIncome) ? item.netIncome : null)),
        revenueTtmValues: trimmedFinancialRows.map((item) => (Number.isFinite(item.revenueTtm) ? item.revenueTtm : null)),
        netIncomeTtmValues: trimmedFinancialRows.map((item) => (Number.isFinite(item.netIncomeTtm) ? item.netIncomeTtm : null)),
        periodBoundaryGroups: boundaryGroups.periodBoundaryGroups,
        yearBoundaryGroups: boundaryGroups.yearBoundaryGroups,
        historyRows: trimmedFinancialRows
      };
    }, [selectedPositionFinancialsPayload]);

    const selectedPositionGrowthAnnotations = React.useMemo(() => {
      const positionCurrency = selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.currency
        ? String(selectedPositionFinancialsPayload.currency).toUpperCase()
        : null;
      const positionCurrencySymbol = positionCurrency ? getCurrencySymbol(positionCurrency) : '';
      const primaryCur = primaryCurrency ? String(primaryCurrency).toUpperCase() : null;
      const primaryCurrencySymbol = primaryCur ? getCurrencySymbol(primaryCur) : '';

      const txRows = (Array.isArray(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.stockTransactions)
        ? selectedPositionFinancialsPayload.stockTransactions
        : [])
        .map((row) => ({
          date: row && row.date ? String(row.date) : '',
          eventId: Number(row && (row.eventId != null ? row.eventId : row.EventId)),
          adjustedQuantity: Number(row && row.adjustedQuantity),
          adjustedPrice: Number(row && row.adjustedPrice),
          amount: Number(row && (row.amount != null ? row.amount : row.Amount)),
          currency: row && (row.currency || row.Currency)
            ? String(row.currency || row.Currency).toUpperCase()
            : null
        }))
        .filter((row) => row.date);

      const historyRows = selectedPositionGrowthSeries.historyRows || [];
      if (txRows.length === 0 || historyRows.length === 0) {
        return [];
      }

      const lines = [];
      txRows.forEach((tx) => {
        const isBuy = tx.eventId === STOCK_EVENT_IDS.BUY || tx.eventId === STOCK_EVENT_IDS.TRANSFER_IN;
        const isSell = tx.eventId === STOCK_EVENT_IDS.SELL || tx.eventId === STOCK_EVENT_IDS.TRANSFER_OUT || tx.eventId === STOCK_EVENT_IDS.WRITE_OFF;
        if (!isBuy && !isSell) {
          return;
        }

        let index = historyRows.findIndex((row) => row.date >= tx.date);
        if (index < 0) {
          index = historyRows.length - 1;
        }

        const transactionCurrency = tx.currency || positionCurrency;
        const transactionCurrencySymbol = transactionCurrency ? getCurrencySymbol(transactionCurrency) : positionCurrencySymbol;
        const transactionDateLabel = formatDisplayDate(tx.date);
        const baseLine = `${isBuy ? 'Buy' : 'Sell'} ${formatQuantity(tx.adjustedQuantity)} @ ${transactionCurrencySymbol}${formatAmount(tx.adjustedPrice)} on ${transactionDateLabel}`;
        const amountLine = `Amount: ${primaryCurrencySymbol}${formatAmount(tx.amount)}`;

        lines.push({
          index,
          label: isBuy ? 'B' : 'S',
          color: isBuy ? 'rgba(67, 208, 180, 0.7)' : 'rgba(232, 90, 108, 0.72)',
          tooltip: baseLine,
          tooltipLines: [baseLine, amountLine]
        });
      });

      return lines;
    }, [selectedPositionFinancialsPayload, selectedPositionGrowthSeries, primaryCurrency]);

    const selectedPositionGrowthMetricValues = React.useMemo(() => ({
      yoyRevenue: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.YoYRevenueGrowth),
      yoyRevenueTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.YoYRevenueGrowthTTM),
      revenueCagr3y: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['3YearRevenueCagr']),
      revenueCagr3yTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['3YearRevenueCagrTTM']),
      revenueCagr5y: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['5YearRevenueCagr']),
      revenueCagr5yTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['5YearRevenueCagrTTM']),
      revenueCagr10y: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['10YearRevenueCagr']),
      revenueCagr10yTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['10YearRevenueCagrTTM']),
      yoyIncome: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.YoYIncomeGrowth),
      yoyIncomeTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.YoYIncomeGrowthTTM),
      incomeCagr3y: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['3YearIncomeCagr']),
      incomeCagr3yTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['3YearIncomeCagrTTM']),
      incomeCagr5y: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['5YearIncomeCagr']),
      incomeCagr5yTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['5YearIncomeCagrTTM']),
      incomeCagr10y: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['10YearIncomeCagr']),
      incomeCagr10yTtm: parseNullableFiniteNumber(selectedPositionFinancialsPayload && selectedPositionFinancialsPayload['10YearIncomeCagrTTM'])
    }), [selectedPositionFinancialsPayload]);

    const selectedPositionGrowthDisplayedMetricValues = React.useMemo(() => ({
      yoyRevenue: includeTtmInGrowth ? selectedPositionGrowthMetricValues.yoyRevenueTtm : selectedPositionGrowthMetricValues.yoyRevenue,
      revenueCagr3y: includeTtmInGrowth ? selectedPositionGrowthMetricValues.revenueCagr3yTtm : selectedPositionGrowthMetricValues.revenueCagr3y,
      revenueCagr5y: includeTtmInGrowth ? selectedPositionGrowthMetricValues.revenueCagr5yTtm : selectedPositionGrowthMetricValues.revenueCagr5y,
      revenueCagr10y: includeTtmInGrowth ? selectedPositionGrowthMetricValues.revenueCagr10yTtm : selectedPositionGrowthMetricValues.revenueCagr10y,
      yoyIncome: includeTtmInGrowth ? selectedPositionGrowthMetricValues.yoyIncomeTtm : selectedPositionGrowthMetricValues.yoyIncome,
      incomeCagr3y: includeTtmInGrowth ? selectedPositionGrowthMetricValues.incomeCagr3yTtm : selectedPositionGrowthMetricValues.incomeCagr3y,
      incomeCagr5y: includeTtmInGrowth ? selectedPositionGrowthMetricValues.incomeCagr5yTtm : selectedPositionGrowthMetricValues.incomeCagr5y,
      incomeCagr10y: includeTtmInGrowth ? selectedPositionGrowthMetricValues.incomeCagr10yTtm : selectedPositionGrowthMetricValues.incomeCagr10y
    }), [selectedPositionGrowthMetricValues, includeTtmInGrowth]);

    const selectedPositionGrowthPocGroups = React.useMemo(() => ([
      {
        key: 'revenue',
        title: 'Revenue Growth',
        metrics: [
          { key: '10y', label: '10Y CAGR', value: selectedPositionGrowthDisplayedMetricValues.revenueCagr10y },
          { key: '5y', label: '5Y CAGR', value: selectedPositionGrowthDisplayedMetricValues.revenueCagr5y },
          { key: '3y', label: '3Y CAGR', value: selectedPositionGrowthDisplayedMetricValues.revenueCagr3y },
          { key: 'yoy', label: 'YoY', value: selectedPositionGrowthDisplayedMetricValues.yoyRevenue }
        ]
      },
      {
        key: 'income',
        title: 'Income Growth',
        metrics: [
          { key: '10y', label: '10Y CAGR', value: selectedPositionGrowthDisplayedMetricValues.incomeCagr10y },
          { key: '5y', label: '5Y CAGR', value: selectedPositionGrowthDisplayedMetricValues.incomeCagr5y },
          { key: '3y', label: '3Y CAGR', value: selectedPositionGrowthDisplayedMetricValues.incomeCagr3y },
          { key: 'yoy', label: 'YoY', value: selectedPositionGrowthDisplayedMetricValues.yoyIncome }
        ]
      }
    ]), [selectedPositionGrowthDisplayedMetricValues]);

    const hasSelectedPositionGrowthPocMetrics = React.useMemo(() => selectedPositionGrowthPocGroups.some((group) => (
      group.metrics.some((metric) => Number.isFinite(metric.value))
    )), [selectedPositionGrowthPocGroups]);

    const selectedPositionGrowthChartDataSets = React.useMemo(() => {
      if (selectedPositionGrowthSeries.labels.length === 0) {
        return [];
      }

      const revenueValues = includeTtmInGrowth
        ? selectedPositionGrowthSeries.revenueTtmValues
        : selectedPositionGrowthSeries.revenueValues;
      const netIncomeValues = includeTtmInGrowth
        ? selectedPositionGrowthSeries.netIncomeTtmValues
        : selectedPositionGrowthSeries.netIncomeValues;

      return [
        {
          type: 'bar',
          label: includeTtmInGrowth ? 'Revenue TTM' : 'Revenue',
          data: revenueValues,
          backgroundColor: 'rgba(74, 157, 224, 0.65)',
          borderColor: '#4a9de0',
          borderWidth: 1,
          pointRadius: 0
        },
        {
          type: 'bar',
          label: includeTtmInGrowth ? 'Net Income TTM' : 'Net Income',
          data: netIncomeValues,
          backgroundColor: 'rgba(232, 90, 108, 0.62)',
          borderColor: '#e85a6c',
          borderWidth: 1,
          pointRadius: 0
        }
      ];
    }, [selectedPositionGrowthSeries, includeTtmInGrowth]);

    const selectedPositionGrowthChartOptions = React.useMemo(() => ({
      layout: {
        padding: {
          left: 12,
          right: 12,
          bottom: 100
        }
      },
      scales: {
        x: {
          ticks: {
            display: false,
            color: '#8a8a8a'
          },
          grid: {
            color: 'rgba(159, 176, 190, 0.08)'
          }
        },
        y: {
          ticks: {
            color: '#8a8a8a',
            callback: (tickValue) => formatAxisAmount(tickValue)
          },
          grid: {
            color: 'rgba(159, 176, 190, 0.12)'
          }
        }
      },
      plugins: {
        legend: {
          display: true,
          labels: {
            color: '#8a8a8a'
          }
        },
        tooltip: {
          callbacks: {
            title: (contexts) => (contexts && contexts.length > 0 && contexts[0].label ? contexts[0].label : ''),
            label: (context) => {
              const positionCurrency = selectedPositionFinancialsPayload && selectedPositionFinancialsPayload.currency
                ? String(selectedPositionFinancialsPayload.currency).toUpperCase()
                : null;
              const positionCurrencySymbol = positionCurrency ? getCurrencySymbol(positionCurrency) : '';
              const datasetLabel = context && context.dataset && context.dataset.label
                ? String(context.dataset.label)
                : 'Metric';
              return `${datasetLabel}: ${positionCurrencySymbol}${formatAmount(context && context.parsed ? context.parsed.y : null)}`;
            },
            footer: (contexts) => {
              const dataIndex = Array.isArray(contexts) && contexts.length > 0 && Number.isFinite(contexts[0].dataIndex)
                ? contexts[0].dataIndex
                : -1;
              const markerLines = selectedPositionGrowthAnnotations
                .filter((marker) => marker.index === dataIndex)
                .flatMap((marker) => {
                  const lines = Array.isArray(marker && marker.tooltipLines) ? marker.tooltipLines : [marker && marker.tooltip];
                  return lines.filter((text) => typeof text === 'string' && text.trim().length > 0);
                });
              return markerLines;
            }
          }
        },
        verticalMarkerLines: {
          lines: selectedPositionGrowthAnnotations.map((marker) => ({
            index: marker.index,
            color: '#ffffff',
            lineWidth: 0.5,
            label: marker.label,
            labelBackgroundColor: marker.color,
            labelTextColor: '#0d141b'
          }))
        },
        yearBoundaryMarkers: {
          color: '#8c8c8c',
          textColor: '#8a8a8a',
          lineWidth: 1,
          boundaryAlignDatasetIndex: 1,
          boundaryAlignEdge: 'right',
          rowOffset: 16,
          rowTopGap: 24,
          rowBottomGap: 20,
          labelLift: 0,
          edgeLabels: {
            start: selectedPositionGrowthSeries.labels[0] || '',
            end: selectedPositionGrowthSeries.labels[selectedPositionGrowthSeries.labels.length - 1] || '',
            color: '#8a8a8a'
          },
          secondaryGroups: selectedPositionGrowthSeries.periodBoundaryGroups,
          groups: selectedPositionGrowthSeries.yearBoundaryGroups
        }
      }
    }), [selectedPositionGrowthSeries, selectedPositionGrowthAnnotations, selectedPositionFinancialsPayload]);

    const isQualityOrGrowthPanel = selectedPositionPanel === 'quality' || selectedPositionPanel === 'growth';
    const isSelectedPositionPanelLoading = isQualityOrGrowthPanel
      ? isLoadingPositionFinancials
      : isLoadingPositionDetail;
    const selectedPositionPanelStatus = isQualityOrGrowthPanel
      ? positionFinancialsStatus
      : positionDetailStatus;
    const mwrMetricLabel = absoluteMWR ? 'Absolute MWR' : 'Annualized MWR';
    const benchmarkMwrMetricLabel = absoluteMWR ? 'Absolute Benchmark MWR' : 'Annualized Benchmark MWR';

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

    return (
      <div className="content auth-shell" style={{ marginTop: '0.5rem' }}>
        {typeof BlockingScreenLoader === 'function' ? (
          <BlockingScreenLoader
            isActive={isSubmitting || isLoadingEdit}
            title={isLoadingEdit ? 'Loading Portfolio' : 'Saving Portfolio'}
            message="Please wait."
          />
        ) : null}

        <section className="panel-card portfolios-panel-card">
          <div className="portfolios-header-row">
            <h1 className="hero-title portfolios-panel-title" style={{ fontSize: 'clamp(1.8rem, 2.4vw, 2.4rem)' }}>Portfolios</h1>
            <div className="portfolios-header-controls">
              <div className="portfolios-actions-row portfolios-header-actions-row">
                <button type="button" className="secondary-btn" onClick={handleAdd}>Add</button>
                {canEdit ? <button type="button" className="secondary-btn" onClick={handleEdit}>Edit</button> : null}
              </div>
              <div className="portfolios-header-selection">
                <PortfolioSelectFieldSafe
                  portfolios={portfolios}
                  value={selectedPortfolio}
                  onChange={handlePortfolioSelectionChange}
                  includeAll
                  allLabel="All Portfolios"
                  allValue="All"
                  label="Portfolio Selection"
                  showLabel={false}
                />
              </div>
            </div>
          </div>

          {modeSubtitle ? <p className="muted portfolios-mode-subtitle">{modeSubtitle}</p> : null}

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

          {(mode === FORM_MODES.add || mode === FORM_MODES.edit) ? (
            <form className="form-grid" style={{ marginTop: '1rem' }} onSubmit={handleSavePortfolio}>
              {isLoadingEdit ? <p className="muted">Loading selected portfolio...</p> : null}

              <div className={`field ${errors.name ? 'invalid' : ''}`}>
                <label htmlFor="portfolioName">Name</label>
                <input
                  id="portfolioName"
                  name="name"
                  type="text"
                  maxLength="100"
                  value={formValues.name}
                  onChange={handleFormChange}
                  placeholder="My Core Portfolio"
                  disabled={isLoadingEdit || isSubmitting}
                />
                {errors.name ? <span className="error-message">{errors.name}</span> : null}
              </div>

              <div className={`field ${errors.baseCurrency ? 'invalid' : ''}`}>
                <label htmlFor="portfolioBaseCurrency">Base Currency</label>
                <select
                  id="portfolioBaseCurrency"
                  name="baseCurrency"
                  value={formValues.baseCurrency}
                  onChange={handleFormChange}
                  disabled={isLoadingEdit || isSubmitting}
                >
                  {BASE_CURRENCY_OPTIONS.map((currencyCode) => (
                    <option key={currencyCode} value={currencyCode}>{currencyCode}</option>
                  ))}
                </select>
                {errors.baseCurrency ? <span className="error-message">{errors.baseCurrency}</span> : null}
              </div>

              <div className={`field ${errors.benchmarkIndexId ? 'invalid' : ''}`}>
                <label htmlFor="portfolioBenchmarkIndex">Benchmark Index</label>
                <select
                  id="portfolioBenchmarkIndex"
                  name="benchmarkIndexId"
                  value={formValues.benchmarkIndexId}
                  onChange={handleFormChange}
                  disabled={isLoadingEdit || isSubmitting}
                >
                  {BENCHMARK_INDEX_OPTIONS.map((option) => (
                    <option key={option.id} value={String(option.id)}>{option.text}</option>
                  ))}
                </select>
                {errors.benchmarkIndexId ? <span className="error-message">{errors.benchmarkIndexId}</span> : null}
              </div>

              <div className="field portfolio-cash-position-field">
                <label htmlFor="portfolioCashPosition" className="performance-absolute-iir-toggle portfolio-cash-position-toggle">
                  <input
                    id="portfolioCashPosition"
                    name="cashPosition"
                    type="checkbox"
                    checked={Boolean(formValues.cashPosition)}
                    onChange={handleFormChange}
                    disabled={isLoadingEdit || isSubmitting}
                  />
                  <span>Calculate Cash Position</span>
                </label>
                <ul className="portfolio-cash-position-notes muted">
                  <li>Set this to false if you don&apos;t have all the cash transactions for your portfolio.</li>
                  <li>Missing cash transactions will cause Valuations to be calculated incorrectly.</li>
                </ul>
              </div>

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

              <div className="hero-actions upload-hero-actions">
                <button
                  type="button"
                  className="secondary-btn"
                  onClick={handleCancelForm}
                  disabled={isSubmitting || isLoadingEdit}
                >
                  Cancel
                </button>
                <button className="primary-btn" type="submit" disabled={isSubmitting || isLoadingEdit}>
                  {isSubmitting ? 'Working...' : 'Save Portfolio'}
                </button>
              </div>
            </form>
          ) : null}
        </section>

        <React.Fragment>
            <section className="panel-card">
              <div className="valuations-header-row performance-header-row">
                <h3 style={{ marginTop: 0, marginBottom: 0 }}>Performance</h3>
                <DateRangeSelector
                  className="performance-range-segmented"
                  ariaLabel="Performance date range"
                  value={selectedDateRange}
                  onChange={handleDateRangeChange}
                />
                <div className="performance-header-actions">
                  <label className="performance-absolute-iir-toggle">
                    <input
                      type="checkbox"
                      checked={absoluteMWR}
                      onChange={(event) => setAbsoluteMWR(event.target.checked)}
                    />
                    <span>Absolute MWR</span>
                  </label>
                  <div className="performance-absolute-iir-help">
                    <button
                      type="button"
                      className="performance-absolute-iir-help-btn"
                      aria-label="About MWR calculations"
                      aria-expanded={isAbsoluteMWRHelpOpen}
                      onClick={() => setIsAbsoluteMWRHelpOpen((isOpen) => !isOpen)}
                    >?
                    </button>
                    {isAbsoluteMWRHelpOpen ? (
                      <div className="performance-absolute-iir-help-panel" role="tooltip">
                        <strong>MWR</strong>
                        <p>Money-Weighted Return (MWR) is a similar concept to CAGR but it can account for portfolio cashflows (deposits and withdrawals) over the time.</p>
                        <p>CAGR is used when there is a single initial investment.</p>                        
                        <p>Annualized MWR expresses the return as a yearly rate. Absolute MWR expresses the total return for the selected period.</p>
                        <p>While annualizing returns is excellent for comparing long-term investments, it can be highly misleading for periods less than 1 year.</p>                                       
                        <p>The YTD date range option defaults to Absolute MWR because it is always a period shorter than one year, while the longer ranges default to Annualized MWR.</p>
                        <p>MWR is the same as Internal Rate of Return (IIR).</p>
                      </div>
                    ) : null}
                  </div>
                </div>
              </div>

              {isLoadingPerformance ? (
                <div className="performance-loading-wrap">
                  <p className="muted inline-loading-indicator performance-loading-indicator" role="status" aria-live="polite" aria-label="Loading Performance. Please wait..." style={{ marginBottom: 0 }}>
                    <span className="screen-loading-spinner" aria-hidden="true" />
                    <span>Loading Performance. Please wait...</span>
                  </p>
                </div>
              ) : null}

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

              {!isLoadingPerformance && !performanceStatus ? (
                performanceSeries.values.length === 0 ? (
                  <p className="muted" style={{ marginBottom: 0 }}>
                    No Portfolio Valuation Data available. Click Valuations to Add or Upload Valuation Data.
                  </p>
                ) : (
                  <div className="performance-chart-shell">
                    <div className="performance-chart-metrics">
                      {(() => {
                        const isSingle = (Array.isArray(portfolios) && portfolios.length === 1) || (selectedPortfolio && String(selectedPortfolio).toLowerCase() !== 'all');
                        const label = `${isSingle ? 'Portfolio' : 'Portfolios'} vs BM`;
                        const amount = performanceSeries.latest && performanceSeries.latest.totalVsBM;
                        const pct = performanceSeries.latest && performanceSeries.latest.totalVsBMPercent;

                        return (
                          <div className="performance-chart-metric performance-chart-metric-align-right">
                            <span className="muted">{label}</span>
                            <strong className={getTotalVsBMClassName(amount)}>
                              {getCurrencySymbol(primaryCurrency)}{formatAmount(amount)}
                              {' '}
                              <span className={getTotalVsBMClassName(pct, true)}>
                                ({formatPercent(pct)})
                              </span>
                            </strong>
                          </div>
                        );
                      })()}
                      <div className="performance-chart-metric" title={mwrMetricLabel}>
                        <span className="muted">MWR</span>
                        <strong className={getMwrComparisonClassName(performanceSeries.latest && performanceSeries.latest.mwr, performanceSeries.latest && performanceSeries.latest.benchmarkMwr)}>
                          {formatPercent(performanceSeries.latest && performanceSeries.latest.mwr)}
                        </strong>
                      </div>
                      <div className="performance-chart-metric" title={benchmarkMwrMetricLabel}>
                        <span className="muted">BM MWR</span>
                        <strong>{formatPercent(performanceSeries.latest && performanceSeries.latest.benchmarkMwr)}</strong>
                      </div>
                      <div className="performance-chart-metric">
                        <span className="muted">Latest Value</span>
                        <strong>{getCurrencySymbol(primaryCurrency)}{formatAmount(performanceSeries.latest && performanceSeries.latest.total)}</strong>
                      </div>
                    </div>

                    <div className="performance-chart-canvas-wrap">
                      <LineChart
                        className="performance-chart-canvas"
                        ariaLabel={(Array.isArray(portfolios) && portfolios.length === 1) || (selectedPortfolio && String(selectedPortfolio).toLowerCase() !== 'all')
                          ? 'Portfolio valuation trend line'
                          : 'Portfolios valuation trend line'
                        }
                        labels={performanceSeries.labels}
                        datasets={performanceChartDataSets}
                        options={performanceChartOptions}
                        height="364px"
                      />
                    </div>
                  </div>
                )
              ) : null}
              
            </section>

            <section className="panel-card">
              {!selectedPositionIsin ? (
                <div className="valuations-header-row performance-header-row">
                  <h3>Positions</h3>
                  <div className="positions-header-actions">
                    {positionsView === 'closed' ? (
                      <button
                        type="button"
                        className="secondary-btn"
                        onClick={() => {
                          setPositionsView('open');
                          setSelectedPositionIsin(null);
                        }}
                      >
                        Open Positions
                      </button>
                    ) : (
                      <React.Fragment>
                        {positionsView === 'pie' ? null : (
                          <label className="performance-absolute-iir-toggle">
                            <input
                              type="checkbox"
                              checked={isPositionsDetailedView}
                              onChange={(event) => setIsPositionsDetailedView(event.target.checked)}
                            />
                            <span>Detailed View</span>
                          </label>
                        )}
                        <button
                          type="button"
                          className="secondary-btn"
                          onClick={() => {
                            setPositionsView(positionsView === 'pie' ? 'open' : 'pie');
                            setSelectedPositionIsin(null);
                          }}
                        >
                          {positionsView === 'pie' ? 'Open Positions' : 'Pie'}
                        </button>
                        <button
                          type="button"
                          className="secondary-btn"
                          onClick={() => {
                            setPositionsView('closed');
                            setSelectedPositionIsin(null);
                          }}
                        >
                          Closed Positions
                        </button>
                      </React.Fragment>
                    )}
                    <label className="positions-date-field">
                      <span className="sr-only">Positions date</span>
                      <input
                        type="date"
                        value={positionsDate}
                        onChange={(event) => setPositionsDate(event.target.value)}
                        aria-label="Positions date"
                      />
                    </label>
                  </div>
                </div>
              ) : null}

              {isLoadingPositions ? (
                <div className="performance-loading-wrap">
                  <p
                    className="muted inline-loading-indicator performance-loading-indicator"
                    role="status"
                    aria-live="polite"
                    aria-label="Loading Positions. Please wait..."
                    style={{ marginBottom: 0 }}
                  >
                    <span className="screen-loading-spinner" aria-hidden="true" />
                    <span>Loading Positions. Please wait...</span>
                  </p>
                </div>
              ) : null}

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

              {!isLoadingPositions && !positionsStatus ? (
                selectedPositionIsin ? (
                  <div>
                    <div className="valuations-header-row performance-header-row" style={{ marginBottom: '12px' }}>
                      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '10px' }}>
                        <img
                          src={`https://img.logo.dev/isin/${(selectedPositionPayload && selectedPositionPayload.isin) || selectedPositionIsin}?token=pk_KdHU8UyIT7moWKjSECXodA`}
                          alt={`${(selectedPositionPayload && (selectedPositionPayload.name || selectedPositionPayload.isin)) || selectedPositionIsin} logo`}
                          style={{ width: '28px', height: '28px', objectFit: 'contain', flex: '0 0 auto' }}
                        />
                        <div>
                          <h4 style={{ margin: 0 }}>{(selectedPositionPayload && (selectedPositionPayload.name || selectedPositionPayload.isin)) || selectedPositionIsin}</h4>
                          <div className="muted" style={{ fontSize: '0.9em' }}>
                            {(selectedPositionPayload && selectedPositionPayload.isin) || selectedPositionIsin}
                            {(selectedPositionPayload && selectedPositionPayload.ticker) ? ` | ${selectedPositionPayload.ticker}` : ''}
                          </div>
                        </div>
                      </div>
                      <PositionPanelSelector
                        className="performance-range-segmented"
                        ariaLabel="Position section"
                        value={selectedPositionPanel}
                        onChange={setSelectedPositionPanel}
                      />
                      <div className="positions-header-actions">
                        <button
                          type="button"
                          className="secondary-btn"
                          onClick={() => {
                            setSelectedPositionIsin(null);
                            setSelectedPositionPayload(null);
                            setSelectedPositionFinancialsPayload(null);
                            setIncludeTtmMarginInQuality(true);
                            setIncludeTtmInGrowth(true);
                            setSelectedPositionPanel('price');
                          }}
                        >
                          Back To Positions
                        </button>
                        <label className="positions-date-field">
                          <span className="sr-only">Positions date</span>
                          <input
                            type="date"
                            value={positionsDate}
                            onChange={(event) => setPositionsDate(event.target.value)}
                            aria-label="Positions date"
                          />
                        </label>
                      </div>
                    </div>

                    {isSelectedPositionPanelLoading ? (
                      <div className="performance-loading-wrap">
                        <p className="muted inline-loading-indicator performance-loading-indicator" role="status" aria-live="polite" style={{ marginBottom: 0 }}>
                          <span className="screen-loading-spinner" aria-hidden="true" />
                          <span>Loading Position. Please wait...</span>
                        </p>
                      </div>
                    ) : null}

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

                    {!isSelectedPositionPanelLoading && !selectedPositionPanelStatus ? (
                      selectedPositionPanel === 'price' ? (
                        <div>
                          <div className="performance-chart-metrics" style={{ marginBottom: '10px' }}>
                            <div className="performance-chart-metric-group-right">
                              <div className="performance-chart-metric performance-chart-metric-content-right">
                                <span className="muted">Total Cost</span>
                                <strong>{selectedPositionMetricValues.primaryCurrencySymbol}{formatAmount(selectedPositionMetricValues.totalCost)}</strong>
                              </div>
                              {Number.isFinite(selectedPositionMetricValues.totalSold)
                                && selectedPositionMetricValues.totalSold !== 0 ? (
                                <div className="performance-chart-metric performance-chart-metric-content-right">
                                  <span className="muted">Total Sold</span>
                                  <strong>{selectedPositionMetricValues.primaryCurrencySymbol}{formatAmount(selectedPositionMetricValues.totalSold)}</strong>
                                </div>
                              ) : null}
                              <div className="performance-chart-metric performance-chart-metric-content-right">
                                <span className="muted">Shares</span>
                                <strong>{formatQuantity(selectedPositionMetricValues.quantity)}</strong>
                              </div>
                            </div>
                          </div>

                          {selectedPositionChartDataSets.length === 0 ? (
                            <p className="muted" style={{ marginBottom: 0 }}>No price history found for this position.</p>
                          ) : (
                            <div className="performance-chart-canvas-wrap">
                              <LineChart
                                className="performance-chart-canvas"
                                ariaLabel="Position price trend line"
                                labels={selectedPositionHistorySeries.labels}
                                datasets={selectedPositionChartDataSets}
                                options={selectedPositionChartOptions}
                                height="430px"
                              />

                              <div className="growth-metric-poc" aria-label="Price metrics proof of concept display">
                                {selectedPositionPricePocGroups.map((group) => (
                                  <section key={group.key} className="growth-metric-poc-group">
                                    <h4 className="growth-metric-poc-title">{group.title}</h4>
                                    <div className="growth-metric-poc-items">
                                      {group.metrics.map((metric) => (
                                        <div key={`${group.key}-${metric.key}`} className="growth-metric-poc-item">
                                          <span className="muted">{metric.label}</span>
                                          <strong>{metric.value}</strong>
                                        </div>
                                      ))}
                                    </div>
                                  </section>
                                ))}
                              </div>
                            </div>
                          )}
                        </div>
                      ) : selectedPositionPanel === 'valuation' ? (
                        <div>
                          <div className="performance-chart-metrics" style={{ marginBottom: '10px' }}>
                            <label
                              className="performance-absolute-iir-toggle"
                              title="Include Stock Based Compensation in FCF"
                              style={{ marginRight: 'auto' }}
                            >
                              <input
                                type="checkbox"
                                checked={includeSbcInPfcf}
                                onChange={(event) => setIncludeSbcInPfcf(event.target.checked)}
                              />
                              <span>Include SBC</span>
                            </label>
                            <div className="performance-chart-metric-group-right">
                              <div className="performance-chart-metric performance-chart-metric-content-right">
                                <span className="muted">Shares</span>
                                <strong>{formatQuantity(selectedPositionMetricValues.quantity)}</strong>
                              </div>
                            </div>
                          </div>

                          {selectedPositionValuationChartDataSets.length === 0 ? (
                            <p className="muted" style={{ marginBottom: 0 }}>No PE history found for this position.</p>
                          ) : (
                            <div className="performance-chart-canvas-wrap">
                              <LineChart
                                className="performance-chart-canvas"
                                ariaLabel="Position valuation PE trend line"
                                labels={selectedPositionHistorySeries.labels}
                                datasets={selectedPositionValuationChartDataSets}
                                options={selectedPositionValuationChartOptions}
                                height="430px"
                              />

                              {hasSelectedPositionValuationPocMetrics ? (
                                <div className="growth-metric-poc" aria-label="Valuation metrics proof of concept display">
                                  {selectedPositionValuationPocGroups.map((group) => (
                                    <section key={group.key} className="growth-metric-poc-group">
                                      <h4 className="growth-metric-poc-title">{group.title}</h4>
                                      <div className="growth-metric-poc-items">
                                        {group.metrics.map((metric) => (
                                          <div key={`${group.key}-${metric.key}`} className="growth-metric-poc-item">
                                            <span className="muted">{metric.label}</span>
                                            <strong>{formatRatioMetric(metric.value)}</strong>
                                          </div>
                                        ))}
                                      </div>
                                    </section>
                                  ))}
                                </div>
                              ) : null}
                            </div>
                          )}
                        </div>
                      ) : selectedPositionPanel === 'quality' ? (
                        <div>
                          <div className="performance-chart-metrics" style={{ marginBottom: '10px' }}>
                            <label
                              className="performance-absolute-iir-toggle"
                              title="Use TTM Net Profit Margin"
                              style={{ marginRight: 'auto' }}
                            >
                              <input
                                type="checkbox"
                                checked={includeTtmMarginInQuality}
                                onChange={(event) => setIncludeTtmMarginInQuality(event.target.checked)}
                              />
                              <span>TTM Margin</span>
                            </label>
                            <div className="performance-chart-metric-group-right">
                              <div className="performance-chart-metric performance-chart-metric-content-right">
                                <span className="muted">Shares</span>
                                <strong>{formatQuantity(selectedPositionMetricValues.quantity)}</strong>
                              </div>
                            </div>
                          </div>

                          {selectedPositionQualityChartDataSets.length === 0 ? (
                            <p className="muted" style={{ marginBottom: 0 }}>No quality financial history found for this position.</p>
                          ) : (
                            <div className="performance-chart-canvas-wrap">
                              <LineChart
                                className="performance-chart-canvas"
                                ariaLabel="Position quality ROCE and net margin trend"
                                labels={selectedPositionFinancialSeries.labels}
                                datasets={selectedPositionQualityChartDataSets}
                                options={selectedPositionQualityChartOptions}
                                height="430px"
                              />

                              {hasSelectedPositionQualityPocMetrics ? (
                                <div className="growth-metric-poc quality-metric-poc" aria-label="Quality metrics proof of concept display">
                                  {selectedPositionQualityPocGroups.map((group) => (
                                    <section key={group.key} className="growth-metric-poc-group">
                                      <h4 className="growth-metric-poc-title">{group.title}</h4>
                                      <div className="growth-metric-poc-items">
                                        {group.metrics.map((metric) => (
                                          <div key={`${group.key}-${metric.key}`} className="growth-metric-poc-item">
                                            <span className="muted">{metric.label}</span>
                                            <strong>{Number.isFinite(metric.value) ? formatPercent(metric.value) : '-'}</strong>
                                          </div>
                                        ))}
                                      </div>
                                    </section>
                                  ))}
                                </div>
                              ) : null}
                            </div>
                          )}
                        </div>
                      ) : selectedPositionPanel === 'growth' ? (
                        <div>
                          <div className="performance-chart-metrics" style={{ marginBottom: '10px' }}>
                            <label
                              className="performance-absolute-iir-toggle"
                              title="Use TTM Revenue and Net Income"
                              style={{ marginRight: 'auto' }}
                            >
                              <input
                                type="checkbox"
                                checked={includeTtmInGrowth}
                                onChange={(event) => setIncludeTtmInGrowth(event.target.checked)}
                              />
                              <span>TTM</span>
                            </label>
                            <div className="performance-chart-metric-group-right">
                              <div className="performance-chart-metric performance-chart-metric-content-right">
                                <span className="muted">Shares</span>
                                <strong>{formatQuantity(selectedPositionMetricValues.quantity)}</strong>
                              </div>
                            </div>
                          </div>

                          {selectedPositionGrowthChartDataSets.length === 0 ? (
                            <p className="muted" style={{ marginBottom: 0 }}>No growth financial data found for this position.</p>
                          ) : (
                            <div className="performance-chart-canvas-wrap">
                              <LineChart
                                className="performance-chart-canvas"
                                ariaLabel="Position growth revenue and net income chart"
                                labels={selectedPositionGrowthSeries.labels}
                                datasets={selectedPositionGrowthChartDataSets}
                                options={selectedPositionGrowthChartOptions}
                                height="430px"
                              />

                              {hasSelectedPositionGrowthPocMetrics ? (
                                <div className="growth-metric-poc" aria-label="Growth metrics proof of concept display">
                                  {selectedPositionGrowthPocGroups.map((group) => (
                                    <section key={group.key} className="growth-metric-poc-group">
                                      <h4 className="growth-metric-poc-title">{group.title}</h4>
                                      <div className="growth-metric-poc-items">
                                        {group.metrics.map((metric) => (
                                          <div key={`${group.key}-${metric.key}`} className="growth-metric-poc-item">
                                            <span className="muted">{metric.label}</span>
                                            <strong>{Number.isFinite(metric.value) ? formatPercent(metric.value) : '-'}</strong>
                                          </div>
                                        ))}
                                      </div>
                                    </section>
                                  ))}
                                </div>
                              ) : null}
                            </div>
                          )}
                        </div>
                      ) : (
                        <p className="muted" style={{ marginBottom: 0 }}>
                          {selectedPositionPanel.charAt(0).toUpperCase() + selectedPositionPanel.slice(1)} panel is coming soon.
                        </p>
                      )
                    ) : null}
                  </div>
                ) : positions.length === 0 ? (
                  <p className="muted" style={{ marginBottom: 0 }}>
                    {positionsView === 'closed' ? 'No closed positions found.' : 'No open positions found.'}
                  </p>
                ) : positionsView === 'pie' ? (
                  <div className="positions-chart-wrap">
                    <PieChart
                      className="positions-pie-canvas"
                      ariaLabel="Open positions by quantity"
                      labels={positionsPieData.labels}
                      values={positionsPieData.values}
                      height="546px"
                    />
                  </div>
                ) : (
                  <div className="valuations-grid-wrap">
                    <table className="valuations-table">
                      <thead>
                        <tr>
                            <th className="positions-cell-index">#</th>
                            <th className="positions-cell-logo" aria-label="Logo" />
                            <th>Position</th>
                            {positionsView === 'closed' ? (
                              <React.Fragment>
                                {renderPositionsPriceHeader()}
                                <th className="valuations-cell-number">
                                  <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-end', lineHeight: 1.2 }}>
                                    <span title="TTM PE Ratio">PE</span>
                                    <span className="muted" style={{ fontSize: '0.78em' }} title="TTM Earning Per Share">EPS</span>
                                  </span>
                                </th>
                                <th className="valuations-cell-number">
                                  <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-end', lineHeight: 1.2 }}>
                                    <span title="Return on Capital Employed">ROCE</span>
                                    <span className="muted" style={{ fontSize: '0.78em' }} title="Net Profit Margin (TTM)">Net Margin</span>
                                  </span>
                                </th>
                                <th className="valuations-cell-number">Gains</th>
                                <th className="valuations-cell-number">Date Closed</th>
                              </React.Fragment>
                            ) : (
                                <React.Fragment>
                                <th className="valuations-cell-number">Qty</th>
                                {renderPositionsPriceHeader()}
                                <th className="valuations-cell-number">
                                  <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-end', lineHeight: 1.2 }}>
                                    <span title="TTM PE Ratio">PE</span>
                                    <span className="muted" style={{ fontSize: '0.78em' }} title="TTM Earning Per Share">EPS</span>
                                  </span>
                                </th>
                                <th className="valuations-cell-number">
                                  <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-end', lineHeight: 1.2 }}>
                                    <span title="Return on Capital Employed">ROCE</span>
                                    <span className="muted" style={{ fontSize: '0.78em' }} title="Net Profit Margin (TTM)">Net Margin</span>
                                  </span>
                                </th>
                                <th className="valuations-cell-number">Value</th>
                                <th className="valuations-cell-number">Gains</th>
                                <th className="valuations-cell-number">Weight
                                {isPositionsDetailedView ? (() => {
                                  const anyDifferent = (Array.isArray(positions) ? positions : []).some((p) => {
                                    const a = Number(p && p.assetsPercent);
                                    const e = Number(p && p.equityPercent);
                                    if (!Number.isFinite(a) || !Number.isFinite(e)) return false;
                                    return Math.abs(a - e) > 0.0000001;
                                  });

                                  if (!anyDifferent) return null;

                                  return (
                                    <span className="performance-absolute-iir-help">
                                      <button
                                        type="button"
                                        className="performance-absolute-iir-help-btn"
                                        aria-label="Asset vs Equity %"
                                        aria-expanded={isPercentHelpOpen}
                                        onClick={() => setIsPercentHelpOpen((v) => !v)}
                                        style={{ marginLeft: '0.45rem' }}
                                      >?
                                      </button>
                                      {isPercentHelpOpen ? (
                                        <div className="performance-absolute-iir-help-panel" role="tooltip">
                                          <strong>Assets vs Equity</strong>
                                          <p>Assets and Equity are different when leverage is used. i.e. when the cash balance is negative</p>
                                          <p>The value to the left is the % of Total Assets</p>
                                          <p>The value to the right is the % of Total Equity</p>
                                          <p>Accounting Equation: Assets = Liabilities + Equity.</p>
                                        </div>
                                      ) : null}
                                    </span>
                                  );
                                })() : null}
                              </th>
                            </React.Fragment>
                          )}
                        </tr>
                      </thead>
                      <tbody>
                        {orderedPositions.map((position, index) => {
                          const canOpenDetail = !(position && position.isCash)
                            && !!(position && position.isin)
                            && String(position.isin).trim().length > 0;

                          return (
                          <tr
                            key={position.isin || index}
                            className={`${position && position.isCash ? 'positions-row-cash' : ''}${canOpenDetail ? ' positions-row-clickable' : ''}`.trim()}
                            onClick={canOpenDetail ? () => {
                              setSelectedPositionIsin(String(position.isin).trim());
                              setSelectedPositionPanel('price');
                            } : undefined}
                            style={canOpenDetail ? { cursor: 'pointer' } : undefined}
                          >
                            <td className="positions-cell-index">{position.isCash ? '' : (index + 1)}</td>
                            <td className="positions-cell-logo">
                              {position && position.isCash ? null : (position && position.isin ? (
                                <img
                                  src={`https://img.logo.dev/isin/${position.isin}?token=pk_KdHU8UyIT7moWKjSECXodA`}
                                  alt={`${position.name || position.isin} logo`}
                                  style={{ width: '28px', height: '28px', objectFit: 'contain' }}
                                />
                              ) : null)}
                            </td>
                            <td>
                              {position.name || position.isin}
                              {!position.isCash && (position.isin || position.ticker) ? (
                                <div className="muted" style={{ fontSize: '0.9em' }}>{(position.isin || '') + ((position.isin && position.ticker) ? ' | ' : '') + (position.ticker || '')}</div>
                              ) : null}
                            </td>
                            {positionsView === 'closed' ? (
                              <React.Fragment>
                                <td
                                  className="valuations-cell-number"
                                  title={`Closing price on ${formatDisplayDate(position.priceDate) || '-'}`}
                                >
                                  {(() => {
                                    const rowCurrency = position.currency ? String(position.currency).toUpperCase() : null;
                                    const showPrice = position.price != null && Number.isFinite(Number(position.price));
                                    const showAvg = position.avgPricePaid != null && Number.isFinite(Number(position.avgPricePaid));

                                    if (!showPrice && !showAvg) return position.isCash ? '' : '-';

                                    const priceValue = showPrice
                                      ? (<span>{getCurrencySymbol(rowCurrency)}{formatAmount(position.price)}</span>)
                                      : null;
                                    const avgValue = showAvg
                                      ? (<div className="muted" style={{ fontSize: '0.8em' }} title="Average Price Paid">{getCurrencySymbol(rowCurrency)}{formatAmount(position.avgPricePaid)}</div>)
                                      : null;

                                    if (priceValue && avgValue) {
                                      return (<React.Fragment>{priceValue}{avgValue}</React.Fragment>);
                                    }

                                    if (priceValue || avgValue) {
                                      return position.isCash ? (priceValue || avgValue || '') : (priceValue || avgValue || '-');
                                    }

                                    return position.isCash ? '' : '-';
                                  })()}
                                </td>
                                <td className="valuations-cell-number">
                                  {(() => {
                                    if (position && position.isCash) {
                                      return '';
                                    }

                                    const rawPe = position && position.PE;
                                    const rawEps = position && position.EPS;
                                    const pe = rawPe == null || rawPe === '' ? null : Number(rawPe);
                                    const eps = rawEps == null || rawEps === '' ? null : Number(rawEps);
                                    const showPe = pe != null && Number.isFinite(pe);
                                    const showEps = eps != null && Number.isFinite(eps);

                                    if (!showPe && !showEps) {
                                      return '-';
                                    }

                                    return (
                                      <React.Fragment>
                                        {showPe ? <span title="TTM PE Ratio">{formatAmount(pe)}</span> : '-'}
                                        {showEps ? (
                                          <div
                                            className="muted"
                                            style={{ fontSize: '0.8em' }}
                                            title="TTM Earning Per Share"
                                          >
                                            {formatAmount(eps)}
                                          </div>
                                        ) : null}
                                      </React.Fragment>
                                    );
                                  })()}
                                </td>
                                <td className="valuations-cell-number">{renderPositionRoceCell(position)}</td>
                                <td className="valuations-cell-number">
                                  {renderPositionGainsCell(position, { showRealized: false })}
                                </td>
                                <td className="valuations-cell-number">{formatDisplayDate(position.dateClosed)}</td>
                              </React.Fragment>
                            ) : (
                              <React.Fragment>
                                <td className="valuations-cell-number">{position.isCash ? '' : formatQuantity(position.quantity)}</td>
                                <td
                                  className="valuations-cell-number"
                                  title={`Closing price on ${formatDisplayDate(position.priceDate) || '-'}`}
                                >
                                  {(() => {
                                    const rowCurrency = position.currency ? String(position.currency).toUpperCase() : null;
                                    const showPrice = position.price != null && Number.isFinite(Number(position.price));
                                    const showAvg = position.avgPricePaid != null && Number.isFinite(Number(position.avgPricePaid));

                                    if (!showPrice && !showAvg) return position.isCash ? '' : '-';

                                    const priceValue = showPrice
                                      ? (<span>{getCurrencySymbol(rowCurrency)}{formatAmount(position.price)}</span>)
                                      : null;
                                    const avgValue = showAvg
                                      ? (<div className="muted" style={{ fontSize: '0.8em' }} title="Average Price Paid">{getCurrencySymbol(rowCurrency)}{formatAmount(position.avgPricePaid)}</div>)
                                      : null;

                                    if (priceValue && avgValue) {
                                      return (<React.Fragment>{priceValue}{avgValue}</React.Fragment>);
                                    }

                                    if (priceValue || avgValue) {
                                      return position.isCash ? (priceValue || avgValue || '') : (priceValue || avgValue || '-');
                                    }

                                    return position.isCash ? '' : '-';
                                  })()}
                                </td>
                                <td className="valuations-cell-number">
                                  {(() => {
                                    if (position && position.isCash) {
                                      return '';
                                    }

                                    const rawPe = position && position.PE;
                                    const rawEps = position && position.EPS;
                                    const pe = rawPe == null || rawPe === '' ? null : Number(rawPe);
                                    const eps = rawEps == null || rawEps === '' ? null : Number(rawEps);
                                    const showPe = pe != null && Number.isFinite(pe);
                                    const showEps = eps != null && Number.isFinite(eps);

                                    if (!showPe && !showEps) {
                                      return '-';
                                    }

                                    return (
                                      <React.Fragment>
                                        {showPe ? <span title="TTM PE Ratio">{formatAmount(pe)}</span> : '-'}
                                        {showEps ? (
                                          <div
                                            className="muted"
                                            style={{ fontSize: '0.8em' }}
                                            title="TTM Earning Per Share"
                                          >
                                            {formatAmount(eps)}
                                          </div>
                                        ) : null}
                                      </React.Fragment>
                                    );
                                  })()}
                                </td>
                                <td className="valuations-cell-number">{renderPositionRoceCell(position)}</td>
                                <td className="valuations-cell-number">
                                  {(() => {
                                    const rowCurrency = position.currency ? String(position.currency).toUpperCase() : null;
                                    const primaryCur = primaryCurrency ? String(primaryCurrency).toUpperCase() : null;
                                    const showValue = position.value != null && Number.isFinite(Number(position.value));
                                    const showValueConverted = position.valueConverted != null && Number.isFinite(Number(position.valueConverted));

                                    if (!isPositionsDetailedView) {
                                      if (!showValueConverted) return position.isCash ? '' : '-';
                                      const value = Number(position.valueConverted);
                                      const symbol = primaryCur ? getCurrencySymbol(primaryCur) : '';
                                      if (position.isCash) {
                                        const cls = value < 0 ? 'valuations-total-negative' : (value > 0 ? 'valuations-total-positive' : 'valuations-total-neutral');
                                        return (<strong className={cls}>{symbol}{formatAmount(value)}</strong>);
                                      }
                                      return (<span>{symbol}{formatAmount(value)}</span>);
                                    }

                                    if (!showValue && !showValueConverted) return '-';

                                    const topNumeric = showValueConverted
                                      ? Number(position.valueConverted)
                                      : (showValue ? Number(position.value) : null);
                                    const topCurrency = showValueConverted ? primaryCur : rowCurrency;

                                    const topValue = (() => {
                                      if (!Number.isFinite(topNumeric)) {
                                        return null;
                                      }

                                      if (position.isCash) {
                                        const cls = topNumeric < 0 ? 'valuations-total-negative' : (topNumeric > 0 ? 'valuations-total-positive' : 'valuations-total-neutral');
                                        return (<strong className={cls}>{getCurrencySymbol(topCurrency)}{formatAmount(topNumeric)}</strong>);
                                      }

                                      return (<span>{getCurrencySymbol(topCurrency)}{formatAmount(topNumeric)}</span>);
                                    })();

                                    const bottomValue = (showValue && showValueConverted)
                                      ? (<div className="muted" style={{ fontSize: '0.8em' }}>{getCurrencySymbol(rowCurrency)}{formatAmount(position.value)}</div>)
                                      : null;

                                    if (topValue && bottomValue) {
                                      return (<React.Fragment>{topValue}{bottomValue}</React.Fragment>);
                                    }

                                    if (topValue) {
                                      return topValue;
                                    }

                                    return position.isCash ? '' : '-';
                                  })()}
                                </td>
                                <td className="valuations-cell-number">
                                  {renderPositionGainsCell(position)}
                                </td>
                                <td className="valuations-cell-number">
                                  {(() => {
                                    const a = Number(position && position.assetsPercent);
                                    const e = Number(position && position.equityPercent);

                                    if (!isPositionsDetailedView) {
                                      if (Number.isFinite(e)) {
                                        return formatPercentForPosition(e, position.isCash);
                                      }
                                      return position.isCash ? '' : '-';
                                    }

                                    const almostEqual = Number.isFinite(a) && Number.isFinite(e) && Math.abs(a - e) <= 0.0000001;

                                    if (almostEqual && Number.isFinite(e)) {
                                      return formatPercentForPosition(e, position.isCash);
                                    }

                                    const left = Number.isFinite(a) ? formatPercentForPosition(a, position.isCash) : null;
                                    const right = Number.isFinite(e) ? formatPercentForPosition(e, position.isCash) : null;

                                    if (left && right) {
                                      return (<span>{left} {' | '} {right}</span>);
                                    }

                                    return position.isCash ? '' : (left || right || '-');
                                  })()}
                                </td>
                              </React.Fragment>
                            )}
                          </tr>
                          );
                        })}
                        {positionsView !== 'closed' ? (() => {
                          const portfolioLabel = valuationTotalLabel;
                          const totalEquityValue = Number.isFinite(Number(totalEquity)) ? Number(totalEquity) : null;
                          const totalPeValue = (totalPe != null && Number.isFinite(Number(totalPe)))
                            ? Number(totalPe)
                            : null;
                          const totalRoceValue = (totalRoce != null && Number.isFinite(Number(totalRoce)))
                            ? Number(totalRoce)
                            : null;
                          const totalNetMarginValue = (netMarginTTM != null && Number.isFinite(Number(netMarginTTM)))
                            ? Number(netMarginTTM)
                            : null;
                          const primaryCur = primaryCurrency ? String(primaryCurrency).toUpperCase() : null;

                          const totalRoceClassName = getMetricClassName(totalRoceValue, POSITION_METRIC_THRESHOLDS.roce);
                          const totalNetMarginClassName = getMetricClassName(
                            totalNetMarginValue,
                            POSITION_METRIC_THRESHOLDS.profitMargin
                          );

                          return (
                            <tr className="positions-row-total">
                              <td className="positions-cell-index" />
                              <td className="positions-cell-logo" />
                              <td><strong>{portfolioLabel}</strong></td>
                              <td className="valuations-cell-number" />
                              <td className="valuations-cell-number" />
                              <td className="valuations-cell-number">{totalPeValue != null ? formatAmount(totalPeValue) : '-'}</td>
                              <td className="valuations-cell-number">
                                <div className={totalRoceClassName} title="Return on Capital Employed">{totalRoceValue != null ? formatPercent(totalRoceValue) : '-'}</div>
                                <div className={totalNetMarginClassName} style={{ fontSize: '0.8em' }} title="Net Profit Margin (TTM)">
                                  {totalNetMarginValue != null ? formatPercent(totalNetMarginValue) : '-'}
                                </div>
                              </td>
                              <td className="valuations-cell-number" title="Total Equity">
                                {totalEquityValue != null
                                  ? <strong>{primaryCur ? `${getCurrencySymbol(primaryCur)}${formatAmount(totalEquityValue)}` : formatAmount(totalEquityValue)}</strong>
                                  : ''}
                              </td>
                              <td className="valuations-cell-number" />
                              <td className="valuations-cell-number" />
                            </tr>
                          );
                        })() : null}
                      </tbody>
                    </table>
                    
                  </div>
                )
              ) : null}
              {fxRates && fxRates.length > 0 ? (
                <div className="positions-fx-metrics" style={{ marginTop: '8px', paddingTop: '8px', paddingLeft: '12px', display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', width: '100%' }}>
                  {fxRates.map((r) => (
                    <div key={r.fxPairId || r.pair} style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-end', minWidth: '120px' }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
                        <span className="muted">{r.pair}</span>
                        <strong>{formatAmountFourDecimals(r.rate)}</strong>
                      </div>
                      <div className="muted" style={{ fontSize: '0.8em', textAlign: 'right', marginTop: '4px' }}>{formatDisplayDate(r.rateDate)}</div>
                    </div>
                  ))}

                  <div style={{ flex: 1 }} />

                  {positionsView === 'closed' ? null : (
                    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-end', minWidth: '180px', alignSelf: 'flex-start' }}>
                      {(() => {
                        const a = Number.isFinite(Number(totalAssets)) ? Number(totalAssets) : null;
                        const e = Number.isFinite(Number(totalEquity)) ? Number(totalEquity) : null;
                        const tolerance = 0.0001;
                        const assetsEqual = (a != null && e != null) ? (Math.abs(a - e) <= tolerance) : false;

                        return (
                          <React.Fragment>
                            {!assetsEqual && a != null ? (
                              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
                                <span className="muted">Total Assets</span>
                                <strong>{primaryCurrency ? `${getCurrencySymbol(primaryCurrency)}${formatAmount(a)}` : formatAmount(a)}</strong>
                              </div>
                            ) : null}
                          </React.Fragment>
                        );
                      })()}
                    </div>
                  )}
                </div>
              ) : null}
            </section>
          </React.Fragment>
      </div>
    );
  }

  global.PortfolioPortfolios = {
    PortfoliosModulePage
  };
})(window);