components/MenuItems/Reports/TurnoverReportTable.js

import React from 'react';

import { parseAmount, parsePoints } from '../../../utils/common';
import TableNoResult from '../../TableNoResult';
import { BOLDED_STATUS, TURNOVER_TABLE_DETAILS } from '../../../constants';
/**
 * @module MI-Reports/TurnoverReportTable
 */
/**
 * @typedef {object} props
 * @property {Array} turnover Turnover data
 * @property {Array} currency
 */

/**
 * Calculate percentage profit
 *
 * @param {number} profit - The profit amount
 * @param {number} totalStake - The total stake amount
 * @returns {string} Formatted percentage string with 2 decimal places
 */
const calculatePercentageProfit = (profit, totalStake) => {
  if (!totalStake || totalStake === 0) {
    return '0.00%';
  }
  return `${((profit / totalStake) * 100).toFixed(2)}%`;
};

/**
 * Render
 *
 * @param {props} props
 * @returns {view}
 */
const TurnoverReportTable = (props) => {
  const turnover = props.turnover;
  let gameStatus = TURNOVER_TABLE_DETAILS.MOBILE.GAME_STATUS;
  if (props.isShop) {
    gameStatus = TURNOVER_TABLE_DETAILS.SHOP.GAME_STATUS;
  } else if (props.isGrandTotal) {
    gameStatus = TURNOVER_TABLE_DETAILS.TOTAL.GAME_STATUS;
  } else if (props.isCashout) {
    gameStatus = TURNOVER_TABLE_DETAILS.CASHOUT.GAME_STATUS;
  }
  return (
    <>
      <div className="main-wrapper__heading mt-20">{props.tableTitle}</div>
      <div className="table-responsive mt-20 p0">
        <table className="table-style table-s">
          <thead>
            <tr>
              <th>{!props.isGrandTotal && !props.isCashout ? 'Game' : ''}</th>
              <th>Number Of Bets</th>
              <th>Total Stake</th>
              {!props.isCashout && <th>Number Of Winning Bets</th>}
              <th>Total Win</th>
              {!props.isCashout && <th>Profit</th>}
              {!props.isCashout && <th>Percentage Profit</th>}
            </tr>
          </thead>
          <tbody>
            {turnover &&
              gameStatus.map((status) => {
                const bolded = BOLDED_STATUS?.includes(TURNOVER_TABLE_DETAILS.STATUS_KEYS[status]);

                return (
                  <tr
                    className={`table-style-row 
                ${bolded && 'txt-bold'}
              `}
                    key={status}
                  >
                    <td className="text-capitalize">{TURNOVER_TABLE_DETAILS.STATUS_KEYS[status]}</td>
                    <td>{parsePoints(turnover[status]?.numberOfBets, ',')}</td>
                    <td>
                      {parseAmount(turnover[status]?.totalStake, 100)} {props.currency}
                    </td>
                    {!props.isCashout && <td>{parsePoints(turnover[status]?.numberOfWinningBets, ',')}</td>}
                    <td>
                      {parseAmount(turnover[status]?.totalWin, 100)} {props.currency}
                    </td>
                    {!props.isCashout && (
                      <td>
                        {parseAmount(turnover[status]?.profit, 100)} {props.currency}
                      </td>
                    )}
                    {!props.isCashout && (
                      <td>{calculatePercentageProfit(turnover[status]?.profit, turnover[status]?.totalStake)}</td>
                    )}
                  </tr>
                );
              })}
          </tbody>
        </table>
        {!props.hasRecord && props.turnover !== null && <TableNoResult />}
      </div>

      {props.isMobile && <div className="user__info mt-20">*Voided coupons are subtracted from Total</div>}
    </>
  );
};

export default TurnoverReportTable;