-
-
+
+
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">
@@ -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;
});