From 70cf98110bbb104f50c8013086c4b80dfc4700d2 Mon Sep 17 00:00:00 2001 From: mrlemaire Date: Sat, 22 Jun 2024 16:32:09 +0000 Subject: [PATCH] ajout des icones sur le dashboard --- angular.json | 3 +-- package-lock.json | 6 ++++++ package.json | 1 + src/app/_interfaces/trafics/transaction/transaction.ts | 2 +- src/app/admin-test/admin-test.component.html | 107 ++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------- src/app/admin-test/admin-test.component.scss | 21 +++++++++++++++++++++ src/app/admin-test/admin-test.component.ts | 226 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------- src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts | 2 +- 8 files changed, 240 insertions(+), 128 deletions(-) diff --git a/angular.json b/angular.json index e391009..91d9b25 100644 --- a/angular.json +++ b/angular.json @@ -31,8 +31,7 @@ "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss" - ], + "styles": ["src/styles.scss", "node_modules/primeicons/primeicons.css"], "scripts": [ "src/assets/js/bundlle.js?ver=3.2.2", "src/assets/js/scripts.js?ver=3.2.2", diff --git a/package-lock.json b/package-lock.json index 95e4bba..d0d0ebf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,6 +48,7 @@ "ngx-mask": "^17.0.4", "ngx-scrollbar": "^13.0.3", "primeflex": "^3.3.1", + "primeicons": "^7.0.0", "primeng": "^17.17.0", "rxjs": "~7.8.1", "simplebar": "^6.2.5", @@ -14155,6 +14156,11 @@ "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz", "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==" }, + "node_modules/primeicons": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz", + "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==" + }, "node_modules/primeng": { "version": "17.17.0", "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.17.0.tgz", diff --git a/package.json b/package.json index 80ee936..a1d26ef 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "ngx-mask": "^17.0.4", "ngx-scrollbar": "^13.0.3", "primeflex": "^3.3.1", + "primeicons": "^7.0.0", "primeng": "^17.17.0", "rxjs": "~7.8.1", "simplebar": "^6.2.5", diff --git a/src/app/_interfaces/trafics/transaction/transaction.ts b/src/app/_interfaces/trafics/transaction/transaction.ts index 41ceaec..85ef5db 100644 --- a/src/app/_interfaces/trafics/transaction/transaction.ts +++ b/src/app/_interfaces/trafics/transaction/transaction.ts @@ -13,7 +13,7 @@ export interface ITransaction { date: string; commentaire: string; etat: boolean; - status: number; + status: string; reference: string; transaction_id: number; } diff --git a/src/app/admin-test/admin-test.component.html b/src/app/admin-test/admin-test.component.html index 3c0c408..72a4008 100644 --- a/src/app/admin-test/admin-test.component.html +++ b/src/app/admin-test/admin-test.component.html @@ -8,62 +8,48 @@
-
-
+
+
-
-
- +
+ Solde -
+
{{ respTransaction?.solde | currency: 'FCFA' : 'symbol' : '1.0-0' }}
+
-
-
- +
+ Montant total transactions -
+
{{ respTransaction?.total_transaction | currency: 'FCFA' : 'symbol' : '1.0-0' @@ -71,34 +57,27 @@
+ class="pi pi-arrow-right-arrow-left text-orange-500 text-xl" + style="color: rgb(180, 178, 48); font-size: 2.5rem">
-
-
- +
+ Reversement -
+
{{ respTransaction?.revesement | currency: 'FCFA' : 'symbol' : '1.0-0' @@ -106,34 +85,27 @@
+ class="pi pi-window-maximize text-cyan-500 text-xl" + style="color: rgb(180, 178, 48); font-size: 2.5rem">
-
-
- +
+ Montant journalier -
+
{{ respTransaction?.total_journee | currency: 'FCFA' : 'symbol' : '1.0-0' @@ -141,17 +113,13 @@
+ class="pi pi-stopwatch text-purple-500 text-xl" + style="color: rgb(180, 178, 48); font-size: 2.5rem">
-
@@ -178,14 +146,15 @@
-
+
+
-
01 Mai, 2024
-
30 Mai, 2024
+
{{ startDate }}
+
{{ currentDateFormatted }}
diff --git a/src/app/admin-test/admin-test.component.scss b/src/app/admin-test/admin-test.component.scss index 719cbe5..35a6e6a 100644 --- a/src/app/admin-test/admin-test.component.scss +++ b/src/app/admin-test/admin-test.component.scss @@ -104,10 +104,27 @@ mat-card-title{ } +// .card[_ngcontent-ng-c811630737] { +// background-color: #f6f6f6; +// border-radius: 0px !important; +// border-bottom: 4px solid ; +// } +#card-solde{ + border-bottom:3px solid rgb(148, 185, 11) +} +#card-total-transaction{ +border-bottom:3px solid rgb(1, 26, 14) +} +#card-reversement{ +border-bottom:3px solid rgb(185, 80, 11) +} +#card-montant-journalier{ +border-bottom:3px solid rgb(28, 11, 185) +} // :::::::::::::::::::::::after @@ -184,3 +201,7 @@ mat-card-title{ background-color:#f6f6f6; border-radius: 0px !important; } + + +@import "primeicons/primeicons.css"; + diff --git a/src/app/admin-test/admin-test.component.ts b/src/app/admin-test/admin-test.component.ts index 8a98087..2b3723a 100644 --- a/src/app/admin-test/admin-test.component.ts +++ b/src/app/admin-test/admin-test.component.ts @@ -17,7 +17,7 @@ import { MatMenuModule } from '@angular/material/menu'; import { MatListModule } from '@angular/material/list'; import { Chart, registerables } from 'chart.js'; import { PagetitleComponent } from '../shared/ui/pagetitle/pagetitle.component'; - +// import Chart from 'chart.js/auto'; @Component({ selector: 'bgui-admin-test', standalone: true, @@ -45,10 +45,19 @@ export class AdminTestComponent implements OnInit { respTransaction: IMerchantData | undefined = undefined; transactions: ITransaction[] = []; + stat_transactions: ITransaction[] = []; operateurs: ITypeOperateur[] = []; // marchnad: IMerchantData[] = []; selectedOperateur: string = ''; + currentDateFormatted!: string; + startDate!: string; + + transaction_initialisation: ITransaction[] = []; + transaction_processing: ITransaction[] = []; + transaction_cancelled: ITransaction[] = []; + transaction_initiated: ITransaction[] = []; + @ViewChild(MatPaginator) paginator!: MatPaginator; constructor( private httpClient: HttpClient, @@ -58,6 +67,8 @@ export class AdminTestComponent implements OnInit { Chart.register(...registerables); } ngOnInit(): void { + this.setCurrentDate(); + this.transactionService.getDataTable().subscribe(data => { this.respTransaction = data; console.log('respTransaction===>', this.respTransaction); @@ -70,84 +81,189 @@ export class AdminTestComponent implements OnInit { console.log('typeOpreateur===>', this.operateurs); }); + this.transactionService.getAll().subscribe((donnees: ITransaction[]) => { + this.stat_transactions = donnees; + console.log('transactions=stat=>', this.stat_transactions); + this.dataSource.data = this.stat_transactions; + this.filterTransactions(); + }); + this.initChart(); } + setCurrentDate(): void { + const currentDate = new Date(); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const options = { year: 'numeric', month: 'short', day: 'numeric' }; + this.currentDateFormatted = currentDate.toLocaleDateString( + 'fr-FR' + // options + ); // Format "01 Mai 2024" + // Exemple de startDate + this.startDate = new Date('2024-01-01').toLocaleDateString( + 'fr-FR' + // options + ); // Format "01 Mai 2024" + } + + filterTransactions(): void { + console.log('Filtering transactions', this.stat_transactions); + + this.transaction_initialisation = this.stat_transactions.filter( + transaction => transaction.status === 'initialisation' + ); + console.log( + 'transaction_initialisation===>', + this.transaction_initialisation + ); + + console.log( + 'transaction_initialisation_date===>', + this.transaction_initialisation[0].date + ); + + this.transaction_processing = this.stat_transactions.filter( + transaction => transaction.status === 'processing' + ); + console.log('transaction_processing===>', this.transaction_processing); + + this.transaction_cancelled = this.stat_transactions.filter( + transaction => transaction.status === 'cancelled' + ); + console.log('transaction_cancelled===>', this.transaction_cancelled); + + this.transaction_initiated = this.stat_transactions.filter( + transaction => transaction.status === 'INITIATED' + ); + console.log('transaction_initiated====>', this.transaction_initiated); + } + displayedColumns: string[] = [ - //'transaction_id', - //'type_paiement', 'date', 'reference', - 'montant', - // 'marchand', 'type_paiement_label', 'service', 'status', - // 'commentaire', - // 'etat', ]; - dataSource = new MatTableDataSource(this.transactions); - initChart() { + // initChart() { + // const ctx = document.getElementById('salesStatistics') as HTMLCanvasElement; + // new Chart(ctx, { + // type: 'line', + // data: { + // labels: [ + // '01 Mai', + // '02 Mai', + // '03 Mai', + // '04 Mai', + // '05 Mai', + // '06 Mai', + // '07 Mai', + // '08 Mai', + // '09 Mai', + // '10 Mai', + // '11 Mai', + // '12 Mai', + // '13 Mai', + // '14 Mai', + // '15 Mai', + // '16 Mai', + // '17 Mai', + // '18 Mai', + // '19 Mai', + // '20 Mai', + // '21 Mai', + // '22 Mai', + // '23 Mai', + // '14 Mai', + // '25 Mai', + // '26 Mai', + // '27 Mai', + // '28 Mai', + // '29 Mai', + // '30 Mai', + // '31 Mai', + // ], + // datasets: [ + // { + // label: 'Transaction', + // borderColor: '#0fac81', + // backgroundColor: '#0fac81', + // data: [ + // 5, 10, 20, 22, 30, 40, 45, 50, 50, 53, 55, 60, 65, 70, 75, 70, 65, + // 60, 58, 60, 65, 70, 88, + // ], + // fill: false, + // }, + // { + // label: 'Transaction Annulé', + // borderColor: '#eb6459', + // backgroundColor: '#eb6459', + // // eslint-disable-next-line no-sparse-arrays, prettier/prettier + // data: [ + // 0, 0, 2, 2, 1, 3, 3, 3, 1, 3, 3, 1, 1, 0, 0, 0, 1, 0, 2, 1, 1, 2, + // 2, + // ], + // fill: false, + // }, + // ], + // }, + // options: { + // responsive: true, + // scales: { + // x: { + // display: true, + // title: { + // display: true, + // text: 'Date', + // }, + // }, + // y: { + // display: true, + // title: { + // display: true, + // text: 'Nombre de Transactions', + // }, + // }, + // }, + // }, + // }); + // } + + initChart(): void { const ctx = document.getElementById('salesStatistics') as HTMLCanvasElement; new Chart(ctx, { type: 'line', data: { - labels: [ - '01 Mai', - '02 Mai', - '03 Mai', - '04 Mai', - '05 Mai', - '06 Mai', - '07 Mai', - '08 Mai', - '09 Mai', - '10 Mai', - '11 Mai', - '12 Mai', - '13 Mai', - '14 Mai', - '15 Mai', - '16 Mai', - '17 Mai', - '18 Mai', - '19 Mai', - '20 Mai', - '21 Mai', - '22 Mai', - '23 Mai', - '14 Mai', - '25 Mai', - '26 Mai', - '27 Mai', - '28 Mai', - '29 Mai', - '30 Mai', - '31 Mai', - ], + labels: this.transactions.map(transaction => transaction.date), datasets: [ { - label: 'Transaction', + label: 'Initiée', borderColor: '#0fac81', backgroundColor: '#0fac81', - data: [ - 5, 10, 20, 22, 30, 40, 45, 50, 50, 53, 55, 60, 65, 70, 75, 70, 65, - 60, 58, 60, 65, 70, 88, - ], + data: this.transaction_initialisation.map( + transaction => transaction.status + ), fill: false, }, { - label: 'Transaction Annulé', + label: 'En cours', borderColor: '#eb6459', backgroundColor: '#eb6459', - // eslint-disable-next-line no-sparse-arrays, prettier/prettier - data: [ - 0, 0, 2, 2, 1, 3, 3, 3, 1, 3, 3, 1, 1, 0, 0, 0, 1, 0, 2, 1, 1, 2, - 2, - ], + data: this.transaction_processing.map( + transaction => transaction.status + ), + fill: false, + }, + { + label: 'Annulée', + borderColor: '#f6c23e', + backgroundColor: '#f6c23e', + data: this.transaction_cancelled.map( + transaction => transaction.status + ), fill: false, }, ], @@ -159,14 +275,14 @@ export class AdminTestComponent implements OnInit { display: true, title: { display: true, - text: 'Date', + text: 'Dates des transactions', }, }, y: { display: true, title: { display: true, - text: 'Nombre de Transactions', + text: 'Statut', }, }, }, diff --git a/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts b/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts index 09d0812..eaf7261 100644 --- a/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts +++ b/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts @@ -75,7 +75,7 @@ export class SuiviTransactionComponent implements AfterViewInit { ngOnInit(): void { this.transactionService.getAll().subscribe((data: ITransaction[]) => { this.transactions = data; - console.log('transactions=>', this.transactions); + console.log('transactions=>>>>>>>>>>>>>>>>>', this.transactions); this.dataSource.data = this.transactions; }); -- libgit2 0.27.1