components/MenuItems/Bonus/ClientRanksTable.js

import React from 'react';

import { getCountryDateTime, parseAmount } from '../../../utils/common';
import TableNoResult from '../../TableNoResult';

/**
 * @module MI-Bonus/ClientRanksTable
 */
/**
 * @typedef {object} props
 * @property {Array} clientRanks
 * @property {Array} currency
 */
/**
 * Render
 *
 * @param {props} props
 * @returns {view}
 */
const ClientRanksTable = (props) => (
  <>
    <table className="table-style table-s" id="data-table">
      <thead>
        <tr>
          <th>
            Client ID
            <i className="table-arrow ml-1" />
          </th>
          <th>Rank ID</th>
          <th>Turnover</th>
          <th>Last update Date</th>
        </tr>
      </thead>
      <tbody>
        {props.clientRanks.map((rank) => (
          <tr className="table-style-row" key={rank.clientId}>
            <td>{rank.clientId}</td>
            <td>{rank.rankId}</td>
            <td>
              {parseAmount(rank.turnover, 100)} {props.currency}
            </td>
            <td>{getCountryDateTime(rank.lastUpdateDate, props.selectedTimezone)}</td>
          </tr>
        ))}
      </tbody>
    </table>
    {!props.hasRecord && props.clientRanks.length < 1 && <TableNoResult />}
  </>
);

export default ClientRanksTable;