(function initPortfolioTransactions(global) {
  const utils = global.PortfolioApp;
  const portfolioSelection = global.PortfolioSelection;
  if (!utils) {
    throw new Error('PortfolioApp must be loaded before PortfolioTransactions.');
  }
  if (!portfolioSelection) {
    throw new Error('PortfolioSelection must be loaded before PortfolioTransactions.');
  }

  const {
    usePortfolios,
    PortfolioSelectField,
    getAuthorizedJsonHeaders,
    handleUnauthorizedApiResponse
  } = portfolioSelection;

  const TRANSACTION_TYPES = {
    all: 'All',
    stock: 'Stock',
    dividend: 'Dividend',
    cash: 'Cash'
  };

  const TIME_RANGE_VALUES = {
    all: 'All',
    ytd: 'YTD',
    lastYear: 'Last Year',
    dateRange: 'Date Range'
  };

  const EVENT_LABELS = {
    1: 'Buy',
    2: 'Sell',
    3: 'WriteOff',
    4: 'Dividend',
    5: 'Deposit',
    6: 'Withdrawal',
    7: 'Interest',
    8: 'ExchangeFee',
    9: 'Split',
    10: 'TransferIn',
    11: 'TransferFee',
    12: 'CapitalReturn',
    13: 'ADRFee',
    14: 'TransferOut'
  };

  function readEventValue(item) {
    if (!item || typeof item !== 'object') {
      return null;
    }
    if (item.Event != null) {
      return item.Event;
    }
    if (item.EventId != null) {
      return item.EventId;
    }
    if (item.event != null) {
      return item.event;
    }
    if (item.eventId != null) {
      return item.eventId;
    }
    return null;
  }

  function toEventLabel(value) {
    const numberValue = Number.parseInt(String(value || ''), 10);
    if (!Number.isFinite(numberValue) || !EVENT_LABELS[numberValue]) {
      return String(value || '');
    }
    return EVENT_LABELS[numberValue];
  }

  function normalizeTransactionTypeValue(value) {
    if (typeof value !== 'string') {
      return '';
    }

    return value.trim().toLowerCase();
  }

  function filterTransactionsByType(items, selectedType) {
    if (!Array.isArray(items)) {
      return [];
    }

    if (selectedType === TRANSACTION_TYPES.all) {
      return items;
    }

    const normalizedSelectedType = normalizeTransactionTypeValue(selectedType);
    return items.filter((item) => normalizeTransactionTypeValue(item && item.Type) === normalizedSelectedType);
  }

  function readTransactionValue(item, key) {
    if (!item || typeof item !== 'object') {
      return undefined;
    }

    if (key === 'Total Expense' && item[key] == null) {
      if (item.TotalExpense != null) {
        return item.TotalExpense;
      }
      if (item.TotalExpenses != null) {
        return item.TotalExpenses;
      }
    }

    if ((key === 'TotalExpense' || key === 'TotalExpenses') && item[key] == null && item['Total Expense'] != null) {
      return item['Total Expense'];
    }

    return item[key];
  }

  function isNumericAlignedColumn(key) {
    return /Amount|Price|Tax|Expense/.test(key)
      || key === 'Quantity'
      || key === 'FxRate'
      || key === 'Commission'
      || key === 'DeclaredInSourceCurrency'
      || key === 'TaxPaidInSourceCurrency'
      || key === 'AmountInSourceCurrency'
      || key === 'DeclaredConverted'
      || key === 'TaxPaidConverted';
  }

  function renderTransactionCell(item, key) {
    const typeValue = normalizeTransactionTypeValue(item && item.Type);
    const value = readTransactionValue(item, key);
    const currencyCode = item && item.Currency ? String(item.Currency) : '-';

    if (key === 'Date') {
      if (typeof utils.formatDate === 'function') {
        return utils.formatDate(item.Date);
      }
      return item && item.Date ? String(item.Date) : '-';
    }
    if (key === 'Type') {
      return item.Type || '-';
    }
    if (key === 'Event') {
      return toEventLabel(readEventValue(item));
    }
    if (key === 'Description') {
      if (typeValue === normalizeTransactionTypeValue(TRANSACTION_TYPES.stock)) {
        const ticker = item && item.Ticker ? String(item.Ticker).trim() : '';
        const name = item && item.Name ? String(item.Name).trim() : '';
        if (ticker && name) {
          return `${ticker} - ${name}`;
        }
        if (ticker) {
          return ticker;
        }
        if (name) {
          return name;
        }
        return '-';
      }

      if (typeValue === normalizeTransactionTypeValue(TRANSACTION_TYPES.dividend)) {
        return item && item.Ticker ? String(item.Ticker) : '-';
      }

      return item && item.Description ? String(item.Description) : '-';
    }
    if (key === 'Price') {
      const formattedPrice = utils.formatAmount(value);
      if (typeValue === normalizeTransactionTypeValue(TRANSACTION_TYPES.stock)) {
        return `${currencyCode} ${formattedPrice}`;
      }
      return formattedPrice;
    }
    if (
      typeValue === normalizeTransactionTypeValue(TRANSACTION_TYPES.dividend)
      && (key === 'DeclaredInSourceCurrency' || key === 'TaxPaidInSourceCurrency' || key === 'AmountInSourceCurrency')
    ) {
      return `${currencyCode} ${utils.formatAmount(value)}`;
    }
    if (key === 'Quantity') {
      return utils.formatInteger(value);
    }
    if (key === 'FxRate') {
      return utils.formatExchangeRate(value);
    }
    if (/Amount|Price|Tax|Expense|Declared|Commission/.test(key)) {
      return utils.formatAmount(value);
    }
    return value == null || value === '' ? '-' : String(value);
  }

  function applyTooltipIfTruncated(element, renderedValue) {
    if (!element) {
      return;
    }

    if (renderedValue == null || renderedValue === '-') {
      element.removeAttribute('title');
      return;
    }

    const text = String(renderedValue);
    const isTruncated = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
    if (isTruncated) {
      element.setAttribute('title', text);
    } else {
      element.removeAttribute('title');
    }
  }

  function getTransactionCellClassName(item, key) {
    const classNames = [];

    if (isNumericAlignedColumn(key) || key === 'PriceConverted') {
      classNames.push('txn-cell-amount');
    }

    if (key === 'Amount') {
      const numeric = Number(item && item[key]);
      if (Number.isFinite(numeric)) {
        if (numeric < 0) {
          classNames.push('txn-cell-amount-negative');
        } else if (numeric > 0) {
          classNames.push('txn-cell-amount-positive');
        }
      }
    }

    return classNames.join(' ');
  }

  function getTransactionHeaderClassName(key) {
    return isNumericAlignedColumn(key) || key === 'PriceConverted' ? 'txn-cell-amount' : '';
  }

  function getTransactionColumnLabel(key) {
    if (key === 'Quantity') {
      return 'Qty';
    }

    if (key === 'PriceConverted') {
      return 'Price';
    }
    if (key === 'DeclaredInSourceCurrency') {
      return 'Declared';
    }
    if (key === 'TaxPaidInSourceCurrency') {
      return 'TaxPaid';
    }
    if (key === 'AmountInSourceCurrency') {
      return 'Amount';
    }
    if (key === 'DeclaredConverted') {
      return 'Declared';
    }
    if (key === 'TaxPaidConverted') {
      return 'TaxPaid';
    }

    return key;
  }

  function getExpandedDetailEntries(item) {
    const hiddenKeys = new Set([
      'Date',
      'Type',
      'Event',
      'Description',
      'Amount',
      'Ticker',
      'ticker',
      'Id',
      'id',
      'PortfolioId',
      'portfolioId',
      'EventId',
      'eventId',
      'ISIN',
      'isin'
    ]);

    const typeValue = normalizeTransactionTypeValue(item && item.Type);

    return Object.keys(item || {}).filter((key) => {
      if (hiddenKeys.has(key)) {
        return false;
      }

      if (
        (typeValue === normalizeTransactionTypeValue(TRANSACTION_TYPES.dividend)
          || typeValue === normalizeTransactionTypeValue(TRANSACTION_TYPES.stock))
        && key === 'Currency'
      ) {
        return false;
      }

      return true;
    });
  }

  function getExpandedDetailLabel(item, key) {
    const typeValue = normalizeTransactionTypeValue(item && item.Type);
    const currencyCode = item && item.Currency ? String(item.Currency) : '-';

    if (key === 'TotalExpense' || key === 'TotalExpenses' || key === 'Total Expense') {
      return 'Total Expense';
    }

    if (typeValue === normalizeTransactionTypeValue(TRANSACTION_TYPES.dividend)) {
      if (key === 'DeclaredInSourceCurrency') {
        return `Declared (${currencyCode})`;
      }
      if (key === 'TaxPaidInSourceCurrency') {
        return `TaxPaid (${currencyCode})`;
      }
      if (key === 'AmountInSourceCurrency') {
        return `Amount (${currencyCode})`;
      }
      if (key === 'DeclaredConverted') {
        return 'Declared';
      }
      if (key === 'TaxPaidConverted') {
        return 'TaxPaid';
      }
    }

    if (typeValue === normalizeTransactionTypeValue(TRANSACTION_TYPES.stock)) {
      if (key === 'Price') {
        return `Price (${currencyCode})`;
      }
      if (key === 'PriceConverted') {
        return 'Price';
      }
    }

    return key;
  }

  function getTypedExpandedDetailEntries(item, selectedType, visibleColumns) {
    if (selectedType !== TRANSACTION_TYPES.stock) {
      return [];
    }

    const hiddenKeys = new Set([
      'Id',
      'id',
      'PortfolioId',
      'portfolioId',
      'Type',
      'type'
    ]);

    const columns = Array.isArray(visibleColumns) ? visibleColumns : [];
    columns.forEach((column) => {
      if (column === 'Event') {
        hiddenKeys.add('Event');
        hiddenKeys.add('EventId');
        hiddenKeys.add('event');
        hiddenKeys.add('eventId');
        return;
      }

      if (column === 'Ticker') {
        hiddenKeys.add('Ticker');
        hiddenKeys.add('ticker');
        return;
      }

      if (column === 'Total Expense') {
        hiddenKeys.add('Total Expense');
        hiddenKeys.add('TotalExpense');
        hiddenKeys.add('TotalExpenses');
        return;
      }

      hiddenKeys.add(column);
    });

    // Price in stock view already includes the transaction currency.
    hiddenKeys.add('Currency');

    return Object.keys(item || {}).filter((key) => !hiddenKeys.has(key));
  }

  function TransactionsAllTable({ items }) {
    const commonColumns = ['Date', 'Type', 'Event', 'Description', 'Amount'];
    const [expandedRows, setExpandedRows] = React.useState({});

    function toggleExpanded(rowKey) {
      setExpandedRows((previous) => ({
        ...previous,
        [rowKey]: !previous[rowKey]
      }));
    }

    return (
      <table className="transactions-table">
        <thead>
          <tr>
            {commonColumns.map((column) => (
              <th key={column} className={getTransactionHeaderClassName(column)}>{column}</th>
            ))}
            <th className="txn-expand-column"><span className="sr-only">Expand</span></th>
          </tr>
        </thead>
        <tbody>
          {items.map((item, index) => {
            const typeLabel = item.Type || '';
            const isExpandable = typeLabel === TRANSACTION_TYPES.stock || typeLabel === TRANSACTION_TYPES.dividend;
            const rowKey = `${typeLabel}-${item.Id || item.id || index}-${item.Date || index}`;
            const expanded = Boolean(expandedRows[rowKey]);
            const detailKeys = getExpandedDetailEntries(item);

            return (
              <React.Fragment key={rowKey}>
                <tr
                  className={isExpandable ? 'txn-summary-row txn-summary-row-expandable' : 'txn-summary-row'}
                  onClick={isExpandable ? () => toggleExpanded(rowKey) : undefined}
                  onKeyDown={isExpandable ? (event) => {
                    if (event.key === 'Enter' || event.key === ' ') {
                      event.preventDefault();
                      toggleExpanded(rowKey);
                    }
                  } : undefined}
                  tabIndex={isExpandable ? 0 : undefined}
                  aria-expanded={isExpandable ? expanded : undefined}
                >
                  {commonColumns.map((column) => {
                    const cellValue = renderTransactionCell(item, column);
                    return (
                      <td
                        key={column}
                        className={getTransactionCellClassName(item, column)}
                        onMouseEnter={(event) => applyTooltipIfTruncated(event.currentTarget, cellValue)}
                        onFocus={(event) => applyTooltipIfTruncated(event.currentTarget, cellValue)}
                      >
                        {cellValue}
                      </td>
                    );
                  })}
                  <td className="txn-expand-column">
                    {isExpandable ? (
                      <span className="txn-expand-toggle" aria-hidden="true">
                        <span className={expanded ? 'txn-expand-arrow txn-expand-arrow-open' : 'txn-expand-arrow'} />
                      </span>
                    ) : (
                      <span className="txn-expand-placeholder" aria-hidden="true" />
                    )}
                  </td>
                </tr>
                {isExpandable && expanded && (
                  <tr className="txn-expanded-row">
                    <td colSpan={commonColumns.length + 1}>
                      <div className="txn-expanded-panel">
                        {detailKeys.length > 0 ? (
                          <div className="txn-details-grid">
                            {detailKeys.map((key) => {
                              const cellValue = renderTransactionCell(item, key);
                              return (
                                <div key={key} className="txn-details-row">
                                  <span className="muted">{getExpandedDetailLabel(item, key)}</span>
                                  <strong
                                    onMouseEnter={(event) => applyTooltipIfTruncated(event.currentTarget, cellValue)}
                                    onFocus={(event) => applyTooltipIfTruncated(event.currentTarget, cellValue)}
                                  >
                                    {cellValue}
                                  </strong>
                                </div>
                              );
                            })}
                          </div>
                        ) : (
                          <p className="muted">No additional details.</p>
                        )}
                      </div>
                    </td>
                  </tr>
                )}
              </React.Fragment>
            );
          })}
        </tbody>
      </table>
    );
  }

  function TransactionsTypedTable({ items, selectedType }) {
    const columnsByType = {
      [TRANSACTION_TYPES.stock]: ['Date', 'Event', 'Ticker', 'Name', 'Quantity', 'Price', 'PriceConverted', 'FxRate', 'Commission', 'Amount'],
      [TRANSACTION_TYPES.dividend]: ['Date', 'Event', 'Ticker', 'Name', 'DeclaredInSourceCurrency', 'TaxPaidInSourceCurrency', 'AmountInSourceCurrency', 'FxRate', 'Country', 'DeclaredConverted', 'TaxPaidConverted', 'Amount'],
      [TRANSACTION_TYPES.cash]: ['Date', 'Event', 'Amount']
    };

    const columns = columnsByType[selectedType] || [];
    const isStockType = selectedType === TRANSACTION_TYPES.stock;
    const [expandedRows, setExpandedRows] = React.useState({});

    function toggleExpanded(rowKey) {
      setExpandedRows((previous) => ({
        ...previous,
        [rowKey]: !previous[rowKey]
      }));
    }

    return (
      <table className="transactions-table">
        <thead>
          <tr>
            {columns.map((column) => (
              <th key={column} className={getTransactionHeaderClassName(column)}>{getTransactionColumnLabel(column)}</th>
            ))}
            {isStockType ? <th className="txn-expand-column"><span className="sr-only">Expand</span></th> : null}
          </tr>
        </thead>
        <tbody>
          {items.map((item, index) => {
            const rowKey = `${selectedType}-${item.Id || item.id || index}-${item.Date || index}`;
            const expanded = Boolean(expandedRows[rowKey]);
            const detailKeys = getTypedExpandedDetailEntries(item, selectedType, columns);

            return (
              <React.Fragment key={rowKey}>
                <tr
                  className={isStockType ? 'txn-summary-row txn-summary-row-expandable' : 'txn-summary-row'}
                  onClick={isStockType ? () => toggleExpanded(rowKey) : undefined}
                  onKeyDown={isStockType ? (event) => {
                    if (event.key === 'Enter' || event.key === ' ') {
                      event.preventDefault();
                      toggleExpanded(rowKey);
                    }
                  } : undefined}
                  tabIndex={isStockType ? 0 : undefined}
                  aria-expanded={isStockType ? expanded : undefined}
                >
                  {columns.map((column) => {
                    const cellValue = renderTransactionCell(item, column);
                    return (
                      <td
                        key={column}
                        className={getTransactionCellClassName(item, column)}
                        onMouseEnter={(event) => applyTooltipIfTruncated(event.currentTarget, cellValue)}
                        onFocus={(event) => applyTooltipIfTruncated(event.currentTarget, cellValue)}
                      >
                        {cellValue}
                      </td>
                    );
                  })}
                  {isStockType ? (
                    <td className="txn-expand-column">
                      <span className="txn-expand-toggle" aria-hidden="true">
                        <span className={expanded ? 'txn-expand-arrow txn-expand-arrow-open' : 'txn-expand-arrow'} />
                      </span>
                    </td>
                  ) : null}
                </tr>
                {isStockType && expanded && (
                  <tr className="txn-expanded-row">
                    <td colSpan={columns.length + 1}>
                      <div className="txn-expanded-panel">
                        {detailKeys.length > 0 ? (
                          <div className="txn-details-grid">
                            {detailKeys.map((key) => {
                              const cellValue = renderTransactionCell(item, key);
                              return (
                                <div key={key} className="txn-details-row">
                                  <span className="muted">{getExpandedDetailLabel(item, key)}</span>
                                  <strong
                                    onMouseEnter={(event) => applyTooltipIfTruncated(event.currentTarget, cellValue)}
                                    onFocus={(event) => applyTooltipIfTruncated(event.currentTarget, cellValue)}
                                  >
                                    {cellValue}
                                  </strong>
                                </div>
                              );
                            })}
                          </div>
                        ) : (
                          <p className="muted">No additional details.</p>
                        )}
                      </div>
                    </td>
                  </tr>
                )}
              </React.Fragment>
            );
          })}
        </tbody>
      </table>
    );
  }

  function TransactionsModulePage({ navigate }) {
    const [selectedPortfolio, setSelectedPortfolio] = React.useState('All');
    const [selectedType, setSelectedType] = React.useState(TRANSACTION_TYPES.stock);
    const [timeRange, setTimeRange] = React.useState(TIME_RANGE_VALUES.ytd);
    const [fromDate, setFromDate] = React.useState('');
    const [toDate, setToDate] = React.useState('');
    const [transactions, setTransactions] = React.useState([]);
    const [isTransactionsLoading, setIsTransactionsLoading] = React.useState(false);
    const [status, setStatus] = React.useState(null);
    const { portfolios, isLoading: isPortfoliosLoading } = usePortfolios({
      onUnauthorized: () => {
        handleUnauthorizedApiResponse();
      },
      onError: () => {
        setStatus({ type: 'error', message: 'A Technical Error occurred. Code = 2101.' });
      }
    });
    const visibleTransactions = React.useMemo(
      () => filterTransactionsByType(transactions, selectedType),
      [transactions, selectedType]
    );

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

      async function loadTransactions() {
        setIsTransactionsLoading(true);
        setTransactions([]);
        try {
          const params = new URLSearchParams({
            portfolio: selectedPortfolio,
            type: selectedType,
            timeRange
          });

          if (timeRange === TIME_RANGE_VALUES.dateRange) {
            params.set('from', fromDate);
            params.set('to', toDate);
          }

          const response = await fetch(`/api/transactions?${params.toString()}`, {
            method: 'GET',
            headers: getAuthorizedJsonHeaders()
          });

          if (response.status === 401 || response.status === 403) {
            if (active) {
              setTransactions([]);
            }
            handleUnauthorizedApiResponse();
            return;
          }

          if (response.status === 500) {
            const payload = await response.json().catch(() => ({}));
            const code = payload && payload.code != null ? payload.code : 3101;
            if (active) {
              setStatus({ type: 'error', message: `A Technical Error occurred. Code = ${code}.` });
              setTransactions([]);
            }
            return;
          }

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

          const payload = await response.json();
          if (active) {
            setTransactions(Array.isArray(payload.transactions) ? payload.transactions : []);
            setStatus(null);
          }
        } catch (error) {
          if (active) {
            setStatus({ type: 'error', message: 'A Technical Error occurred. Code = 3101.' });
            setTransactions([]);
          }
        } finally {
          if (active) {
            setIsTransactionsLoading(false);
          }
        }
      }

      if (timeRange === TIME_RANGE_VALUES.dateRange && (!fromDate || !toDate)) {
        return;
      }

      loadTransactions();
      return () => {
        active = false;
      };
    }, [selectedPortfolio, selectedType, timeRange, fromDate, toDate]);

    return (
      <div className="content auth-shell" style={{ marginTop: '0.5rem' }}>
        <section className="hero-card transactions-hero-card">
          <div>
            <h1 className="hero-title" style={{ fontSize: 'clamp(1.8rem, 2.4vw, 2.4rem)' }}>Transactions</h1>
            <p className="hero-copy">View all transactions across linked portfolios with filterable transaction types and ranges.</p>
          </div>
          <div className="hero-actions transactions-hero-actions">
            <button className="primary-btn" onClick={() => navigate('/transactions/add')}>Add</button>
            <button className="secondary-btn" onClick={() => navigate('/transactions/upload')}>Upload</button>
          </div>
        </section>

        <section className="panel-card">
          <div className="transactions-filters">
            <PortfolioSelectField
              portfolios={portfolios}
              value={selectedPortfolio}
              onChange={setSelectedPortfolio}
              includeAll
            />

            <label className="field">
              <span>Transaction Type</span>
              <select value={selectedType} onChange={(event) => setSelectedType(event.target.value)}>
                <option value={TRANSACTION_TYPES.all}>All</option>
                <option value={TRANSACTION_TYPES.stock}>Stock</option>
                <option value={TRANSACTION_TYPES.dividend}>Dividend</option>
                <option value={TRANSACTION_TYPES.cash}>Cash</option>
              </select>
            </label>

            <label className="field">
              <span>Time Range</span>
              <select value={timeRange} onChange={(event) => setTimeRange(event.target.value)}>
                <option value={TIME_RANGE_VALUES.all}>All</option>
                <option value={TIME_RANGE_VALUES.ytd}>YTD</option>
                <option value={TIME_RANGE_VALUES.lastYear}>Last Year</option>
                <option value={TIME_RANGE_VALUES.dateRange}>Date Range</option>
              </select>
            </label>

            {timeRange === TIME_RANGE_VALUES.dateRange && (
              <React.Fragment>
                <label className="field">
                  <span>From</span>
                  <input type="date" value={fromDate} onChange={(event) => setFromDate(event.target.value)} />
                </label>
                <label className="field">
                  <span>To</span>
                  <input type="date" value={toDate} onChange={(event) => setToDate(event.target.value)} />
                </label>
              </React.Fragment>
            )}
          </div>
        </section>

        <section className="panel-card">
          {isPortfoliosLoading || isTransactionsLoading ? <p className="muted">Loading transactions...</p> : null}
          {status ? (
            <div className={`status-message ${status.type}`} role="status">
              <span>{status.message}</span>
            </div>
          ) : null}
          {!isPortfoliosLoading && !isTransactionsLoading && !status && visibleTransactions.length === 0 ? (
            <p className="muted">No transactions found for the selected filters.</p>
          ) : null}

          {!status && visibleTransactions.length > 0 && (
            <div className="transactions-grid-wrap">
              {selectedType === TRANSACTION_TYPES.all ? (
                <TransactionsAllTable items={visibleTransactions} />
              ) : (
                <TransactionsTypedTable items={visibleTransactions} selectedType={selectedType} />
              )}
            </div>
          )}
        </section>
      </div>
    );
  }

  function TransactionsActionPlaceholder({ route, navigate }) {
    const isUpload = route.action === 'upload';

    if (isUpload) {
      const uploadModule = global.PortfolioTransactionsUpload;
      if (uploadModule && typeof uploadModule.TransactionsUploadPage === 'function') {
        const UploadPage = uploadModule.TransactionsUploadPage;
        return <UploadPage navigate={navigate} />;
      }

      return (
        <div className="content auth-shell" style={{ marginTop: '0.5rem' }}>
          <section className="hero-card">
            <div>
              <h1 className="hero-title" style={{ fontSize: 'clamp(1.8rem, 2.4vw, 2.4rem)' }}>Upload Transactions</h1>
              <p className="hero-copy">Upload module is not available right now.</p>
            </div>
            <div className="hero-actions upload-hero-actions">
              <button className="secondary-btn" onClick={() => navigate('/transactions')}>Back to Transactions</button>
            </div>
          </section>
        </div>
      );
    }

    return (
      <div className="content auth-shell" style={{ marginTop: '0.5rem' }}>
        <section className="hero-card">
          <div>
            <p className="muted">Transactions</p>
            <h1 className="hero-title" style={{ fontSize: 'clamp(1.8rem, 2.4vw, 2.4rem)' }}>Add Transaction</h1>
            <p className="hero-copy">This screen is a placeholder and will be expanded in a future feature.</p>
          </div>
          <div className="hero-actions">
            <button className="secondary-btn" onClick={() => navigate('/transactions')}>Back to Transactions</button>
          </div>
        </section>
      </div>
    );
  }

  global.PortfolioTransactions = {
    TransactionsModulePage,
    TransactionsActionPlaceholder
  };
})(window);