File
Implements
|
breadCrumbItems
|
Type : Array<literal type> | undefined
|
|
|
|
dataSource
|
Default value : new MatTableDataSource(this.transactions)
|
|
|
|
displayedColumns
|
Type : string[]
|
Default value : [
//'transaction_id',
//'type_paiement',
'type_paiement_label',
'marchand',
'service',
'montant',
'date',
'commentaire',
'etat',
'status',
'reference',
]
|
|
|
|
Private
HtUrl
|
Type : string
|
Default value : 'http://192.168.1.223:8001/api/tableau_bord/1/'
|
|
|
|
selectedOperateur
|
Type : string
|
Default value : ''
|
|
|
import { Component, type OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PagetitleComponent } from '../shared/ui/pagetitle/pagetitle.component';
import { RouterLink, RouterOutlet } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import {
IMerchantData,
ITransaction,
ITypeOperateur,
} from '../_interfaces/trafics/transaction/transaction';
import { TransactionService } from '../_services/trafics/transaction/transaction.service';
@Component({
selector: 'bgui-admin-test',
standalone: true,
imports: [
MatFormFieldModule,
MatInputModule,
MatTableModule,
MatPaginatorModule,
CommonModule,
HttpClientModule,
RouterLink,
FormsModule,
CommonModule,
PagetitleComponent,
RouterOutlet,
],
templateUrl: './admin-test.component.html',
styleUrls: ['./admin-test.component.scss'],
})
export class AdminTestComponent implements OnInit {
private HtUrl = 'http://192.168.1.223:8001/api/tableau_bord/1/';
breadCrumbItems: Array<{}> | undefined;
respTransaction: IMerchantData | undefined = undefined;
transactions: ITransaction[] = [];
operateurs: ITypeOperateur[] = [];
// marchnad: IMerchantData[] = [];
selectedOperateur: string = '';
constructor(
private httpClient: HttpClient,
public transactionService: TransactionService
//public operateur: IOperateur
) {}
ngOnInit(): void {
this.transactionService.getDataTable().subscribe(data => {
this.respTransaction = data;
console.log('respTransaction===>', this.respTransaction);
// this.respTransaction = JSON.stringify(this.respTransaction);
//console.log('Response==>',this.respTransaction);
this.transactions = this.respTransaction?.last_five_transactions;
console.log('transactions==>', this.transactions);
this.operateurs = this.respTransaction?.type_operateur;
console.log('typeOpreateur===>', this.operateurs);
});
}
displayedColumns: string[] = [
//'transaction_id',
//'type_paiement',
'type_paiement_label',
'marchand',
'service',
'montant',
'date',
'commentaire',
'etat',
'status',
'reference',
];
dataSource = new MatTableDataSource(this.transactions);
}
<div class="nk-block-head nk-block-head-sm">
<div class="nk-block-between">
<bgui-pagetitle
title="Tableau de bord Beasy"
[breadcrumbItems]="breadCrumbItems"></bgui-pagetitle>
</div>
</div>
<div class="nk-block">
<div class="row g-gs p-2">
<div class="col-xxl-3 col-sm-6">
<div class="card" style="background-color: #4285f4">
<div class="nk-ecwg nk-ecwg6">
<div class="card-inner">
<div class="card-title-group">
<div class="card-title" style="color: azure">
<div class="tiles" style="font-weight: bold">Solde</div>
</div>
</div>
<div class="data" style="color: azure">
<div class="data-group">
<div class="amount" style="font-weight: bold; font: 2em">
<p style="color: blanchedalmond">
{{ respTransaction?.solde | currency: 'FCFA' }}
</p>
</div>
</div>
</div>
</div>
<!-- .card-inner -->
</div>
<!-- .nk-ecwg -->
</div>
<!-- .card -->
</div>
<div class="col-xxl-3 col-sm-6">
<div class="card" style="background-color: #0f9d58">
<div class="nk-ecwg nk-ecwg6">
<div class="card-inner">
<div class="card-title-group">
<div class="card-title" style="color: azure">
<h6 class="title" style="color: azure">
Montant Total Transactions
</h6>
</div>
</div>
<div class="data" style="color: azure">
<div class="data-group" style="color: azure">
<div class="amount">
<p style="color: blanchedalmond">
{{ respTransaction?.total_transaction | currency: 'FCFA' }}
</p>
</div>
</div>
</div>
</div>
<!-- .card-inner -->
</div>
<!-- .nk-ecwg -->
</div>
<!-- .card -->
</div>
<!-- .col -->
<div class="col-xxl-3 col-sm-6">
<div class="card" style="background-color: #f4b400">
<div class="nk-ecwg nk-ecwg6">
<div class="card-inner">
<div class="card-title-group">
<div class="card-title" style="color: azure">
<h6 class="title" style="color: azure">Reversement</h6>
</div>
</div>
<div class="data" style="color: azure">
<div class="data-group">
<div class="amount">
<p style="color: blanchedalmond">
{{ respTransaction?.revesement | currency: 'FCFA' }}
</p>
</div>
</div>
</div>
</div>
<!-- .card-inner -->
</div>
<!-- .nk-ecwg -->
</div>
<!-- .card -->
</div>
<!-- .col -->
<div class="col-xxl-3 col-sm-6">
<div class="card" style="background-color: #db4437">
<div class="nk-ecwg nk-ecwg6">
<div class="card-inner">
<div class="card-title-group">
<div class="card-title" style="color: azure">
<h6 class="title" style="color: azure">Montant Journalier</h6>
</div>
</div>
<div class="data" style="color: azure">
<div class="data-group">
<div class="amount">
<p style="color: blanchedalmond">
{{ respTransaction?.total_journee | currency: 'FCFA' }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-gs p-2">
<div class="col-xxl-6">
<div class="card card-full">
<div class="nk-ecwg nk-ecwg8 h-100">
<div class="card-inner">
<div class="card-title-group mb-3">
<div class="card-title">
<h6 class="title">Statistiques Des Transactions</h6>
</div>
<div class="card-tools">
<div class="dropdown">
<a
href="#"
class="dropdown-toggle link link-light link-sm dropdown-indicator"
data-bs-toggle="dropdown"
>Semaine</a
>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li>
<a href="#"><span>Jour</span></a>
</li>
<li>
<a href="#" class="active"><span>Semaine</span></a>
</li>
<li>
<a href="#"><span>Mois</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<ul class="nk-ecwg8-legends">
<li>
<div class="title">
<span class="dot dot-lg sq" data-bg="#0fac81"></span>
<span>Transaction</span>
</div>
</li>
<li>
<div class="title">
<span class="dot dot-lg sq" data-bg="#eb6459"></span>
<span>Transaction Annulé</span>
</div>
</li>
</ul>
<div class="nk-ecwg8-ck">
<canvas
class="ecommerce-line-chart-s4"
id="salesStatistics"></canvas>
</div>
<div class="chart-label-group ps-5">
<div class="chart-label">01 Septembre, 2023</div>
<div class="chart-label">30 Septembre, 2023</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xxl-6">
<div class="card card-full overflow-hidden">
<div class="nk-ecwg nk-ecwg4 h-100">
<div class="card-inner flex-grow-1">
<div class="card-title-group mb-4">
<div class="card-title">
<h6 class="title">Montant Disponible</h6>
</div>
<div class="card-tools">
<div class="dropdown">
<a
href="#"
class="dropdown-toggle link link-light link-sm dropdown-indicator"
data-bs-toggle="dropdown"
>30 Jours</a
>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li>
<a href="#"><span>15 Jours</span></a>
</li>
<li>
<a href="#" class="active"><span>30 Jours</span></a>
</li>
<li>
<a href="#"><span>3 Mois</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="data-group">
<ul class="nk-ecwg4-legends">
<li *ngFor="let operateur of operateurs">
<div class="title">
<span
class="dot dot-lg sq"
data-bg="#0fac81"
style="background: rgb(219, 207, 207)"></span>
<span>{{ operateur.label }}</span>
</div>
<div class="amount amount-xs">
{{ operateur.total_montant | currency: 'FCFA' }}
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<section>
<!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
<div
class="example-container mat-elevation-z8 table-hover"
style="margin-top: 40px; border-radius: 10px">
<div class="page-title">
<h6 class="p-4">Vos 5 dernières Transactions</h6>
</div>
<mat-table #table [dataSource]="transactions">
<!-- <ng-container matColumnDef="transaction_id">
<mat-header-cell *matHeaderCellDef class="text"> ID </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.transaction_id }}
</mat-cell>
</ng-container> -->
<!-- Name Column -->
<ng-container matColumnDef="type_paiement_label">
<mat-header-cell *matHeaderCellDef class="text"
>Type paiement
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.type_paiement_label }}
</mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="marchand">
<mat-header-cell *matHeaderCellDef class="text">
Marchand
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.marchand }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="service">
<mat-header-cell *matHeaderCellDef class="text">
Service
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.service }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="montant">
<mat-header-cell *matHeaderCellDef class="text">
Montant
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.montant | currency: ' FCFA' }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef class="text">
Date
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.date | date: 'dd/mm/yyyy' }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="commentaire">
<mat-header-cell *matHeaderCellDef class="text">
Commentaire
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.commentaire }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="etat">
<mat-header-cell *matHeaderCellDef class="text">
Etat
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.etat }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef class="text">
Status
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.status }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="reference">
<mat-header-cell *matHeaderCellDef class="text">
Réference
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.reference }}
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</div>
</section>
<footer class="footer bg-dark footer-design">
<div class="text-white text-center mr-3"></div>
</footer>
</div>
*{
font-family: 'Roboto';
}
.text {
color:blue;
font-weight: bold;
font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
}
Legend
Html element with directive