traitement des trafics

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

@@ -65,12 +65,10 @@
                     <button
                       mat-icon-button
                       matSuffix
-                      (click)="hide = hide"
+                      (click)="hide = !hide"
                       [attr.aria-label]="'Hide password'"
                       [attr.aria-pressed]="hide">
-                      <mat-icon>{{
-                        hide ? 'visibility_off' : 'visibility'
-                      }}</mat-icon>
+                      <mat-icon>visibility</mat-icon>
                     </button>
                   </mat-form-field>
                 </div>

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

@@ -55,6 +55,7 @@ export class LoginStandardUserComponent implements OnInit {
   username = new FormControl('', [Validators.required]);
   password = new FormControl('', [Validators.required]);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   user: any = {
     username: '',
     password: '',

src/app/app.component.ts

@@ -5,7 +5,6 @@ import { HttpClientModule } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
 
-
 @Component({
   selector: 'bgui-root',
   standalone: true,

src/app/app.config.ts

-import { ApplicationConfig, LOCALE_ID } from '@angular/core';
+import {
+  ApplicationConfig,
+  LOCALE_ID,
+  importProvidersFrom,
+} from '@angular/core';
 import { provideRouter, withViewTransitions } from '@angular/router';
 import { routes } from './app.routes';
 import { provideAnimations } from '@angular/platform-browser/animations';
@@ -11,6 +15,7 @@ export const appConfig: ApplicationConfig = {
     provideAnimations(),
     provideEnvironmentNgxMask(),
     { provide: LOCALE_ID, useValue: 'fr-FR' },
-    HttpClientModule, // Ajout de HttpClientModule ici
+    //HttpClientModule,
+    importProvidersFrom(HttpClientModule),
   ],
 };

src/app/app.routes.ts

@@ -38,6 +38,11 @@ export const routes: Routes = [
           ), //canActivate:[AuthGuard]
       },
       {
+        path: 'utilisateurs',
+        loadChildren: () =>
+          import('./utilisateurs/user.routes').then(c => c.userRoutes), //canActivate:[AuthGuard]
+      },
+      {
         path: 'reversements',
         loadChildren: () =>
           import('./reversements/reversement/reversement.routes').then(

src/app/integrations/integration/integration.routes.ts

@@ -42,7 +42,6 @@ export const integrationRoutes: Routes = [
         path: 'php',
         component: PhpComponent,
       },
-      
     ],
   },
 ];

src/app/integrations/integrations.component.html

-
 <router-outlet></router-outlet>

src/app/trafics/trafics.component.html

-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
\ No newline at end of file

src/app/trafics/trafics.component.ts

 import { Component } from '@angular/core';
-import { SuiviPaiementComponent } from "./transactions/suivi-paiement/suivi-paiement.component";
-import { SuiviTransactionComponent } from "./transactions/suivi-transaction/suivi-transaction.component";
+import { SuiviPaiementComponent } from './transactions/suivi-paiement/suivi-paiement.component';
+import { SuiviTransactionComponent } from './transactions/suivi-transaction/suivi-transaction.component';
 import { RouterOutlet } from '@angular/router';
+import { TransactionService } from '../_services/trafics/transaction/transaction.service';
+import { CommonModule } from '@angular/common';
+import { OperateurService } from '../_services/trafics/operateur/operateur.service';
 
 @Component({
-    selector: 'bgui-trafics',
-    standalone: true,
-    templateUrl: './trafics.component.html',
-    styleUrl: './trafics.component.scss',
-    imports: [SuiviPaiementComponent, SuiviTransactionComponent,RouterOutlet]
+  selector: 'bgui-trafics',
+  standalone: true,
+  templateUrl: './trafics.component.html',
+  styleUrl: './trafics.component.scss',
+  imports: [
+    SuiviPaiementComponent,
+    SuiviTransactionComponent,
+    RouterOutlet,
+    CommonModule,
+  ],
+  providers: [TransactionService, OperateurService],
 })
-export class TraficsComponent {
-
-}
+export class TraficsComponent {}

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

@@ -3,10 +3,12 @@
   <h3>Paiemnts</h3>
 </div>
 <div class="row" style="margin-top: 40px">
-  <div class="col-md-2">
-    <label for="moyensPaiement">Moyens de paiement</label>
+  <!-- <div class="col-md-2">
+    <label for="moyensPaiement">Opérateurs</label>
     <select class="form-control filtre" style="width: 100%">
-      <option value="">Tout</option>
+      <option *ngFor="let operateur of operateurs" [value]="operateurs.value">
+        {{ operateur.viewValue }}
+      </option>
       <option value="*OMCIV2*">ORANGE CI</option>
       <option value="*MOMOCI*">MTN CI</option>
       <option value="*FLOOZ*">MOOV CI</option>
@@ -21,6 +23,18 @@
       <option value="*PAYPAL*">PAYPAL</option>
       <option value="*OMGN*">ORANGE GUINEE BISSAU</option>
     </select>
+  </div> -->
+  <div class="col-md-2">
+    <label for="operateurs">Opérateurs</label>
+    <select
+      class="form-control filtre"
+      id="operateurs"
+      style="width: 100%"
+      [(ngModel)]="selectedOperateur">
+      <option *ngFor="let operateur of operateurs" [value]="operateur.code">
+        {{ operateur.code }}
+      </option>
+    </select>
   </div>
   <div class="col-md-2">
     <label for="services">Services</label>

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

@@ -3,14 +3,11 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { CommonModule } from '@angular/common';
-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 { MatIconModule } from '@angular/material/icon';
+import { FormsModule } from '@angular/forms';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { RouterLink } from '@angular/router';
-import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
 
 export interface PElement {
   nfacture: number;
@@ -155,23 +152,9 @@ const ELEMENT_DATA: PElement[] = [
     MatFormFieldModule,
     MatInputModule,
     MatTableModule,
-    CommonModule,
-    MatPaginator,
-    MatTableModule,
-    MatFormFieldModule,
-    MatInputModule,
-    CarouselComponent,
-    MatFormFieldModule,
-    MatCardModule,
-    MatCardTitle,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatInputModule,
-    MatButtonModule,
-    MatIconModule,
-    MatCheckboxModule,
-    MatTableModule,
     MatPaginatorModule,
+    CommonModule,
+    HttpClientModule,
     RouterLink,
     FormsModule,
   ],
@@ -179,6 +162,11 @@ const ELEMENT_DATA: PElement[] = [
   styleUrl: './suivi-paiement.component.scss',
 })
 export class SuiviPaiementComponent {
+  private url = 'http://192.168.1.223:8000/operateur/';
+
+  operateurs: IOperateur[] = [];
+  selectedOperateur: string = '';
+
   displayedColumns: string[] = [
     'nfacture',
     'nom',
@@ -194,7 +182,35 @@ export class SuiviPaiementComponent {
   dataSource = new MatTableDataSource(ELEMENT_DATA);
 
   @ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  constructor(private httpClient: HttpClient) {}
+
+  ngOnInit(): void {
+    this.fetchOperateurs();
+  }
 
+  fetchOperateurs(): void {
+    this.httpClient.get<IOperateur>(this.url).subscribe(
+      (data: IOperateur) => {
+        this.operateurs.push(data);
+
+        console.log('operateur==>', this.operateurs);
+      },
+      error => {
+        console.error(
+          "Une erreur s'est produite lors de la récupération des opérateurs :",
+          error
+        );
+      }
+    );
+  }
+
+  onOperateurChange(event: Event): void {
+    const selectElement = event.target as HTMLSelectElement;
+    this.selectedOperateur = selectElement.value;
+    console.log('Selected opérateur ===>', this.selectedOperateur);
+  }
   ngAfterViewInit() {
     if (this.paginator) {
       this.dataSource.paginator = this.paginator;

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

@@ -4,22 +4,15 @@
 </div>
 <div class="row" style="margin-top: 40px">
   <div class="col-md-2">
-    <label for="moyensPaiement">Moyens de paiement</label>
-    <select class="form-control filtre" style="width: 100%">
-      <option value="">Tout</option>
-      <option value="*OMCIV2*">ORANGE CI</option>
-      <option value="*MOMOCI*">MTN CI</option>
-      <option value="*FLOOZ*">MOOV CI</option>
-      <option value="*OMBF*">ORANGE BF</option>
-      <option value="*OMML*">ORANGE MALI</option>
-      <option value="*MOMOBJ*">MTN BENIN</option>
-      <option value="*CARD*">VISA / MASTERCARD</option>
-      <option value="*FLOOZBJ*">MOOV BENIN</option>
-      <option value="*AIRTELNG*">AITEL NIGER</option>
-      <option value="*WAVECI*">WAVE CI</option>
-      <option value="*OMSN*">ORANGE SENEGAL</option>
-      <option value="*PAYPAL*">PAYPAL</option>
-      <option value="*OMGN*">ORANGE GUINEE BISSAU</option>
+    <label for="operateurs">Opérateurs</label>
+    <select
+      class="form-control filtre"
+      id="operateurs"
+      [(ngModel)]="selectedOperateur"
+      style="width: 100%">
+      <option *ngFor="let operateur of operateurs" [value]="operateur.code">
+        {{ operateur.code }}
+      </option>
     </select>
   </div>
   <div class="col-md-2">
@@ -65,67 +58,87 @@
       #input />
   </mat-form-field>
 
-  <mat-table #table [dataSource]="dataSource">
-    <ng-container matColumnDef="nfacture">
-      <mat-header-cell *matHeaderCellDef> N°Facture </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.nfacture }} </mat-cell>
+  <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="nom">
-      <mat-header-cell *matHeaderCellDef> Nom </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.nom }} </mat-cell>
+    <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>
 
-    <!-- Weight Column -->
-    <ng-container matColumnDef="prenom">
-      <mat-header-cell *matHeaderCellDef> Prenoms </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.prenom }} </mat-cell>
+    <!-- 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>
 
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="contact">
-      <mat-header-cell *matHeaderCellDef> Contact </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.contact }} </mat-cell>
+    <!-- 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>
 
-    <!-- Symbol Column -->
     <ng-container matColumnDef="service">
       <mat-header-cell *matHeaderCellDef> Service </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.service }} </mat-cell>
-    </ng-container>
-
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="email">
-      <mat-header-cell *matHeaderCellDef> E-mail </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.email }} </mat-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 element"> {{ element.montant }} </mat-cell>
+      <mat-cell *matCellDef="let transaction">
+        {{ transaction.montant }}
+      </mat-cell>
     </ng-container>
 
     <!-- Symbol Column -->
-    <ng-container matColumnDef="modePaiement">
-      <mat-header-cell *matHeaderCellDef> Mode Paiement </mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        {{ element.modePaiement }}
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
+      <mat-cell *matCellDef="let transaction">
+        {{ transaction.date }}
       </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 element"> {{ element.status }} </mat-cell>
+      <mat-cell *matCellDef="let transaction">
+        {{ transaction.status }}
+      </mat-cell>
     </ng-container>
 
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="dateTransaction">
-      <mat-header-cell *matHeaderCellDef> Date Transaction </mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        {{ element.dateTransaction }}
+    <ng-container matColumnDef="reference">
+      <mat-header-cell *matHeaderCellDef> Réference </mat-header-cell>
+      <mat-cell *matCellDef="let transaction">
+        {{ transaction.reference }}
       </mat-cell>
     </ng-container>
 
@@ -140,3 +153,12 @@
     [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

@@ -3,142 +3,13 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-
-export interface PElement {
-  nfacture: number;
-  nom: string;
-  prenom: string;
-  contact: string;
-  service: string;
-  email: string;
-  montant: number;
-  modePaiement: string;
-  status: string;
-  dateTransaction: string;
-}
-
-const ELEMENT_DATA: PElement[] = [
-  {
-    nfacture: 1,
-    nom: 'zaho',
-    prenom: 'zadi',
-    contact: '0101010101',
-    service: 'mtn',
-    email: 'mrtest@mail.com',
-    montant: 25000,
-    modePaiement: 'wave',
-    status: 'valide',
-    dateTransaction: '10-04-2024',
-  },
-  {
-    nfacture: 2,
-    nom: 'kablan',
-    prenom: 'fatou',
-    contact: '0101010101',
-    service: 'mtn',
-    email: 'mrtet@mail.com',
-    montant: 25000,
-    modePaiement: 'wave',
-    status: 'valide',
-    dateTransaction: '16-03-2024',
-  },
-  {
-    nfacture: 3,
-    nom: 'toure',
-    prenom: 'koffi',
-    contact: '0101010101',
-    service: 'mtn',
-    email: 'mrtest@mail.com',
-    montant: 25000,
-    modePaiement: 'wave',
-    status: 'invalide',
-    dateTransaction: '04-04-2024',
-  },
-  {
-    nfacture: 4,
-    nom: 'belem',
-    prenom: 'asaph',
-    contact: '0101010101',
-    service: 'mtn',
-    email: 'test@mail.com',
-    montant: 27000,
-    modePaiement: 'wave',
-    status: 'valide',
-    dateTransaction: '16-02-2024',
-  },
-  {
-    nfacture: 5,
-    nom: 'tanoh',
-    prenom: 'delmas',
-    contact: '0101010101',
-    service: 'mtn',
-    email: 'rtest@mail.com',
-    montant: 50000,
-    modePaiement: 'wave',
-    status: 'invalide',
-    dateTransaction: '16-04-2024',
-  },
-  {
-    nfacture: 6,
-    nom: 'gaba',
-    prenom: 'akemane',
-    contact: '0101010101',
-    service: 'mtn',
-    email: 'mtst@mail.com',
-    montant: 25000,
-    modePaiement: 'wave',
-    status: 'valide',
-    dateTransaction: '16-01-2024',
-  },
-  {
-    nfacture: 7,
-    nom: 'kra',
-    prenom: 'zoulou',
-    contact: '0101010101',
-    service: 'mtn',
-    email: 'mest@mail.com',
-    montant: 25000,
-    modePaiement: 'wave',
-    status: 'valide',
-    dateTransaction: '26-03-2024',
-  },
-  {
-    nfacture: 8,
-    nom: 'kakou',
-    prenom: 'kasa',
-    contact: '0101010101',
-    service: 'mtn',
-    email: 'mrtst@mail.com',
-    montant: 80000,
-    modePaiement: 'wave',
-    status: 'invalide',
-    dateTransaction: '10-04-2024',
-  },
-  {
-    nfacture: 9,
-    nom: 'nguessan',
-    prenom: 'daouda',
-    contact: '0101010101',
-    service: 'mtn',
-    email: 'mrte@mail.com',
-    montant: 25000,
-    modePaiement: 'wave',
-    status: 'valide',
-    dateTransaction: '16-04-2024',
-  },
-  {
-    nfacture: 10,
-    nom: 'Neon',
-    prenom: 'kanon',
-    contact: '0101010101',
-    service: 'mtn',
-    email: 'mrtest@mail.com',
-    montant: 27000,
-    modePaiement: 'wave',
-    status: 'valide',
-    dateTransaction: '16-04-2024',
-  },
-];
+import { CommonModule } from '@angular/common';
+import { TransactionService } from 'src/app/_services/trafics/transaction/transaction.service';
+import { ITransaction } from 'src/app/_interfaces/trafics/transaction/transaction';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { RouterLink } from '@angular/router';
+import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'bgui-suivi-transaction',
@@ -148,24 +19,74 @@ const ELEMENT_DATA: PElement[] = [
     MatInputModule,
     MatTableModule,
     MatPaginatorModule,
+    CommonModule,
+    HttpClientModule,
+    RouterLink,
+    FormsModule,
   ],
   templateUrl: './suivi-transaction.component.html',
   styleUrl: './suivi-transaction.component.scss',
 })
 export class SuiviTransactionComponent {
+  //private HtUrl = 'http://192.168.1.223:8000/transaction-history/';
+
+  private url = 'http://192.168.1.223:8000/operateur/';
+
+  transactions: ITransaction[] = [];
+  operateurs: IOperateur[] = [];
+  selectedOperateur: string = '';
+
+  constructor(
+    private httpClient: HttpClient,
+    public transactionService: TransactionService
+  ) {}
+
+  ngOnInit(): void {
+    this.transactionService.getAll().subscribe((data: ITransaction[]) => {
+      this.transactions = data;
+      console.log('transactions===>', this.transactions);
+
+      this.fetchOperateurs();
+    });
+  }
+
+  fetchOperateurs(): void {
+    this.httpClient.get<IOperateur>(this.url).subscribe(
+      (data: IOperateur) => {
+        this.operateurs.push(data);
+
+        console.log('operateur==>', this.operateurs);
+      },
+      error => {
+        console.error(
+          "Une erreur s'est produite lors de la récupération des opérateurs :",
+          error
+        );
+      }
+    );
+  }
+
+  onOperateurChange(event: Event): void {
+    const selectElement = event.target as HTMLSelectElement;
+    this.selectedOperateur = selectElement.value;
+    console.log('Selected opérateur ===>', this.selectedOperateur);
+  }
+
   displayedColumns: string[] = [
-    'nfacture',
-    'nom',
-    'prenom',
-    'contact',
+    'transaction_id',
+    'type_paiement',
+    'type_paiement_label',
+    'marchand',
     'service',
-    'email',
     'montant',
-    'modePaiement',
+    'date',
+    'commentaire',
+    'etat',
     'status',
-    'dateTransaction',
+    'reference',
   ];
-  dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+  dataSource = new MatTableDataSource(this.transactions);
 
   @ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
 
@@ -180,6 +101,3 @@ export class SuiviTransactionComponent {
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
 }
-// function ViewChild(MatPaginator: any): (target: SuiviTransactionComponent, propertyKey: "paginator") => void {
-//   throw new Error('Function not implemented.');
-// }

src/app/trafics/transactions/transaction.routes.ts

@@ -3,13 +3,12 @@ import { TraficsComponent } from '../trafics.component';
 import { SuiviPaiementComponent } from './suivi-paiement/suivi-paiement.component';
 import { SuiviTransactionComponent } from './suivi-transaction/suivi-transaction.component';
 
-
 export const transactionsRoutes: Routes = [
   {
     path: '',
     component: TraficsComponent,
     children: [
-     { path: '', redirectTo: 'suivi-paiement', pathMatch: 'full' },
+      { path: '', redirectTo: 'suivi-paiement', pathMatch: 'full' },
       {
         path: 'suivi-paiement',
         component: SuiviPaiementComponent,

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

 <div>
-    <h3>Create Users</h3>
-  <bgui-utilisateurs />
+  <h3>Create Users</h3>
 </div>

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

 import { Component } from '@angular/core';
-import { UtilisateursComponent } from 'src/app/utilisateurs/utilisateurs.component';
 
 @Component({
   selector: 'bgui-create-users',
   standalone: true,
-  imports: [UtilisateursComponent],
+  imports: [],
   templateUrl: './create-users.component.html',
   styleUrl: './create-users.component.scss',
 })

src/app/utilisateurs/utilisateurs.component.html

@@ -42,15 +42,16 @@
     <ng-container matColumnDef="actions">
       <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
       <mat-cell *matCellDef="let user" style="text-align: right">
-        <button mat-icon [matMenuTriggerFor]="menu">
-          <mat-icon>info</mat-icon>
+        <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
+        >
+        <button
+          type="button"
+          class="btn btn-danger"
+          [routerLink]="['delete-user/id']">
+          Supprimer
         </button>
-        <mat-menu #menu="matMenu">
-          <button mat-menu-item [routerLink]="['/utilisateur', user.id]">
-            Modifier
-          </button>
-          <button mat-menu-item (click)="deleteUser()">Supprimer</button>
-        </mat-menu>
       </mat-cell>
     </ng-container>
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
@@ -64,3 +65,29 @@
     [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

@@ -13,6 +13,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
 import { CarouselComponent } from '../shared/carousel/carousel.component';
 import { MatMenuModule } from '@angular/material/menu';
+import { HttpClient } from '@angular/common/http';
 
 export interface IUsers {
   id: number;
@@ -96,7 +97,22 @@ const ELEMENT_DATA: IUsers[] = [
   styleUrl: './utilisateurs.component.scss',
 })
 export class UtilisateursComponent {
+  constructor(private http: HttpClient) {}
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dataTypePaiements: any[] = [];
+
+  ngOnInit(): void {
+    this.http
+      .get('http://192.168.1.223:8000/operateur/')
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .subscribe((results: any) => {
+        console.log('results==>', results);
+        this.dataTypePaiements = results.results;
+
+        console.log('dataTypePaiements===>', this.dataTypePaiements);
+      });
+  }
   editUser() {
     throw new Error('Method not implemented.');
   }

src/index.html

@@ -23,7 +23,9 @@
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
   </head>
   <body class="nk-body bgui-bg-body ui-rounder npc-default">
-    <script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>
+    <script
+      src="https://kit.fontawesome.com/a4c00a89bc.js"
+      crossorigin="anonymous"></script>
     <bgui-root></bgui-root>
   </body>
 </html>