This commit is contained in:
2023-07-21 23:01:56 +03:00
parent fa5a8a9001
commit d0cdaa85b6
18 changed files with 863 additions and 178 deletions
@@ -5,109 +5,49 @@
<app-breadcrumb [title]="'Dashboad 2'" [items]="['Home']" [active_item]="'Dashboad 2'"></app-breadcrumb>
</div>
<div class="row">
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5>Income</h5>
<p class="text-muted">Income last 7 days</p>
</div>
<h3 class="text-info">{{dashboardModel?.incomeLastWeek | number: '1.2-6'}}</h3>
</div>
<div class="card-content mt-2">
<div class="progress skill-progress m-b-5 w-100">
<div class="progress-bar l-bg-purple width-per-45" role="progressbar" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100">
<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</h5>
</div>
<h3 class="text-danger">{{dashboardModel?.balance | number: '0.2-2'}}</h3>
</div>
</div>
<div class="d-flex justify-content-between mt-2" title="{{dashboardModel?.incomePreviousWeek}}">
<p class="text-muted mb-0">Change previous 7 days</p>
<p class="text-muted mb-0">{{dashboardModel?.incomeChange | number: '1.2'}}%</p>
</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</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</h5>
</div>
<h3 class="text-danger">{{dashboardModel?.balanceCredit | number: '0.2-2'}}</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5>Outcome</h5>
<p class="text-muted">Outcome last 7 days</p>
</div>
<h3 class="text-success">{{dashboardModel?.outcomeLastWeek | number: '1.2-6'}}</h3>
</div>
<div class="card-content mt-2">
<div class="progress skill-progress m-b-5 w-100">
<div class="progress-bar l-bg-orange width-per-45" role="progressbar" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-2" title="{{dashboardModel?.outcomePreviousWeek}}">
<p class="text-muted mb-0">Change previous 7 days</p>
<p class="text-muted mb-0">{{dashboardModel?.outcomeChange | number: '1.2'}}%</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5>New Orders</h5>
<p class="text-muted">Fresh New Order</p>
</div>
<h3 class="text-danger">15</h3>
</div>
<div class="card-content mt-2">
<div class="progress skill-progress m-b-5 w-100">
<div class="progress-bar l-bg-cyan width-per-45" role="progressbar" aria-valuenow="45" aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
</div>
<div class="d-flex justify-content-between">
<p class="text-muted mb-0">Change</p>
<p class="text-muted mb-0">50%</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5>New Users</h5>
<p class="text-muted">Joined New User</p>
</div>
<h3 class="text-secondary">12</h3>
</div>
<div class="card-content mt-2">
<div class="progress skill-progress m-b-5 w-100">
<div class="progress-bar l-bg-red width-per-45" role="progressbar" aria-valuenow="45" aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-2">
<p class="text-muted mb-0">Change</p>
<p class="text-muted mb-0">25%</p>
</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">
@@ -65,8 +65,8 @@ export class Dashboard2Component implements OnInit {
this.httpClient
.get<DashboardModel>(ApiRoutes.Dashboard)
.subscribe(data => {
data.incomeChange = this.calcChanges(data.incomeLastWeek, data.incomePreviousWeek);
data.outcomeChange = this.calcChanges(data.outcomeLastWeek, data.outcomePreviousWeek);
data.incomeChange = this.calcChanges(data.incomeLast, data.incomePrevious);
data.outcomeChange = this.calcChanges(data.outcomeLast, data.outcomePrevious);
this.dashboardModel = data;
});
}
@@ -1,8 +1,11 @@
export interface DashboardModel {
incomeLastWeek: number;
incomePreviousWeek: number;
incomeLast: number;
incomePrevious: number;
incomeChange: number;
outcomeLastWeek: number;
outcomePreviousWeek: number;
outcomeLast: number;
outcomePrevious: number;
outcomeChange: number;
balance: number;
balanceDebit: number;
balanceCredit: number;
}