389 lines
20 KiB
HTML
389 lines
20 KiB
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 *ngIf="account !== undefined" class="breadcrumb-item active" aria-current="page">{{account?.vcard?.fn[0].value}}</li>
|
|
</ol>
|
|
</nav>
|
|
<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 mb-3">
|
|
<div class="row card-body">
|
|
<h3>
|
|
<strong> {{account?.vcard?.fn[0].value}} </strong>
|
|
</h3>
|
|
<span class="ml-auto"><strong>Balance:</strong> {{account?.balance | tokenRatio}} SRF</span>
|
|
<span class="ml-2"><strong>Created:</strong> {{account?.date_registered | date}}</span>
|
|
<span class="ml-2"><strong>Address:</strong><a href="{{bloxbergLink}}" target="_blank"> {{account?.identities.evm['bloxberg:8996']}} </a></span>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="account" class="card mt-3 mb-3">
|
|
<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>Name(s): *</mat-label>
|
|
<input matInput type="text" id="givenNames" placeholder="{{account?.vcard?.fn[0].value}}"
|
|
value="{{account?.vcard?.fn[0].value}}" 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?.vcard?.tel[0].value}}"
|
|
value="{{account?.vcard?.tel[0].value}}" 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>Age: </mat-label>
|
|
<input matInput type="text" id="age" placeholder="{{account?.age}}"
|
|
value="{{account?.age}}" formControlName="age" [errorStateMatcher]="matcher">
|
|
<mat-error *ngIf="submitted && accountInfoFormStub.age.errors">Age 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>Bio: </mat-label>
|
|
<input matInput type="text" id="bio" placeholder="{{account?.products}}" value="{{account?.products}}"
|
|
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?.location.area_name}}"
|
|
value="{{account?.location.area_name}}" 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.area" formControlName="location"
|
|
[errorStateMatcher]="matcher">
|
|
<div *ngFor="let county of locations; trackBy: trackByName">
|
|
<div *ngFor="let district of county.districts; trackBy: trackByName">
|
|
<mat-optgroup *ngFor="let location of district.locations; trackBy: trackByName" [label]="county.name + ' / ' +
|
|
district.name + ' / ' + location.name">
|
|
<mat-option *ngFor="let village of location.villages; trackBy: trackByName" [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> LOCATION TYPE: </mat-label>
|
|
<mat-select id="locationType" [(value)]="account.location.area_type" formControlName="locationType"
|
|
[errorStateMatcher]="matcher">
|
|
<mat-option value="Urban"> URBAN </mat-option>
|
|
<mat-option value="Periurban"> PERIURBAN </mat-option>
|
|
<mat-option value="Rural"> RURAL </mat-option>
|
|
<mat-option value="Other"> OTHER </mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="submitted && accountInfoFormStub.locationType.errors">Location Type 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 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 mb-3">
|
|
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">
|
|
SAVE DETAILS
|
|
</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">BALANCE</th>
|
|
<th scope="col">CREATED</th>
|
|
<th scope="col">STATUS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>{{account?.vcard?.fn[0].value}}</td>
|
|
<td>{{account?.balance | tokenRatio}}</td>
|
|
<td>{{account?.date_registered | date}}</td>
|
|
<td>
|
|
<span *ngIf="accountStatus === 'active'" class="badge badge-success badge-pill">
|
|
{{accountStatus}}
|
|
</span>
|
|
<span *ngIf="accountStatus === 'blocked'" class="badge badge-danger badge-pill">
|
|
{{accountStatus}}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</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>
|
|
<button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(transactions, 'transactions')"> EXPORT </button>
|
|
</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="sender">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th>
|
|
<td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value}} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="recipient">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
|
|
<td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value}} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="value">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
|
|
<td mat-cell *matCellDef="let transaction">
|
|
<span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}}</span>
|
|
<span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}}</span>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="created">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Created </th>
|
|
<td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | date}} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="type">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </th>
|
|
<td mat-cell *matCellDef="let transaction">
|
|
<span class="badge badge-success badge-pill"> {{transaction?.type}} </span>
|
|
</td>
|
|
</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]="transactionsDefaultPageSize"
|
|
[pageSizeOptions]="transactionsPageSizeOptions" 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>
|
|
<button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(accounts, 'accounts')"> EXPORT </button>
|
|
</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?.vcard.fn[0].value}} </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?.vcard.tel[0].value}} </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?.date_registered | date}} </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="location">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
|
|
<mat-cell *matCellDef="let user"> {{user?.location.area_name}} </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]="usersDefaultPageSize"
|
|
[pageSizeOptions]="usersPageSizeOptions" showFirstLastButtons></mat-paginator>
|
|
</div>
|
|
</div>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</div>
|
|
<app-footer appMenuSelection></app-footer>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Page content -->
|
|
<!-- ============================================================== -->
|
|
</div>
|