16/05/2024

src/app/_helpers/services/auth.service.ts

@@ -41,7 +41,7 @@ export class AuthService {
     return (
       this.http
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .post<any>('http://192.168.1.223:8000/api/token/verify/', body, {
+        .post<any>('http://192.168.1.223:8001/api/token/verify/', body, {
           headers,
           observe: 'response',
         })
@@ -64,7 +64,7 @@ export class AuthService {
       this.http
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         .post<any>(
-          'http://192.168.1.223:8000/api/token/',
+          'http://192.168.1.223:8001/api/token/',
           user,
           this.httpOptions
         )
@@ -89,7 +89,7 @@ export class AuthService {
       this.http
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         .post<any>(
-          'http://192.168.1.223:8000/api-token-refresh/',
+          'http://192.168.1.223:8001/api-token-refresh/',
           { token: this.token },
           this.httpOptions
         )

src/app/_interfaces/trafics/operateur/operateur.ts

+export interface IOperateur {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  name: any;
+  id: number;
+  code: string;
+  liens: string;
+  etat: true;
+  status: number;
+  information: string;
+}

src/app/_interfaces/trafics/paiement/paiement.ts

+export interface Paiement {
+}

src/app/_interfaces/trafics/transaction/transaction.ts

+export interface ITransaction {
+  transaction_id: number;
+  type_paiement: number;
+  type_paiement_label: string;
+  marchand: string;
+  service: string;
+  montant: number;
+  date: Date;
+  commentaire: string;
+  etat: boolean;
+  status: number;
+  reference: string;
+}
+
+
+
+
+// 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[];
+// }

src/app/_services/trafics/operateur/operateur.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { OperateurService } from './operateur.service';
+
+describe('OperateurService', () => {
+  let service: OperateurService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(OperateurService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/trafics/operateur/operateur.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class OperateurService {
+  private OpUrl = 'http://192.168.1.223:8001/operateur/';
+
+  constructor(
+    private http: HttpClient
+    // public operateur: IOperateur
+  ) {}
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getOperator(): Observable<any> {
+    return this.http.get<IOperateur[]>(this.OpUrl);
+  }
+}

src/app/_services/trafics/paiement/paiement.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { PaiementService } from './paiement.service';
+
+describe('PaiementService', () => {
+  let service: PaiementService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PaiementService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/trafics/paiement/paiement.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PaiementService {
+  constructor() {}
+}

src/app/_services/trafics/transaction/transaction.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { TransactionService } from './transaction.service';
+
+describe('TransactionService', () => {
+  let service: TransactionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TransactionService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TransactionService {
+  //private HtUrl = 'http://192.168.1.223:8001/transactions/';
+  private HtUrl = 'http://192.168.1.223:8001/api/tableau_bord/1/';
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+    }),
+  };
+
+  constructor(private httpClient: HttpClient) {}
+
+  getAll(): Observable<ITransaction[]> {
+    return this.httpClient
+      .get<ITransaction[]>(this.HtUrl)
+      .pipe(catchError(this.errorHandler));
+  }
+
+  create(transaction: ITransaction): Observable<ITransaction> {
+    return this.httpClient
+      .post<ITransaction>(
+        this.HtUrl,
+        JSON.stringify(transaction),
+        this.httpOptions
+      )
+      .pipe(catchError(this.errorHandler));
+  }
+
+  find(transaction_id: number): Observable<ITransaction> {
+    return this.httpClient
+      .get<ITransaction>(`${this.HtUrl}/${transaction_id}`)
+      .pipe(catchError(this.errorHandler));
+  }
+
+  update(
+    transaction_id: number,
+    transaction: ITransaction
+  ): Observable<ITransaction> {
+    const url = `${this.HtUrl}/${transaction_id}`;
+    return this.httpClient
+      .put<ITransaction>(url, transaction, this.httpOptions)
+      .pipe(catchError(this.errorHandler));
+  }
+
+  // update(transaction_id: number, transaction: ITransaction): Observable<ITransaction> {
+  //   return this.httpClient;
+  //   transaction.pipe(catchError(this.errorHandler));
+  // }
+
+  delete(transaction_id: number) {
+    return this.httpClient
+      .delete(`${this.HtUrl}/${transaction_id}`, this.httpOptions)
+
+      .pipe(catchError(this.errorHandler));
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  errorHandler(error: any) {
+    let errorMessage = '';
+    if (error.error instanceof ErrorEvent) {
+      errorMessage = error.error.message;
+    } else {
+      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+    }
+    return throwError(errorMessage);
+  }
+}

src/app/account/auth/login-standard-user/login-standard-user.component.html

@@ -21,7 +21,10 @@
             <ul class="fxt-socials"></ul>
           </div>
           <div class="fxt-form">
-            <form name="form" #f="ngForm" (ngSubmit)="user.valid && onSubmit()">
+            <form
+              name="form"
+              #f="ngForm"
+              (ngSubmit)="f.form.valid && onSubmit()">
               <div class="form-group">
                 <div class="fxt-transformY-50 fxt-transition-delay-1">
                   <mat-form-field class="gui-form-width" appearance="fill">
@@ -31,7 +34,7 @@
                       matInput
                       placeholder="pat@example.com"
                       name="email"
-                      [(ngModel)]="user.username"
+                      [(ngModel)]="form.email"
                       required />
                     <!-- <mat-error *ngIf="email.invalid" >{{  
                       getErrorMessage()
@@ -42,12 +45,12 @@
                   class="form_error"
                   style="color: red"
                   *ngIf="
-                    username.errors &&
+                    email.errors &&
                     f.submitted &&
-                    username.touched &&
-                    username.invalid
+                    email.touched &&
+                    email.invalid
                   ">
-                  <div *ngIf="user.errors?.required">username est Requis!</div>
+                  <div *ngIf="form.errors?.required">Email est Requis!</div>
                 </div>
               </div>
               <div class="form-group">
@@ -59,25 +62,27 @@
                       [type]="hide ? 'password' : 'text'"
                       id="password"
                       name="password"
-                      [(ngModel)]="user.password"
+                      [(ngModel)]="form.password"
                       required
-                      minlength="5" />
+                      minlength="8" />
                     <button
                       mat-icon-button
                       matSuffix
                       (click)="hide = !hide"
                       [attr.aria-label]="'Hide password'"
                       [attr.aria-pressed]="hide">
-                      <mat-icon>visibility</mat-icon>
+                      <mat-icon>{{
+                        hide ? 'visibility_off' : 'visibility'
+                      }}</mat-icon>
                     </button>
                   </mat-form-field>
                 </div>
                 <div class="form_error" style="color: red" *ngIf="f.submitted">
-                  <div *ngIf="user.password.errors?.required">
+                  <div *ngIf="form.password.errors?.required">
                     Le mot de passe est obligatoire
                   </div>
-                  <div *ngIf="user.password.errors?.minlength">
-                    Le mot de passe doit contenir au moins 5 caractères
+                  <div *ngIf="form.password.errors?.minlength">
+                    Le mot de passe doit contenir au moins 8 caractères
                   </div>
                 </div>
               </div>
@@ -98,7 +103,7 @@
               <div class="form-group m-b-125">
                 <div class="fxt-transformY-50 fxt-transition-delay-4">
                   <button
-                    (click)="login()"
+                    (click)="connexionlogin()"
                     [disabled]="f.invalid"
                     [disabled]="!password"
                     mat-raised-button

src/app/account/auth/login-standard-user/login-standard-user.component.ts

+// import { Component, OnInit, inject } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+// import {
+//   FormControl,
+//   FormsModule,
+//   ReactiveFormsModule,
+//   Validators,
+// } from '@angular/forms';
+// import { CarouselComponent } from '../../../shared/carousel/carousel.component';
+// import { MatFormFieldModule } from '@angular/material/form-field';
+// import { MatInputModule } from '@angular/material/input';
+// import { MatButtonModule } from '@angular/material/button';
+// import { MatIconModule } from '@angular/material/icon';
+// import { MatCheckboxModule } from '@angular/material/checkbox';
+// import { Router, RouterLink } from '@angular/router';
+// import { AuthService } from 'src/app/_helpers/services/auth.service';
+
+// @Component({
+//   selector: 'bgui-login-standard-user',
+//   standalone: true,
+//   imports: [
+//     CommonModule,
+//     CarouselComponent,
+//     MatFormFieldModule,
+//     ReactiveFormsModule,
+//     MatInputModule,
+//     MatButtonModule,
+//     MatIconModule,
+//     MatCheckboxModule,
+//     RouterLink,
+//     FormsModule,
+//   ],
+//   templateUrl: './login-standard-user.component.html',
+//   styleUrls: ['./login-standard-user.component.scss'],
+//   providers: [AuthService],
+// })
+// export class LoginStandardUserComponent implements OnInit {
+//   router = inject(Router);
+//   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+//   //authService: any;
+
+//   constructor(private authService: AuthService) {}
+
+//   images = [
+//     {
+//       imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
+//       imageAlt: 'nature1',
+//     },
+//     {
+//       imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
+//       imageAlt: 'nature1',
+//     },
+//   ];
+
+//   username = new FormControl('', [Validators.required]);
+//   password = new FormControl('', [Validators.required]);
+
+//   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+//   user: any = {
+//     username: '',
+//     password: '',
+//   };
+
+//   getErrorMessage() {
+//     if (this.username.hasError('required')) {
+//       return 'Impossible de trouver votre compte Beasy';
+//     }
+
+//     return this.username.hasError('email') ? 'Identifiant non valide' : '';
+//   }
+
+//   getErrorAuth() {
+//     this.msgAuth = '';
+//   }
+
+//   hide = true;
+//   isActive = false;
+
+//   msgAuth = '';
+//   // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+//   ngOnInit() {
+//     this.user = {
+//       username: '',
+//       password: '',
+//     };
+//   }
+//   login() {
+//     console.log('Username:', this.user);
+//     this.authService.login({
+//       username: this.user.username,
+//       password: this.user.password,
+//     });
+
+//     let token: string;
+//     console.log('Token ==> ', this.authService.token);
+//     if (this.authService.token) {
+//       token = this.authService.token;
+//     } else {
+//       const localStorageToken = localStorage.getItem('token');
+//       token = localStorageToken ? String(localStorageToken) : '';
+//     }
+//     console.log('Token ==> ', token);
+//     if (token) {
+//       this.authService.verifyToken(token).subscribe(result => {
+//         if (result.status) {
+//           console.log('Token vérifié avec succès');
+//           console.log('accessToken', token);
+//           localStorage.setItem('isLoggedIn', 'true');
+//           localStorage.setItem('token', token);
+//           localStorage.setItem('username', this.user.username);
+//           // Remplacez 'dash' par l'URL de la page à laquelle vous souhaitez rediriger
+//           console.log("Redirection vers 'dash'");
+//           this.router.navigate(['/admin']);
+//         } else {
+//           console.error('Erreur lors de la vérification du token');
+//         }
+//       });
+//     } else {
+//       console.log('Token non trouvé');
+//     }
+//   }
+
+//   refreshToken() {
+//     this.authService.refreshToken();
+//   }
+
+//   logout() {
+//     this.authService.logout();
+//   }
+
+//   onSubmit() {}
+// }
+
 import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
@@ -13,7 +146,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { Router, RouterLink } from '@angular/router';
-import { AuthService } from 'src/app/_helpers/services/auth.service';
 
 @Component({
   selector: 'bgui-login-standard-user',
@@ -32,15 +164,8 @@ import { AuthService } from 'src/app/_helpers/services/auth.service';
   ],
   templateUrl: './login-standard-user.component.html',
   styleUrls: ['./login-standard-user.component.scss'],
-  providers: [AuthService],
 })
 export class LoginStandardUserComponent implements OnInit {
-  router = inject(Router);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  //authService: any;
-
-  constructor(private authService: AuthService) {}
-
   images = [
     {
       imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
@@ -52,21 +177,20 @@ export class LoginStandardUserComponent implements OnInit {
     },
   ];
 
-  username = new FormControl('', [Validators.required]);
+  email = new FormControl('', [Validators.required, Validators.email]);
   password = new FormControl('', [Validators.required]);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  user: any = {
-    username: '',
+  form: any = {
+    email: '',
     password: '',
   };
 
   getErrorMessage() {
-    if (this.username.hasError('required')) {
+    if (this.email.hasError('required')) {
       return 'Impossible de trouver votre compte Beasy';
     }
 
-    return this.username.hasError('email') ? 'Identifiant non valide' : '';
+    return this.email.hasError('email') ? 'Adresse e-mail non valide' : '';
   }
 
   getErrorAuth() {
@@ -77,56 +201,48 @@ export class LoginStandardUserComponent implements OnInit {
   isActive = false;
 
   msgAuth = '';
+
+  private router = inject(Router);
+
+  // constructor(private router:Router) {
+  //   //...
+  // }
+
   // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
-  ngOnInit() {
-    this.user = {
-      username: '',
-      password: '',
-    };
+  ngOnInit(): void {
+    //...
   }
-  login() {
-    console.log('Username:', this.user);
-    this.authService.login({
-      username: this.user.username,
-      password: this.user.password,
-    });
-
-    let token: string;
-    console.log('Token ==> ', this.authService.token);
-    if (this.authService.token) {
-      token = this.authService.token;
-    } else {
-      const localStorageToken = localStorage.getItem('token');
-      token = localStorageToken ? String(localStorageToken) : '';
-    }
-    console.log('Token ==> ', token);
-    if (token) {
-      this.authService.verifyToken(token).subscribe(result => {
-        if (result.status) {
-          console.log('Token vérifié avec succès');
-          console.log('accessToken', token);
-          localStorage.setItem('isLoggedIn', 'true');
-          localStorage.setItem('token', token);
-          localStorage.setItem('username', this.user.username);
-          // Remplacez 'dash' par l'URL de la page à laquelle vous souhaitez rediriger
-          console.log("Redirection vers 'dash'");
-          this.router.navigate(['/admin']);
-        } else {
-          console.error('Erreur lors de la vérification du token');
-        }
-      });
+
+  onSubmit(): void {
+    console.log(this.form);
+    this.connexionlogin();
+  }
+  connexionlogin() {
+    //console.log("Nous sommes ici");
+    if (
+      this.form.email === 'mrfrancice@gmail.com' &&
+      this.form.password === 'p@ssw0rd'
+    ) {
+      localStorage.setItem('isLoggedIn', 'true');
+      localStorage.setItem('token', this.form.email);
+      // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
+      console.log("Redirection vers 'dash'");
+      this.router.navigate(['/admin']);
+      //window.location.href = '/';
     } else {
-      console.log('Token non trouvé');
+      this.router.navigate(['/auth']);
+      this.msgAuth = 'Login ou PassWord incorrect...';
     }
   }
 
-  refreshToken() {
-    this.authService.refreshToken();
-  }
-
-  logout() {
-    this.authService.logout();
-  }
+  // deconnxionlogin()
+  // {
 
-  onSubmit() {}
+  //     localStorage.setItem('isLoggedIn', "false");
+  //     localStorage.removeItem('token');
+  //     // // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
+  //     // console.log("Redirection vers 'dash'");
+  //     // this.router.navigate(['/admin']);
+  //     // //window.location.href = '/';
+  //   }
 }

src/app/admin-test/admin-test.component.html

@@ -7,31 +7,21 @@
 </div>
 <div class="nk-block">
   <div class="row g-gs p-2">
-
     <div class="col-xxl-3 col-sm-6">
-      <div class="card">
+      <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">
-                <div class="tiles"> SOLDE </div>
-                <!-- <div class="heading"> <span class="animate-number" data-value="0" data-animation-duration="1200">0</span> <sup><small>FCFA</small></sup> </div> -->
+              <div class="card-title" style="color: azure">
+                <div class="tiles" style="font-weight: bold">SOLDE</div>
               </div>
             </div>
-            <div class="data">
+            <div class="data" style="color: azure">
               <div class="data-group">
-                <div class="amount">1200 FCFA</div>
-                <div class="nk-ecwg6-ck">
-                  <canvas
-                    class="ecommerce-line-chart-s3"
-                    id="todayOrders"></canvas>
+                <div class="amount" style="font-weight: bold; font: 2em">
+                  <p style="color: blanchedalmond">87845000 FCFA</p>
                 </div>
               </div>
-              <div class="info">
-                <span class="change up text-danger"
-                  ><em class="icon ni ni-arrow-long-up"></em>4.63%</span
-                ><span> vs. semaine dernière</span>
-              </div>
             </div>
           </div>
           <!-- .card-inner -->
@@ -41,29 +31,23 @@
       <!-- .card -->
     </div>
 
-
     <div class="col-xxl-3 col-sm-6">
-      <div class="card">
+      <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">
-                <h6 class="title">Montant Total Transactions</h6>
+              <div class="card-title" style="color: azure">
+                <h6 class="title" style="color: azure">
+                  Montant Total Transactions
+                </h6>
               </div>
             </div>
-            <div class="data">
-              <div class="data-group">
-                <div class="amount">0</div>
-                <div class="nk-ecwg6-ck">
-                  <canvas
-                    class="ecommerce-line-chart-s3"
-                    id="todayOrders"></canvas>
+            <div class="data" style="color: azure">
+              <div class="data-group" style="color: azure">
+                <div class="amount">
+                  <p style="color: blanchedalmond">87845000 FCFA</p>
                 </div>
-              </div>
-              <div class="info">
-                <span class="change up text-danger"
-                  ><em class="icon ni ni-arrow-long-up"></em>4.63%</span
-                ><span> vs. semaine dernière</span>
+                
               </div>
             </div>
           </div>
@@ -75,27 +59,20 @@
     </div>
     <!-- .col -->
     <div class="col-xxl-3 col-sm-6">
-      <div class="card">
+      <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">
-                <h6 class="title">Reversement</h6>
+              <div class="card-title" style="color: azure">
+                <h6 class="title" style="color: azure">Reversement</h6>
               </div>
             </div>
-            <div class="data">
+            <div class="data" style="color: azure">
               <div class="data-group">
-                <div class="amount">0</div>
-                <div class="nk-ecwg6-ck">
-                  <canvas
-                    class="ecommerce-line-chart-s3"
-                    id="todayRevenue"></canvas>
+                <div class="amount">
+                  <p style="color: blanchedalmond">87845000 FCFA</p>
                 </div>
-              </div>
-              <div class="info">
-                <span class="change down text-danger"
-                  ><em class="icon ni ni-arrow-long-down"></em>2.34%</span
-                ><span> vs. semaine dernière</span>
+                
               </div>
             </div>
           </div>
@@ -107,288 +84,289 @@
     </div>
     <!-- .col -->
     <div class="col-xxl-3 col-sm-6">
-      <div class="card">
+      <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">
-                <h6 class="title">Montant Journalier</h6>
+              <div class="card-title" style="color: azure">
+                <h6 class="title" style="color: azure">Montant Journalier</h6>
               </div>
             </div>
-            <div class="data">
+            <div class="data" style="color: azure">
               <div class="data-group">
-                <div class="amount">0%</div>
+                <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>
                 </div>
               </div>
-              <div class="info">
-                <span class="change up text-danger"
-                  ><em class="icon ni ni-arrow-long-up"></em>4.63%</span
-                ><span> vs. semaine dernière</span>
-              </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 col-lg-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">Analyse Des Modes de Paiement</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 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>
-          </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>
-                <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>
-                </div>
-                <div class="amount amount-xs">0 XOF</div>
-              </li>
+            <ul class="nk-ecwg8-legends">
               <li>
                 <div class="title">
-                  <span
-                    class="dot dot-lg sq"
-                    data-bg="#e85347"
-                    style="background: rgb(255, 121, 0)"></span>
-                  <span>Orange Money</span>
+                  <span class="dot dot-lg sq" data-bg="#0fac81"></span>
+                  <span>Transaction</span>
                 </div>
-                <div class="amount amount-xs">0 XOF</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>
+                  <span class="dot dot-lg sq" data-bg="#eb6459"></span>
+                  <span>Transaction Annulé</span>
                 </div>
-                <div class="amount amount-xs">0 XOF</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">0 XOF</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>
-</div>
-
-  <div class="row g-gs p-2">
-    <div class="col-md-12">
-      <div class="card">
-        <div class="card-header">
-          <h4 class="card-title">Vos 5 dernières transactions</h4>
-        </div>
-
-        <div class="card-body">
-          
-          <div class="table-responsive">
-            <table class="table table-striped">
-              <thead>
-                <tr>
-                  <th scope="col" style="width: 140px;">N°FACTURE</th>
-                  <th scope="col" style="width: 190px;">NOM &amp; PRÉNOM</th>
-                  <th scope="col" style="width: 120px;">CONTACT</th>
-                  <th scope="col" style="width: 109px;">ARTICLE</th>
-                  <th scope="col" class="text-right" style="width: 126px;">MONTANT</th>
-                  <th scope="col" class="text-right" style="width: 200px;">N°TRANSACTION</th>
-                  <th scope="col" class="text-right" style="width: 232px;">MODE DE PAIEMENT</th>
-                  <th scope="col" style="width: 191px;">DATE PAIEMENT</th>
-                </tr>
-              </thead>
-              <tbody>
-                <!-- Ajout de 10 lignes de données -->
-                <tr>
-                  <td>12345</td>
-                  <td>John Doe</td>
-                  <td>123456789</td>
-                  <td>Product 1</td>
-                  <td class="text-right">100.00</td>
-                  <td class="text-right">TXN123</td>
-                  <td class="text-right">Carte bancaire</td>
-                  <td>2024-04-10</td>
-                </tr>
-                <!-- Ajoutez ici les 9 lignes de données supplémentaires -->
-                <!-- Ligne 2 -->
-                <tr>
-                  <td>54321</td>
-                  <td>Jane Doe</td>
-                  <td>987654321</td>
-                  <td>Product 2</td>
-                  <td class="text-right">75.00</td>
-                  <td class="text-right">TXN456</td>
-                  <td class="text-right">PayPal</td>
-                  <td>2024-04-09</td>
-                </tr>
-                <tr>
-                  <td>22345</td>
-                  <td>Koffi</td>
-                  <td>123400089</td>
-                  <td>Product 3</td>
-                  <td class="text-right">10000.00</td>
-                  <td class="text-right">TXN123</td>
-                  <td class="text-right">UBA</td>
-                  <td>2024-04-10</td>
-                </tr>
 
-                <tr>
-                  <td>22345</td>
-                  <td>Koffi</td>
-                  <td>123400089</td>
-                  <td>Product 3</td>
-                  <td class="text-right">10000.00</td>
-                  <td class="text-right">TXN123</td>
-                  <td class="text-right">UBA</td>
-                  <td>2024-04-10</td>
-                </tr> 
-                <!-- Ajoutez ici les 9 lignes de données supplémentaires -->
-                <!-- Ligne 2 -->
-                <tr>
-                  <td>54321</td>
-                  <td>zadi Doe</td>
-                  <td>98777654321</td>
-                  <td>Product 4</td>
-                  <td class="text-right">2500000.00</td>
-                  <td class="text-right">TXN456</td>
-                  <td class="text-right">PayPal</td>
-                  <td>2024-04-09</td>
-                </tr>
-                <!-- Ligne 3 -->
-                <!-- Ajoutez les autres lignes ici -->
-              </tbody>
-            </table>
+    <div class="col-xxl-6 col-lg-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">
+              <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>
+                  <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>
+                  </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>
+                  <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>
           </div>
-          
         </div>
       </div>
     </div>
-
-</div>
-<footer class="footer bg-dark footer-design">
-  <div class="text-white text-center mr-3">
-    <!-- <small> Management system Barnoin</small> © 2024 Copyright -->
   </div>
-  </footer> 
-</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> ID </mat-header-cell>
+          <mat-cell *matCellDef="let transaction">
+            {{ transaction.transaction_id }}
+          </mat-cell>
+        </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> -->
 
-<!-- <router-outlet></router-outlet> -->
+        <!-- Name Column -->
+        <ng-container matColumnDef="type_paiement_label">
+          <mat-header-cell *matHeaderCellDef>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> Marchand </mat-header-cell>
+          <mat-cell *matCellDef="let transaction">
+            {{ transaction.marchand }}
+          </mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="service">
+          <mat-header-cell *matHeaderCellDef> 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> 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> 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> 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> 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> Status </mat-header-cell>
+          <mat-cell *matCellDef="let transaction">
+            {{ transaction.status }}
+          </mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="reference">
+          <mat-header-cell *matHeaderCellDef> 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>
+
+      <mat-paginator #paginator [pageSize]="5" [showFirstLastButtons]="true">
+      </mat-paginator>
+    </div>
+  </section>
+  <footer class="footer bg-dark footer-design">
+    <div class="text-white text-center mr-3">
+      <!-- <small> Management system Barnoin</small> © 2024 Copyright -->
+    </div>
+  </footer>
+</div>

src/app/admin-test/admin-test.component.ts

 import { Component, type OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PagetitleComponent } from '../shared/ui/pagetitle/pagetitle.component';
-import {RouterOutlet} from "@angular/router";
+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 { MatTableModule } from '@angular/material/table';
+import { IOperateur } from '../_interfaces/trafics/operateur/operateur';
+import { ITransaction } from '../_interfaces/trafics/transaction/transaction';
+import { TransactionService } from '../_services/trafics/transaction/transaction.service';
 
 @Component({
   selector: 'bgui-admin-test',
   standalone: true,
-  imports: [CommonModule, PagetitleComponent, RouterOutlet],
+  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 {
-  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  //private url = 'http://192.168.1.223:8001/operateur/';
+
   breadCrumbItems: Array<{}> | undefined;
-// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-dataSource: any;
-
-  // biome-ignore lint/complexity/noUselessConstructor: <explanation>
-  constructor() {}
-  ngOnInit() {
-    this.breadCrumbItems = [
-      { label: 'Résumé Des Transactions.' },
-      /* { label: 'Invoice List', active: true },*/
-    ];
+
+  transactions: ITransaction[] = [];
+  operateurs: IOperateur[] = [];
+  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.fetchOperateurs();
+    });
   }
+
+  displayedColumns: string[] = [
+    'transaction_id',
+    //'type_paiement',
+    'type_paiement_label',
+    'marchand',
+    'service',
+    'montant',
+    'date',
+    'commentaire',
+    'etat',
+    'status',
+    '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 },*/
+  //   ];
+  // }
 }

src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts

@@ -162,7 +162,7 @@ const ELEMENT_DATA: PElement[] = [
   styleUrl: './suivi-paiement.component.scss',
 })
 export class SuiviPaiementComponent {
-  private url = 'http://192.168.1.223:8000/operateur/';
+  private url = 'http://192.168.1.223:8001/operateur/';
 
   operateurs: IOperateur[] = [];
   selectedOperateur: string = '';

src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html

@@ -109,7 +109,7 @@
     <ng-container matColumnDef="date">
       <mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
       <mat-cell *matCellDef="let transaction">
-        {{ transaction.date }}
+        {{ transaction.date | date: 'dd/mm/yyyy' }}
       </mat-cell>
     </ng-container>
 
@@ -153,12 +153,3 @@
     [showFirstLastButtons]="true">
   </mat-paginator>
 </div>
-
-<!-- id	ID[...]
-transaction_id*	Transaction id[...]
-action*	Action[...]
-date	Date[...]
-description*	Description[...]
-marchand_code*	Marchand code[...]
-service_code*	Service code[...]
-type_paiement_code*	Type paiement code -->

src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts

@@ -30,7 +30,7 @@ import { FormsModule } from '@angular/forms';
 export class SuiviTransactionComponent {
   //private HtUrl = 'http://192.168.1.223:8000/transaction-history/';
 
-  private url = 'http://192.168.1.223:8000/operateur/';
+  private url = 'http://192.168.1.223:8001/operateur/';
 
   transactions: ITransaction[] = [];
   operateurs: IOperateur[] = [];

src/app/utilisateurs/create-users/create-users.component.html

-<div>
-  <h3>Create Users</h3>
+<!-- <section
+  class="fxt-template-animation fxt-template-layout20 imagedefont m-125 d-flex justify-content-center align-items-center">
+  <div class="container-fluid">
+    <div
+      [class.mat-elevation-z1]="!isActive"
+      class="row fxt-bg-color fxt-templateshadow-01">
+      <div class="row mt-5">
+        <div class="col"></div>
+        <div class="col-4">
+          <div class="card shadow">
+            <div class="card-body">
+              <form>
+                <div class="mb-3">
+                  <h4 class="text-dark text-muted">Ajouter un Utilisateur</h4>
+                </div>
+
+                <div class="mb-3">
+                  <label for="exampleInputName" class="form-label">Nom</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="name"
+                    [(ngModel)]="name" />
+                </div>
+
+                <div class="mb-3">
+                  <label for="exampleInputLastName" class="form-label"
+                    >Prenoms</label
+                  >
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="lastName"
+                    [(ngModel)]="lastName" />
+                </div>
+
+                <div class="mb-3">
+                  <label for="exampleInputEmail1" class="form-label"
+                    >Email</label
+                  >
+                  <input
+                    type="email"
+                    class="form-control"
+                    name="email"
+                    [(ngModel)]="email" />
+                </div>
+
+                <div class="mb-3">
+                  <label for="exampleInputPassword1" class="form-label"
+                    >Password</label
+                  >
+                  <input
+                    type="password"
+                    class="form-control"
+                    name="password"
+                    [(ngModel)]="password" />
+                </div>
+                <div class="mb-3">
+                  <label for="exampleInputPassword1" class="form-label"
+                    >Confirmer mot de passe</label
+                  >
+                  <input
+                    type="password"
+                    class="form-control"
+                    name="password"
+                    [(ngModel)]="ffPassword" />
+                </div>
+                <button type="button" class="btn btn-info" (click)="register()">
+                  S'enregistrer
+                </button>
+                <div class="row">
+                  <div class="col-md-8"></div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div class="col"></div>
+      </div>
+    </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">
+          <div class="grid simple">
+            <div class="card">
+              <div class="card-title">
+                <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">
+                    <div class="row">
+                      <div class="col-md-5 mb-2">
+                        <input
+                          type="text"
+                          placeholder="Nom"
+                          class="form-control"
+                          name="first_name"
+                          value=""
+                          required="" />
+                      </div>
+                      <div class="col-md-5">
+                        <input
+                          type="text"
+                          placeholder="Prénoms"
+                          class="form-control"
+                          name="last_name"
+                          value=""
+                          required="" />
+                      </div>
+
+                      <div class="col-md-5">
+                        <input
+                          type="email"
+                          placeholder="Email"
+                          class="form-control"
+                          name="username"
+                          value=""
+                          required="" />
+                      </div>
+                      <div class="col-md-5">
+                        <input
+                          type="text"
+                          placeholder="Mot de passe"
+                          class="form-control"
+                          name="password"
+                          value=""
+                          required="" />
+                      </div>
+                      <input
+                        type="hidden"
+                        class="form-control"
+                        name="user_id"
+                        value="2807" />
+                      <input
+                        type="hidden"
+                        class="form-control"
+                        name="id"
+                        value="" />
+
+                      <div class="col-md-12 row" style="margin-top: 30px">
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Transactions" />
+                            Transactions
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Liste reversement" />
+                            Liste reversement
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Demande de reversement" />
+                            Demande de reversement
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Services" />
+                            Services
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Intégrations" />
+                            Intégrations
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Application android" />
+                            Application android
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Compte associé" />
+                            Compte associé
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Utilisateurs" />
+                            Utilisateurs
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Mon profile" />
+                            Mon profile
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Modifer" />
+                            Modifer
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Mot de passe" />
+                            Mot de passe
+                          </label>
+                        </div>
+                      </div>
+
+                      <div class="col-md-12 text-center">
+                        <br />
+                        <div class="card-title">
+                          <button
+                            id="add_ppci_other_user"
+                            class="btn-round btn btn-primary btn-sm m-1">
+                            Enregistrer <i class="fa fa-save"></i>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
+
+<!--
+  <form wire:submit.prevent="save" class="modal-content">
+  <input
+    type="hidden"
+    name="_token"
+    value="PN3yV71V0PnUv5xQGSpaHSOlUAPt5ZJ60AN2NWit" />
+  <div class="modal-header">
+    <h1 class="modal-title fs-5" id="exampleModalLabel">
+      Modifier l'utilisateur
+    </h1>
+    <button
+      type="button"
+      class="btn-close"
+      data-bs-dismiss="modal"
+      aria-label="Close"></button>
+  </div>
+
+  <div class="text-center" id="update-loader" style="display: none">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+
+  <div class="modal-body row" id="update-body">
+    <div class="mb-3 col-md-12">
+      <label for="lastname" class="form-label">Nom</label>
+      <input
+        wire:model="lastname"
+        type="text"
+        required=""
+        id="lastname"
+        class="form-control" />
+    </div>
+    <div class="mb-3 col-md-12">
+      <label for="firstname" class="form-label">Prénom(s)</label>
+      <input
+        wire:model="firstname"
+        type="text"
+        required=""
+        id="firstname"
+        class="form-control" />
+    </div>
+    <div class="mb-3 col-md-12">
+      <label for="email" class="form-label">Email</label>
+      <input
+        wire:model="email"
+        type="text"
+        required=""
+        id="email"
+        class="form-control" />
+    </div>
+    <div class="mb-3 col-md-12">
+      <label for="role" class="form-label">Rôle</label>
+      <select wire:model="role" required="" class="form-select" id="role">
+        <option value="67">Administrateur</option>
+        <option value="68">Finance Edition</option>
+        <option value="69">Finance Consultation</option>
+        <option value="70">Support &amp; Assistance</option>
+        <option value="71">Exploitation historique transactions</option>
+        <option value="72">Exploitation historique paiement entrant</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <button type="button" class="btn btn-link" data-bs-dismiss="modal">
+      Retour
+    </button>
+    <button type="submit" class="btn btn-primary">
+      Modifier
+      <span wire:loading="" wire:target="save">
+        <svg
+          wire:id="ik25iNsobRi2FZQu80We"
+          width="38"
+          height="20"
+          viewBox="0 0 38 38"
+          xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <linearGradient
+              x1="8.042%"
+              y1="0%"
+              x2="65.682%"
+              y2="23.865%"
+              id="a">
+              <stop stop-color="#fff" stop-opacity="0" offset="0%"></stop>
+              <stop
+                stop-color="#fff"
+                stop-opacity=".631"
+                offset="63.146%"></stop>
+              <stop stop-color="#fff" offset="100%"></stop>
+            </linearGradient>
+          </defs>
+          <g fill="none" fill-rule="evenodd">
+            <g transform="translate(1 1)">
+              <path
+                d="M36 18c0-9.94-8.06-18-18-18"
+                id="Oval-2"
+                stroke="url(#a)"
+                stroke-width="2">
+                <animateTransform
+                  attributeName="transform"
+                  type="rotate"
+                  from="0 18 18"
+                  to="60 18 18"
+                  dur="0.9s"
+                  repeatCount="indefinite"></animateTransform>
+              </path>
+              <circle fill="#fff" cx="36" cy="18" r="1">
+                <animateTransform
+                  attributeName="transform"
+                  type="rotate"
+                  from="0 18 18"
+                  to="360 18 18"
+                  dur="0.9s"
+                  repeatCount="indefinite"></animateTransform>
+              </circle>
+            </g>
+          </g>
+        </svg>
+      </span>
+    </button>
+  </div>
+</form>
+
+-->

src/app/utilisateurs/create-users/create-users.component.ts

+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
 
 @Component({
   selector: 'bgui-create-users',
   standalone: true,
-  imports: [],
+  imports: [
+    CommonModule,
+    CarouselComponent,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCheckboxModule,
+    RouterLink,
+    FormsModule,
+  ],
   templateUrl: './create-users.component.html',
   styleUrl: './create-users.component.scss',
 })
-export class CreateUsersComponent {}
+export class CreateUsersComponent {
+  name!: string;
+  lastName!: string;
+  email!: string;
+  password!: string;
+  ffPassword!: string;
+  images = [
+    {
+      imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
+      imageAlt: 'nature1',
+    },
+    {
+      imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
+      imageAlt: 'nature1',
+    },
+  ];
+
+  isActive = false;
+
+  register() {}
+}

src/app/utilisateurs/delete-user/delete-user.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteUserComponent } from './delete-user.component';
+
+describe('DeleteUserComponent', () => {
+  let component: DeleteUserComponent;
+  let fixture: ComponentFixture<DeleteUserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeleteUserComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DeleteUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/utilisateurs/delete-user/delete-user.component.ts

+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'bgui-delete-user',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './delete-user.component.html',
+  styleUrl: './delete-user.component.scss',
+})
+export class DeleteUserComponent {}

src/app/utilisateurs/edit-user/edit-user.component.html

+<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">
+          <div class="grid simple">
+            <div class="card">
+              <div class="card-title">
+                <div class="card-body m-3">
+                  <h5 class="mb-3">Modifer Utilisateur</h5>
+                  <form
+                    method="post"
+                    action="add_ppci_other_user"
+                    class="add_ppci_other_user">
+                    <div class="row">
+                      <div class="col-md-5 mb-2">
+                        <input
+                          type="text"
+                          placeholder="Nom"
+                          class="form-control"
+                          name="first_name"
+                          value=""
+                          required="" />
+                      </div>
+                      <div class="col-md-5">
+                        <input
+                          type="text"
+                          placeholder="Prénoms"
+                          class="form-control"
+                          name="last_name"
+                          value=""
+                          required="" />
+                      </div>
+
+                      <div class="col-md-5">
+                        <input
+                          type="email"
+                          placeholder="Email"
+                          class="form-control"
+                          name="username"
+                          value=""
+                          required="" />
+                      </div>
+                      <div class="col-md-5">
+                        <input
+                          type="text"
+                          placeholder="Mot de passe"
+                          class="form-control"
+                          name="password"
+                          value=""
+                          required="" />
+                      </div>
+                      <input
+                        type="hidden"
+                        class="form-control"
+                        name="user_id"
+                        value="2807" />
+                      <input
+                        type="hidden"
+                        class="form-control"
+                        name="id"
+                        value="" />
+
+                      <div class="col-md-12 row" style="margin-top: 30px">
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Transactions" />
+                            Transactions
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Liste reversement" />
+                            Liste reversement
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Demande de reversement" />
+                            Demande de reversement
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Services" />
+                            Services
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Intégrations" />
+                            Intégrations
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Application android" />
+                            Application android
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Compte associé" />
+                            Compte associé
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Utilisateurs" />
+                            Utilisateurs
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Mon profile" />
+                            Mon profile
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Modifer" />
+                            Modifer
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Mot de passe" />
+                            Mot de passe
+                          </label>
+                        </div>
+                      </div>
+
+                      <div class="col-md-12 text-center">
+                        <br />
+                        <div class="card-title">
+                          <button
+                            id="add_ppci_other_user"
+                            class="btn-round btn btn-primary btn-sm m-1">
+                            Enregistrer <i class="fa fa-save"></i>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/utilisateurs/edit-user/edit-user.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditUserComponent } from './edit-user.component';
+
+describe('EditUserComponent', () => {
+  let component: EditUserComponent;
+  let fixture: ComponentFixture<EditUserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EditUserComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(EditUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/utilisateurs/edit-user/edit-user.component.ts

+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule, MatCardTitle } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableModule } from '@angular/material/table';
+import { RouterOutlet, RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+  selector: 'bgui-edit-user',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatPaginator,
+    MatTableModule,
+    MatFormFieldModule,
+    MatInputModule,
+    CarouselComponent,
+    MatCardModule,
+    MatCardTitle,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCheckboxModule,
+    RouterOutlet,
+    MatPaginatorModule,
+    RouterLink,
+    FormsModule,
+    MatMenuModule,
+  ],
+  templateUrl: './edit-user.component.html',
+  styleUrl: './edit-user.component.scss',
+})
+export class EditUserComponent {
+  name!: string;
+  lastName!: string;
+  email!: string;
+  password!: string;
+  ffPassword!: string;
+  images = [
+    {
+      imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
+      imageAlt: 'nature1',
+    },
+    {
+      imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
+      imageAlt: 'nature1',
+    },
+  ];
+
+  // email = new FormControl('', [Validators.required, Validators.email]);
+  // password = new FormControl('', [Validators.required]);
+
+  // form: any = {
+  //   email: '',
+  //   password: '',
+  // };
+
+  // getErrorMessage() {
+  //   if (this.email.hasError('required')) {
+  //     return 'Impossible de trouver votre compte Beasy';
+  //   }
+
+  //   return this.email.hasError('email') ? 'Adresse e-mail non valide' : '';
+  // }
+
+  // getErrorAuth() {
+  //   this.msgAuth = '';
+  // }
+
+  // hide = true;
+  isActive = false;
+
+  // msgAuth = '';
+
+  // private router = inject(Router);
+
+  // constructor(private router:Router) {
+  //   //...
+  // }
+
+  // ngOnInit(): void {
+  //   //...
+  // }
+
+  // onSubmit(): void {
+  //   console.log(this.form);
+  //   this.connexionlogin();
+  // }
+  // connexionlogin() {
+  //   //console.log("Nous sommes ici");
+  //   if (
+  //     this.form.email === 'mrfrancice@gmail.com' &&
+  //     this.form.password === 'p@ssw0rd'
+  //   ) {
+  //     localStorage.setItem('isLoggedIn', 'true');
+  //     localStorage.setItem('token', this.form.email);
+  //     // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
+  //     console.log("Redirection vers 'dash'");
+  //     this.router.navigate(['/admin']);
+  //     //window.location.href = '/';
+  //   } else {
+  //     this.router.navigate(['/auth']);
+  //     this.msgAuth = 'Login ou PassWord incorrect...';
+  //   }
+  // }
+
+  register() {}
+}

src/app/utilisateurs/user.routes.ts

+import type { Routes } from '@angular/router';
+import { UtilisateursComponent } from './utilisateurs.component';
+import { CreateUsersComponent } from './create-users/create-users.component';
+import { EditUserComponent } from './edit-user/edit-user.component';
+import { DeleteUserComponent } from './delete-user/delete-user.component';
+import { ViewUserComponent } from './view-user/view-user.component';
+
+export const userRoutes: Routes = [
+  {
+    path: '',
+    component: UtilisateursComponent,
+    children: [
+      { path: '', redirectTo: 'utilisateurs', pathMatch: 'full' },
+      {
+        path: 'create-users',
+        component: CreateUsersComponent,
+      },
+      {
+        path: 'edit-user/id',
+        component: EditUserComponent,
+      },
+
+      {
+        path: 'delete-user/id',
+        component: DeleteUserComponent,
+      },
+      {
+        path: 'view-user',
+        component: ViewUserComponent,
+      },
+    ],
+  },
+];

src/app/utilisateurs/utilisateurs.component.html

+<div class="container-fluid"><h3>Utilisateurs</h3></div>
+
+<div>
+  <router-outlet></router-outlet>
+</div>
+
 <div class="page-title d-flex justify-content-between">
-  <h3>Utilisateurs</h3>
-  <a routerLink="#" class="btn btn-sm btn-success m-2">
+  <a [routerLink]="['create-users/']" class="btn btn-sm btn-success m-2">
     Ajouter un utilisateur
   </a>
 </div>
@@ -42,16 +47,19 @@
     <ng-container matColumnDef="actions">
       <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
       <mat-cell *matCellDef="let user" style="text-align: right">
-        <a href="#" class="btn btn-info" [routerLink]="['view-user']">Voir</a>
-        <a href="#" class="btn btn-primary m-1" [routerLink]="['edit-user/id']"
-          >Editer</a
+        <a href="#" class="m-2" [routerLink]="['view-user']"
+          ><mat-icon style="color: blue" title="Voir"
+            >remove_red_eye</mat-icon
+          ></a
+        >
+        <a href="#" class="m-2" [routerLink]="['edit-user/id']"
+          ><mat-icon style="color: green" title="Modifier">edit</mat-icon></a
+        >
+        <a href="#" class="m-2" [routerLink]="['delete-user/id']"
+          ><mat-icon style="color: red" title="Supprimer"
+            >delete_sweep</mat-icon
+          ></a
         >
-        <button
-          type="button"
-          class="btn btn-danger"
-          [routerLink]="['delete-user/id']">
-          Supprimer
-        </button>
       </mat-cell>
     </ng-container>
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
@@ -65,29 +73,3 @@
     [showFirstLastButtons]="true">
   </mat-paginator>
 </div>
-
-<!-- <hr />
-<div>
-  <table>
-    <thead>
-      <tr>
-        <th>id</th>
-        <th>code</th>
-        <th>liens</th>
-        <th>etat</th>
-        <th>status</th>
-        <th>information</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let item of dataTypePaiements">
-        <td>{{ item.id }}</td>
-        <td>{{ item.code }}</td>
-        <td>{{ item.lien }}</td>
-        <td>{{ item.etat }}</td>
-        <td>{{ item.status }}</td>
-        <td>{{ item.information }}</td>
-      </tr>
-    </tbody>
-  </table>
-</div> -->

src/app/utilisateurs/utilisateurs.component.ts

@@ -10,7 +10,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule, MatCardTitle } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { RouterLink } from '@angular/router';
+import { RouterLink, RouterOutlet } from '@angular/router';
 import { CarouselComponent } from '../shared/carousel/carousel.component';
 import { MatMenuModule } from '@angular/material/menu';
 import { HttpClient } from '@angular/common/http';
@@ -78,21 +78,19 @@ const ELEMENT_DATA: IUsers[] = [
     MatFormFieldModule,
     MatInputModule,
     CarouselComponent,
-    MatFormFieldModule,
     MatCardModule,
     MatCardTitle,
     ReactiveFormsModule,
-    MatInputModule,
-    MatInputModule,
     MatButtonModule,
     MatIconModule,
     MatCheckboxModule,
-    MatTableModule,
+    RouterOutlet,
     MatPaginatorModule,
     RouterLink,
     FormsModule,
     MatMenuModule,
   ],
+  providers: [],
   templateUrl: './utilisateurs.component.html',
   styleUrl: './utilisateurs.component.scss',
 })

src/app/utilisateurs/view-user/view-user.component.html

+<!-- <section
+  class="fxt-template-animation fxt-template-layout20 imagedefont m-125 d-flex justify-content-center align-items-center">
+  <div class="container-fluid">
+    <div
+      [class.mat-elevation-z1]="!isActive"
+      class="row fxt-bg-color fxt-templateshadow-01">
+      <div class="row mt-5">
+        <div class="col"></div>
+        <div class="col-4">
+          <div class="card shadow">
+            <div class="card-body">
+              <form>
+                <div class="mb-3">
+                  <h4 class="text-dark text-muted">Ajouter un Utilisateur</h4>
+                </div>
+
+                <div class="mb-3">
+                  <label for="exampleInputName" class="form-label">Nom</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="name"
+                    [(ngModel)]="name" />
+                </div>
+
+                <div class="mb-3">
+                  <label for="exampleInputLastName" class="form-label"
+                    >Prenoms</label
+                  >
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="lastName"
+                    [(ngModel)]="lastName" />
+                </div>
+
+                <div class="mb-3">
+                  <label for="exampleInputEmail1" class="form-label"
+                    >Email</label
+                  >
+                  <input
+                    type="email"
+                    class="form-control"
+                    name="email"
+                    [(ngModel)]="email" />
+                </div>
+
+                <button type="button" class="btn btn-info" (click)="register()">
+                  Retur
+                </button>
+                <div class="row">
+                  <div class="col-md-8"></div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div class="col"></div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<ng-template let-data> Hello, {{ data.name }} </ng-template> -->
+
+<!-- <div class="content sm-gutter">
+  <div class="row">
+    <div class="col-md-12 col-vlg-12 m-b-10">
+      <div class="row-fluid">
+        <div class="span12">
+          <div class="grid simple">
+            <div class="card">
+              <div class="card-title">
+                <div class="card-body">
+                  <h5>Informations Utilisateur</h5>
+                  <form
+                    method="post"
+                    action="add_ppci_other_user"
+                    class="add_ppci_other_user">
+                    <div class="row">
+                      <div class="col-md-5 mb-2">
+                        <input
+                          type="text"
+                          placeholder="Nom"
+                          class="form-control"
+                          name="first_name"
+                          value=""
+                          required="" />
+                      </div>
+                      <div class="col-md-5">
+                        <input
+                          type="text"
+                          placeholder="Prénoms"
+                          class="form-control"
+                          name="last_name"
+                          value=""
+                          required="" />
+                      </div>
+
+                      <div class="col-md-5">
+                        <input
+                          type="email"
+                          placeholder="Email"
+                          class="form-control"
+                          name="username"
+                          value=""
+                          required="" />
+                      </div>
+                      <div class="col-md-5">
+                        <input
+                          type="text"
+                          placeholder="Mot de passe"
+                          class="form-control"
+                          name="password"
+                          value=""
+                          required="" />
+                      </div>
+                      <input
+                        type="hidden"
+                        class="form-control"
+                        name="user_id"
+                        value="2807" />
+                      <input
+                        type="hidden"
+                        class="form-control"
+                        name="id"
+                        value="" />
+
+                      <div class="col-md-12 row" style="margin-top: 30px">
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Transactions" />
+                            Transactions
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Liste reversement" />
+                            Liste reversement
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Demande de reversement" />
+                            Demande de reversement
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Services" />
+                            Services
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Intégrations" />
+                            Intégrations
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Application android" />
+                            Application android
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Compte associé" />
+                            Compte associé
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Utilisateurs" />
+                            Utilisateurs
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Mon profile" />
+                            Mon profile
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Modifer" />
+                            Modifer
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              value="Mot de passe" />
+                            Mot de passe
+                          </label>
+                        </div>
+                      </div>
+
+                      <div class="col-md-12 text-center">
+                        <br />
+                        <div class="card-title">
+                          <button
+                            id="add_ppci_other_user"
+                            class="btn-round btn btn-primary btn-sm m-1">
+                            Enregistrer <i class="fa fa-save"></i>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div> -->
+
+<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">
+          <div class="grid simple">
+            <div class="card mb-2">
+              <div class="card-title">
+                <div class="card-body m-3">
+                  <h5 class="mb-3">Informations Utilisateur</h5>
+                  <form
+                    method="post"
+                    action="add_ppci_other_user"
+                    class="add_ppci_other_user">
+                    <div class="row">
+                      <div class="col-md-5 mb-2">
+                        <input
+                          type="text"
+                          placeholder="Nom"
+                          class="form-control"
+                          name="first_name"
+                          value=""
+                          readonly="true"
+                          required="" />
+                      </div>
+                      <div class="col-md-5">
+                        <input
+                          type="text"
+                          placeholder="Prénoms"
+                          class="form-control"
+                          name="last_name"
+                          value=""
+                          readonly="true"
+                          required="" />
+                      </div>
+
+                      <div class="col-md-5">
+                        <input
+                          type="email"
+                          placeholder="Email"
+                          class="form-control"
+                          name="username"
+                          value=""
+                          readonly="true"
+                          required="" />
+                      </div>
+                      <div class="col-md-5">
+                        <input
+                          type="text"
+                          placeholder="Mot de passe"
+                          class="form-control"
+                          name="password"
+                          value=""
+                          readonly="true"
+                          required="" />
+                      </div>
+                      <input
+                        type="hidden"
+                        class="form-control"
+                        name="user_id"
+                        value="2807" />
+                      <input
+                        type="hidden"
+                        class="form-control"
+                        name="id"
+                        value="" />
+
+                      <div class="col-md-12 row" style="margin-top: 30px">
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              name="access[]"
+                              [disabled]="true"
+                              value="Transactions" />
+                            Transactions
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              [disabled]="true"
+                              name="access[]"
+                              value="Liste reversement" />
+                            Liste reversement
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              [disabled]="true"
+                              name="access[]"
+                              value="Demande de reversement" />
+                            Demande de reversement
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              [disabled]="true"
+                              name="access[]"
+                              value="Services" />
+                            Services
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              [disabled]="true"
+                              name="access[]"
+                              value="Intégrations" />
+                            Intégrations
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              [disabled]="true"
+                              name="access[]"
+                              value="Application android" />
+                            Application android
+                          </label>
+                        </div>
+
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              [disabled]="true"
+                              name="access[]"
+                              value="Compte associé" />
+                            Compte associé
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              [disabled]="true"
+                              name="access[]"
+                              value="Utilisateurs" />
+                            Utilisateurs
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              [disabled]="true"
+                              name="access[]"
+                              value="Mon profile" />
+                            Mon profile
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              [disabled]="true"
+                              name="access[]"
+                              value="Modifer" />
+                            Modifer
+                          </label>
+                        </div>
+                        <div class="col-md-3">
+                          <label>
+                            <input
+                              type="checkbox"
+                              [disabled]="true"
+                              name="access[]"
+                              value="Mot de passe" />
+                            Mot de passe
+                          </label>
+                        </div>
+                      </div>
+
+                      <div class="col-md-12 text-center">
+                        <br />
+                        <div class="card-title">
+                          <button
+                            id="add_ppci_other_user"
+                            class="btn-round btn btn-primary btn-sm m-1">
+                            Enregistrer <i class="fa fa-save"></i>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/utilisateurs/view-user/view-user.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewUserComponent } from './view-user.component';
+
+describe('ViewUserComponent', () => {
+  let component: ViewUserComponent;
+  let fixture: ComponentFixture<ViewUserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ViewUserComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ViewUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/utilisateurs/view-user/view-user.component.ts

+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+  selector: 'bgui-view-user',
+  standalone: true,
+  imports: [
+    CommonModule,
+    CarouselComponent,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCheckboxModule,
+    RouterLink,
+    FormsModule,
+  ],
+  templateUrl: './view-user.component.html',
+  styleUrl: './view-user.component.scss',
+})
+export class ViewUserComponent {
+  name!: string;
+  lastName!: string;
+  email!: string;
+  password!: string;
+  ffPassword!: string;
+  images = [
+    {
+      imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
+      imageAlt: 'nature1',
+    },
+    {
+      imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
+      imageAlt: 'nature1',
+    },
+  ];
+
+  // email = new FormControl('', [Validators.required, Validators.email]);
+  // password = new FormControl('', [Validators.required]);
+
+  // form: any = {
+  //   email: '',
+  //   password: '',
+  // };
+
+  // getErrorMessage() {
+  //   if (this.email.hasError('required')) {
+  //     return 'Impossible de trouver votre compte Beasy';
+  //   }
+
+  //   return this.email.hasError('email') ? 'Adresse e-mail non valide' : '';
+  // }
+
+  // getErrorAuth() {
+  //   this.msgAuth = '';
+  // }
+
+  // hide = true;
+  isActive = false;
+
+  // msgAuth = '';
+
+  // private router = inject(Router);
+
+  // constructor(private router:Router) {
+  //   //...
+  // }
+
+  // ngOnInit(): void {
+  //   //...
+  // }
+
+  // onSubmit(): void {
+  //   console.log(this.form);
+  //   this.connexionlogin();
+  // }
+  // connexionlogin() {
+  //   //console.log("Nous sommes ici");
+  //   if (
+  //     this.form.email === 'mrfrancice@gmail.com' &&
+  //     this.form.password === 'p@ssw0rd'
+  //   ) {
+  //     localStorage.setItem('isLoggedIn', 'true');
+  //     localStorage.setItem('token', this.form.email);
+  //     // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
+  //     console.log("Redirection vers 'dash'");
+  //     this.router.navigate(['/admin']);
+  //     //window.location.href = '/';
+  //   } else {
+  //     this.router.navigate(['/auth']);
+  //     this.msgAuth = 'Login ou PassWord incorrect...';
+  //   }
+  // }
+
+  register() {}
+}

src/environments/environment.api.ts

 export const environment = {
   production: false,
-  apiBaseUrl: 'http://192.168.1.223:8000',
+  apiBaseUrl: 'http://192.168.1.223:8001',
   env: 'local',
 };

src/environments/environment.ts

@@ -19,6 +19,6 @@
 
 export const environment = {
   production: false,
-  apiBaseUrl: 'http://192.168.1.223:8000',
+  apiBaseUrl: 'http://192.168.1.223:8001',
   env: 'local',
 };