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) : '';
+
+  onSubmit(): void {
+    console.log(this.form);
+    this.connexionlogin();
   }
-    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);
+  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', token);
-          localStorage.setItem('username', this.user.username);
-          // Remplacez 'dash' par l'URL de la page à laquelle vous souhaitez rediriger
+      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.error('Erreur lors de la vérification du token');
-        }
-      });
-    } 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.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.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.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',
 };