refactor: rename components and update dialog implementations; add confirm dialog for deletion actions

2025-11-04 18:13:37 +01:00
parent 2fe52830d8
commit 3bc2a27d76
57 changed files with 396 additions and 1109 deletions
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,2 +1,2 @@
-<app-navbar></app-navbar>
+<app-main-navbar></app-main-navbar>
 <router-outlet></router-outlet>
--- a/client/src/app/app.component.spec.ts
+++ b/client/src/app/app.component.spec.ts
@@ -1,29 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have the 'client' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('client');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, client');
-  });
-});
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import {NavbarComponent} from './components/navbar/navbar.component';
+import {MainNavbarComponent} from './components/navbar/main-navbar/main-navbar.component';

@Component({
  selector: 'app-root',
  standalone: true,
-  imports: [RouterOutlet, NavbarComponent],
+  imports: [RouterOutlet, MainNavbarComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
 })
--- a/client/src/app/app.routes.ts
+++ b/client/src/app/app.routes.ts
@@ -7,7 +7,6 @@ import {guestOnlyCanActivate, guestOnlyCanMatch} from './guards/guest-only.guard
 import {authOnlyCanActivate, authOnlyCanMatch} from './guards/auth-only.guard';
 import {AdminComponent} from './pages/admin/admin.component';
 import {adminOnlyCanActivate, adminOnlyCanMatch} from './guards/admin-only.guard';
-import {AddProductComponent} from './pages/add-product/add-product.component';
 import {ProductsComponent} from './pages/products/products.component';

 export const routes: Routes = [
@@ -53,13 +52,7 @@ export const routes: Routes = [
    path: 'products',
    component: ProductsComponent,
    canMatch: [authOnlyCanMatch],
-    canActivate: [authOnlyCanActivate]
-  },
-  {
-    path : 'add-product',
-    component: AddProductComponent,
-    canMatch: [authOnlyCanMatch],
-    canActivate: [authOnlyCanActivate]
+    canActivate: [authOnlyCanActivate],
  },
  {
    path: '**',
--- a/client/src/app/components/brand-list/brand-list.component.html
+++ b/client/src/app/components/brand-list/brand-list.component.html
@@ -1,6 +0,0 @@
-<app-generic-list
-  [service]="brandService"
-  [fields]="fields"
-  title="Marques"
-  idKey="id">
-</app-generic-list>
--- a/client/src/app/components/category-list/category-list.component.html
+++ b/client/src/app/components/category-list/category-list.component.html
@@ -1,6 +0,0 @@
-<app-generic-list
-  [service]="categoryService"
-  [fields]="fields"
-  title="Catégories"
-  idKey="id">
-</app-generic-list>
--- a/client/src/app/components/dialog/confirm-dialog/confirm-dialog.component.css
+++ b/client/src/app/components/dialog/confirm-dialog/confirm-dialog.component.css
--- a/client/src/app/components/dialog/confirm-dialog/confirm-dialog.component.html
+++ b/client/src/app/components/dialog/confirm-dialog/confirm-dialog.component.html
@@ -0,0 +1,8 @@
+<h2 mat-dialog-title>{{ data.title ?? 'Confirmation' }}</h2>
+<mat-dialog-content>
+  <p>{{ data.message ?? 'Êtes-vous sûr·e ?' }}</p>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button type="button" (click)="close(false)">Annuler</button>
+  <button mat-flat-button color="warn" type="button" (click)="close(true)">Supprimer</button>
+</mat-dialog-actions>
--- a/client/src/app/components/dialog/confirm-dialog/confirm-dialog.component.ts
+++ b/client/src/app/components/dialog/confirm-dialog/confirm-dialog.component.ts
@@ -0,0 +1,21 @@
+import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-confirm-dialog',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, MatButtonModule],
+  templateUrl: './confirm-dialog.component.html',
+})
+export class ConfirmDialogComponent {
+  constructor(
+    private readonly dialogRef: MatDialogRef<ConfirmDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { title?: string; message?: string }
+  ) {}
+
+  close(result: boolean) {
+    this.dialogRef.close(result);
+  }
+}
--- a/client/src/app/components/dialog/generic-dialog/generic-dialog.component.css
+++ b/client/src/app/components/dialog/generic-dialog/generic-dialog.component.css
--- a/client/src/app/components/dialog/generic-dialog/generic-dialog.component.html
+++ b/client/src/app/components/dialog/generic-dialog/generic-dialog.component.html
@@ -13,7 +13,7 @@
          <mat-label>{{ f.label }}</mat-label>

          <mat-select [formControlName]="f.key">
-            @let opts = (f.options$ | async) ?? f.options ?? [];
+            @let opts = (f.options ?? (f.options$ | async) ?? []);

            @for (opt of opts; track $index) {
              <mat-option [value]="f.valueKey ? opt?.[f.valueKey] : opt">
--- a/client/src/app/components/dialog/generic-dialog/generic-dialog.component.ts
+++ b/client/src/app/components/dialog/generic-dialog/generic-dialog.component.ts
@@ -36,12 +36,12 @@ type Field = {
 })
 export class GenericDialogComponent implements OnInit {
  form!: FormGroup;
-  fields: Field[] = [];
+  fields?: Field[];

  constructor(
    private readonly fb: FormBuilder,
    private readonly dialogRef: MatDialogRef<GenericDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { item?: any; fields?: Field[]; title?: string }
+    @Inject(MAT_DIALOG_DATA) public data?: { item?: any; fields?: Field[]; title?: string }
  ) {
  }

--- a/client/src/app/components/list/brand-list/brand-list.component.css
+++ b/client/src/app/components/list/brand-list/brand-list.component.css
--- a/client/src/app/components/list/brand-list/brand-list.component.html
+++ b/client/src/app/components/list/brand-list/brand-list.component.html
@@ -0,0 +1,9 @@
+<app-generic-list
+  [service]="brandService"
+  [fields]="fields"
+  title="Gestion des marques"
+  addTitle="Ajouter une marque"
+  editTitle="Modifier la marque"
+  deleteTitle="Supprimer la marque"
+  idKey="id">
+</app-generic-list>
--- a/client/src/app/components/list/brand-list/brand-list.component.ts
+++ b/client/src/app/components/list/brand-list/brand-list.component.ts
@@ -1,7 +1,7 @@
 import {
  Component, inject
 } from '@angular/core';
-import {BrandService} from '../../services/app/brand.service';
+import {BrandService} from '../../../services/app/brand.service';
 import {GenericListComponent} from '../generic-list/generic-list.component';

@Component({
--- a/client/src/app/components/list/category-list/category-list.component.html
+++ b/client/src/app/components/list/category-list/category-list.component.html
@@ -0,0 +1,9 @@
+<app-generic-list
+  [service]="categoryService"
+  [fields]="fields"
+  title="Gestin des catégories"
+  addTitle="Ajouter une catégorie"
+  editTitle="Modifier la catégorie"
+  deleteTitle="Supprimer la catégorie"
+  idKey="id">
+</app-generic-list>
--- a/client/src/app/components/list/category-list/category-list.component.ts
+++ b/client/src/app/components/list/category-list/category-list.component.ts
@@ -2,7 +2,7 @@ import {
  Component, inject
 } from '@angular/core';
 import {GenericListComponent} from '../generic-list/generic-list.component';
-import {CategoryService} from '../../services/app/category.service';
+import {CategoryService} from '../../../services/app/category.service';

@Component({
  selector: 'app-category-list',
--- a/client/src/app/components/list/category-list/category.component.css
+++ b/client/src/app/components/list/category-list/category.component.css
--- a/client/src/app/components/list/generic-list/generic-list.component.css
+++ b/client/src/app/components/list/generic-list/generic-list.component.css
@@ -30,8 +30,7 @@
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  background: var(--gl-surface, #fff);
-  box-shadow:
-    0 1px 2px rgba(0,0,0,.04),
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .04),
  0 2px 8px rgba(0, 0, 0, .06);
 }

@@ -80,8 +79,13 @@
 }

 /* Zebra + hover */
-.gl-table tr.mat-mdc-row:nth-child(odd) td[mat-cell] { background: rgba(0,0,0,.015); }
-.gl-table tr.mat-mdc-row:hover td[mat-cell] { background: rgba(0,0,0,.035); }
+.gl-table tr.mat-mdc-row:nth-child(odd) td[mat-cell] {
+  background: rgba(0, 0, 0, .015);
+}
+
+.gl-table tr.mat-mdc-row:hover td[mat-cell] {
+  background: rgba(0, 0, 0, .035);
+}

 /* Actions */
 .actions-cell {
@@ -90,12 +94,17 @@
  justify-content: center;
  gap: .4rem;
 }
-.actions-cell .mat-mdc-icon-button { width: 40px; height: 40px; }
+
+.actions-cell .mat-mdc-icon-button {
+  width: 40px;
+  height: 40px;
+}

 /* ===== Pagination ===== */
 .gl-paginator-wrap {
  padding: .25rem .5rem;
 }
+
 .gl-paginator {
  margin-top: .25rem;
  padding-top: .5rem;
@@ -106,12 +115,29 @@

 /* ===== Responsive ===== */
@media (max-width: 799px) {
-  .generic-list { padding: 0.75rem 1rem; }
-  .gl-header { flex-direction: column; align-items: stretch; gap: 0.75rem; }
-  .gl-table { min-width: 0; }
+  .generic-list {
+    padding: 0.75rem 1rem;
+  }
+
+  .gl-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .gl-table {
+    min-width: 0;
+  }
+
  .gl-table th[mat-header-cell],
-  .gl-table td[mat-cell] { white-space: normal; padding: 10px 12px; }
-  .actions-cell { justify-content: flex-start; }
+  .gl-table td[mat-cell] {
+    white-space: normal;
+    padding: 10px 12px;
+  }
+
+  .actions-cell {
+    justify-content: flex-start;
+  }
 }

 /* ===== Dark mode ===== */
@@ -119,13 +145,27 @@
  .gl-block {
    background: #1b1b1b;
    border-color: rgba(255, 255, 255, .08);
-    box-shadow:
-      0 1px 2px rgba(0,0,0,.6),
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .6),
    0 2px 8px rgba(0, 0, 0, .45);
  }
-  .gl-header { border-bottom-color: rgba(255,255,255,.08); }
-  .gl-table th[mat-header-cell] { box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }
-  .gl-table tr.mat-mdc-row:nth-child(odd) td[mat-cell] { background: rgba(255,255,255,.025); }
-  .gl-table tr.mat-mdc-row:hover td[mat-cell] { background: rgba(255,255,255,.06); }
-  .gl-paginator { border-top-color: rgba(255,255,255,.08); }
+
+  .gl-header {
+    border-bottom-color: rgba(255, 255, 255, .08);
+  }
+
+  .gl-table th[mat-header-cell] {
+    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
+  }
+
+  .gl-table tr.mat-mdc-row:nth-child(odd) td[mat-cell] {
+    background: rgba(255, 255, 255, .025);
+  }
+
+  .gl-table tr.mat-mdc-row:hover td[mat-cell] {
+    background: rgba(255, 255, 255, .06);
+  }
+
+  .gl-paginator {
+    border-top-color: rgba(255, 255, 255, .08);
+  }
 }
--- a/client/src/app/components/list/generic-list/generic-list.component.html
+++ b/client/src/app/components/list/generic-list/generic-list.component.html
@@ -4,17 +4,16 @@

    <div class="gl-controls">
      <button mat-flat-button color="primary" type="button" (click)="openDialog(null)">
-        Ajouter
+        {{ addTitle ?? 'Ajouter' }}
      </button>
    </div>
  </div>

  <div class="gl-filter-bar gl-block">
    <mat-form-field class="gl-filter" appearance="outline">
-      <mat-label>Filtrer</mat-label>
+      <mat-label>Rechercher</mat-label>
      <input
        matInput
-        placeholder="Tapez pour filtrer…"
        (input)="applyFilter($any($event.target).value)"
        aria-label="Filtrer le tableau"
      />
@@ -57,6 +56,7 @@
            aria-label="Modifier"
          >
            <mat-icon>edit</mat-icon>
+
          </button>
          <button
            mat-icon-button
--- a/client/src/app/components/list/generic-list/generic-list.component.ts
+++ b/client/src/app/components/list/generic-list/generic-list.component.ts
@@ -5,10 +5,12 @@ import {MatSort, MatSortModule} from '@angular/material/sort';
 import {MatDialog, MatDialogModule} from '@angular/material/dialog';
 import {MatButtonModule} from '@angular/material/button';
 import {CommonModule} from '@angular/common';
-import {CrudService} from '../../services/crud.service';
-import {GenericDialogComponent} from '../generic-dialog/generic-dialog.component';
+import {CrudService} from '../../../services/crud.service';
+import {GenericDialogComponent} from '../../dialog/generic-dialog/generic-dialog.component';
 import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
 import {MatIcon} from '@angular/material/icon';
+import {ConfirmDialogComponent} from '../../dialog/confirm-dialog/confirm-dialog.component';
+import {MatChip} from '@angular/material/chips';

 type Field = {
  key: string;
@@ -16,7 +18,6 @@ type Field = {
  sortable?: boolean;
  displayKey?: string;
  displayFn?: (value: any, element?: any) => string;
-  // nouveau : clé de tri (peut être chemin 'brand.name') ou fonction personnalisée
  sortKey?: string | ((item: any) => any);
  sortFn?: (a: any, b: any) => number;
 };
@@ -24,14 +25,17 @@ type Field = {
@Component({
  selector: 'app-generic-list',
  standalone: true,
-  imports: [CommonModule, MatTableModule, MatPaginatorModule, MatSortModule, MatDialogModule, MatButtonModule, MatInput, MatLabel, MatFormField, MatIcon],
+  imports: [CommonModule, MatTableModule, MatPaginatorModule, MatSortModule, MatDialogModule, MatButtonModule, MatInput, MatLabel, MatFormField, MatIcon, MatChip],
  templateUrl: './generic-list.component.html',
  styleUrl: './generic-list.component.css'
 })
 export class GenericListComponent<T> implements OnInit, AfterViewInit {
  @Input() service!: CrudService<T>;
-  @Input() fields: Field[] = [];
+  @Input() fields?: Field[];
  @Input() title = '';
+  @Input() addTitle?: string;
+  @Input() editTitle?: string;
+  @Input() deleteTitle?: string;
  @Input() idKey = 'id';
  @Input() dialogComponent: any = GenericDialogComponent;
  @Output() add = new EventEmitter<T>();
@@ -48,32 +52,30 @@ export class GenericListComponent<T> implements OnInit, AfterViewInit {
  }

  ngOnInit() {
+    this.fields = this.fields ?? [];
    this.displayedColumns = this.fields.map(f => f.key).concat(['actions']);
    this.load();
  }

  ngAfterViewInit() {
-    // configure le sortingDataAccessor avant d'attacher le sort
+
    this.dataSource.sortingDataAccessor = (data: any, sortHeaderId: string) => {
-      // trouver le Field correspondant (ou utiliser la clé brute)
-      const field = this.fields.find(f => f.key === sortHeaderId);
+      const field = this.fields!.find(f => f.key === sortHeaderId);
      if (!field) {
-        const raw = data?.[sortHeaderId];
+        const raw = getByPath(data, sortHeaderId) ?? data?.[sortHeaderId];
        return raw == null ? '' : String(raw);
      }

-      // priorité : sortFn sur le field (géré par sort comparator plus bas)
      if (field.sortKey) {
        if (typeof field.sortKey === 'function') {
          const v = field.sortKey(data);
          return v == null ? '' : String(v);
        }
-        const v = getByPath(data, field.sortKey);
+        const v = getByPath(data, field.sortKey as string);
        return v == null ? '' : String(v);
      }

-      // fallback : valeur simple ou displayKey si object
-      const val = data?.[field.key];
+      const val = getByPath(data, field.key);
      if (val == null) return '';
      if (typeof val === 'object') {
        if (field.displayKey && val[field.displayKey] != null) return String(val[field.displayKey]);
@@ -90,14 +92,13 @@ export class GenericListComponent<T> implements OnInit, AfterViewInit {
      return String(val);
    };

-    // attacher le MatSort
    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;

-    // si un Field a sortFn définie, adapter le comparator global pour l'utiliser
    const originalSortData = this.dataSource.sortData;
    this.dataSource.sortData = (data: T[], sort: MatSort) => {
      if (!sort || !sort.active || sort.direction === '') return originalSortData.call(this.dataSource, data, sort);
-      const field = this.fields.find(f => f.key === sort.active);
+      const field = this.fields!.find(f => f.key === sort.active);
      if (field?.sortFn) {
        const dir = sort.direction === 'asc' ? 1 : -1;
        return [...data].sort((a, b) => dir * field.sortFn!(a, b));
@@ -106,12 +107,11 @@ export class GenericListComponent<T> implements OnInit, AfterViewInit {
    };
  }

-  // DEBUG + normalisation de l'id pour éviter 'undefined' lors de update
  load() {
    this.service.getAll().subscribe(items => {
      console.debug('Loaded items from service:', items);
      this.dataSource.data = (items as any[]).map(item => {
-        const normalizedId = item?.[this.idKey] ?? item?.id ?? item?._id ?? item?.platformId ?? null;
+        const normalizedId = getByPath(item, this.idKey) ?? item?.[this.idKey] ?? item?.id ?? item?._id ?? item?.platformId ?? null;
        return {...item, [this.idKey]: normalizedId};
      }) as T[];
    });
@@ -122,14 +122,18 @@ export class GenericListComponent<T> implements OnInit, AfterViewInit {
  }

  openDialog(item: any | null) {
-    const originalId = item ? (item[this.idKey] ?? item?.id ?? item?._id) : null;
+    const originalId = item ? (getByPath(item, this.idKey) ?? item?.[this.idKey] ?? item?.id ?? item?._id) : null;
+
+    const dialogTitle = item
+      ? (this.editTitle ?? 'Modifier')
+      : (this.addTitle ?? 'Ajouter');

    const dialogRef = this.dialog.open(this.dialogComponent, {
      width: '420px',
      data: {
        item: item ? {...item} : {},
        fields: this.fields,
-        title: item ? 'Modifier' : 'Ajouter',
+        title: dialogTitle,
        originalId
      }
    });
@@ -138,7 +142,7 @@ export class GenericListComponent<T> implements OnInit, AfterViewInit {
      if (!result) return;

      if (item) {
-        const idToUpdate = originalId ?? result?.[this.idKey] ?? result?.id ?? result?._id;
+        const idToUpdate = originalId ?? getByPath(result, this.idKey) ?? result?.[this.idKey] ?? result?.id ?? result?._id;
        if (idToUpdate == null) {
          console.error('Cannot update: id is null/undefined for item', {item, result});
          return;
@@ -157,19 +161,31 @@ export class GenericListComponent<T> implements OnInit, AfterViewInit {
  }

  remove(item: any) {
-    const id = item[this.idKey] ?? item?.id ?? item?._id;
+    const id = getByPath(item, this.idKey) ?? item[this.idKey] ?? item?.id ?? item?._id;
    if (id == null) {
      console.error('Cannot delete: id is null/undefined for item', item);
      return;
    }
+
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '380px',
+      data: {
+        title: this.deleteTitle ?? 'Confirmer la suppression',
+        message: 'Voulez-vous vraiment supprimer cet élément ? Cette action est irréversible.'
+      }
+    });
+
+    dialogRef.afterClosed().subscribe((confirmed: boolean) => {
+      if (!confirmed) return;
      this.service.delete(id).subscribe(() => {
        this.delete.emit(item);
        this.load();
      });
+    });
  }

  displayValue(element: any, field: Field): string {
-    const val = element?.[field.key];
+    const val = getByPath(element, field.key);
    if (field.displayFn) {
      try {
        return String(field.displayFn(val, element) ?? '');
@@ -193,15 +209,11 @@ export class GenericListComponent<T> implements OnInit, AfterViewInit {
    return String(val);
  }

-  trackByField(_index: number, field: Field) {
-    return field?.key ?? _index;
-  }
-
  protected readonly HTMLInputElement = HTMLInputElement;
 }

-/** Helpers */
-function getByPath(obj: any, path: string): any {
+function getByPath(obj: any, path: string | undefined): any {
  if (!obj || !path) return undefined;
+  if (typeof path !== 'string') return undefined;
  return path.split('.').reduce((acc, key) => (acc == null ? undefined : acc[key]), obj);
 }
--- a/client/src/app/components/list/platform-list/platform-list.component.css
+++ b/client/src/app/components/list/platform-list/platform-list.component.css
--- a/client/src/app/components/list/platform-list/platform-list.component.html
+++ b/client/src/app/components/list/platform-list/platform-list.component.html
@@ -0,0 +1,9 @@
+<app-generic-list
+  [service]="platformService"
+  [fields]="fields"
+  title="Gestion des plateformes"
+  addTitle="Ajouter une plateforme"
+  editTitle="Modifier la plateforme"
+  deleteTitle="Supprimer la plateforme"
+  idKey="id">
+</app-generic-list>
--- a/client/src/app/components/list/platform-list/platform-list.component.ts
+++ b/client/src/app/components/list/platform-list/platform-list.component.ts
@@ -2,9 +2,9 @@ import {
  Component,
  inject
 } from '@angular/core';
-import {PlatformService} from '../../services/app/platform.service';
+import {PlatformService} from '../../../services/app/platform.service';
 import {GenericListComponent} from '../generic-list/generic-list.component';
-import {BrandService} from '../../services/app/brand.service';
+import {BrandService} from '../../../services/app/brand.service';

@Component({
  selector: 'app-platform-list',
@@ -26,11 +26,10 @@ export class PlatformListComponent {
      key: 'brand',
      label: 'Marque',
      type: 'select',
-      options$: this.brandService.getAll(), // transmet les brands dynamiquement
-      displayKey: 'name',                    // affiche brand.name dans le select
-      // valueKey: 'id'                       // uncommenter si backend attend l'id au lieu de l'objet
+      options$: this.brandService.getAll(),
+      displayKey: 'name',
      sortable: true,
-      sortKey: 'brand.name'             // permet de trier par brand.name
+      sortKey: 'brand.name'
    }
  ];
 }
--- a/client/src/app/components/list/product-list/product-list.component.css
+++ b/client/src/app/components/list/product-list/product-list.component.css
--- a/client/src/app/components/list/product-list/product-list.component.html
+++ b/client/src/app/components/list/product-list/product-list.component.html
@@ -0,0 +1,9 @@
+<app-generic-list
+  [service]="productService"
+  [fields]="fields"
+  title="Liste des produits"
+  addTitle="Ajouter un produit"
+  editTitle="Modifier le produit"
+  deleteTitle="Supprimer le produit"
+  idKey="id">
+</app-generic-list>
--- a/client/src/app/components/list/product-list/product-list.component.ts
+++ b/client/src/app/components/list/product-list/product-list.component.ts
@@ -0,0 +1,110 @@
+import {
+  Component,
+  inject
+} from '@angular/core';
+import {GenericListComponent} from '../generic-list/generic-list.component';
+import {ProductService} from '../../../services/app/product.service';
+import {BrandService} from '../../../services/app/brand.service';
+import {PlatformService} from '../../../services/app/platform.service';
+import {CategoryService} from '../../../services/app/category.service';
+import {ConditionService} from '../../../services/app/condition.service';
+
+@Component({
+  selector: 'app-product-list',
+  templateUrl: './product-list.component.html',
+  standalone: true,
+  imports: [
+    GenericListComponent
+  ],
+  styleUrls: ['./product-list.component.css']
+})
+export class ProductListComponent {
+
+  productService: ProductService = inject(ProductService);
+  categoryService: CategoryService = inject(CategoryService);
+  brandService: BrandService = inject(BrandService);
+  platformService: PlatformService = inject(PlatformService);
+  conditionService: ConditionService = inject(ConditionService);
+
+  fields = [
+    {key: 'title', label: 'Titre', sortable: true},
+    {
+      key: 'description',
+      label: 'Description',
+    },
+    {
+      key: 'category',
+      label: 'Catégorie',
+      type: 'select',
+      options$: this.categoryService.getAll(),
+      displayKey: 'name',
+      sortable: true,
+      sortKey: 'category.name'
+    },
+    {
+      key: 'platform.brand',
+      label: 'Marque',
+      type: 'select',
+      options$: this.brandService.getAll(),
+      displayKey: 'name',
+      sortable: true,
+      sortKey: 'platform.brand.name'
+    },
+    {
+      key: 'platform',
+      label: 'Plateforme',
+      type: 'select',
+      options$: this.platformService.getAll(),
+      displayKey: 'name',
+      sortable: true,
+      sortKey: 'platform.name'
+    },
+    {
+      key: 'condition.displayName',
+      label: 'État',
+      type: 'select',
+      options$: this.conditionService.getAll(),
+      displayKey: 'displayName',
+      sortable: true,
+      sortKey: 'condition.displayName'
+    },
+    {
+      key: 'complete',
+      label: 'Complet',
+      type: 'checkbox',
+      sortable: true,
+      sortKey: 'complete',
+      displayFn: (value: boolean): string => value ? '✔ Oui' : '✗ Non'
+    },
+    {
+      key: 'manualIncluded',
+      label: 'Notice',
+      type: 'checkbox',
+      sortable: true,
+      sortKey: 'manualIncluded',
+      displayFn: (value: boolean): string => value ? '✔ Oui' : '✗ Non'
+    },
+    {
+      key: 'price',
+      label: 'Prix',
+      sortable: true,
+      sortKey: 'price',
+      displayFn: (value: string | number): string => {
+        if (value == null || value === '') return '';
+        try {
+          return new Intl
+            .NumberFormat('fr-FR', {style: 'currency', currency: 'EUR', maximumFractionDigits: 2})
+            .format(Number(value));
+        } catch {
+          return String(value);
+        }
+      }
+    },
+    {
+      key: 'quantity',
+      label: 'Quantité',
+      sortable: true,
+      sortKey: 'quantity'
+    }
+  ];
+}
--- a/client/src/app/components/navbar/admin-navbar/admin-navbar.component.css
+++ b/client/src/app/components/navbar/admin-navbar/admin-navbar.component.css
--- a/client/src/app/components/navbar/admin-navbar/admin-navbar.component.html
+++ b/client/src/app/components/navbar/admin-navbar/admin-navbar.component.html
--- a/client/src/app/components/navbar/admin-navbar/admin-navbar.component.ts
+++ b/client/src/app/components/navbar/admin-navbar/admin-navbar.component.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import {MatTab, MatTabGroup} from '@angular/material/tabs';
-import {PlatformListComponent} from '../platform-list/platform-list.component';
-import {CategoryListComponent} from '../category-list/category-list.component';
-import {BrandListComponent} from '../brand-list/brand-list.component';
+import {PlatformListComponent} from '../../list/platform-list/platform-list.component';
+import {CategoryListComponent} from '../../list/category-list/category-list.component';
+import {BrandListComponent} from '../../list/brand-list/brand-list.component';

@Component({
  selector: 'app-admin-navbar',
--- a/client/src/app/components/navbar/main-navbar/main-navbar.component.css
+++ b/client/src/app/components/navbar/main-navbar/main-navbar.component.css
--- a/client/src/app/components/navbar/main-navbar/main-navbar.component.html
+++ b/client/src/app/components/navbar/main-navbar/main-navbar.component.html
@@ -19,7 +19,7 @@
            <mat-icon>person</mat-icon>
            Profil
          </button>
-          <button mat-menu-item (click)="authService.logout().subscribe()">
+          <button mat-menu-item (click)="logout()">
            <mat-icon>logout</mat-icon>
            Se déconnecter
          </button>
--- a/client/src/app/components/navbar/main-navbar/main-navbar.component.ts
+++ b/client/src/app/components/navbar/main-navbar/main-navbar.component.ts
@@ -2,12 +2,12 @@ import {Component, inject} from '@angular/core';
 import {MatToolbar} from '@angular/material/toolbar';
 import {MatButton} from '@angular/material/button';
 import {Router, RouterLink} from '@angular/router';
-import {AuthService} from '../../services/auth/auth.service';
+import {AuthService} from '../../../services/auth/auth.service';
 import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
 import {MatIcon} from '@angular/material/icon';

@Component({
-  selector: 'app-navbar',
+  selector: 'app-main-navbar',
  standalone: true,
  imports: [
    MatToolbar,
@@ -18,22 +18,18 @@ import {MatIcon} from '@angular/material/icon';
    MatMenu,
    MatMenuItem
  ],
-  templateUrl: './navbar.component.html',
-  styleUrl: './navbar.component.css'
+  templateUrl: './main-navbar.component.html',
+  styleUrl: './main-navbar.component.css'
 })
-export class NavbarComponent {
+export class MainNavbarComponent {

  protected readonly authService = inject(AuthService);
  private readonly router: Router = inject(Router);

-  login() {
-    this.router.navigate(['/login'], {queryParams: {redirect: '/profile'}}).then();
-  }
-
  logout() {
    this.authService.logout().subscribe({
      next: () => {
-        this.login();
+        this.router.navigate(['/login'], {queryParams: {redirect: '/profile'}}).then();
      },
      error: (err) => {
        console.error('Logout failed:', err);
--- a/client/src/app/components/navbar/navbar.component.spec.ts
+++ b/client/src/app/components/navbar/navbar.component.spec.ts
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NavbarComponent } from './navbar.component';
-
-describe('NavbarComponent', () => {
-  let component: NavbarComponent;
-  let fixture: ComponentFixture<NavbarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NavbarComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(NavbarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/client/src/app/components/platform-list/platform-list.component.html
+++ b/client/src/app/components/platform-list/platform-list.component.html
@@ -1,6 +0,0 @@
-<app-generic-list
-  [service]="platformService"
-  [fields]="fields"
-  title="Plateformes"
-  idKey="id">
-</app-generic-list>
--- a/client/src/app/components/product-form/product-form.component.html
+++ b/client/src/app/components/product-form/product-form.component.html
@@ -1 +0,0 @@
-<p>product-form works!</p>
--- a/client/src/app/components/product-form/product-form.component.ts
+++ b/client/src/app/components/product-form/product-form.component.ts
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-product-form',
-  standalone: true,
-  imports: [],
-  templateUrl: './product-form.component.html',
-  styleUrl: './product-form.component.css'
-})
-export class ProductFormComponent {
-
-}
--- a/client/src/app/components/products-list/products-list.component.html
+++ b/client/src/app/components/products-list/products-list.component.html
@@ -1,125 +0,0 @@
-<div class="generic-list">
-  <!-- Header (bouton à droite) -->
-  <div class="gl-header">
-    <div class="gl-controls">
-      <button mat-flat-button color="accent" (click)="onAdd()">
-        <mat-icon>add</mat-icon>&nbsp;Ajouter
-      </button>
-    </div>
-  </div>
-
-  <!-- Barre de recherche sous le header -->
-  <div class="gl-filter-bar gl-block">
-    <mat-form-field class="gl-filter" appearance="outline">
-      <mat-label>Rechercher</mat-label>
-      <input
-        matInput
-        placeholder="Tapez pour filtrer…"
-        (input)="applyFilter($any($event.target).value)"
-        aria-label="Filtrer le tableau"
-      />
-    </mat-form-field>
-  </div>
-
-  <!-- Tableau -->
-  <div class="gl-table-wrapper gl-block">
-    <table mat-table [dataSource]="dataSource" class="gl-table" matSort>
-
-      <!-- Title Column -->
-      <ng-container matColumnDef="title">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Nom</th>
-        <td mat-cell *matCellDef="let product">{{ product.title }}</td>
-      </ng-container>
-
-      <!-- Description Column -->
-      <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
-        <td mat-cell *matCellDef="let product">{{ product.description }}</td>
-      </ng-container>
-
-      <!-- Category Column -->
-      <ng-container matColumnDef="category">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Catégorie</th>
-        <td mat-cell *matCellDef="let product">{{ product.category.name }}</td>
-      </ng-container>
-
-      <!-- Platform Column -->
-      <ng-container matColumnDef="platform">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Plateforme</th>
-        <td mat-cell *matCellDef="let product">{{ product.platform.name }}</td>
-      </ng-container>
-
-      <!-- Condition Column -->
-      <ng-container matColumnDef="condition">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>État</th>
-        <td mat-cell *matCellDef="let product">{{ product.condition.displayName }}</td>
-      </ng-container>
-
-      <!-- Complete Column -->
-      <ng-container matColumnDef="complete">
-        <th mat-header-cell *matHeaderCellDef>Complet</th>
-        <td mat-cell *matCellDef="let product">
-          @if (product.complete) {
-            <mat-icon color="primary">check_circle</mat-icon>
-          } @else {
-            <mat-icon color="warn">cancel</mat-icon>
-          }
-        </td>
-      </ng-container>
-
-      <!-- Manual Column -->
-      <ng-container matColumnDef="manual">
-        <th mat-header-cell *matHeaderCellDef>Notice</th>
-        <td mat-cell *matCellDef="let product">
-          @if (product.manual) {
-            <mat-icon color="primary">check_circle</mat-icon>
-          } @else {
-            <mat-icon color="warn">cancel</mat-icon>
-          }
-        </td>
-      </ng-container>
-
-      <!-- Price Column -->
-      <ng-container matColumnDef="price">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Prix</th>
-        <td mat-cell *matCellDef="let product">{{ product.price | currency:'EUR' }}</td>
-      </ng-container>
-
-      <!-- Quantity Column -->
-      <ng-container matColumnDef="quantity">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantité</th>
-        <td mat-cell *matCellDef="let product">{{ product.quantity }}</td>
-      </ng-container>
-
-      <!-- Actions Column -->
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef class="actions-head">Actions</th>
-        <td mat-cell *matCellDef="let product" class="actions-cell">
-          <button mat-icon-button (click)="onEdit(product)" aria-label="Modifier">
-            <mat-icon>edit</mat-icon>
-          </button>
-          <button mat-icon-button color="warn" (click)="onDelete(product)" aria-label="Supprimer">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-  </div>
-
-  <!-- Pagination avec même carte -->
-  <div class="gl-paginator-wrap gl-block">
-    <mat-paginator
-      class="gl-paginator"
-      [pageSize]="10"
-      [pageSizeOptions]="[5,10,25]"
-      showFirstLastButtons>
-    </mat-paginator>
-  </div>
-
-  @if (!products || products.length === 0) {
-    <div class="no-products gl-block">Aucun produit trouvé.</div>
-  }
-</div>
--- a/client/src/app/components/products-list/products-list.component.ts
+++ b/client/src/app/components/products-list/products-list.component.ts
@@ -1,118 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ViewChild,
-  AfterViewInit,
-  OnChanges,
-  SimpleChanges,
-  OnInit,
-  inject
-} from '@angular/core';
-import {
-  MatCell, MatCellDef, MatColumnDef, MatHeaderCell,
-  MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef, MatTable,
-  MatTableDataSource
-} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MatSort} from '@angular/material/sort';
-import {Product} from '../../interfaces/product';
-import {ProductService} from '../../services/app/product.service';
-import {MatDialog} from '@angular/material/dialog';
-import {MatButton, MatIconButton} from '@angular/material/button';
-import {MatFormField, MatLabel} from '@angular/material/form-field';
-import {MatIcon} from '@angular/material/icon';
-import {MatInput} from '@angular/material/input';
-import {CurrencyPipe} from '@angular/common';
-
-@Component({
-  selector: 'app-products-list',
-  templateUrl: './products-list.component.html',
-  standalone: true,
-  imports: [
-    MatButton,
-    MatCell,
-    MatCellDef,
-    MatColumnDef,
-    MatFormField,
-    MatHeaderCell,
-    MatHeaderRow,
-    MatHeaderRowDef,
-    MatIcon,
-    MatIconButton,
-    MatInput,
-    MatPaginator,
-    MatRow,
-    MatRowDef,
-    MatSort,
-    MatTable,
-    MatHeaderCellDef,
-    CurrencyPipe,
-    MatLabel
-  ],
-  styleUrls: ['./products-list.component.css']
-})
-export class ProductsListComponent implements OnInit, AfterViewInit, OnChanges {
-
-  @Input() products: Product[] = [];
-  @Output() add = new EventEmitter<Product>();
-  @Output() edit = new EventEmitter<Product>();
-  @Output() delete = new EventEmitter<Product>();
-
-  displayedColumns: string[] = ['title', 'description', 'category', 'platform', 'condition', 'complete', 'manual', 'price', 'quantity', 'actions'];
-  dataSource = new MatTableDataSource<Product>([]);
-
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
-
-  private readonly productService: ProductService = inject(ProductService);
-  private readonly dialog = inject(MatDialog);
-
-  ngOnInit(): void {
-    if (!this.products || this.products.length === 0) {
-      this.loadProducts();
-    } else {
-      this.dataSource.data = this.products;
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['products']) {
-      this.dataSource.data = this.products || [];
-    }
-  }
-
-  ngAfterViewInit(): void {
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-  }
-
-  loadProducts() {
-    this.productService.getProducts().subscribe({
-      next: (products: Product[]) => {
-        this.products = products || []
-        this.dataSource.data = this.products;
-        console.log("Fetched products:", this.products);
-      },
-      error: () => this.products = []
-    });
-  }
-
-  onAdd(): void {
-
-  }
-
-  onEdit(product: Product): void {
-
-  }
-
-  onDelete(product: Product): void {
-    this.delete.emit(product);
-    this.productService.deleteProduct((product as any).id).subscribe(() => this.loadProducts());
-  }
-
-  applyFilter(value: string): void {
-    this.dataSource.filter = (value || '').trim().toLowerCase();
-  }
-}
--- a/client/src/app/pages/add-product/add-product.component.css
+++ b/client/src/app/pages/add-product/add-product.component.css
@@ -1,32 +0,0 @@
-.auth-wrap {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  padding: 16px;
-}
-
-.auth-card {
-  width: 100%;
-  max-width: 520px;
-}
-
-.form-grid {
-  display: grid;
-  gap: 16px;
-  margin-top: 16px;
-}
-
-.actions {
-  display: flex;
-  margin: 8px;
-
-  button {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-  }
-}
-
-.ml-8 {
-  margin-left: 8px;
-}
--- a/client/src/app/pages/add-product/add-product.component.html
+++ b/client/src/app/pages/add-product/add-product.component.html
@@ -1,146 +0,0 @@
-<section class="auth-wrap">
-  <mat-card class="auth-card">
-    <mat-card-header>
-      <mat-card-title>Ajouter un produit</mat-card-title>
-    </mat-card-header>
-
-    <mat-card-content>
-      <form [formGroup]="addProductForm" (ngSubmit)="onProductAdd()" class="form-grid">
-
-        <!-- Title -->
-        <mat-form-field appearance="outline">
-          <mat-label>Titre</mat-label>
-          <input matInput
-                 id="title"
-                 name="title"
-                 formControlName="title"
-                 type="text"
-                 required>
-          @if (isFieldInvalid('title')) {
-            <mat-error>{{ getFieldError('title') }}</mat-error>
-          }
-        </mat-form-field>
-
-        <!-- Description -->
-        <mat-form-field appearance="outline">
-          <mat-label>Description</mat-label>
-          <input matInput
-                 id="description"
-                 name="description"
-                 formControlName="description"
-                 type="text"
-                 required>
-          @if (isFieldInvalid('description')) {
-            <mat-error>{{ getFieldError('description') }}</mat-error>
-          }
-        </mat-form-field>
-
-        <!-- Category -->
-        <mat-form-field appearance="outline">
-          <mat-label>Catégorie</mat-label>
-          <mat-select formControlName="category" disableRipple>
-            @for (category of categories; track category.id) {
-              <mat-option [value]="category">{{ category.name }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-
-        <!-- Condition -->
-        <mat-form-field appearance="outline">
-          <mat-label>État</mat-label>
-          <mat-select formControlName="condition" disableRipple>
-            @for (condition of conditions; track condition.id) {
-              <mat-option [value]="condition">{{ condition.displayName }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-
-        <!-- Brand -->
-        <mat-form-field appearance="outline">
-          <mat-label>Marque</mat-label>
-          <mat-select formControlName="brand" [compareWith]="compareById" disableRipple>
-            @for (brand of filteredBrands; track brand.id) {
-              <mat-option [value]="brand.id">{{ brand.name }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-
-        <!-- Platform -->
-        <mat-form-field appearance="outline">
-          <mat-label>Plateforme</mat-label>
-          <mat-select formControlName="platform" [compareWith]="compareById" disableRipple>
-            @for (platform of filteredPlatforms; track platform.id) {
-              <mat-option [value]="platform.id">{{ platform.name }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-
-        <!-- Complete state -->
-        <mat-checkbox formControlName="complete" id="complete">
-          Complet
-        </mat-checkbox>
-        @if (isFieldInvalid('complete')) {
-          <div class="mat-caption mat-error">{{ getFieldError('complete') }}</div>
-        }
-
-        <!-- manual included -->
-        <mat-checkbox formControlName="manual" id="manual">
-          Avec notice
-        </mat-checkbox>
-        @if (isFieldInvalid('manual')) {
-          <div class="mat-caption mat-error">{{ getFieldError('manual') }}</div>
-        }
-
-        <!-- Price -->
-        <mat-form-field appearance="outline">
-          <mat-label>Prix TTC</mat-label>
-          <input matInput
-                 id="price"
-                 name="price"
-                 formControlName="price"
-                 type="text"
-                 required>
-          @if (isFieldInvalid('price')) {
-            <mat-error>{{ getFieldError('price') }}</mat-error>
-          }
-        </mat-form-field>
-
-        <!-- Quantity -->
-        <mat-form-field appearance="outline">
-          <mat-label>Quantité</mat-label>
-          <input matInput
-                 id="quantity"
-                 name="quantity"
-                 formControlName="quantity"
-                 type="text"
-                 required>
-          @if (isFieldInvalid('quantity')) {
-            <mat-error>{{ getFieldError('quantity') }}</mat-error>
-          }
-        </mat-form-field>
-
-        <!-- Submit Button -->
-        <div class="actions">
-          <button mat-raised-button color="primary"
-                  type="submit"
-                  [disabled]="isLoading || addProductForm.invalid">
-            @if (isLoading) {
-              <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
-              <span class="ml-8">Ajout du produit…</span>
-            } @else {
-              Ajouter le produit
-            }
-          </button>
-        </div>
-      </form>
-    </mat-card-content>
-
-    <mat-divider></mat-divider>
-
-    <mat-card-actions align="end">
-      <span class="mat-body-small">
-        <a [routerLink]="'/login'">Voir la liste des produits</a>
-      </span>
-    </mat-card-actions>
-  </mat-card>
-</section>
--- a/client/src/app/pages/add-product/add-product.component.ts
+++ b/client/src/app/pages/add-product/add-product.component.ts
@@ -1,345 +0,0 @@
-import {Component, inject, OnDestroy, OnInit} from '@angular/core';
-import {
-  AbstractControl,
-  FormBuilder,
-  FormGroup,
-  FormsModule,
-  ReactiveFormsModule, ValidatorFn,
-  Validators
-} from "@angular/forms";
-import {MatButton} from "@angular/material/button";
-import {
-  MatCard,
-  MatCardActions,
-  MatCardContent,
-  MatCardHeader,
-  MatCardTitle
-} from "@angular/material/card";
-import {MatCheckbox} from "@angular/material/checkbox";
-import {MatDivider} from "@angular/material/divider";
-import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
-import {MatInput} from "@angular/material/input";
-import {MatProgressSpinner} from "@angular/material/progress-spinner";
-import {MatOption, MatSelect} from '@angular/material/select';
-import {RouterLink} from '@angular/router';
-import {Subscription} from 'rxjs';
-import {BrandService} from '../../services/app/brand.service';
-import {Brand} from '../../interfaces/brand';
-import {PlatformService} from '../../services/app/platform.service';
-import {Platform} from '../../interfaces/platform';
-import {Category} from '../../interfaces/category';
-import {CategoryService} from '../../services/app/category.service';
-import {ConditionService} from '../../services/app/condition.service';
-import {Condition} from '../../interfaces/condition';
-import {ProductService} from '../../services/app/product.service';
-
-@Component({
-  selector: 'app-add-product',
-  standalone: true,
-  imports: [
-    FormsModule,
-    MatButton,
-    MatCard,
-    MatCardActions,
-    MatCardContent,
-    MatCardHeader,
-    MatCardTitle,
-    MatCheckbox,
-    MatDivider,
-    MatError,
-    MatFormField,
-    MatInput,
-    MatLabel,
-    MatProgressSpinner,
-    ReactiveFormsModule,
-    MatSelect,
-    MatOption,
-    RouterLink
-  ],
-  templateUrl: './add-product.component.html',
-  styleUrl: './add-product.component.css'
-})
-export class AddProductComponent implements OnInit, OnDestroy {
-
-  addProductForm: FormGroup;
-  isSubmitted = false;
-  isLoading = false;
-
-  brands: Brand[] = [];
-  platforms: Platform[] = [];
-  categories: Category[] = [];
-  conditions: Condition[] = [];
-
-  filteredBrands: Brand[] = [];
-  filteredPlatforms: Platform[] = [];
-
-  private addProductSubscription: Subscription | null = null;
-
-  private brandControlSubscription: Subscription | null = null;
-  private platformControlSubscription: Subscription | null = null;
-
-  private brandSubscription: Subscription | null = null;
-  private platformSubscription: Subscription | null = null;
-  private categorySubscription: Subscription | null = null;
-  private conditionSubscription: Subscription | null = null;
-
-  private readonly brandService: BrandService = inject(BrandService);
-  private readonly platformService = inject(PlatformService);
-  private readonly categoryService = inject(CategoryService);
-  private readonly conditionService = inject(ConditionService);
-
-  private readonly productService = inject(ProductService);
-
-  constructor(private readonly formBuilder: FormBuilder) {
-    this.addProductForm = this.formBuilder.group({
-        title: ['', [
-          Validators.required,
-          Validators.minLength(3),
-          Validators.maxLength(50),
-          Validators.pattern(/^[\p{L}\p{N}\s]+$/u)
-        ]],
-        description: ['', [
-          Validators.required,
-          Validators.minLength(10),
-          Validators.maxLength(255),
-          Validators.pattern(/^[\p{L}\p{N}\s]+$/u)
-        ]],
-        category: ['', [
-          Validators.required
-        ]],
-        condition: ['', [
-          Validators.required
-        ]],
-        // stocker des ids (string|number) dans les controls
-        brand: ['', [
-          Validators.required
-        ]],
-        platform: ['', [
-          Validators.required
-        ]],
-        complete: [true],
-        manual: [true],
-        price: ['', [
-          Validators.required,
-          Validators.pattern(/^\d+([.,]\d{1,2})?$/),
-          this.priceRangeValidator(0, 9999)
-        ]],
-        quantity: ['', [
-          Validators.required,
-          Validators.min(1),
-          Validators.max(999),
-          Validators.pattern(/^\d+$/)
-        ]]
-      },
-    );
-  }
-
-  private normalizeIds<T extends Record<string, any>>(items: T[] | undefined, idKey = 'id'): T[] {
-    return (items || []).map((it, i) => ({
-      ...it,
-      [idKey]: (it[idKey] ?? i)
-    }));
-  }
-
-  private getPlatformBrandId(platform: any): string | number | undefined {
-    if (!platform) return undefined;
-    const maybe = platform.brand ?? platform['brand_id'] ?? platform['brandId'];
-    if (maybe == null) return undefined;
-
-    if (typeof maybe === 'object') {
-      if (maybe.id != null) return maybe.id;
-      if (maybe.name != null) {
-        const found = this.brands.find(b =>
-          String(b.name).toLowerCase() === String(maybe.name).toLowerCase()
-          || String(b.id) === String(maybe.name)
-        );
-        return found?.id;
-      }
-      return undefined;
-    }
-
-    const asStr = String(maybe);
-    const match = this.brands.find(b =>
-      String(b.id) === asStr || String(b.name).toLowerCase() === asStr.toLowerCase()
-    );
-    return match?.id ?? maybe;
-  }
-
-  private priceRangeValidator(min: number, max: number): ValidatorFn {
-    return (control: AbstractControl) => {
-      const val = control.value;
-      if (val === null || val === undefined || val === '') return null;
-      const normalized = String(val).replace(',', '.').trim();
-      const num = Number.parseFloat(normalized);
-      if (Number.isNaN(num)) return {pattern: true};
-      return (num < min || num > max) ? {range: {min, max, actual: num}} : null;
-    };
-  }
-
-  ngOnInit(): void {
-
-    this.brandSubscription = this.brandService.getAll().subscribe({
-      next: (brands: Brand[]) => {
-        this.brands = this.normalizeIds(brands, 'id');
-        this.filteredBrands = [...this.brands];
-      },
-      error: (error: any) => {
-        console.error('Error fetching brands:', error);
-      },
-      complete: () => {
-        console.log('Finished fetching brands:', this.brands);
-      }
-    });
-
-    this.platformSubscription = this.platformService.getAll().subscribe({
-      next: (platforms: Platform[]) => {
-        this.platforms = this.normalizeIds(platforms, 'id');
-        this.filteredPlatforms = [...this.platforms];
-      },
-      error: (error: any) => {
-        console.error('Error fetching platforms:', error);
-      },
-      complete: () => {
-        console.log('Finished fetching platforms:', this.platforms);
-      }
-    });
-
-    this.categorySubscription = this.categoryService.getAll().subscribe({
-      next: (categories: Category[]) => {
-        this.categories = this.normalizeIds(categories, 'id');
-      },
-      error: (error: any) => {
-        console.error('Error fetching categories:', error);
-      },
-      complete: () => {
-        console.log('Finished fetching categories:', this.categories);
-      }
-    });
-
-    this.conditionSubscription = this.conditionService.getConditions().subscribe({
-      next: (conditions: Condition[]) => {
-        this.conditions = this.normalizeIds(conditions, 'id');
-      },
-      error: (error) => {
-        console.error('Error fetching conditions:', error);
-      },
-      complete: () => {
-        console.log('Finished fetching conditions:', this.conditions);
-      }
-    });
-
-    const brandControl = this.addProductForm.get('brand');
-    const platformControl = this.addProductForm.get('platform');
-
-    this.brandControlSubscription = brandControl?.valueChanges.subscribe((brandId) => {
-      if (brandId != null && brandId !== '') {
-        const brandIdStr = String(brandId);
-        this.filteredPlatforms = this.platforms.filter(p => {
-          const pBid = this.getPlatformBrandId(p);
-          return pBid != null && String(pBid) === brandIdStr;
-        });
-        const curPlatformId = platformControl?.value;
-        if (curPlatformId != null && !this.filteredPlatforms.some(p => String(p.id) === String(curPlatformId))) {
-          platformControl?.setValue(null);
-        }
-      } else {
-        this.filteredPlatforms = [...this.platforms];
-      }
-    }) ?? null;
-
-    this.platformControlSubscription = platformControl?.valueChanges.subscribe((platformId) => {
-      if (platformId != null && platformId !== '') {
-        const platformObj = this.platforms.find(p => String(p.id) === String(platformId));
-        const pBrandId = this.getPlatformBrandId(platformObj);
-        if (pBrandId != null) {
-          const pBrandIdStr = String(pBrandId);
-          this.filteredBrands = this.brands.filter(b => String(b.id) === pBrandIdStr);
-          const curBrandId = brandControl?.value;
-          if (curBrandId != null && String(curBrandId) !== pBrandIdStr) {
-            brandControl?.setValue(null);
-          }
-        } else {
-          this.filteredBrands = [...this.brands];
-        }
-      } else {
-        this.filteredBrands = [...this.brands];
-      }
-    }) ?? null;
-  }
-
-  ngOnDestroy(): void {
-    this.addProductSubscription?.unsubscribe();
-    this.brandControlSubscription?.unsubscribe();
-    this.platformControlSubscription?.unsubscribe();
-    this.brandSubscription?.unsubscribe();
-    this.platformSubscription?.unsubscribe();
-    this.categorySubscription?.unsubscribe();
-    this.conditionSubscription?.unsubscribe();
-  }
-
-  onProductAdd() {
-    this.isSubmitted = true;
-
-    if (this.addProductForm.valid) {
-      this.isLoading = true;
-      const raw = this.addProductForm.value;
-
-      const priceStr = raw.price ?? '';
-      const priceNum = Number(String(priceStr).replace(',', '.').trim());
-      if (Number.isNaN(priceNum)) {
-        this.isLoading = false;
-        this.addProductForm.get('price')?.setErrors({pattern: true});
-        return;
-      }
-
-      const quantityNum = Number(raw.quantity);
-
-      const payload = {
-        ...raw,
-        price: priceNum,
-        quantity: quantityNum
-      };
-
-      this.addProductSubscription = this.productService.addProduct(payload).subscribe({
-        next: (response) => {
-          console.log("Product added successfully:", response);
-          this.addProductForm.reset();
-          this.isSubmitted = false;
-          alert("Produit ajouté avec succès !");
-        },
-        error: (error) => {
-          console.error("Error adding product:", error);
-          alert("Une erreur est survenue lors de l'ajout du produit.");
-        },
-        complete: () => {
-          this.isLoading = false;
-        }
-      });
-    }
-  }
-
-  isFieldInvalid(fieldName: string): boolean {
-    const field = this.addProductForm.get(fieldName);
-    return Boolean(field && field.invalid && (field.dirty || field.touched || this.isSubmitted));
-  }
-
-  getFieldError(fieldName: string): string {
-    const field = this.addProductForm.get(fieldName);
-
-    if (field && field.errors) {
-      if (field.errors['required']) return `Ce champ est obligatoire`;
-      if (field.errors['email']) return `Format d'email invalide`;
-      if (field.errors['minlength']) return `Minimum ${field.errors['minlength'].requiredLength} caractères`;
-      if (field.errors['maxlength']) return `Maximum ${field.errors['maxlength'].requiredLength} caractères`;
-    }
-    return '';
-  }
-
-  compareById = (a: any, b: any) => {
-    if (a == null || b == null) return a === b;
-    if (typeof a !== 'object' || typeof b !== 'object') {
-      return String(a) === String(b);
-    }
-    return String(a.id ?? a) === String(b.id ?? b);
-  };
-}
--- a/client/src/app/pages/admin/admin.component.ts
+++ b/client/src/app/pages/admin/admin.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import {AdminNavbarComponent} from '../../components/admin-navbar/admin-navbar.component';
+import {AdminNavbarComponent} from '../../components/navbar/admin-navbar/admin-navbar.component';

@Component({
  selector: 'app-admin',
--- a/client/src/app/pages/home/home.component.html
+++ b/client/src/app/pages/home/home.component.html
@@ -3,8 +3,10 @@
    <h1>Bonjour, {{ user.firstName }}!</h1>
    <p>Que souhaitez-vous faire ?</p>
    <br>
-    <button mat-flat-button [routerLink]="'/add-product'">Ajouter un nouveau produit</button>
-    <button mat-raised-button [routerLink]="'/products'">Voir la liste des produits</button>
+    <div class="home-actions">
+      <button mat-flat-button [routerLink]="'/products'">Voir la liste des produits</button>
+      <button mat-raised-button [routerLink]="'/admin'">Gérer la base de données</button>
+    </div>
  } @else {
    <h2>Gestion des produits</h2>
    <div class="home-actions">
--- a/client/src/app/pages/home/home.component.spec.ts
+++ b/client/src/app/pages/home/home.component.spec.ts
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HomeComponent } from './home.component';
-
-describe('HomeComponent', () => {
-  let component: HomeComponent;
-  let fixture: ComponentFixture<HomeComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [HomeComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(HomeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/client/src/app/pages/home/home.component.ts
+++ b/client/src/app/pages/home/home.component.ts
@@ -1,16 +1,14 @@
 import {Component, inject} from '@angular/core';
 import {MatButton} from '@angular/material/button';
 import {AuthService} from '../../services/auth/auth.service';
-import {RouterLink} from '@angular/router';
-import {AddProductComponent} from '../add-product/add-product.component';
+import {Router, RouterLink} from '@angular/router';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    MatButton,
-    RouterLink,
-    AddProductComponent
+    RouterLink
  ],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
@@ -18,6 +16,7 @@ import {AddProductComponent} from '../add-product/add-product.component';
 export class HomeComponent {

  protected readonly authService: AuthService = inject(AuthService);
+  protected readonly router: Router = inject(Router);

  getUser() {
    return this.authService.user();
--- a/client/src/app/pages/login/login.component.spec.ts
+++ b/client/src/app/pages/login/login.component.spec.ts
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LoginComponent } from './login.component';
-
-describe('LoginComponent', () => {
-  let component: LoginComponent;
-  let fixture: ComponentFixture<LoginComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [LoginComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(LoginComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/client/src/app/pages/login/login.component.ts
+++ b/client/src/app/pages/login/login.component.ts
@@ -50,12 +50,11 @@ export class LoginComponent implements OnDestroy {
    this.loginSubscription = this.authService.login(
      this.loginFormGroup.value as Credentials).subscribe({
      next: (result: User | null | undefined) => {
+        console.log(result);
        this.navigateHome();
-        alert('Login successful!');
      },
      error: (error) => {
        console.log(error);
-        alert(error.message);
        this.invalidCredentials = true;
      }
    });
--- a/client/src/app/pages/not-found/not-found.component.spec.ts
+++ b/client/src/app/pages/not-found/not-found.component.spec.ts
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NotFoundComponent } from './not-found.component';
-
-describe('NotFoundComponent', () => {
-  let component: NotFoundComponent;
-  let fixture: ComponentFixture<NotFoundComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NotFoundComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(NotFoundComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/client/src/app/pages/products/products.component.html
+++ b/client/src/app/pages/products/products.component.html
@@ -1 +1,7 @@
-<app-products-list></app-products-list>
+<ng-container>
+  @if (showList) {
+    <app-product-list></app-product-list>
+  }
+</ng-container>
+
+<router-outlet></router-outlet>
--- a/client/src/app/pages/products/products.component.ts
+++ b/client/src/app/pages/products/products.component.ts
@@ -1,17 +1,43 @@
 import {
-  Component,
+  Component, inject,
 } from '@angular/core';
-import {ProductsListComponent} from '../../components/products-list/products-list.component';
+import {ProductListComponent} from '../../components/list/product-list/product-list.component';
+import {ActivatedRoute, NavigationEnd, Router, RouterOutlet} from '@angular/router';
+import {filter, Subscription} from 'rxjs';

@Component({
-  selector: 'app-products',
+  selector: 'app-dialog',
  templateUrl: './products.component.html',
  standalone: true,
  imports: [
-    ProductsListComponent
+    ProductListComponent,
+    RouterOutlet
  ],
  styleUrls: ['./products.component.css']
 })
 export class ProductsComponent {

+  showList = true;
+  private sub?: Subscription;
+  private readonly router: Router = inject(Router);
+  private readonly route: ActivatedRoute = inject(ActivatedRoute);
+
+  ngOnInit(): void {
+    this.updateShowList(this.route);
+    this.sub = this.router.events.pipe(
+      filter(evt => evt instanceof NavigationEnd)
+    ).subscribe(() => this.updateShowList(this.route));
+  }
+
+  private updateShowList(route: ActivatedRoute): void {
+    let current = route;
+    while (current.firstChild) {
+      current = current.firstChild;
+    }
+    this.showList = current === route;
+  }
+
+  ngOnDestroy(): void {
+    this.sub?.unsubscribe();
+  }
 }
--- a/client/src/app/pages/profile/profile.component.html
+++ b/client/src/app/pages/profile/profile.component.html
@@ -5,7 +5,11 @@
        <mat-icon>account_circle</mat-icon>
      </div>
      <mat-card-title>{{ user.firstName }} {{ user.lastName }}</mat-card-title>
+      @if (user.role == "Administrator") {
        <mat-card-subtitle>{{ user.username }} ({{ user.role }})</mat-card-subtitle>
+      } @else {
+        <mat-card-subtitle>{{ user.username }}</mat-card-subtitle>
+      }
    </mat-card-header>
    <mat-card-content>
      <p>
--- a/client/src/app/pages/profile/profile.component.spec.ts
+++ b/client/src/app/pages/profile/profile.component.spec.ts
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProfileComponent } from './profile.component';
-
-describe('ProfileComponent', () => {
-  let component: ProfileComponent;
-  let fixture: ComponentFixture<ProfileComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ProfileComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ProfileComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/client/src/app/services/app/condition.service.ts
+++ b/client/src/app/services/app/condition.service.ts
@@ -1,31 +1,32 @@
 import {inject, Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
 import {Condition} from '../../interfaces/condition';
+import {CrudService} from '../crud.service';

@Injectable({
  providedIn: 'root'
 })
-export class ConditionService {
-
+export class ConditionService implements CrudService<Condition> {
  private readonly http = inject(HttpClient);
  private readonly BASE_URL = 'http://localhost:3000/api/app/conditions';

-  getConditions() {
+  getAll(): Observable<Condition[]> {
    return this.http.get<Condition[]>(this.BASE_URL, {withCredentials: true});
  }

-  addCondition(condition: Condition) {
-    console.log("Adding condition:", condition);
-    return this.http.post(this.BASE_URL, condition, {withCredentials: true});
+  add(item: Condition): Observable<Condition> {
+    console.log('Adding condition:', item);
+    return this.http.post<Condition>(this.BASE_URL, item, {withCredentials: true});
  }

-  updateCondition(id: string, condition: Condition) {
-    console.log("Updating condition:", id, condition);
-    return this.http.put(`${this.BASE_URL}/${id}`, condition, {withCredentials: true});
+  update(id: string | number, item: Condition): Observable<Condition> {
+    console.log('Updating condition:', id, item);
+    return this.http.put<Condition>(`${this.BASE_URL}/${id}`, item, {withCredentials: true});
  }

-  deleteCondition(id: string) {
-    console.log("Deleting condition:", id);
-    return this.http.delete(`${this.BASE_URL}/${id}`, {withCredentials: true});
+  delete(id: string | number): Observable<void> {
+    console.log('Deleting condition:', id);
+    return this.http.delete<void>(`${this.BASE_URL}/${id}`, {withCredentials: true});
  }
 }
--- a/client/src/app/services/app/product.service.ts
+++ b/client/src/app/services/app/product.service.ts
@@ -1,31 +1,32 @@
 import {inject, Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
 import {Product} from '../../interfaces/product';
+import {CrudService} from '../crud.service';

@Injectable({
  providedIn: 'root'
 })
-export class ProductService {
-
+export class ProductService implements CrudService<Product> {
  private readonly http = inject(HttpClient);
  private readonly BASE_URL = 'http://localhost:3000/api/app/products';

-  getProducts() {
+  getAll(): Observable<Product[]> {
    return this.http.get<Product[]>(this.BASE_URL, {withCredentials: true});
  }

-  addProduct(product: Product) {
-    console.log("Adding product:", product);
-    return this.http.post(this.BASE_URL, product, {withCredentials: true});
+  add(item: Product): Observable<Product> {
+    console.log('Adding product:', item);
+    return this.http.post<Product>(this.BASE_URL, item, {withCredentials: true});
  }

-  updateProduct(id: string, product: Product) {
-    console.log("Updating product:", id, product);
-    return this.http.put(`${this.BASE_URL}/${id}`, product, {withCredentials: true});
+  update(id: string | number, item: Product): Observable<Product> {
+    console.log('Updating product:', id, item);
+    return this.http.put<Product>(`${this.BASE_URL}/${id}`, item, {withCredentials: true});
  }

-  deleteProduct(id: string) {
-    console.log("Deleting product:", id);
-    return this.http.delete(`${this.BASE_URL}/${id}`, {withCredentials: true});
+  delete(id: string | number): Observable<void> {
+    console.log('Deleting product:', id);
+    return this.http.delete<void>(`${this.BASE_URL}/${id}`, {withCredentials: true});
  }
 }
--- a/client/src/app/services/user/user.service.spec.ts
+++ b/client/src/app/services/user/user.service.spec.ts
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { UserService } from './user.service';
-
-describe('UserService', () => {
-  let service: UserService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(UserService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/client/src/app/services/user/user.service.ts
+++ b/client/src/app/services/user/user.service.ts
@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class UserService {
-
-  constructor() { }
-}