src/app/pages/accounts/account-details/account-details.component.ts
changeDetection | ChangeDetectionStrategy.OnPush |
selector | app-account-details |
styleUrls | ./account-details.component.scss |
templateUrl | ./account-details.component.html |
constructor(formBuilder: FormBuilder, locationService: LocationService, transactionService: TransactionService, userService: UserService, route: ActivatedRoute, router: Router, tokenService: TokenService, loggingService: LoggingService, blockSyncService: BlockSyncService, cdr: ChangeDetectorRef, snackBar: MatSnackBar)
|
||||||||||||||||||||||||||||||||||||
Parameters :
|
copyAddress |
copyAddress()
|
Returns :
void
|
doTransactionFilter | ||||||
doTransactionFilter(value: string)
|
||||||
Parameters :
Returns :
void
|
doUserFilter | ||||||
doUserFilter(value: string)
|
||||||
Parameters :
Returns :
void
|
downloadCsv |
downloadCsv(data: any, filename: string)
|
Returns :
void
|
filterAccounts |
filterAccounts()
|
Returns :
void
|
filterTransactions |
filterTransactions()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
resetPin |
resetPin()
|
Returns :
void
|
Async saveInfo |
saveInfo()
|
Returns :
Promise<void>
|
viewAccount | ||||
viewAccount(account)
|
||||
Parameters :
Returns :
void
|
viewTransaction | ||||
viewTransaction(transaction)
|
||||
Parameters :
Returns :
void
|
account |
Type : AccountDetails
|
accountAddress |
Type : string
|
accountInfoForm |
Type : FormGroup
|
accounts |
Type : Array<AccountDetails>
|
Default value : []
|
accountStatus |
Type : any
|
accountsType |
Type : string
|
Default value : 'all'
|
accountTypes |
Type : Array<string>
|
areaNames |
Type : Array<AreaName>
|
areaTypes |
Type : Array<AreaType>
|
bloxbergLink |
Type : string
|
categories |
Type : Array<Category>
|
genders |
Type : Array<string>
|
matcher |
Type : CustomErrorStateMatcher
|
Default value : new CustomErrorStateMatcher()
|
submitted |
Type : boolean
|
Default value : false
|
transaction |
Type : any
|
transactions |
Type : Array<Transaction>
|
transactionsDataSource |
Type : MatTableDataSource<any>
|
transactionsDefaultPageSize |
Type : number
|
Default value : 10
|
transactionsDisplayedColumns |
Type : Array<string>
|
Default value : ['sender', 'recipient', 'value', 'created', 'type']
|
transactionsPageSizeOptions |
Type : Array<number>
|
Default value : [10, 20, 50, 100]
|
transactionsType |
Type : string
|
Default value : 'all'
|
transactionsTypes |
Type : Array<string>
|
transactionTablePaginator |
Type : MatPaginator
|
Decorators :
@ViewChild('TransactionTablePaginator', {static: true})
|
transactionTableSort |
Type : MatSort
|
Decorators :
@ViewChild('TransactionTableSort', {static: true})
|
userDataSource |
Type : MatTableDataSource<any>
|
userDisplayedColumns |
Type : Array<string>
|
Default value : ['name', 'phone', 'created', 'balance', 'location']
|
usersDefaultPageSize |
Type : number
|
Default value : 10
|
usersPageSizeOptions |
Type : Array<number>
|
Default value : [10, 20, 50, 100]
|
userTablePaginator |
Type : MatPaginator
|
Decorators :
@ViewChild('UserTablePaginator', {static: true})
|
userTableSort |
Type : MatSort
|
Decorators :
@ViewChild('UserTableSort', {static: true})
|
accountInfoFormStub |
getaccountInfoFormStub()
|
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {BlockSyncService, LocationService, LoggingService, TokenService, TransactionService, UserService} from '@app/_services';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {first} from 'rxjs/operators';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {copyToClipboard, CustomErrorStateMatcher, exportCsv} from '@app/_helpers';
import {MatSnackBar} from '@angular/material/snack-bar';
import {add0x, strip0x} from '@src/assets/js/ethtx/dist/hex';
import {environment} from '@src/environments/environment';
import {AccountDetails, AreaName, AreaType, Category, Transaction} from '@app/_models';
@Component({
selector: 'app-account-details',
templateUrl: './account-details.component.html',
styleUrls: ['./account-details.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AccountDetailsComponent implements OnInit {
transactionsDataSource: MatTableDataSource<any>;
transactionsDisplayedColumns: Array<string> = ['sender', 'recipient', 'value', 'created', 'type'];
transactionsDefaultPageSize: number = 10;
transactionsPageSizeOptions: Array<number> = [10, 20, 50, 100];
@ViewChild('TransactionTablePaginator', {static: true}) transactionTablePaginator: MatPaginator;
@ViewChild('TransactionTableSort', {static: true}) transactionTableSort: MatSort;
userDataSource: MatTableDataSource<any>;
userDisplayedColumns: Array<string> = ['name', 'phone', 'created', 'balance', 'location'];
usersDefaultPageSize: number = 10;
usersPageSizeOptions: Array<number> = [10, 20, 50, 100];
@ViewChild('UserTablePaginator', {static: true}) userTablePaginator: MatPaginator;
@ViewChild('UserTableSort', {static: true}) userTableSort: MatSort;
accountInfoForm: FormGroup;
account: AccountDetails;
accountAddress: string;
accountStatus: any;
accounts: Array<AccountDetails> = [];
accountsType: string = 'all';
categories: Array<Category>;
areaNames: Array<AreaName>;
areaTypes: Array<AreaType>;
transaction: any;
transactions: Array<Transaction>;
transactionsType: string = 'all';
accountTypes: Array<string>;
transactionsTypes: Array<string>;
genders: Array<string>;
matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
submitted: boolean = false;
bloxbergLink: string;
constructor(
private formBuilder: FormBuilder,
private locationService: LocationService,
private transactionService: TransactionService,
private userService: UserService,
private route: ActivatedRoute,
private router: Router,
private tokenService: TokenService,
private loggingService: LoggingService,
private blockSyncService: BlockSyncService,
private cdr: ChangeDetectorRef,
private snackBar: MatSnackBar,
) {
this.accountInfoForm = this.formBuilder.group({
name: ['', Validators.required],
phoneNumber: ['', Validators.required],
age: ['', Validators.required],
type: ['', Validators.required],
bio: ['', Validators.required],
gender: ['', Validators.required],
businessCategory: ['', Validators.required],
userLocation: ['', Validators.required],
location: ['', Validators.required],
locationType: ['', Validators.required],
});
this.route.paramMap.subscribe(async (params: Params) => {
this.accountAddress = add0x(params.get('id'));
this.bloxbergLink = 'https://blockexplorer.bloxberg.org/address/' + this.accountAddress + '/transactions';
(await this.userService.getAccountByAddress(this.accountAddress, 100)).subscribe(async res => {
if (res !== undefined) {
this.account = res;
this.cdr.detectChanges();
this.loggingService.sendInfoLevelMessage(this.account);
// this.userService.getAccountStatus(this.account.vcard?.tel[0].value).pipe(first())
// .subscribe(response => this.accountStatus = response);
this.accountInfoForm.patchValue({
name: this.account.vcard?.fn[0].value,
phoneNumber: this.account.vcard?.tel[0].value,
age: this.account.age,
type: this.account.type,
bio: this.account.products,
gender: this.account.gender,
businessCategory: this.account.category,
userLocation: this.account.location.area_name,
location: this.account.location.area,
locationType: this.account.location.area_type,
});
} else {
alert('Account not found!');
}
});
this.blockSyncService.blockSync(this.accountAddress);
});
this.userService.getCategories().pipe(first()).subscribe(res => this.categories = res);
this.locationService.getAreaNames().pipe(first()).subscribe(res => this.areaNames = res);
this.locationService.getAreaTypes().pipe(first()).subscribe(res => this.areaTypes = res);
this.userService.getAccountTypes().pipe(first()).subscribe(res => this.accountTypes = res);
this.userService.getTransactionTypes().pipe(first()).subscribe(res => this.transactionsTypes = res);
this.userService.getGenders().pipe(first()).subscribe(res => this.genders = res);
}
ngOnInit(): void {
this.userService.accountsSubject.subscribe(accounts => {
this.userDataSource = new MatTableDataSource<any>(accounts);
this.userDataSource.paginator = this.userTablePaginator;
this.userDataSource.sort = this.userTableSort;
this.accounts = accounts;
});
this.transactionService.transactionsSubject.subscribe(transactions => {
this.transactionsDataSource = new MatTableDataSource<any>(transactions);
this.transactionsDataSource.paginator = this.transactionTablePaginator;
this.transactionsDataSource.sort = this.transactionTableSort;
this.transactions = transactions;
});
}
doTransactionFilter(value: string): void {
this.transactionsDataSource.filter = value.trim().toLocaleLowerCase();
}
doUserFilter(value: string): void {
this.userDataSource.filter = value.trim().toLocaleLowerCase();
}
viewTransaction(transaction): void {
this.transaction = transaction;
}
viewAccount(account): void {
this.router.navigateByUrl(`/accounts/${strip0x(account.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0])}`);
}
get accountInfoFormStub(): any { return this.accountInfoForm.controls; }
async saveInfo(): Promise<void> {
this.submitted = true;
if (this.accountInfoForm.invalid || !confirm('Change user\'s profile information?')) { return; }
const accountKey = await this.userService.changeAccountInfo(
this.accountAddress,
this.accountInfoFormStub.name.value,
this.accountInfoFormStub.phoneNumber.value,
this.accountInfoFormStub.age.value,
this.accountInfoFormStub.type.value,
this.accountInfoFormStub.bio.value,
this.accountInfoFormStub.gender.value,
this.accountInfoFormStub.businessCategory.value,
this.accountInfoFormStub.userLocation.value,
this.accountInfoFormStub.location.value,
this.accountInfoFormStub.locationType.value
);
this.submitted = false;
}
filterAccounts(): void {
if (this.accountsType === 'all') {
this.userService.accountsSubject.subscribe(accounts => {
this.userDataSource.data = accounts;
this.accounts = accounts;
});
} else {
this.userDataSource.data = this.accounts.filter(account => account.type === this.accountsType);
}
}
filterTransactions(): void {
if (this.transactionsType === 'all') {
this.transactionService.transactionsSubject.subscribe(transactions => {
this.transactionsDataSource.data = transactions;
this.transactions = transactions;
});
} else {
this.transactionsDataSource.data = this.transactions.filter(transaction => transaction.type === this.transactionsType);
}
}
resetPin(): void {
if (!confirm('Reset user\'s pin?')) { return; }
this.userService.resetPin(this.account.vcard.tel[0].value).pipe(first()).subscribe(res => {
this.loggingService.sendInfoLevelMessage(`Response: ${res}`);
});
}
downloadCsv(data: any, filename: string): void {
exportCsv(data, filename);
}
copyAddress(): void {
if (copyToClipboard(this.accountAddress)) {
this.snackBar.open(this.accountAddress + ' copied successfully!', 'Close', { duration: 3000 });
}
}
}
<!-- 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" 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"> {{accountAddress}} </a>
<img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress()" alt="Copy">
</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 *ngFor="let accountType of accountTypes" [value]="accountType">
{{accountType | uppercase}}
</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 *ngFor="let gender of genders" [value]="gender">
{{gender | uppercase}}
</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 *ngFor="let category of categories" [value]="category">
{{category | titlecase}}
</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">
<mat-option *ngFor="let area of areaNames" [value]="area">
{{area | uppercase}}
</mat-option>
</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 *ngFor="let type of areaTypes" [value]="type">
{{type | uppercase}}
</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-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-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 *ngIf="account" 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 *ngFor="let transactionType of transactionsTypes" [value]="transactionType">
{{transactionType | uppercase}}
</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 *ngFor="let accountType of accountTypes" [value]="accountType">
{{accountType | uppercase}}
</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>
./account-details.component.scss