cic-staff-client/src/app/pages/transactions/transactions.component.html

<!-- Begin page -->
<div class="wrapper">
  <app-sidebar></app-sidebar>

  <!-- ============================================================== -->
  <!-- Start Page Content here -->
  <!-- ============================================================== -->

  <div id="content">
    <app-topbar></app-topbar>
    <!-- Start Content-->
    <div class="container-fluid" appMenuSelection>
      <div class="card">
        <div class="card-header">
          Transfers
        </div>
        <div class="card-body">
          <app-transaction-details [transaction]="transaction"></app-transaction-details>
          <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover table-sm row-border hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
              <thead class="thead-dark">
              <tr>
                <th scope="col">Sender</th>
                <th scope="col">Recipient</th>
                <th scope="col">Value</th>
                <th scope="col"></th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let transaction of transactions">
                <td>{{transaction.from}}</td>
                <td>{{transaction.to}}</td>
                <td>{{transaction.value | currency: transaction.token.name + ' '}}</td>
                <td>
                  <button type="button" class="btn btn-outline-primary" (click)="viewTransaction(transaction)"><i class="fa fa-eye"> VIEW </i></button></td>
              </tr>
              </tbody>
              <tfoot class="thead-dark">
              <tr>
                <th scope="col">Sender</th>
                <th scope="col">Recipient</th>
                <th scope="col">Value</th>
                <th scope="col"></th>
              </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          Conversions
        </div>
        <div class="card-body">
          <app-conversion-details [conversion]="conversion"></app-conversion-details>
          <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover table-sm row-border hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
              <thead class="thead-dark">
              <tr>
                <th scope="col">Initial Token</th>
                <th scope="col">Initial Value</th>
                <th scope="col">Final Token</th>
                <th scope="col">Final Value</th>
                <th scope="col">Trader</th>
                <th scope="col"></th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let conversion of conversions">
                <td>{{conversion.sourceToken.symbol}}</td>
                <td>{{conversion.fromValue | currency: conversion.sourceToken.name + ' '}}</td>
                <td>{{conversion.destinationToken.symbol}}</td>
                <td>{{conversion.toValue | currency: conversion.destinationToken.name + ' '}}</td>
                <td>{{conversion.trader}}</td>
                <td>
                  <button type="button" class="btn btn-outline-primary" (click)="viewConversion(conversion)"><i class="fa fa-eye"> VIEW </i></button></td>
              </tr>
              </tbody>
              <tfoot class="thead-dark">
              <tr>
                <th scope="col">Initial Token</th>
                <th scope="col">Initial Value</th>
                <th scope="col">Final Token</th>
                <th scope="col">Final Value</th>
                <th scope="col">Trader</th>
                <th scope="col"></th>
              </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
    <app-footer appMenuSelection></app-footer>
  </div>
  <!-- ============================================================== -->
  <!-- End Page content -->
  <!-- ============================================================== -->
</div>