fix

MyOffice.SPA/src/app/core/core.module.ts

@@ -23,6 +23,7 @@ import { AuthCodeFlowConfig, AuthModuleConfig } from '../config.oidc';
 import { SubjectExtensions } from './extensions/general.extensions';
 import { ExternalLoginConfig } from '../config.external-login';
 import { AccountCategoryService } from '../services/account.category.service';
+import { AccountService } from '../services/account.service';
 
 export function storageFactory(): OAuthStorage {
 	return localStorage;
@@ -49,6 +50,7 @@ export function storageFactory(): OAuthStorage {
 		OidcHelperService,
 		SubjectExtensions,
 		AccountCategoryService,
+		AccountService,
 	],
 	schemas: [
 		CUSTOM_ELEMENTS_SCHEMA

MyOffice.SPA/src/app/core/service/language.service.ts

@@ -5,7 +5,7 @@ import { TranslateService } from '@ngx-translate/core';
 	providedIn: 'root',
 })
 export class LanguageService {
-	languages: string[] = ['en', 'es', 'de'];
+	languages: string[] = ['en', 'es', 'de', 'ua'];
 
 	constructor(public translate: TranslateService) {
 		let browserLang: string;
@@ -16,7 +16,8 @@ export class LanguageService {
 		} else {
 			browserLang = translate.getBrowserLang() as string;
 		}
-		translate.use(browserLang.match(/en|es|de/) ? browserLang : 'en');
+		console.log(browserLang.match(/en|es|de|ua/));
+		translate.use(browserLang.match(/en|es|de|ua/) ? browserLang : 'en');
 	}
 
 	setLanguage(lang: string) {

MyOffice.SPA/src/app/dashboard/dashboard.module.ts

@@ -1,9 +1,9 @@
+// angular
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { DecimalPipe } from '@angular/common';
 
-import { DashboardRoutingModule } from './dashboard-routing.module';
-import { Dashboard1Component } from './dashboard1/dashboard1.component';
-import { Dashboard2Component } from './dashboard2/dashboard2.component';
+// libs
 import { NgScrollbarModule } from 'ngx-scrollbar';
 import { NgChartsModule } from 'ng2-charts';
 import { MatIconModule } from '@angular/material/icon';
@@ -14,6 +14,12 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { NgApexchartsModule } from 'ng-apexcharts';
+import { TranslateModule } from '@ngx-translate/core';
+
+// app
+import { DashboardRoutingModule } from './dashboard-routing.module';
+import { Dashboard1Component } from './dashboard1/dashboard1.component';
+import { Dashboard2Component } from './dashboard2/dashboard2.component';
 import { ComponentsModule } from 'src/app/shared/components/components.module';
 import { SharedModule } from '../shared/shared.module';
 
@@ -34,7 +40,11 @@ import { SharedModule } from '../shared/shared.module';
 		MatProgressBarModule,
 		ComponentsModule,
 		SharedModule,
+		TranslateModule,
 	],
+	providers: [
+		DecimalPipe,
+	]
 })
 export class DashboardModule {
 }

MyOffice.SPA/src/app/dashboard/dashboard2/dashboard2.component.html

@@ -2,7 +2,7 @@
 	<div class="content-block">
 		<div class="block-header">
 			<!-- breadcrumb -->
-			<app-breadcrumb [title]="'Dashboad 2'" [items]="['Home']" [active_item]="'Dashboad 2'"></app-breadcrumb>
+			<app-breadcrumb [title]="'MENUITEMS.DASHBOARD.LIST.DASHBOARD1'" [items]="['HOME']" [active_item]="'MENUITEMS.DASHBOARD.LIST.DASHBOARD1'"></app-breadcrumb>
 		</div>
 
 		<div class="row">
@@ -12,7 +12,7 @@
 					<div class="card-body">
 						<div class="d-flex justify-content-between">
 							<div>
-								<h5>Balance</h5>
+								<h5>{{'BALANCE' | translate}}</h5>
 							</div>
 							<h3 class="text-danger">{{dashboardModel?.balance | number: '0.2-2'}}</h3>
 						</div>
@@ -25,7 +25,7 @@
 					<div class="card-body">
 						<div class="d-flex justify-content-between">
 							<div>
-								<h5>Debit balance</h5>
+								<h5>{{'DEBIT.BALANCE' | translate}}</h5>
 								<p class="text-muted"></p>
 							</div>
 							<h3 class="text-success">{{dashboardModel?.balanceDebit | number: '0.2-2'}}</h3>
@@ -39,7 +39,7 @@
 					<div class="card-body">
 						<div class="d-flex justify-content-between">
 							<div>
-								<h5>Credit balance</h5>
+								<h5>{{'CREDIT.BALANCE' | translate}}</h5>
 							</div>
 							<h3 class="text-danger">{{dashboardModel?.balanceCredit | number: '0.2-2'}}</h3>
 						</div>
@@ -53,7 +53,7 @@
 			<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
 				<div class="card">
 					<div class="header">
-						<h2>Current rest</h2>
+						<h2>{{'CURRENT.BALANCE' | translate}}</h2>
 						<button mat-icon-button [matMenuTriggerFor]="menu" class="header-dropdown">
 							<mat-icon>more_vert</mat-icon>
 						</button>
@@ -65,491 +65,32 @@
 					</div>
 					<div class="body">
 						<div id="chart">
-							<apx-chart [series]="pieChartOptions.series2!" [chart]="pieChartOptions.chart!"
-									   [labels]="pieChartOptions.labels!" [responsive]="pieChartOptions.responsive!"
-									   [dataLabels]="pieChartOptions.dataLabels!" [legend]="pieChartOptions.legend!" class="apex-pie-center">
+							<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>
-										<td><i class="fa fa-circle col-cyan msr-2"></i> India</td>
-										<td>23</td>
-										<td class="col-green">+32%</td>
+									<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-blue msr-2"></i>USA</td>
-										<td>32</td>
-										<td class="col-green">+12%</td>
+										<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><i class="fa fa-circle col-orange msr-2"></i>Shrilanka</td>
-										<td>12</td>
-										<td class="col-orange">-12%</td>
-									</tr>
-									<tr>
-										<td><i class="fa fa-circle col-green msr-2"></i>Australia</td>
-										<td>32</td>
-										<td class="col-green">+3%</td>
-									</tr>
-								</tbody>
-							</table>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="row clearfix">
-			<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
-				<div class="card">
-					<div class="header">
-						<h2>Notice Board</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">
-						<ng-scrollbar style="height: 380px" visibility="hover">
-							<div class="recent-comment">
-								<div class="notice-board">
-									<div class="table-img">
-										<img class="notice-object" src="assets/images/user/user6.jpg" alt="...">
-									</div>
-									<div class="notice-body">
-										<h6 class="notice-heading col-green">Airi Satou</h6>
-										<p>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam.</p>
-										<small class="text-muted">7 hours ago</small>
-									</div>
-								</div>
-								<div class="notice-board">
-									<div class="table-img">
-										<img class="notice-object" src="assets/images/user/user4.jpg" alt="...">
-									</div>
-									<div class="notice-body">
-										<h6 class="notice-heading color-primary col-indigo">Sarah Smith</h6>
-										<p>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam.</p>
-										<p class="comment-date">1 hour ago</p>
-									</div>
-								</div>
-								<div class="notice-board">
-									<div class="table-img">
-										<img class="notice-object" src="assets/images/user/user3.jpg" alt="...">
-									</div>
-									<div class="notice-body">
-										<h6 class="notice-heading color-danger col-cyan">Cara Stevens</h6>
-										<p>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam.</p>
-										<div class="comment-date">Yesterday</div>
-									</div>
-								</div>
-								<div class="notice-board no-border">
-									<div class="table-img">
-										<img class="notice-object" src="assets/images/user/user7.jpg" alt="...">
-									</div>
-									<div class="notice-body">
-										<h6 class="notice-heading color-info col-orange">Ashton Cox</h6>
-										<p>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam.</p>
-										<div class="comment-date">Yesterday</div>
-									</div>
-								</div>
-								<div class="notice-board">
-									<div class="table-img">
-										<img class="notice-object" src="assets/images/user/user9.jpg" alt="...">
-									</div>
-									<div class="notice-body">
-										<h6 class="notice-heading color-primary col-red">Mark Hay</h6>
-										<p>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam.</p>
-										<p class="comment-date">1 hour ago</p>
-									</div>
-								</div>
-								<div class="notice-board">
-									<div class="table-img">
-										<img class="notice-object" src="assets/images/user/user8.jpg" alt="...">
-									</div>
-									<div class="notice-body">
-										<h6 class="notice-heading color-primary col-green">Jay Pandya</h6>
-										<p>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam.</p>
-										<p class="comment-date">3 hour ago</p>
-									</div>
-								</div>
-							</div>
-						</ng-scrollbar>
-					</div>
-				</div>
-			</div>
-			<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
-				<div class="card">
-					<div class="header">
-						<h2>Project Status</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>
-					<ng-scrollbar style="height: 410px" visibility="hover">
-						<div class="tableBody">
-							<div class="table-responsive">
-								<table class="table table-hover">
-									<thead>
-										<tr>
-											<th>Project Name</th>
-											<th>Progress</th>
-											<th>Duration</th>
-										</tr>
-									</thead>
-									<tbody>
-										<tr>
-											<td>Project A</td>
-											<td>
-												30%
-												<mat-progress-bar mode="determinate" value="30" color="warn" class="progress-round">
-												</mat-progress-bar>
-											</td>
-											<td>2 Months</td>
-										</tr>
-										<tr>
-											<td>Project B</td>
-											<td>
-												55%
-												<mat-progress-bar mode="determinate" class="progress-round" value="55">
-												</mat-progress-bar>
-											</td>
-											<td>3 Months</td>
-										</tr>
-										<tr>
-											<td>Project C</td>
-											<td>
-												67%
-												<mat-progress-bar mode="determinate" class="progress-round orange-progress" value="67">
-												</mat-progress-bar>
-											</td>
-											<td>1 Months</td>
-										</tr>
-										<tr>
-											<td>Project D</td>
-											<td>
-												70%
-												<mat-progress-bar mode="determinate" class="progress-round green-progress" value="70">
-												</mat-progress-bar>
-											</td>
-											<td>2 Months</td>
-										</tr>
-										<tr>
-											<td>Project E</td>
-											<td>
-												24%
-												<mat-progress-bar mode="determinate" value="24" class="progress-round l-red-progress">
-												</mat-progress-bar>
-											</td>
-											<td>3 Months</td>
-										</tr>
-										<tr>
-											<td>Project F</td>
-											<td>
-												77%
-												<mat-progress-bar mode="determinate" class="progress-round l-green-progress" value="77">
-												</mat-progress-bar>
-											</td>
-											<td>4 Months</td>
-										</tr>
-										<tr>
-											<td>Project G</td>
-											<td>
-												41%
-												<mat-progress-bar mode="determinate" value="41" class="progress-round l-cyan-progress">
-												</mat-progress-bar>
-											</td>
-											<td>2 Months</td>
-										</tr>
-										<tr>
-											<td>Project H</td>
-											<td>
-												41%
-												<mat-progress-bar mode="determinate" value="41" class="progress-round l-orange-progress">
-												</mat-progress-bar>
-											</td>
-											<td>2 Months</td>
-										</tr>
-									</tbody>
-								</table>
-							</div>
-						</div>
-					</ng-scrollbar>
-				</div>
-			</div>
-			<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
-				<div class="card">
-					<div class="header">
-						<h2>Earning Source</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 class="totalEarning">
-							<h2>$90,808</h2>
-						</div>
-						<div class="tab-pane body" id="skills">
-							<ul class="list-unstyled">
-								<li>
-									<div class="mb-2">
-										<span class="progress-label">envato.com</span>
-										<span class="float-end progress-percent label label-info m-b-5">17%</span>
-									</div>
-									<div class="progress skill-progress m-b-20 w-100">
-										<div class="progress-bar l-bg-green width-per-45" role="progressbar" aria-valuenow="45"
-											 aria-valuemin="0" aria-valuemax="100">
-										</div>
-									</div>
-								</li>
-								<li>
-									<div class="mb-2">
-										<span class="float-start progress-label">google.com</span>
-										<span class="float-end progress-percent label label-danger m-b-5">27%</span>
-									</div>
-									<div class="progress skill-progress m-b-20 w-100">
-										<div class="progress-bar l-bg-purple width-per-27" role="progressbar" aria-valuenow="27"
-											 aria-valuemin="0" aria-valuemax="100">
-										</div>
-									</div>
-								</li>
-								<li>
-									<div class="mb-2">
-										<span class="float-start progress-label">yahoo.com</span>
-										<span class="float-end progress-percent label label-primary m-b-5">25%</span>
-									</div>
-									<div class="progress skill-progress m-b-20 w-100">
-										<div class="progress-bar l-bg-orange width-per-25" role="progressbar" aria-valuenow="25"
-											 aria-valuemin="0" aria-valuemax="100">
-										</div>
-									</div>
-								</li>
-								<li>
-									<div class="mb-2">
-										<span class="float-start progress-label">store</span>
-										<span class="float-end progress-percent label label-success m-b-5">18%</span>
-									</div>
-									<div class="progress skill-progress m-b-20 w-100">
-										<div class="progress-bar l-bg-cyan width-per-18" role="progressbar" aria-valuenow="18"
-											 aria-valuemin="0" aria-valuemax="100">
-										</div>
-									</div>
-								</li>
-								<li>
-									<div class="mb-2">
-										<span class="float-start progress-label">Others</span>
-										<span class="float-end progress-percent label label-warning m-b-5">13%</span>
-									</div>
-									<div class="progress skill-progress m-b-20 w-100">
-										<div class="progress-bar l-bg-red width-per-13" role="progressbar" aria-valuenow="13"
-											 aria-valuemin="0" aria-valuemax="100">
-										</div>
-									</div>
-								</li>
-							</ul>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="row clearfix">
-			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-				<div class="card">
-					<div class="header">
-						<h2>Recent Orders</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="tableBody">
-						<div class="table-responsive">
-							<table class="table display product-overview mb-30" id="support_table">
-								<thead>
-									<tr>
-										<th>Order ID</th>
-										<th>Customer Name</th>
-										<th>Item</th>
-										<th>Order Date</th>
-										<th>Quantity</th>
-										<th>Payment</th>
-										<th>Status</th>
-										<th>Invoice</th>
-										<th>Details</th>
-									</tr>
-								</thead>
-								<tbody>
-									<tr>
-										<td>ID7865</td>
-										<td>
-											<img src="assets/images/user/user1.jpg" alt="" class="tbl-user-img-small">Jens
-											Brincker
-										</td>
-										<td>iPhone X</td>
-										<td>22/05/2021</td>
-										<td>2</td>
-										<td>Credit Card</td>
-										<td>
-											<div class="badge badge-solid-green">Paid</div>
-										</td>
-										<td>
-											<i class="far fa-file-pdf tbl-pdf"></i>
-										</td>
-										<td>
-											<button mat-stroked-button color="primary">Details</button>
-										</td>
-									</tr>
-									<tr>
-										<td>ID9357</td>
-										<td>
-											<img src="assets/images/user/user2.jpg" alt="" class="tbl-user-img-small">Mark Harry
-										</td>
-										<td> Pixel 2</td>
-										<td>12/06/2021</td>
-										<td>1</td>
-										<td>COD</td>
-										<td>
-											<div class="badge badge-solid-orange">Unpaid</div>
-										</td>
-										<td>
-											<i class="far fa-file-pdf tbl-pdf"></i>
-										</td>
-										<td>
-											<button mat-stroked-button color="primary">Details</button>
-										</td>
-									</tr>
-									<tr>
-										<td>ID3987</td>
-										<td>
-											<img src="assets/images/user/user3.jpg" alt="" class="tbl-user-img-small">Anthony
-											Davie
-										</td>
-										<td>OnePlus</td>
-										<td>02/02/2021</td>
-										<td>5</td>
-										<td>Debit Card</td>
-										<td>
-											<div class="badge badge-solid-blue">Pending</div>
-										</td>
-										<td>
-											<i class="far fa-file-pdf tbl-pdf"></i>
-										</td>
-										<td>
-											<button mat-stroked-button color="primary">Details</button>
-										</td>
-									</tr>
-									<tr>
-										<td>ID2483</td>
-										<td>
-											<img src="assets/images/user/user4.jpg" alt="" class="tbl-user-img-small">David Perry
-										</td>
-										<td>Moto Z2</td>
-										<td>10/01/2021</td>
-										<td>2</td>
-										<td>Credit Card</td>
-										<td>
-											<div class="badge badge-solid-green">Paid</div>
-										</td>
-										<td>
-											<i class="far fa-file-pdf tbl-pdf"></i>
-										</td>
-										<td>
-											<button mat-stroked-button color="primary">Details</button>
-										</td>
-									</tr>
-									<tr>
-										<td>ID2986</td>
-										<td>
-											<img src="assets/images/user/user5.jpg" alt="" class="tbl-user-img-small">John Doe
-										</td>
-										<td>Samsung F62</td>
-										<td>20/05/2021</td>
-										<td>3</td>
-										<td>Net Banking</td>
-										<td>
-											<div class="badge badge-solid-orange">Unpaid</div>
-										</td>
-										<td>
-											<i class="far fa-file-pdf tbl-pdf"></i>
-										</td>
-										<td>
-											<button mat-stroked-button color="primary">Details</button>
-										</td>
-									</tr>
-									<tr>
-										<td>ID1267</td>
-										<td>
-											<img src="assets/images/user/user6.jpg" alt="" class="tbl-user-img-small">Sarah Smith
-										</td>
-										<td>iPhone 12</td>
-										<td>10/07/2021</td>
-										<td>1</td>
-										<td>COD</td>
-										<td>
-											<div class="badge badge-solid-green">Paid</div>
-										</td>
-										<td>
-											<i class="far fa-file-pdf tbl-pdf"></i>
-										</td>
-										<td>
-											<button mat-stroked-button color="primary">Details</button>
-										</td>
-									</tr>
-									<tr>
-										<td>ID3398</td>
-										<td>
-											<img src="assets/images/user/user7.jpg" alt="" class="tbl-user-img-small">Cara Stevens
-										</td>
-										<td>Moto Gs5</td>
-										<td>11/04/2021</td>
-										<td>2</td>
-										<td>UPI Payment</td>
-										<td>
-											<div class="badge badge-solid-blue">Pending</div>
-										</td>
-										<td>
-											<i class="far fa-file-pdf tbl-pdf"></i>
-										</td>
-										<td>
-											<button mat-stroked-button color="primary">Details</button>
-										</td>
-									</tr>
-									<tr>
-										<td>ID9965</td>
-										<td>
-											<img src="assets/images/user/user8.jpg" alt="" class="tbl-user-img-small">Ashton Cox
-										</td>
-										<td>Pixel 2</td>
-										<td>14/05/2021</td>
-										<td>4</td>
-										<td>Credit Card</td>
-										<td>
-											<div class="badge badge-solid-green">Paid</div>
-										</td>
-										<td>
-											<i class="far fa-file-pdf tbl-pdf"></i>
-										</td>
-										<td>
-											<button mat-stroked-button color="primary">Details</button>
-										</td>
+										<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>

MyOffice.SPA/src/app/dashboard/dashboard2/dashboard2.component.ts

@@ -1,6 +1,9 @@
 // angular
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { OnInit } from '@angular/core';
+import { ViewChild } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { DecimalPipe } from '@angular/common';
 
 // libs
 import {
@@ -19,10 +22,12 @@ import {
 	ApexResponsive,
 	ApexNonAxisChartSeries,
 } from 'ng-apexcharts';
+import { ChartComponent } from "ng-apexcharts";
 
 // app
 import { ApiRoutes } from '../../api-routes';
 import { DashboardModel } from '../../model/dashboard.model';
+import { DashboardRestModel } from '../../model/dashboard.model';
 
 export type ChartOptions = {
 	series: ApexAxisChartSeries;
@@ -49,24 +54,48 @@ export type ChartOptions = {
 	styleUrls: ['./dashboard2.component.scss'],
 })
 export class Dashboard2Component implements OnInit {
-	lineChartOptions!: Partial<ChartOptions>;
-	pieChartOptions!: Partial<ChartOptions>;
+
+	@ViewChild("chart") chart!: ChartComponent;
+	public pieChartOptions!: Partial<ChartOptions>;
+	top10Balance?: DashboardRestModel[];
+	top10BalanceOther?: number;
+	top10BalanceTotal?: number;
 	dashboardModel?: DashboardModel;
 
 	//  color: ["#3FA7DC", "#F6A025", "#9BC311"],
-	constructor(private httpClient: HttpClient) {
-		
+	constructor(
+		private httpClient: HttpClient,
+		private _decimalPipe: DecimalPipe
+	) {
+
 	}
 
 	ngOnInit() {
-		this.chart1();
-		this.chart2();
-
 		this.httpClient
 			.get<DashboardModel>(ApiRoutes.Dashboard)
 			.subscribe(data => {
 				data.incomeChange = this.calcChanges(data.incomeLast, data.incomePrevious);
 				data.outcomeChange = this.calcChanges(data.outcomeLast, data.outcomePrevious);
+
+				var labels = [];
+				var series2: number[] = [];
+				for (var i = 0; i < data.balanceRests.length; i++) {
+					let item = data.balanceRests[i];
+					labels.push(item.name);
+					series2.push(item.balanceAtRate);
+				}
+
+				this.balanceChart(labels, series2);
+
+				this.top10Balance = data.balanceRests
+					.filter(x => x.balanceAtRate > 0)
+					.sort(x => x.balanceAtRate)
+					.slice(0, 10);
+
+				this.top10BalanceTotal = data.balanceRests.reduce((sum, current) => sum + current.balanceAtRate, 0);
+				this.top10BalanceOther = this.top10Balance.reduce((sum, current) => sum + current.balanceAtRate, 0);
+				this.top10BalanceOther = this.top10BalanceTotal - this.top10BalanceOther;
+
 				this.dashboardModel = data;
 			});
 	}
@@ -82,101 +111,41 @@ export class Dashboard2Component implements OnInit {
 		return 0;
 	}
 
-	private chart1() {
-		this.lineChartOptions = {
-			series: [
-				{
-					name: 'Product 1',
-					data: [70, 200, 80, 180, 170, 105, 210],
-				},
-				{
-					name: 'Product 2',
-					data: [80, 250, 30, 120, 260, 100, 180],
-				},
-				{
-					name: 'Product 3',
-					data: [85, 130, 85, 225, 80, 190, 120],
-				},
-			],
-			chart: {
-				height: 350,
-				type: 'line',
-				foreColor: '#9aa0ac',
-				dropShadow: {
-					enabled: true,
-					color: '#000',
-					top: 18,
-					left: 7,
-					blur: 10,
-					opacity: 0.2,
-				},
-				toolbar: {
-					show: false,
-				},
-			},
-			colors: ['#00E396', '#775DD0', '#FEB019'],
-			stroke: {
-				curve: 'smooth',
-			},
-			grid: {
-				show: true,
-				borderColor: '#9aa0ac',
-				strokeDashArray: 1,
-			},
-			markers: {
-				size: 3,
-			},
-			xaxis: {
-				categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
-				title: {
-					text: 'Month',
-				},
-			},
-			yaxis: {
-				// opposite: true,
-				title: {
-					text: 'Sales',
-				},
-			},
-			legend: {
-				position: 'top',
-				horizontalAlign: 'right',
-				floating: true,
-				offsetY: -25,
-				offsetX: -5,
-			},
-			tooltip: {
-				theme: 'dark',
-				marker: {
-					show: true,
-				},
-				x: {
-					show: true,
-				},
-			},
-		};
-	}
+	private balanceChart(labels: string[], series2: number[]) {
+		var self = this;
 
-	private chart2() {
 		this.pieChartOptions = {
-			series2: [44, 55, 13, 43, 22],
+			labels: labels,
+			series2: series2,
 			chart: {
 				type: 'donut',
-				width: 225,
+				width: 600,
+				height: 600,
 			},
 			legend: {
-				show: false,
+				show: true,
 			},
 			dataLabels: {
 				enabled: false,
 			},
-			labels: ['Science', 'Mathes', 'Economics', 'History', 'Music'],
-			responsive: [
-				{
-					breakpoint: 480,
-					options: {},
+			responsive: [{
+				breakpoint: 480,
+				options: {
+					legend: {
+						position: 'bottom'
+					}
 				},
-			],
+			}],
+			tooltip: {
+				x: {
+					show: false,
+				},
+				y: {
+					formatter: function (value, series) {
+						return self._decimalPipe.transform(value, '1.2-2') || "";
+					}
+				}
+			}
 		};
 	}
 }

MyOffice.SPA/src/app/layout/header/header.component.ts

@@ -67,6 +67,7 @@ export class HeaderComponent extends UnsubscribeOnDestroyAdapter implements OnIn
 		{ text: 'English', flag: 'assets/images/flags/us.jpg', lang: 'en' },
 		{ text: 'Spanish', flag: 'assets/images/flags/spain.jpg', lang: 'es' },
 		{ text: 'German', flag: 'assets/images/flags/germany.jpg', lang: 'de' },
+		{ text: 'Ukraine', flag: 'assets/images/flags/ukraine.png', lang: 'ua' },
 	];
 	notifications: Notifications[] = [
 		{

MyOffice.SPA/src/app/layout/sidebar/sidebar-items.ts

@@ -22,20 +22,9 @@ export const ROUTES: RouteInfo[] = [
 		badge: '',
 		badgeClass: '',
 		submenu: [
-			{
-				path: 'dashboard/dashboard1',
-				title: 'MENUITEMS.DASHBOARD.LIST.DASHBOARD1',
-				iconType: '',
-				icon: '',
-				class: 'ml-menu',
-				groupTitle: false,
-				badge: '',
-				badgeClass: '',
-				submenu: [],
-			},
 			{
 				path: 'dashboard/dashboard2',
-				title: 'MENUITEMS.DASHBOARD.LIST.DASHBOARD2',
+				title: 'MENUITEMS.DASHBOARD.LIST.DASHBOARD1',
 				iconType: '',
 				icon: '',
 				class: 'ml-menu',
@@ -48,66 +37,10 @@ export const ROUTES: RouteInfo[] = [
 	},
 
 	// Common Modules
-	{
-		path: '',
-		title: 'Authentication',
-		iconType: 'feather',
-		icon: 'user-check',
-		class: 'menu-toggle',
-		groupTitle: false,
-		badge: '',
-		badgeClass: '',
-		submenu: [
-			{
-				path: '/authentication/forgot-password',
-				title: 'Forgot Password',
-				iconType: '',
-				icon: '',
-				class: 'ml-menu',
-				groupTitle: false,
-				badge: '',
-				badgeClass: '',
-				submenu: [],
-			},
-			{
-				path: '/authentication/locked',
-				title: 'Locked',
-				iconType: '',
-				icon: '',
-				class: 'ml-menu',
-				groupTitle: false,
-				badge: '',
-				badgeClass: '',
-				submenu: [],
-			},
-			{
-				path: '/authentication/page404',
-				title: '404 - Not Found',
-				iconType: '',
-				icon: '',
-				class: 'ml-menu',
-				groupTitle: false,
-				badge: '',
-				badgeClass: '',
-				submenu: [],
-			},
-			{
-				path: '/authentication/page500',
-				title: '500 - Server Error',
-				iconType: '',
-				icon: '',
-				class: 'ml-menu',
-				groupTitle: false,
-				badge: '',
-				badgeClass: '',
-				submenu: [],
-			},
-		],
-	},
 	{
 		id: 'accounts',
 		path: '',
-		title: 'Accounts',
+		title: 'MENUITEMS.ACCOUNTS.TEXT',
 		iconType: 'feather',
 		icon: 'chevrons-down',
 		class: 'menu-toggle',
@@ -115,79 +48,11 @@ export const ROUTES: RouteInfo[] = [
 		badge: '',
 		badgeClass: '',
 		submenu: [
-			/*{
-				path: '/multilevel/first1',
-				title: 'First',
-				iconType: '',
-				icon: '',
-				class: 'ml-menu',
-				groupTitle: false,
-				badge: '',
-				badgeClass: '',
-				submenu: [],
-			},
-			{
-				path: '/',
-				title: 'Second',
-				iconType: '',
-				icon: '',
-				class: 'ml-sub-menu',
-				groupTitle: false,
-				badge: '',
-				badgeClass: '',
-				submenu: [
-					{
-						path: '/multilevel/secondlevel/second1',
-						title: 'Second 1',
-						iconType: '',
-						icon: '',
-						class: 'ml-menu2',
-						groupTitle: false,
-						badge: '',
-						badgeClass: '',
-						submenu: [],
-					},
-					{
-						path: '/',
-						title: 'Second 2',
-						iconType: '',
-						icon: '',
-						class: 'ml-sub-menu2',
-						groupTitle: false,
-						badge: '',
-						badgeClass: '',
-						submenu: [
-							{
-								path: '/multilevel/thirdlevel/third1',
-								title: 'third 1',
-								iconType: '',
-								icon: '',
-								class: 'ml-menu3',
-								groupTitle: false,
-								badge: '',
-								badgeClass: '',
-								submenu: [],
-							},
-						],
-					},
-				],
-			},
-			{
-				path: '/multilevel/first3',
-				title: 'Third',
-				iconType: '',
-				icon: '',
-				class: 'ml-menu',
-				groupTitle: false,
-				badge: '',
-				badgeClass: '',
-				submenu: [],
-			},*/
 		],
 	},
 	{
 		path: '',
-		title: 'Settings',
+		title: 'MENUITEMS.SETTINGS.TEXT',
 		iconType: 'feather',
 		icon: 'settings',
 		class: 'menu-toggle',
@@ -197,7 +62,7 @@ export const ROUTES: RouteInfo[] = [
 		submenu: [
 			{
 				path: '/settings/currencies',
-				title: 'Currencies',
+				title: 'MENUITEMS.SETTINGS.LIST.CURRENCIES',
 				iconType: '',
 				icon: '',
 				class: 'ml-menu',
@@ -208,7 +73,7 @@ export const ROUTES: RouteInfo[] = [
 			},
 			{
 				path: '/settings/account-categories',
-				title: 'Account categories',
+				title: 'MENUITEMS.SETTINGS.LIST.ACCOUNTCATEGORIES',
 				iconType: '',
 				icon: '',
 				class: 'ml-menu',
@@ -219,7 +84,7 @@ export const ROUTES: RouteInfo[] = [
 			},
 			{
 				path: '/settings/accounts',
-				title: 'Accounts',
+				title: 'MENUITEMS.SETTINGS.LIST.ACCOUNTS',
 				iconType: '',
 				icon: '',
 				class: 'ml-menu',
@@ -230,7 +95,7 @@ export const ROUTES: RouteInfo[] = [
 			},
 			{
 				path: '/settings/item-categories',
-				title: 'Item categories',
+				title: '',
 				iconType: '',
 				icon: '',
 				class: 'ml-menu',
@@ -241,7 +106,7 @@ export const ROUTES: RouteInfo[] = [
 			},
 			{
 				path: '/settings/items',
-				title: 'Items',
+				title: 'MENUITEMS.SETTINGS.LIST.ITEMS',
 				iconType: '',
 				icon: '',
 				class: 'ml-menu',

MyOffice.SPA/src/app/model/account.model.ts

@@ -6,6 +6,8 @@ export interface AccountModel {
 	name?: string,
 	currencyId?: string,
 	currencyName?: string,
+	type?: string,
+	allowDelete: boolean,
 	categories?: AccountCategoryModel[],
 	accessRights?: AccountAccessRightModel[],
 }

MyOffice.SPA/src/app/model/dashboard.model.ts

@@ -5,7 +5,21 @@ export interface DashboardModel {
 	outcomeLast: number;
 	outcomePrevious: number;
 	outcomeChange: number;
+
 	balance: number;
 	balanceDebit: number;
 	balanceCredit: number;
+
+	balanceRests: DashboardRestModel[];
+}
+
+export interface DashboardRestModel {
+	id: string;
+	name: string;
+	currencyName: string;
+	currencyShortName: string;
+	balance: number;
+	currencyRate: number;
+	currencyQuantity: number;
+	balanceAtRate: number;
 }

MyOffice.SPA/src/app/pages/settings/account/account.component.html

@@ -30,11 +30,12 @@
 											<tr *ngFor="let account of accountInCategory(category)">
 												<td>{{account.name}}</td>
 												<td>{{account.currencyId}}</td>
+												<td>{{account.type}}</td>
 												<td>
-													<button class="btn-space " (click)="edit(account)" mat-raised-button color="primary">
+													<button class="btn-space" (click)="edit(account)" mat-raised-button color="primary">
 														Edit
 													</button>
-													<button class="btn-space " (click)="remove(account)" mat-raised-button color="primary">
+													<button class="btn-space" *ngIf="account.allowDelete"  (click)="remove(account)" mat-raised-button color="primary">
 														Delete
 													</button>
 												</td>
@@ -48,11 +49,12 @@
 											<tr *ngFor="let account of accountInCategory()">
 												<td>{{account.name}}</td>
 												<td>{{account.currencyId}}</td>
+												<td>{{account.type}}</td>
 												<td>
-													<button class="btn-space " (click)="edit(account)" mat-raised-button color="primary">
+													<button class="btn-space" (click)="edit(account)" mat-raised-button color="primary">
 														Edit
 													</button>
-													<button class="btn-space " (click)="remove(account)" mat-raised-button color="primary">
+													<button class="btn-space" *ngIf="account.allowDelete" (click)="remove(account)" mat-raised-button color="primary">
 														Delete
 													</button>
 												</td>
@@ -67,10 +69,10 @@
 											<td>{{account.name}}</td>
 											<td>{{account.currencyId}}</td>
 											<td>
-												<button class="btn-space " (click)="edit(account)" mat-raised-button color="primary">
+												<button class="btn-space" (click)="edit(account)" mat-raised-button color="primary">
 													Edit
 												</button>
-												<button class="btn-space " (click)="remove(account)" mat-raised-button color="primary">
+												<button class="btn-space" *ngIf="account.allowDelete" (click)="remove(account)" mat-raised-button color="primary">
 													Delete
 												</button>
 											</td>

MyOffice.SPA/src/app/pages/settings/account/account.component.ts

@@ -81,15 +81,15 @@ export class SettingsAccountComponent {
 		});
 	}
 
-	public remove(category: AccountModel) {
-		/*Swal.fire({
-			title: 'Remove account category ' + category.name,
+	public remove(account: AccountModel) {
+		Swal.fire({
+			title: 'Remove account ' + account.name,
 			showCancelButton: true,
-			confirmButtonText: 'Add',
+			confirmButtonText: 'Delete',
 			showLoaderOnConfirm: true,
 			preConfirm: (name) => {
 				return new Promise((resolve, reject) => {
-					this.httpClient.delete(ApiRoutes.SettingsAccountCategory.replace(':id', category.id!))
+					this.httpClient.delete(ApiRoutes.SettingsAccount.replace(':id', account.id!))
 						.subscribe(data => {
 							resolve(data);
 						}, error => {
@@ -103,7 +103,7 @@ export class SettingsAccountComponent {
 			},
 			allowOutsideClick: () => !Swal.isLoading(),
 		}).then((result) => {
-			this.load();
-		});*/
+			this.loadAccounts();
+		});
 	}
 }

MyOffice.SPA/src/app/pages/settings/account/add.account.component.html

@@ -4,6 +4,22 @@
 	</h2>
 	<div mat-dialog-content>
 		<form [formGroup]="editForm!" (ngSubmit)="onSubmitClick()">
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="text-inside">
+						<mat-form-field class="example-full-width">
+							<mat-label>Type</mat-label>
+							<mat-select formControlName="type">
+								<mat-option *ngFor="let type of types | keyvalue" [value]="type.key">
+									{{type.key}} ({{type.value}})
+								</mat-option>
+							</mat-select>
+						</mat-form-field>
+					</div>
+				</div>
+			</div>
+
 			<div class="row">
 				<div class="col-md-6">
 					<div class="text-inside">

MyOffice.SPA/src/app/pages/settings/account/add.account.component.ts

@@ -19,6 +19,7 @@ import { CurrencyModel } from '../../../model/currency.model';
 import { AccountCategoryService } from '../../../services/account.category.service';
 import { AccountCategoryModel } from '../../../model/account.category.model';
 import { AuthService } from '../../../core/service/auth.service';
+import { AccountService } from '../../../services/account.service';
 
 @Component({
 	templateUrl: './add.account.component.html',
@@ -30,6 +31,7 @@ export class SettingsAccountAddComponent {
 	public currencies?: CurrencyModel[];
 	public categories?: AccountCategoryModel[];
 	public username: string;
+	public types = new Map<string, string>();
 
 	constructor(
 		private fb: UntypedFormBuilder,
@@ -38,9 +40,11 @@ export class SettingsAccountAddComponent {
 		private currencyService: CurrencyService,
 		private accountCategoryService: AccountCategoryService,
 		private authService: AuthService,
+		private accountService: AccountService,
 		@Inject(MAT_DIALOG_DATA) public account: AccountModel
 	) {
 		this.username = authService.currentUserValue.userName;
+		this.types = this.accountService.getTypes();
 	}
 
 	ngOnInit(): void {
@@ -60,6 +64,9 @@ export class SettingsAccountAddComponent {
 				'',
 				[Validators.required],
 			],
+			type: [
+				this.account.type
+			]
 		});
 
 		this.currencyService

MyOffice.SPA/src/app/pages/settings/account/edit.account.component.html

@@ -4,6 +4,22 @@
 	</h2>
 	<div mat-dialog-content>
 		<form [formGroup]="editForm!" (ngSubmit)="onSubmitClick()">
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="text-inside">
+						<mat-form-field class="example-full-width">
+							<mat-label>Type</mat-label>
+							<mat-select formControlName="type">
+								<mat-option *ngFor="let type of types | keyvalue" [value]="type.key">
+									{{type.key}} ({{type.value}})
+								</mat-option>
+							</mat-select>
+						</mat-form-field>
+					</div>
+				</div>
+			</div>
+
 			<div class="row">
 				<div class="col-md-6">
 					<div class="text-inside">
@@ -26,7 +42,9 @@
 					</div>
 				</div>
 			</div>
+
 			<div class="row">
+
 				<div class="col-md-6">
 					<label>Categories</label>
 					<div class="col-md-12">
@@ -42,20 +60,21 @@
 						</div>
 					</div>
 					<div class="col-md-12">
-						<table class="table">
+						<table class="table" style="table-layout: fixed;">
 							<tbody>
-								<tr *ngFor="let category of account.categories">
-									<td>{{category.name}}</td>
-									<td>
-										<button class="btn-space" (click)="removeCategory(category)" mat-raised-button color="primary">
-											Delete
-										</button>
-									</td>
-								</tr>
+							<tr *ngFor="let category of account.categories">
+								<td style="width: 100%;">{{category.name}}</td>
+								<td style="width: 100px;">
+									<button class="btn-space" (click)="removeCategory(category)" mat-raised-button color="primary">
+										Delete
+									</button>
+								</td>
+							</tr>
 							</tbody>
 						</table>
 					</div>
 				</div>
+
 				<div class="col-md-6">
 					<label>Users</label>
 					<div class="col-md-12">
@@ -70,20 +89,24 @@
 							</mat-form-field>
 						</div>
 					</div>
-					<table class="table">
-						<tbody>
+					<div class="col-md-12">
+						<table class="table" style="table-layout: fixed;">
+							<tbody>
 							<tr *ngFor="let accessRight of account.accessRights">
-								<td>{{accessRight.user.email}}</td>
-								<td>
+								<td style="width: 100%;">{{accessRight.user.email}}</td>
+								<td style="width: 100px;">
 									<button class="btn-space" [disabled]="account.accessRights!.length <= 1" click="removeAccessRight(accessRight)" mat-raised-button color="primary">
 										Delete
 									</button>
 								</td>
 							</tr>
-						</tbody>
-					</table>
+							</tbody>
+						</table>
+					</div>
 				</div>
+
 			</div>
+
 			<mat-dialog-actions class="mat-dialog-actions">
 				<div class="mat-dialog-left">
 					<div class="alert alert-danger mat-dialog-error" *ngIf="errorMessage">

MyOffice.SPA/src/app/pages/settings/account/edit.account.component.ts

@@ -19,6 +19,7 @@ import { CurrencyModel } from '../../../model/currency.model';
 import { AccountCategoryService } from '../../../services/account.category.service';
 import { AccountCategoryModel } from '../../../model/account.category.model';
 import { AccountAccessRightModel } from '../../../model/account.accessRight.model';
+import { AccountService } from '../../../services/account.service';
 
 @Component({
 	templateUrl: './edit.account.component.html',
@@ -29,6 +30,7 @@ export class SettingsAccountEditComponent {
 	public errorMessage?: string;
 	public currencies?: CurrencyModel[];
 	public categories?: AccountCategoryModel[];
+	public types = new Map<string, string>();
 
 	constructor(
 		private fb: UntypedFormBuilder,
@@ -36,8 +38,10 @@ export class SettingsAccountEditComponent {
 		private dialogRef: MatDialogRef<SettingsAccountEditComponent>,
 		private currencyService: CurrencyService,
 		private accountCategoryService: AccountCategoryService,
+		private accountService: AccountService,
 		@Inject(MAT_DIALOG_DATA) public account: AccountModel
 	) {
+		this.types = this.accountService.getTypes();
 	}
 
 	ngOnInit(): void {
@@ -56,6 +60,9 @@ export class SettingsAccountEditComponent {
 			categoryId: [
 				'',
 			],
+			type: [
+				this.account.type,
+			],
 		});
 
 		this.currencyService

MyOffice.SPA/src/app/services/account.service.ts

@@ -0,0 +1,28 @@
+// angular
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+// libs
+import { Observable } from 'rxjs';
+
+// app
+import { ApiRoutes } from '../api-routes';
+import { AccountCategoryModel } from '../model/account.category.model';
+
+@Injectable()
+export class AccountService {
+	private types = new Map<string, string>();
+
+	constructor(
+		private httpClient: HttpClient,
+	) {
+		this.types.set('balance', 'Account with balance');
+		this.types.set('credit', 'Account with loan funds');
+		this.types.set('external', 'External account');
+		this.types.set('other', 'Other account');
+	}
+
+	public getTypes(): Map<string, string> {
+		return this.types;
+	}
+}

MyOffice.SPA/src/app/shared/components/breadcrumb/breadcrumb.component.html

@@ -2,7 +2,7 @@
 	<div class="row">
 		<div class="col-6">
 			<div class="breadcrumb-title">
-				<h4 class="page-title">{{title}}</h4>
+				<h4 class="page-title">{{title | translate}}</h4>
 			</div>
 		</div>
 		<div class="col-6">
@@ -12,8 +12,8 @@
 						<app-feather-icons [icon]="'home'" [class]="'breadcrumb-icon'"></app-feather-icons>
 					</a>
 				</li>
-				<li class="breadcrumb-item" *ngFor="let item of items">{{item}}</li>
-				<li class="breadcrumb-item active">{{active_item}}</li>
+				<li class="breadcrumb-item" *ngFor="let item of items">{{item | translate}}</li>
+				<li class="breadcrumb-item active">{{active_item | translate}}</li>
 			</ul>
 		</div>
 	</div>

MyOffice.SPA/src/app/shared/components/components.module.ts

@@ -1,12 +1,25 @@
+// angular
 import { NgModule } from '@angular/core';
+
+// libs
+import { TranslateModule } from '@ngx-translate/core';
 import { FileUploadComponent } from './file-upload/file-upload.component';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 import { SharedModule } from '../shared.module';
 
 @NgModule({
-	declarations: [FileUploadComponent, BreadcrumbComponent],
-	imports: [SharedModule],
-	exports: [FileUploadComponent, BreadcrumbComponent],
+	declarations: [
+		FileUploadComponent,
+		BreadcrumbComponent
+	],
+	imports: [
+		SharedModule,
+		TranslateModule,
+	],
+	exports: [
+		FileUploadComponent,
+		BreadcrumbComponent
+	],
 })
 export class ComponentsModule {
 }