cic-staff-client/src/app/pages/accounts/account-details/account-details.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>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
          <li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>
          <li class="breadcrumb-item active" aria-current="page">{{account?.name}}</li>
        </ol>
      </nav>
      <div class="card mb-3">
        <div class="row card-body">
          <h3>
            <strong> {{account?.name}} </strong>
          </h3>
          <span class="ml-auto"><strong>Balance:</strong> {{account?.balance}} RCU</span>
          <span class="ml-2"><strong>Created:</strong> {{account?.created}}</span>
          <span class="ml-2"><strong>Address:</strong> {{account?.address}}</span>
        </div>
      </div>
      <app-disbursement *ngIf="isDisbursing" (cancelDisbursmentEvent)="addTransfer()" [account]="account">
      </app-disbursement>
      <div *ngIf="!account" class="text-center">
        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <div *ngIf="account" class="card mt-3 mb-3">
        <mat-card-title class="card-header">
          <div class="row">
            DETAILS
            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto"
                    (click)="addTransfer()"> NEW TRANSFER </button>
          </div>
        </mat-card-title>
        <div class="card-body">
          <form [formGroup]="accountInfoForm" (ngSubmit)="saveInfo()">
            <div class="row form-inline">
              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> STATUS </mat-label>
                  <mat-select id="status" [(value)]="account.status" formControlName="status"
                              [errorStateMatcher]="matcher">
                    <mat-option value="unapproved">Unapproved</mat-option>
                    <mat-option value="approved">Approved</mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.status.errors">Status is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Name(s): *</mat-label>
                  <input matInput type="text" id="givenNames" placeholder="{{account?.name}}" value="{{account?.name}}"
                         formControlName="name" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.name.errors">Name is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Phone Number: </mat-label>
                  <input matInput type="text" id="phoneNumber" placeholder="{{account?.phone}}"
                         value="{{account?.phone}}" formControlName="phoneNumber" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.phoneNumber.errors">Phone Number is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> ACCOUNT TYPE: </mat-label>
                  <mat-select id="accountType" [(value)]="account.type" formControlName="type"
                              [errorStateMatcher]="matcher">
                    <mat-option value="user"> USER </mat-option>
                    <mat-option value="cashier"> CASHIER </mat-option>
                    <mat-option value="vendor"> VENDOR </mat-option>
                    <mat-option value="tokenAgent"> TOKENAGENT </mat-option>
                    <mat-option value="group"> GROUPACCOUNT </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.type.errors">Type is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> USER TOKEN: </mat-label>
                  <mat-select id="token" [(value)]="account.token" formControlName="token"
                              [errorStateMatcher]="matcher">
                    <mat-option value="RSV"> RESERVE </mat-option>
                    <mat-option value="ERN"> ERNIE </mat-option>
                    <mat-option value="BRT"> BERT </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.token.errors">Token is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Failed Pin Attempts: </mat-label>
                  <input matInput type="text" id="failedPinAttempts" placeholder="{{account?.failedPinAttempts}}"
                         value="{{account?.failedPinAttempts}}" formControlName="failedPinAttempts" required
                         [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.failedPinAttempts.errors">
                    Failed Pin Attempts is required.
                  </mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Bio: </mat-label>
                  <input matInput type="text" id="bio" placeholder="{{account?.bio}}" value="{{account?.bio}}"
                         formControlName="bio" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.bio.errors">Bio is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> GENDER: </mat-label>
                  <mat-select id="gender" [(value)]="account.gender" formControlName="gender"
                              [errorStateMatcher]="matcher">
                    <mat-option value="male"> MALE </mat-option>
                    <mat-option value="female"> FEMALE </mat-option>
                    <mat-option value="other"> OTHER </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.gender.errors">Gender is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> BUSINESS CATEGORY: </mat-label>
                  <mat-select id="businessCategory" [(value)]="account.category" formControlName="businessCategory"
                              [errorStateMatcher]="matcher">
                    <mat-option value="food/water">Food/Water</mat-option>
                    <mat-option value="fuel/energy">Fuel/Energy</mat-option>
                    <mat-option value="education">Education</mat-option>
                    <mat-option value="health">Health</mat-option>
                    <mat-option value="shop">Shop</mat-option>
                    <mat-option value="environment">Environment</mat-option>
                    <mat-option value="transport">Transport</mat-option>
                    <mat-option value="farming/labour">Farming/Labour</mat-option>
                    <mat-option value="savings">Savings Group</mat-option>
                    <mat-option value="other">Savings Group</mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.businessCategory.errors">
                    Category is required.
                  </mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>User Location: </mat-label>
                  <input matInput type="text" id="userLocation" placeholder="{{account?.userLocation}}"
                         value="{{account?.userLocation}}" formControlName="userLocation" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.userLocation.errors">
                    User Location is required.
                  </mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> LOCATION: </mat-label>
                  <mat-select id="location" [(value)]="account.location" formControlName="location"
                              [errorStateMatcher]="matcher">
                    <div *ngFor="let county of locations">
                      <div *ngFor="let district of county.districts">
                        <mat-optgroup *ngFor="let location of district.locations" [label]="county.name + ' / ' +
                         district.name + ' / ' + location.name">
                          <mat-option *ngFor="let village of location.villages" [value]="village">
                            {{village}}
                          </mat-option>
                        </mat-optgroup>
                      </div>
                    </div>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.location.errors">Location is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Referred By: </mat-label>
                  <input matInput type="text" id="referredBy" placeholder="{{account?.referrer}}" readonly
                         value="{{account?.referrer}}" formControlName="referrer" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.referrer.errors">Referrer is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="primary" type="button" class="btn btn btn-outline-primary mb-3">
                  Add User KYC
                </button>
              </div>

              <div *ngIf="account.failedPinAttempts != 0" class="col-md-6 col-lg-4">
                <button mat-raised-button color="primary" type="button" class="btn btn btn-outline-success mb-3"
                        (click)="resetPin()">
                  Reset Pin
                </button>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="warn" type="button" class="btn btn-outline-danger">
                  Delete User
                </button>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary ml-2">
                  SAVE
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="card mb-3">
        <mat-card-title class="card-header">
          USER
        </mat-card-title>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
              <caption> 1 user </caption>
              <thead class="thead-dark">
              <tr>
                <th scope="col">NAME</th>
                <th scope="col">ACCOUNT TYPE</th>
                <th scope="col">CREATED</th>
                <th scope="col">STATUS</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>{{account?.name}}</td>
                <td>{{account?.type}}</td>
                <td>{{account?.created}}</td>
                <td>
                  <span *ngIf="account?.status === 'approved'" class="badge badge-success badge-pill">
                    {{account?.status}}
                  </span>
                  <span *ngIf="account?.status === 'unapproved'" class="badge badge-danger badge-pill">
                    {{account?.status}}
                  </span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="card">
        <mat-card-title class="card-header">
          History
        </mat-card-title>
        <div class="card-body">
          <mat-form-field appearance="outline">
            <mat-label> Filter </mat-label>
            <input matInput type="text" (keyup)="doHistoryFilter($event.target.value)" placeholder="Filter">
            <mat-icon matSuffix>search</mat-icon>
          </mat-form-field>

          <mat-table class="mat-elevation-z10" [dataSource]="historyDataSource" matSort #HistoryTableSort="matSort"
                     matSortActive="sender" matSortDirection="asc" matSortDisableClear>

            <ng-container matColumnDef="user">
              <mat-header-cell *matHeaderCellDef mat-sort-header> User </mat-header-cell>
              <mat-cell *matCellDef="let history"> {{history.userName}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="action">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
              <mat-cell *matCellDef="let history"> {{history.action}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="staff">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Staff </mat-header-cell>
              <mat-cell *matCellDef="let history"> {{history.staff}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="timestamp">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Timestamp </mat-header-cell>
              <mat-cell *matCellDef="let history"> {{history.timestamp | date}} </mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="historyDisplayedColumns"></mat-header-row>
            <mat-row *matRowDef="let history; columns: historyDisplayedColumns" matRipple></mat-row>
          </mat-table>

          <mat-paginator #HistoryTablePaginator="matPaginator" [pageSize]="10"
                         [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>

        </div>
      </div>

      <mat-tab-group dynamicHeight mat-align-tabs="start">
        <mat-tab label="Transactions">
          <app-transaction-details [transaction]="transaction"></app-transaction-details>
          <div class="card mt-1">
            <div class="card-header">
              <div class="row">
                <mat-form-field appearance="outline">
                  <mat-label> TRANSACTION TYPE </mat-label>
                  <mat-select id="transferSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()">
                    <mat-option value="all">ALL TRANSFERS</mat-option>
                    <mat-option value="transaction">PAYMENTS</mat-option>
                    <mat-option value="conversion">CONVERSION</mat-option>
                    <mat-option value="disbursements">DISBURSEMENTS</mat-option>
                    <mat-option value="rewards">REWARDS</mat-option>
                    <mat-option value="reclamation">RECLAMATION</mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
            </div>

            <div class="card-body">
              <mat-form-field appearance="outline">
                <mat-label> Filter </mat-label>
                <input matInput type="text" (keyup)="doTransactionFilter($event.target.value)" placeholder="Filter">
                <mat-icon matSuffix>search</mat-icon>
              </mat-form-field>

              <mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created"
                         #TransactionTableSort="matSort" matSortDirection="asc" matSortDisableClear>

                <ng-container matColumnDef="view">
                  <mat-header-cell *matHeaderCellDef> View </mat-header-cell>
                  <mat-cell *matCellDef="let transaction" (click)="viewTransaction(transaction)">
                    <i class="fa fa-eye"></i>
                  </mat-cell>
                </ng-container>

                <ng-container matColumnDef="sender">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Sender </mat-header-cell>
                  <mat-cell *matCellDef="let transaction"> {{transaction.sender?.vcard.fn}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="senderLocation">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Sender Location </mat-header-cell>
                  <mat-cell *matCellDef="let transaction"> {{account.location}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="recipient">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </mat-header-cell>
                  <mat-cell *matCellDef="let transaction"> {{transaction.recipient?.vcard.fn}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="recipientLocation">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Recipient Location </mat-header-cell>
                  <mat-cell *matCellDef="let transaction"> {{account.location}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="token">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Token </mat-header-cell>
                  <mat-cell *matCellDef="let transaction">
                    <span *ngIf="transaction.type == 'transaction'">{{transaction.token.name}}</span>
                    <span *ngIf="transaction.type == 'conversion'">{{transaction.destinationToken.name}}</span>
                  </mat-cell>
                </ng-container>

                <ng-container matColumnDef="value">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell>
                  <mat-cell *matCellDef="let transaction">
                    <span *ngIf="transaction.type == 'transaction'">{{transaction.value | tokenRatio}}</span>
                    <span *ngIf="transaction.type == 'conversion'">{{transaction.toValue | tokenRatio}}</span>
                  </mat-cell>
                </ng-container>

                <ng-container matColumnDef="created">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Created </mat-header-cell>
                  <mat-cell *matCellDef="let transaction"> {{transaction.tx.timestamp | date}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="type">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </mat-header-cell>
                  <mat-cell *matCellDef="let transaction">
                    <span class="badge badge-success badge-pill"> {{transaction.type}} </span>
                  </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></mat-header-row>
                <mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple
                         (click)="viewTransaction(transaction)"></mat-row>
              </mat-table>

              <mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="10"
                             [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>

            </div>
          </div>
        </mat-tab>

        <mat-tab label="Users">
          <div class="card mt-1">
            <mat-card-title class="card-header">
              Accounts
            </mat-card-title>
            <div class="card-body">
              <div class="row card-header">
                <mat-form-field appearance="outline">
                  <mat-label> ACCOUNT TYPE </mat-label>
                  <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
                    <mat-option value="all">ALL</mat-option>
                    <mat-option value="user">USER</mat-option>
                    <mat-option value="cashier">CASHIER</mat-option>
                    <mat-option value="vendor">VENDOR</mat-option>
                    <mat-option value="tokenAgent">TOKENAGENT</mat-option>
                    <mat-option value="group">GROUPACCOUNT</mat-option>
                  </mat-select>
                </mat-form-field>
              </div>

              <mat-form-field appearance="outline">
                <mat-label> Filter </mat-label>
                <input matInput type="text" (keyup)="doUserFilter($event.target.value)" placeholder="Filter">
                <mat-icon matSuffix>search</mat-icon>
              </mat-form-field>

              <mat-table class="mat-elevation-z10" [dataSource]="userDataSource" matSort #UserTableSort="matSort"
                         matSortActive="created" matSortDirection="desc" matSortDisableClear>

                <ng-container matColumnDef="name">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="phone">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="created">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user.created}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="balance">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user.balance}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="type">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user.type}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="status">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell>
                  <mat-cell *matCellDef="let user">
                    <span *ngIf="user.status === 'approved'" class="badge badge-success badge-pill">
                      {{user.status}}
                    </span>
                    <span *ngIf="user.status === 'unapproved'" class="badge badge-danger badge-pill">
                      {{user.status}}
                    </span>
                  </mat-cell>
                </ng-container>

                <ng-container matColumnDef="location">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user.location}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="failedPinAttempts">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> FAILED PIN ATTEMPTS </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user.failedPinAttempts}} </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef=userDisplayedColumns></mat-header-row>
                <mat-row *matRowDef="let account; columns: userDisplayedColumns" (click)="viewAccount(account)"
                         matRipple></mat-row>
              </mat-table>

              <mat-paginator #UserTablePaginator="matPaginator" [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]"
                             showFirstLastButtons></mat-paginator>
            </div>
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
    <app-footer appMenuSelection></app-footer>
  </div>
  <!-- ============================================================== -->
  <!-- End Page content -->
  <!-- ============================================================== -->
</div>