Skip to content

B
beasy-front-angular
Commit 70cf9811 by zadi francice
Options

ajout des icones sur le dashboard

parent 08351865
Showing with 240 additions and 128 deletions
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",
......
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",
......
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",
......
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;
}
......
src/app/admin-test/admin-test.component.html
......@@ -8,62 +8,48 @@
</nav>
<div class="nk-block-head nk-block-head-sm"></div>
<div class="nk-block">
<div
_ngcontent-ng-c3352625633=""
class="card p-4 shadow-1 border-round flex flex-column">
<div
_ngcontent-ng-c3352625633=""
class="flex justify-content-between w-100">
<div class="card p-4 shadow-1 border-round flex flex-column">
<div class="flex justify-content-between w-100">
<div
_ngcontent-ng-c3352625633=""
id="card-solde"
class="surface-card shadow-2 p-3 border-round card orders-card"
style="
width: 23%;
background: linear-gradient(to right, #ffffff, #e6f7ff);
">
<div
_ngcontent-ng-c3352625633=""
class="flex justify-content-between mb-3">
<div _ngcontent-ng-c3352625633="">
<span
_ngcontent-ng-c3352625633=""
class="block text-1000 font-medium text-xl text-bold mb-3"
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-1000 font-medium text-xl text-bold mb-3"
>Solde</span
>
<div
_ngcontent-ng-c3352625633=""
class="text-900 font-medium text-xl">
<div class="text-900 font-medium text-xl">
{{
respTransaction?.solde | currency: 'FCFA' : 'symbol' : '1.0-0'
}}
</div>
</div>
<div
_ngcontent-ng-c3352625633=""
class="flex align-items-center justify-content-center bg-blue-100 border-round"
class="flex align-items-center justify-content-center bg-blue-500 border-round"
style="width: 2.5rem; height: 2.5rem">
<i
class="pi pi-briefcase text-orange-500 text-xl"
style="color: rgb(180, 178, 48); font-size: 2.5rem"></i>
</div>
</div>
</div>
<div
_ngcontent-ng-c3352625633=""
class="surface-card shadow-2 p-3 border-round card revenue-card"
id="card-total-transaction"
class="surface-card shadow-2 p-3 border-round card orders-card"
style="
width: 23%;
background: linear-gradient(to right, #ffffff, #fff7e6);
background: linear-gradient(to right, #ffffff, #e6f7ff);
">
<div
_ngcontent-ng-c3352625633=""
class="flex justify-content-between mb-3">
<div _ngcontent-ng-c3352625633="">
<span
_ngcontent-ng-c3352625633=""
class="block text-1000 font-medium text-xl text-bold mb-3"
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-1000 font-medium text-xl text-bold mb-3"
>Montant total transactions</span
>
<div
_ngcontent-ng-c3352625633=""
class="text-900 font-medium text-xl">
<div class="text-900 font-medium text-xl">
{{
respTransaction?.total_transaction
| currency: 'FCFA' : 'symbol' : '1.0-0'
......@@ -71,34 +57,27 @@
</div>
</div>
<div
_ngcontent-ng-c3352625633=""
class="flex align-items-center justify-content-center bg-orange-100 border-round"
style="width: 2.5rem; height: 2.5rem">
<i
_ngcontent-ng-c3352625633=""
class="pi pi-map-marker text-orange-500 text-xl"></i>
class="pi pi-arrow-right-arrow-left text-orange-500 text-xl"
style="color: rgb(180, 178, 48); font-size: 2.5rem"></i>
</div>
</div>
</div>
<div
_ngcontent-ng-c3352625633=""
id="card-reversement"
class="surface-card shadow-2 p-3 border-round card customers-card"
style="
width: 23%;
background: linear-gradient(to right, #ffffff, #e6fffa);
">
<div
_ngcontent-ng-c3352625633=""
class="flex justify-content-between mb-3">
<div _ngcontent-ng-c3352625633="">
<span
_ngcontent-ng-c3352625633=""
class="block text-1000 font-medium text-xl text-bold mb-3"
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-1000 font-medium text-xl text-bold mb-3"
>Reversement</span
>
<div
_ngcontent-ng-c3352625633=""
class="text-900 font-medium text-xl">
<div class="text-900 font-medium text-xl">
{{
respTransaction?.revesement
| currency: 'FCFA' : 'symbol' : '1.0-0'
......@@ -106,34 +85,27 @@
</div>
</div>
<div
_ngcontent-ng-c3352625633=""
class="flex align-items-center justify-content-center bg-cyan-100 border-round"
style="width: 2.5rem; height: 2.5rem">
<i
_ngcontent-ng-c3352625633=""
class="pi pi-inbox text-cyan-500 text-xl"></i>
class="pi pi-window-maximize text-cyan-500 text-xl"
style="color: rgb(180, 178, 48); font-size: 2.5rem"></i>
</div>
</div>
</div>
<div
_ngcontent-ng-c3352625633=""
id="card-montant-journalier"
class="surface-card shadow-2 p-3 border-round card comments-card"
style="
width: 23%;
background: linear-gradient(to right, #ffffff, #f7e6ff);
">
<div
_ngcontent-ng-c3352625633=""
class="flex justify-content-between mb-3">
<div _ngcontent-ng-c3352625633="">
<span
_ngcontent-ng-c3352625633=""
class="block text-1000 font-medium text-xl text-bold mb-3"
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-1000 font-medium text-xl text-bold mb-3"
>Montant journalier</span
>
<div
_ngcontent-ng-c3352625633=""
class="text-900 font-medium text-xl">
<div class="text-900 font-medium text-xl">
{{
respTransaction?.total_journee
| currency: 'FCFA' : 'symbol' : '1.0-0'
......@@ -141,17 +113,13 @@
</div>
</div>
<div
_ngcontent-ng-c3352625633=""
class="flex align-items-center justify-content-center bg-purple-100 border-round"
style="width: 2.5rem; height: 2.5rem">
<i
_ngcontent-ng-c3352625633=""
class="pi pi-comment text-purple-500 text-xl"></i>
class="pi pi-stopwatch text-purple-500 text-xl"
style="color: rgb(180, 178, 48); font-size: 2.5rem"></i>
</div>
</div>
<!-- <span _ngcontent-ng-c3352625633="" class="text-green-500 font-medium"
>85 </span
><span _ngcontent-ng-c3352625633="" class="text-500">responded</span> -->
</div>
</div>
</div>
......@@ -178,14 +146,15 @@
</div>
</div>
<div class="nk-ecwg8-ck" style="height: 90%">
<div class="nk-ecwg8-ck" style="height: 300px">
<canvas
class="ecommerce-line-chart-s4"
id="salesStatistics"></canvas>
</div>
<div class="d-flex justify-content-between ps-5">
<div class="chart-label">01 Mai, 2024</div>
<div class="chart-label">30 Mai, 2024</div>
<div class="chart-label">{{ startDate }}</div>
<div class="chart-label">{{ currentDateFormatted }}</div>
</div>
</div>
</mat-card>
......
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";
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',
},
},
},
......
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;
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment