Skip to content

B
beasy-front-angular
Commit dea29409 by zadi francice
Options

17/05/2024

parent 0e9b53cc
Showing with 199 additions and 135 deletions
src/app/_interfaces/trafics/transaction/transaction.ts
export interface ITypeOperateur {
id_type_paiement: number;
label: string;
total_montant: number;
}
export interface ITransaction { export interface ITransaction {
transaction_id: number;
type_paiement: number; type_paiement: number;
type_paiement_label: string; type_paiement_label: string;
marchand: string; marchand: string;
service: string; service: string;
montant: number; montant: number;
date: Date; date: string;
commentaire: string; commentaire: string;
etat: boolean; etat: boolean;
status: number; status: number;
reference: string; reference: string;
transaction_id: number;
} }
export interface IMerchantData {
merchant_key: string;
solde: number;
// interface ITypeOperateur { total_transaction: number;
// id_type_paiement: number; total_journee: number;
// label: string; revesement: number;
// total_montant: number; type_operateur: ITypeOperateur[];
// } last_five_transactions: ITransaction[];
}
// interface ITransaction {
// type_paiement: number;
// type_paiement_label: string;
// marchand: string;
// service: string;
// montant: number;
// date: string;
// commentaire: string;
// etat: boolean;
// status: number;
// reference: string;
// transaction_id: number;
// }
// interface IMerchantData {
// merchant_key: string;
// solde: number;
// total_transaction: number;
// total_journee: number;
// revesement: number;
// type_operateur: ITypeOperateur[];
// last_five_transactions: ITransaction[];
// }
src/app/_services/trafics/transaction/transaction.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Observable, catchError, throwError } from 'rxjs'; import { Observable, catchError, throwError } from 'rxjs';
import { ITransaction } from 'src/app/_interfaces/trafics/transaction/transaction'; import {
ITransaction,
IMerchantData,
} from 'src/app/_interfaces/trafics/transaction/transaction';
@Injectable({ @Injectable({
providedIn: 'root', providedIn: 'root',
...@@ -9,6 +12,7 @@ import { ITransaction } from 'src/app/_interfaces/trafics/transaction/transactio ...@@ -9,6 +12,7 @@ import { ITransaction } from 'src/app/_interfaces/trafics/transaction/transactio
export class TransactionService { export class TransactionService {
//private HtUrl = 'http://192.168.1.223:8001/transactions/'; //private HtUrl = 'http://192.168.1.223:8001/transactions/';
private HtUrl = 'http://192.168.1.223:8001/api/tableau_bord/1/'; private HtUrl = 'http://192.168.1.223:8001/api/tableau_bord/1/';
private TUrl = 'http://192.168.1.223:8001/transactions/';
httpOptions = { httpOptions = {
headers: new HttpHeaders({ headers: new HttpHeaders({
...@@ -20,10 +24,14 @@ export class TransactionService { ...@@ -20,10 +24,14 @@ export class TransactionService {
getAll(): Observable<ITransaction[]> { getAll(): Observable<ITransaction[]> {
return this.httpClient return this.httpClient
.get<ITransaction[]>(this.HtUrl) .get<ITransaction[]>(this.TUrl)
.pipe(catchError(this.errorHandler)); .pipe(catchError(this.errorHandler));
} }
getDataTable(): Observable<IMerchantData> {
return this.httpClient.get<IMerchantData>(this.HtUrl);
}
create(transaction: ITransaction): Observable<ITransaction> { create(transaction: ITransaction): Observable<ITransaction> {
return this.httpClient return this.httpClient
.post<ITransaction>( .post<ITransaction>(
......
src/app/admin-test/admin-test.component.html
...@@ -13,13 +13,15 @@ ...@@ -13,13 +13,15 @@
<div class="card-inner"> <div class="card-inner">
<div class="card-title-group"> <div class="card-title-group">
<div class="card-title" style="color: azure"> <div class="card-title" style="color: azure">
<div class="tiles" style="font-weight: bold">SOLDE</div> <div class="tiles" style="font-weight: bold">Solde</div>
</div> </div>
</div> </div>
<div class="data" style="color: azure"> <div class="data" style="color: azure">
<div class="data-group"> <div class="data-group">
<div class="amount" style="font-weight: bold; font: 2em"> <div class="amount" style="font-weight: bold; font: 2em">
<p style="color: blanchedalmond">87845000 FCFA</p> <p style="color: blanchedalmond">
{{ respTransaction?.solde | currency: 'FCFA' }}
</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -45,9 +47,10 @@ ...@@ -45,9 +47,10 @@
<div class="data" style="color: azure"> <div class="data" style="color: azure">
<div class="data-group" style="color: azure"> <div class="data-group" style="color: azure">
<div class="amount"> <div class="amount">
<p style="color: blanchedalmond">87845000 FCFA</p> <p style="color: blanchedalmond">
{{ respTransaction?.total_transaction | currency: 'FCFA' }}
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -70,9 +73,10 @@ ...@@ -70,9 +73,10 @@
<div class="data" style="color: azure"> <div class="data" style="color: azure">
<div class="data-group"> <div class="data-group">
<div class="amount"> <div class="amount">
<p style="color: blanchedalmond">87845000 FCFA</p> <p style="color: blanchedalmond">
{{ respTransaction?.revesement | currency: 'FCFA' }}
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -95,12 +99,9 @@ ...@@ -95,12 +99,9 @@
<div class="data" style="color: azure"> <div class="data" style="color: azure">
<div class="data-group"> <div class="data-group">
<div class="amount"> <div class="amount">
<p style="color: blanchedalmond">87845000 FCFA</p> <p style="color: blanchedalmond">
</div> {{ respTransaction?.total_journee | currency: 'FCFA' }}
<div class="nk-ecwg6-ck"> </p>
<canvas
class="ecommerce-line-chart-s3"
id="todayCustomers"></canvas>
</div> </div>
</div> </div>
</div> </div>
...@@ -170,7 +171,7 @@ ...@@ -170,7 +171,7 @@
</div> </div>
</div> </div>
<div class="col-xxl-6 col-lg-6"> <div class="col-xxl-6">
<div class="card card-full overflow-hidden"> <div class="card card-full overflow-hidden">
<div class="nk-ecwg nk-ecwg4 h-100"> <div class="nk-ecwg nk-ecwg4 h-100">
<div class="card-inner flex-grow-1"> <div class="card-inner flex-grow-1">
...@@ -203,59 +204,18 @@ ...@@ -203,59 +204,18 @@
</div> </div>
</div> </div>
<div class="data-group"> <div class="data-group">
<div class="nk-ecwg4-ck">
<canvas
class="ecommerce-doughnut-s1"
id="trafficSources"
width="210"
height="210"
style="
display: block;
box-sizing: border-box;
height: 210px;
width: 210px;
"></canvas>
</div>
<ul class="nk-ecwg4-legends"> <ul class="nk-ecwg4-legends">
<li> <li *ngFor="let operateur of operateurs">
<div class="title"> <div class="title">
<span <span
class="dot dot-lg sq" class="dot dot-lg sq"
data-bg="#0fac81" data-bg="#0fac81"
style="background: rgb(227, 29, 26)"></span> style="background: rgb(219, 207, 207)"></span>
<span>UBA (United Bank for Africa)</span> <span>{{ operateur.label }}</span>
</div> </div>
<div class="amount amount-xs">1.247.500 FCFA</div> <div class="amount amount-xs">
</li> {{ operateur.total_montant | currency: 'FCFA' }}
<li>
<div class="title">
<span
class="dot dot-lg sq"
data-bg="#e85347"
style="background: rgb(255, 121, 0)"></span>
<span>Orange Money</span>
</div> </div>
<div class="amount amount-xs">78.758.000 FCFA</div>
</li>
<li>
<div class="title">
<span
class="dot dot-lg sq"
data-bg="#ffa9ce"
style="background: rgb(249, 219, 123)"></span>
<span>MTN MoMo</span>
</div>
<div class="amount amount-xs">4.851.000 FCFA</div>
</li>
<li>
<div class="title">
<span
class="dot dot-lg sq"
data-bg="#f9db7b"
style="background: rgb(1, 92, 170)"></span>
<span>Moov Money</span>
</div>
<div class="amount amount-xs">9.500.000 FCFA</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -273,6 +233,7 @@ ...@@ -273,6 +233,7 @@
<div class="page-title"> <div class="page-title">
<h6 class="p-4">Vos 5 dernières Transactions</h6> <h6 class="p-4">Vos 5 dernières Transactions</h6>
</div> </div>
<mat-table #table [dataSource]="transactions"> <mat-table #table [dataSource]="transactions">
<ng-container matColumnDef="transaction_id"> <ng-container matColumnDef="transaction_id">
<mat-header-cell *matHeaderCellDef> ID </mat-header-cell> <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
...@@ -282,14 +243,6 @@ ...@@ -282,14 +243,6 @@
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<!-- <ng-container matColumnDef="type_paiement">
<mat-header-cell *matHeaderCellDef>ID type paiement </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.type_paiement }}
</mat-cell>
</ng-container> -->
<!-- Name Column -->
<ng-container matColumnDef="type_paiement_label"> <ng-container matColumnDef="type_paiement_label">
<mat-header-cell *matHeaderCellDef>type paiement </mat-header-cell> <mat-header-cell *matHeaderCellDef>type paiement </mat-header-cell>
<mat-cell *matCellDef="let transaction"> <mat-cell *matCellDef="let transaction">
...@@ -359,9 +312,6 @@ ...@@ -359,9 +312,6 @@
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row> <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table> </mat-table>
<mat-paginator #paginator [pageSize]="5" [showFirstLastButtons]="true">
</mat-paginator>
</div> </div>
</section> </section>
<footer class="footer bg-dark footer-design"> <footer class="footer bg-dark footer-design">
......
src/app/admin-test/admin-test.component.ts
...@@ -7,9 +7,12 @@ import { FormsModule } from '@angular/forms'; ...@@ -7,9 +7,12 @@ import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator'; import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table'; import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { IOperateur } from '../_interfaces/trafics/operateur/operateur'; import {
import { ITransaction } from '../_interfaces/trafics/transaction/transaction'; IMerchantData,
ITransaction,
ITypeOperateur,
} from '../_interfaces/trafics/transaction/transaction';
import { TransactionService } from '../_services/trafics/transaction/transaction.service'; import { TransactionService } from '../_services/trafics/transaction/transaction.service';
@Component({ @Component({
...@@ -32,26 +35,32 @@ import { TransactionService } from '../_services/trafics/transaction/transaction ...@@ -32,26 +35,32 @@ import { TransactionService } from '../_services/trafics/transaction/transaction
styleUrls: ['./admin-test.component.scss'], styleUrls: ['./admin-test.component.scss'],
}) })
export class AdminTestComponent implements OnInit { export class AdminTestComponent implements OnInit {
//private url = 'http://192.168.1.223:8001/operateur/'; private HtUrl = 'http://192.168.1.223:8001/api/tableau_bord/1/';
breadCrumbItems: Array<{}> | undefined; breadCrumbItems: Array<{}> | undefined;
respTransaction: IMerchantData | undefined = undefined;
transactions: ITransaction[] = []; transactions: ITransaction[] = [];
operateurs: IOperateur[] = []; operateurs: ITypeOperateur[] = [];
// marchnad: IMerchantData[] = [];
selectedOperateur: string = ''; selectedOperateur: string = '';
constructor( constructor(
private httpClient: HttpClient, private httpClient: HttpClient,
public transactionService: TransactionService public transactionService: TransactionService
//public operateur: IOperateur //public operateur: IOperateur
) {} ) {}
ngOnInit(): void { ngOnInit(): void {
this.transactionService.getAll().subscribe((data: ITransaction[]) => { this.transactionService.getDataTable().subscribe(data => {
this.transactions = data; this.respTransaction = data;
console.log('transactions===>', this.transactions); 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;
//this.fetchOperateurs(); console.log('typeOpreateur===>', this.operateurs);
}); });
} }
...@@ -69,13 +78,9 @@ export class AdminTestComponent implements OnInit { ...@@ -69,13 +78,9 @@ export class AdminTestComponent implements OnInit {
'reference', 'reference',
]; ];
// dataSource = new MatTableDataSource(this.transactions); dataSource = new MatTableDataSource(this.transactions);
// @ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
// constructor() {}
// ngOnInit() {
// this.breadCrumbItems = [
// { label: 'Résumé Des Transactions.' },
// /* { label: 'Invoice List', active: true },*/
// ];
// }
} }
src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
<mat-paginator <mat-paginator
#paginator #paginator
[pageSize]="5" [pageSize]="5"
[pageSizeOptions]="[5, 10, 20]" [pageSizeOptions]="[5, 10, 20, 40, 60, 80, 100]"
[showFirstLastButtons]="true"> [showFirstLastButtons]="true">
</mat-paginator> </mat-paginator>
</div> </div>
src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts
...@@ -74,7 +74,7 @@ export class SuiviTransactionComponent { ...@@ -74,7 +74,7 @@ export class SuiviTransactionComponent {
displayedColumns: string[] = [ displayedColumns: string[] = [
'transaction_id', 'transaction_id',
'type_paiement', //'type_paiement',
'type_paiement_label', 'type_paiement_label',
'marchand', 'marchand',
'service', 'service',
......
src/app/utilisateurs/create-users/create-users.component.html
...@@ -80,11 +80,8 @@ ...@@ -80,11 +80,8 @@
</div> </div>
</div> </div>
</section> --> </section> -->
<div class="content sm-gutter"> <div class="content sm-gutter">
<!-- END DASHBOARD TILES -->
<div class="row"> <div class="row">
<!-- BEGIN WORLD MAP WIDGET - MAP -->
<div class="col-md-12 col-vlg-12 m-b-10"> <div class="col-md-12 col-vlg-12 m-b-10">
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
...@@ -94,9 +91,7 @@ ...@@ -94,9 +91,7 @@
<div class="card-body m-3"> <div class="card-body m-3">
<h5 class="mb-3">Ajouter Utilisateur</h5> <h5 class="mb-3">Ajouter Utilisateur</h5>
<form <form
method="post" method="post" >
action="add_ppci_other_user"
class="add_ppci_other_user">
<div class="row"> <div class="row">
<div class="col-md-5 mb-2"> <div class="col-md-5 mb-2">
<input <input
...@@ -398,3 +393,107 @@ ...@@ -398,3 +393,107 @@
</form> </form>
--> -->
<!-- Formulaire modal -->
<!-- <div class="display mt-n4">
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-4" id="exampleModalLabel">
Ajouter un User
</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6 mb-2">
<input
type="text"
placeholder="Prénoms"
class="form-control"
name="last_name"
value=""
required="" />
</div>
<div class="col">
<input
type="text"
placeholder="Prénoms"
class="form-control"
name="last_name"
value=""
required="" />
</div>
<div class="col-md-6">
<input
type="text"
placeholder="Prénoms"
class="form-control"
name="last_name"
value=""
required="" />
</div>
<div class="col">
<input
type="text"
placeholder="Prénoms"
class="form-control"
name="last_name"
value=""
required="" />
</div>
<div class="col-md-6 mb-2">
<input
type="text"
placeholder="Prénoms"
class="form-control"
name="last_name"
value=""
required="" />
</div>
<div class="col">
<input
type="text"
placeholder="Prénoms"
class="form-control"
name="last_name"
value=""
required="" />
</div>
<div class="col-md-6 mb-2">
<input
type="text"
placeholder="Prénoms"
class="form-control"
name="last_name"
value=""
required="" />
</div>
<div class="col">
<input
type="text"
placeholder="Prénoms"
class="form-control"
name="last_name"
value=""
required="" />
</div>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div> -->
src/app/utilisateurs/create-users/create-users.component.scss
.mt-n4 {
margin-top: -8rem; /* ajustez la valeur selon vos besoins */
}
\ No newline at end of file
src/app/utilisateurs/utilisateurs.component.html
...@@ -4,6 +4,16 @@ ...@@ -4,6 +4,16 @@
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
<!-- <div class="page-title d-flex justify-content-between">
<a
data-bs-toggle="modal"
data-bs-target="#exampleModal"
[routerLink]="['create-users/']"
class="btn btn-sm btn-success m-2">
Ajouter un utilisateur
</a>
</div> -->
<div class="page-title d-flex justify-content-between"> <div class="page-title d-flex justify-content-between">
<a [routerLink]="['create-users/']" class="btn btn-sm btn-success m-2"> <a [routerLink]="['create-users/']" class="btn btn-sm btn-success m-2">
Ajouter un utilisateur Ajouter un utilisateur
......
src/assets/images/clipboard2-fill.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard2-fill" viewBox="0 0 16 16">
<path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5z"/>
<path d="M3.5 1h.585A1.5 1.5 0 0 0 4 1.5V2a1.5 1.5 0 0 0 1.5 1.5h5A1.5 1.5 0 0 0 12 2v-.5q-.001-.264-.085-.5h.585A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-12A1.5 1.5 0 0 1 3.5 1"/>
</svg>
\ No newline at end of file
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