104 lines
3.4 KiB
HTML
104 lines
3.4 KiB
HTML
<section class="content">
|
|
<div class="content-block">
|
|
<div class="block-header">
|
|
<!-- breadcrumb -->
|
|
<app-breadcrumb [title]="'MENUITEMS.DASHBOARD.LIST.DASHBOARD1'" [items]="['HOME']" [active_item]="'MENUITEMS.DASHBOARD.LIST.DASHBOARD1'"></app-breadcrumb>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-4 col-sm-4 col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5>{{'BALANCE' | translate}}</h5>
|
|
</div>
|
|
<h3 class="text-danger">{{dashboardModel?.balance | number: '0.2-2'}}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-4 col-sm-4 col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5>{{'DEBIT.BALANCE' | translate}}</h5>
|
|
<p class="text-muted"></p>
|
|
</div>
|
|
<h3 class="text-success">{{dashboardModel?.balanceDebit | number: '0.2-2'}}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-4 col-sm-4 col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5>{{'CREDIT.BALANCE' | translate}}</h5>
|
|
</div>
|
|
<h3 class="text-danger">{{dashboardModel?.balanceCredit | number: '0.2-2'}}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row clearfix">
|
|
<!-- Bar chart with line -->
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
|
|
<div class="card">
|
|
<div class="header">
|
|
<h2>{{'CURRENT.BALANCE' | translate}}</h2>
|
|
<button mat-icon-button [matMenuTriggerFor]="menu" class="header-dropdown">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #menu="matMenu">
|
|
<button mat-menu-item>Action</button>
|
|
<button mat-menu-item>Another action</button>
|
|
<button mat-menu-item>Something else here</button>
|
|
</mat-menu>
|
|
</div>
|
|
<div class="body">
|
|
<div id="chart">
|
|
<apx-chart #chart *ngIf="pieChartOptions" class="apex-pie-center"
|
|
[series]="pieChartOptions.series2!"
|
|
[chart]="pieChartOptions.chart!"
|
|
[labels]="pieChartOptions.labels!"
|
|
[responsive]="pieChartOptions.responsive!"
|
|
[tooltip]="pieChartOptions.tooltip!"
|
|
>
|
|
</apx-chart>
|
|
</div>
|
|
<div class="table-responsive m-t-15">
|
|
<table class="table align-items-center">
|
|
<tbody>
|
|
<tr *ngFor="let item of top10Balance">
|
|
<td><i class="fa fa-circle col-cyan msr-2"></i> {{item.name}}</td>
|
|
<td class="col-green" style="text-align: right;">{{item.balance | number: '1.2'}} ({{item.currencyShortName}})</td>
|
|
<td class="col-green" style="text-align: right;">{{item.balanceAtRate | number: '1.2'}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="fa fa-circle col-green msr-2"></i> {{'OTHER' | translate}}</td>
|
|
<td></td>
|
|
<td class="col-green" style="text-align: right;">{{top10BalanceOther | number: '1.2'}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right; font-size: 16px;"><i class="fa fa-circle col-orange msr-2"></i> {{'TOTAL' | translate}}</td>
|
|
<td></td>
|
|
<td class="col-green" style="text-align: right; font-size: 16px;">{{top10BalanceTotal | number: '1.2'}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|