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 {
transaction_id: number;
type_paiement: number;
type_paiement_label: string;
marchand: string;
service: string;
montant: number;
date: Date;
date: string;
commentaire: string;
etat: boolean;
status: number;
reference: string;
transaction_id: number;
}
// interface ITypeOperateur {
// id_type_paiement: number;
// label: string;
// total_montant: number;
// }
// 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[];
// }
export 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 { Injectable } from '@angular/core';
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({
providedIn: 'root',
......@@ -9,6 +12,7 @@ import { ITransaction } from 'src/app/_interfaces/trafics/transaction/transactio
export class TransactionService {
//private HtUrl = 'http://192.168.1.223:8001/transactions/';
private HtUrl = 'http://192.168.1.223:8001/api/tableau_bord/1/';
private TUrl = 'http://192.168.1.223:8001/transactions/';
httpOptions = {
headers: new HttpHeaders({
......@@ -20,10 +24,14 @@ export class TransactionService {
getAll(): Observable<ITransaction[]> {
return this.httpClient
.get<ITransaction[]>(this.HtUrl)
.get<ITransaction[]>(this.TUrl)
.pipe(catchError(this.errorHandler));
}
getDataTable(): Observable<IMerchantData> {
return this.httpClient.get<IMerchantData>(this.HtUrl);
}
create(transaction: ITransaction): Observable<ITransaction> {
return this.httpClient
.post<ITransaction>(
......
src/app/admin-test/admin-test.component.html
......@@ -13,13 +13,15 @@
<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 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">87845000 FCFA</p>
<p style="color: blanchedalmond">
{{ respTransaction?.solde | currency: 'FCFA' }}
</p>
</div>
</div>
</div>
......@@ -45,9 +47,10 @@
<div class="data" style="color: azure">
<div class="data-group" style="color: azure">
<div class="amount">
<p style="color: blanchedalmond">87845000 FCFA</p>
<p style="color: blanchedalmond">
{{ respTransaction?.total_transaction | currency: 'FCFA' }}
</p>
</div>
</div>
</div>
</div>
......@@ -70,9 +73,10 @@
<div class="data" style="color: azure">
<div class="data-group">
<div class="amount">
<p style="color: blanchedalmond">87845000 FCFA</p>
<p style="color: blanchedalmond">
{{ respTransaction?.revesement | currency: 'FCFA' }}
</p>
</div>
</div>
</div>
</div>
......@@ -95,12 +99,9 @@
<div class="data" style="color: azure">
<div class="data-group">
<div class="amount">
<p style="color: blanchedalmond">87845000 FCFA</p>
</div>
<div class="nk-ecwg6-ck">
<canvas
class="ecommerce-line-chart-s3"
id="todayCustomers"></canvas>
<p style="color: blanchedalmond">
{{ respTransaction?.total_journee | currency: 'FCFA' }}
</p>
</div>
</div>
</div>
......@@ -170,7 +171,7 @@
</div>
</div>
<div class="col-xxl-6 col-lg-6">
<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">
......@@ -203,59 +204,18 @@
</div>
</div>
<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">
<li>
<li *ngFor="let operateur of operateurs">
<div class="title">
<span
class="dot dot-lg sq"
data-bg="#0fac81"
style="background: rgb(227, 29, 26)"></span>
<span>UBA (United Bank for Africa)</span>
style="background: rgb(219, 207, 207)"></span>
<span>{{ operateur.label }}</span>
</div>
<div class="amount amount-xs">1.247.500 FCFA</div>
</li>
<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 class="amount amount-xs">
{{ operateur.total_montant | currency: 'FCFA' }}
</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>
</ul>
</div>
......@@ -273,6 +233,7 @@
<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> ID </mat-header-cell>
......@@ -282,14 +243,6 @@
</ng-container>
<!-- 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">
<mat-header-cell *matHeaderCellDef>type paiement </mat-header-cell>
<mat-cell *matCellDef="let transaction">
......@@ -359,9 +312,6 @@
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator #paginator [pageSize]="5" [showFirstLastButtons]="true">
</mat-paginator>
</div>
</section>
<footer class="footer bg-dark footer-design">
......
src/app/admin-test/admin-test.component.ts
......@@ -7,9 +7,12 @@ 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 { MatTableModule } from '@angular/material/table';
import { IOperateur } from '../_interfaces/trafics/operateur/operateur';
import { ITransaction } from '../_interfaces/trafics/transaction/transaction';
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({
......@@ -32,26 +35,32 @@ import { TransactionService } from '../_services/trafics/transaction/transaction
styleUrls: ['./admin-test.component.scss'],
})
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;
respTransaction: IMerchantData | undefined = undefined;
transactions: ITransaction[] = [];
operateurs: IOperateur[] = [];
operateurs: ITypeOperateur[] = [];
// marchnad: IMerchantData[] = [];
selectedOperateur: string = '';
constructor(
private httpClient: HttpClient,
public transactionService: TransactionService
//public operateur: IOperateur
) {}
ngOnInit(): void {
this.transactionService.getAll().subscribe((data: ITransaction[]) => {
this.transactions = data;
console.log('transactions===>', this.transactions);
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;
//this.fetchOperateurs();
console.log('typeOpreateur===>', this.operateurs);
});
}
......@@ -69,13 +78,9 @@ export class AdminTestComponent implements OnInit {
'reference',
];
// dataSource = new MatTableDataSource(this.transactions);
// @ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
// constructor() {}
// ngOnInit() {
// this.breadCrumbItems = [
// { label: 'Résumé Des Transactions.' },
// /* { label: 'Invoice List', active: true },*/
// ];
// }
dataSource = new MatTableDataSource(this.transactions);
}
src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html
......@@ -149,7 +149,7 @@
<mat-paginator
#paginator
[pageSize]="5"
[pageSizeOptions]="[5, 10, 20]"
[pageSizeOptions]="[5, 10, 20, 40, 60, 80, 100]"
[showFirstLastButtons]="true">
</mat-paginator>
</div>
src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts
......@@ -74,7 +74,7 @@ export class SuiviTransactionComponent {
displayedColumns: string[] = [
'transaction_id',
'type_paiement',
//'type_paiement',
'type_paiement_label',
'marchand',
'service',
......
src/app/utilisateurs/create-users/create-users.component.html
......@@ -80,11 +80,8 @@
</div>
</div>
</section> -->
<div class="content sm-gutter">
<!-- END DASHBOARD TILES -->
<div class="row">
<!-- BEGIN WORLD MAP WIDGET - MAP -->
<div class="col-md-12 col-vlg-12 m-b-10">
<div class="row-fluid">
<div class="span12">
......@@ -94,9 +91,7 @@
<div class="card-body m-3">
<h5 class="mb-3">Ajouter Utilisateur</h5>
<form
method="post"
action="add_ppci_other_user"
class="add_ppci_other_user">
method="post" >
<div class="row">
<div class="col-md-5 mb-2">
<input
......@@ -398,3 +393,107 @@
</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 @@
<router-outlet></router-outlet>
</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">
<a [routerLink]="['create-users/']" class="btn btn-sm btn-success m-2">
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