components/MenuItems/Reports/RoundReportTable.js

import React from 'react';

import { getCountryDateTime, parseAmount } from '../../../utils/common';
import TableNoResult from '../../TableNoResult';
/**
 * @module MI-Reports/RoundReportTable
 */
/**
 * @typedef {object} props
 * @property {Array} reports All reports data
 * @property {Array} roundDropDown
 * @property {Array} currency
 */
/**
 * Render
 *
 * @param {props} props
 * @returns {view}
 */
const RoundReportTable = (props) => (
  <>
    <table className="table-style table-s " id="data-table">
      <thead>
        <tr>
          <th>Round ID</th>
          <th>Game</th>
          <th>
            Start Date
            <i className="table-arrow ml-1" />
          </th>
          <th>End Date</th>
          <th>Status</th>

          <th>Placed Coupons</th>
          <th>Settled Coupons</th>
          <th>Winning Coupons</th>
          <th>Total Placed Stake</th>
          <th>Total Won Amount</th>
          <th>Paid Coupons</th>
          <th>Won&apos;t Paid Coupons</th>
          {!props.isShop && (
            <>
              <th>Cashout Bets</th>
              <th>Cashout Stake</th>
              <th>Cashout Win</th>
            </>
          )}
        </tr>
      </thead>
      <tbody>
        {props.reports.map((report) => {
          const status = props.roundDropDown.find((r) => parseInt(r.id) === parseInt(report.roundStatus));

          const gameType = props.gameStatuses.find((l) => parseInt(l.id) === report.gameId);
          return (
            <tr className="table-style-row" key={`${report.roundId}-${report.roundStartDate}-${report.roundEndDate}`}>
              <td>{report.roundId}</td>
              {gameType && <td>{gameType.label}</td>}
              <td>{getCountryDateTime(report.roundStartDate, props.selectedTimezone)}</td>
              <td>{getCountryDateTime(report.roundEndDate, props.selectedTimezone)}</td>
              <td>{status ? status.label : report.roundStatus}</td>

              <td>{report.placedCoupons}</td>
              <td>{report.settledCoupons}</td>
              <td>{report.winningCoupons}</td>
              <td>
                {parseAmount(report.totalPlacedStake, 100)} {props.currency}
              </td>
              <td>
                {parseAmount(report.totalWonAmount, 100)} {props.currency}
              </td>
              <td>{report.paidCoupons}</td>
              <td>{report.wontPayCoupons}</td>
              {!props.isShop && (
                <>
                  <td>{report.cashedOutCoupons}</td>
                  <td>
                    {parseAmount(report.totalCashedOutStake, 100)} {props.currency}
                  </td>
                  <td>
                    {parseAmount(report.totalCashedOutWonAmount, 100)} {props.currency}
                  </td>
                </>
              )}
            </tr>
          );
        })}
      </tbody>
    </table>
    {!props.hasRecord && props.reports.length < 1 && <TableNoResult />}
  </>
);

export default RoundReportTable;