SFM-Broker/src/app/pay-out-details/pay-out-details.component.html

<div class="InvoiceBody">
<div class="container d-flex justify-content-center">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header bg-transparent header-elements-inline">
          <app-reward-select></app-reward-select>
          <div class="header-elements">
            <button> test </button>
            <kendo-chip
              [removable]="true"
              (remove)="onRemoveChip('somelabel', $event)"
            >
              <span class="k-avatar-image invoice-chip" [ngStyle]="{'background-image': background}"></span>
              <span> approved</span>
            </kendo-chip>

            <kendo-chip
              [removable]="false"
              (remove)="onRemoveChip('somelabel', $event)"
            >
              <span class="k-avatar-image invoice-chip" [ngStyle]="{'background-image': background}"></span>
              <span> approved</span>
            </kendo-chip>
          </div>
        </div>
        <kendo-pdf-export #pdf paperSize="A4" margin="0.5cm">
        <div class="card-body">
          <div class="row">
            <div class="col-sm-6">
              <div class="mb-4 pull-left">
                <h6 class="left"><img src="assets/img/logo.png"></h6>
                <ul class="list list-unstyled mb-0 text-left">
                  <li>Suite 2304, Level 23, </li>
                  <li>International Tower One, </li>
                  <li>100 Barangaroo Ave,</li>
                  <li>Barangaroo NSW 2000</li>
                  <li>Australia</li>
                  <li>+61 2 8197 0062</li>
                </ul>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="mb-4 ">
                <div class="text-sm-right">
                  <h4 class="invoice-color mb-2 mt-md-2">Invoice #BBB1243</h4>
                  <table class="invoice-to-details">
                    <tr>
                      <td class="left">To</td><td class="middle">:</td><td class="right"><h5 class="my-2">Tibco Turang</h5></td>
                    </tr>
                    <tr>
                      <td class="left">email</td><td class="middle">:</td><td class="right">abc@hotmail.com</td>
                    </tr>
                    <tr>
                      <td class="left">Date</td><td class="middle">:</td><td class="right">March 15, 2020</td>
                    </tr>
                    <tr>
                      <td class="left">Pay Date</td><td class="middle">:</td><td class="right">March 15, 2020</td>
                    </tr>
                    <tr>
                      <td class="left">Paid To</td><td class="middle">:</td><td class="right">BSB/ACC</td>
                    </tr>

                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="table-responsive">
          <app-single-payout-rewards-list></app-single-payout-rewards-list>
        </div>
        <div class="card-body">
          <div class="d-md-flex flex-md-wrap">
            <div class="pt-2 mb-3 wmin-md-400 ml-auto">
              <h6 class="mb-3 text-left">Total due</h6>
              <div class="table-responsive">
                <table class="table">
                  <tbody>
                  <tr>
                    <th class="text-left">Subtotal:</th>
                    <td class="text-right">{{amount | currency}}</td>
                  </tr>
                  <tr>
                    <th class="text-left">Tax: <span class="font-weight-normal">(25%)</span></th>
                    <td class="text-right">$27</td>
                  </tr>
                  <tr>
                    <th class="text-left">Total:</th>
                    <td class="text-right text-primary">
                      <h5 class="font-weight-semibold">$1,160</h5>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        </kendo-pdf-export>
        <div class="text-right mt-3"> <button type="button" class="btn btn-primary" (click)="pdf.saveAs('invoice.pdf')"><b><i class="fa fa-paper-plane-o mr-1"></i></b> Send invoice</button> </div>
        <div class="card-footer"> <span class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Duis aute irure dolor in reprehenderit</span> </div>
      </div>
    </div>
  </div>
</div>
</div>