added create quotation function and edit end delete product in quotation table

# Conflicts:
#	src/app/services/api/api/deliverynotes.service.ts
#	src/app/services/api/api/purchaseorders.service.ts
#	src/app/services/api/api/quotations.service.ts

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

openapi-generator.yaml

@@ -0,0 +1,3 @@
+additionalProperties:
+  fileNaming: kebab-case
+  modelPropertyNaming: camelCase

openapitools.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+  "spaces": 2,
+  "generator-cli": {
+    "version": "7.17.0"
+  }
+}

package.json

@@ -5,7 +5,9 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "watch": "ng build --watch --configuration development"
+    "watch": "ng build --watch --configuration development",
+    "openapi": "rm -rf src/app/services/api && openapi-generator-cli generate -i http://localhost:5298/swagger/v1/swagger.json -g typescript-angular -o src/app/services/api -c openapi-generator.yaml",
+    "openapiWin": "set JAVA_TOOL_OPTIONS=-Dcom.sun.net.ssl.checkRevocation=false -Djavax.net.ssl.trustStoreType=WINDOWS-ROOT && openapi-generator-cli generate -i https://localhost:44379/swagger/v1/swagger.json -g typescript-angular -o src/app/services/api -c openapi-generator.yaml\n"
   },
   "prettier": {
     "printWidth": 100,
@@ -27,8 +29,11 @@
     "@angular/forms": "^20.3.0",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
+    "@openapitools/openapi-generator-cli": "^2.25.2",
+    "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
     "ng-zorro-antd": "^20.4.0",
+    "postcss": "^8.5.6",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.17",
     "tslib": "^2.3.0",

src/app/app.css

@@ -6,35 +6,102 @@
     height: 100vh;
 }
 
-.top-nav {
+nz-header {
-  line-height: 64px;
+    display: flex;
+    align-items: center;
+    background: #001529;
+    padding: 0 24px;
 }
 
+.header-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+/* --- LOGO + TITRE --- */
 .logo {
-  float: left;
+    display: flex;
-  height: 64px;
+    align-items: center;
-  padding-right: 24px;
+}
-  line-height: 64px;
+
-  background: #001529;
+.logo a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
 }
 
 .logo img {
-  display: inline-block;
+    height: 40px;
-  height: 32px;
+    width: auto;
-  width: 32px;
-  vertical-align: middle;
 }
 
 .logo h1 {
-  display: inline-block;
+    margin: 0 0 0 10px;
-  margin: 0 0 0 15px;
     color: #fff;
     font-weight: 600;
     font-size: 20px;
-  font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
+    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-  vertical-align: middle;
 }
 
+/* --- MENU PRINCIPAL --- */
+.top-nav {
+    flex: 1;
+    margin: 0 40px;
+    line-height: 64px;
+    background: #001529;
+    border: none;
+}
+
+/* Couleur grise par défaut + effet blanc et zoom au survol */
+.top-nav li {
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.top-nav li a {
+    color: #bfbfbf !important; /* gris clair par défaut */
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+/* Au survol → zoom + blanc pur */
+.top-nav li:hover {
+    transform: scale(1.08);
+    background: transparent !important;
+    color: #fff !important;
+}
+
+.top-nav li:hover a {
+    color: #ffffff !important;
+}
+
+/* Supprime toute coloration bleue ou fond par défaut NG-ZORRO */
+.top-nav li.ant-menu-item-active,
+.top-nav li.ant-menu-item-selected {
+    background: transparent !important;
+    color: #fff !important;
+}
+
+/* --- ICONES DROITES --- */
+.right-icons {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    color: #fff;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.right-icons app-modal-nav {
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.right-icons app-modal-nav:hover {
+    color: #40a9ff;
+    transform: scale(1.2);
+}
+
+/* --- CONTENU --- */
 nz-content {
     padding: 24px 50px;
 }

src/app/app.html

@@ -1,11 +1,19 @@
 <nz-layout class="app-layout">
     <nz-header>
+        <div class="header-container">
+            <!-- LOGO -->
             <div class="logo">
                 <a routerLink="/welcome">
-                <img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png" alt="logo" style="width: 100px; height: auto">
+                    <img
-                <h1>PYRO FÊTES</h1>
+                        src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
+                        alt="logo"
+                        style="width: 100px; height: auto"
+                    />
+                    <h1 class="text-amber-300">PYRO FÊTES</h1>
                 </a>
             </div>
+
+            <!-- MENU PRINCIPAL -->
             <ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
                 <li nz-menu-item routerLinkActive="ant-menu-item-selected">
                     <a routerLink="/stock">
@@ -57,13 +65,25 @@
                         <span>Utilisateur</span>
                     </a>
                 </li>
-            <li nz-menu-item><nz-icon nzType="bell" nzTheme="outline" /></li>
-            <li nz-menu-item><nz-icon nzType="user" nzTheme="outline" /></li>
-            <li nz-menu-item><nz-icon nzType="setting" nzTheme="outline" /></li>
             </ul>
+
+            <!-- ICONES À DROITE -->
+            <div class="right-icons">
+                <app-modal-nav nameIcon="bell" name="Notification">
+                    <app-notif-list></app-notif-list>
+                </app-modal-nav>
+                <app-modal-nav nameIcon="user" name="Profil">
+                    <app-profil></app-profil>
+                </app-modal-nav>
+                <app-modal-nav nameIcon="setting" name="Paramètres">
+                    <app-setting-form></app-setting-form>
+                </app-modal-nav>
+            </div>
+        </div>
     </nz-header>
+
     <nz-content>
-        <div class="inner-content">
+        <div class="inner-content overflow-auto">
             <router-outlet></router-outlet>
         </div>
     </nz-content>

src/app/app.ts

@@ -2,12 +2,15 @@ import { Component } from '@angular/core';
 import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
-import {NzFlexDirective} from "ng-zorro-antd/flex";
 import {NzIconDirective} from "ng-zorro-antd/icon";
+import {ModalNav} from "./components/modal-nav/modal-nav";
+import {Profil} from "./components/profil/profil";
+import {NotifList} from "./components/notif-list/notif-list";
+import {SettingForm} from "./components/setting-form/setting-form";
 
 @Component({
   selector: 'app-root',
-    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzFlexDirective, NzIconDirective, RouterLinkActive, RouterLink],
+    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil, NotifList, SettingForm],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })

src/app/components/create-purchaseorder-form/create-purchaseorder-form.html

@@ -0,0 +1,36 @@
+<form [formGroup]="createPurchaseOrderForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="12" nzRequired>
+            Conditions générales de vente
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Conditions générales de vente" formControlName="purchaseConditions">
+        </nz-form-control>
+    </nz-form-item>
+
+    <div class="overflow-x-auto">
+        <nz-table [nzBordered]="true" class="mx-auto text-center">
+            <thead>
+            <tr>
+                <th class="text-center">Produit</th>
+                <th class="text-center">Quantité</th>
+            </tr>
+            </thead>
+            <tbody formArrayName="lines">
+                @for (line of lines.controls.slice(); let i = $index; track i) {
+                    <tr [formGroupName]="i" class="text-center">
+                        <td class="text-center">{{ line.value.name }}</td>
+                        <td class="text-center">
+                            <nz-input-number
+                                    formControlName="quantity"
+                                    [nzMin]="1"
+                                    [nzStep]="1">
+                            </nz-input-number>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </nz-table>
+    </div>
+</form>

src/app/components/create-purchaseorder-form/create-purchaseorder-form.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import {FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule, FormControl} from '@angular/forms';
+import { GetProductDto } from '../../services/api';
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+
+@Component({
+    selector: 'app-create-purchaseorder-form',
+    templateUrl: './create-purchaseorder-form.html',
+    styleUrl: './create-purchaseorder-form.css',
+    imports: [
+        ReactiveFormsModule,
+        NzTableComponent,
+        NzInputNumberComponent,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+    ]
+})
+export class CreatePurchaseorderForm {
+    createPurchaseOrderForm: FormGroup
+
+    constructor(private fb: FormBuilder) {
+        this.createPurchaseOrderForm = this.fb.group({
+            purchaseConditions: new FormControl<string | null>(null, Validators.required),
+            lines: this.fb.array([])
+        });
+    }
+
+    get lines(): FormArray {
+        return this.createPurchaseOrderForm.get('lines') as FormArray;
+    }
+
+    // Ajouter des produits sélectionnés dans le formulaire
+    syncSelectedProducts(selectedProducts: GetProductDto[]) {
+        this.lines.clear();
+        selectedProducts.forEach(p => {
+            this.lines.push(this.fb.group({
+                productId: [p.id],
+                name: [p.name],
+                quantity: [1, [Validators.required, Validators.min(1)]]
+            }));
+        });
+    }
+}

src/app/components/create-quotation-form/create-quotation-form.html

@@ -0,0 +1,46 @@
+<form [formGroup]="createQuotationForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="12" nzRequired>
+            Message
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Message" formControlName="message">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="12" nzRequired>
+            Conditions générales
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Conditions générales de vente" formControlName="purchaseConditions">
+        </nz-form-control>
+    </nz-form-item>
+
+    <div class="overflow-x-auto">
+        <nz-table [nzBordered]="true" class="mx-auto text-center">
+            <thead>
+            <tr>
+                <th class="text-center">Produit</th>
+                <th class="text-center">Quantité</th>
+            </tr>
+            </thead>
+            <tbody formArrayName="lines">
+                @for (line of lines.controls.slice(); let i = $index; track i) {
+                    <tr [formGroupName]="i" class="text-center">
+                        <td class="text-center">{{ line.value.name }}</td>
+                        <td class="text-center">
+                            <nz-input-number
+                                    formControlName="quantity"
+                                    [nzMin]="1"
+                                    [nzStep]="1">
+                            </nz-input-number>
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </nz-table>
+    </div>
+</form>

src/app/components/create-quotation-form/create-quotation-form.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+import {
+    FormArray,
+    FormBuilder,
+    FormControl,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators
+} from "@angular/forms";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {GetProductDto} from "../../services/api";
+
+@Component({
+  selector: 'app-create-quotation-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        NzInputNumberComponent,
+        NzTableComponent,
+        ReactiveFormsModule
+    ],
+  templateUrl: './create-quotation-form.html',
+  styleUrl: './create-quotation-form.css',
+})
+export class CreateQuotationForm {
+    createQuotationForm: FormGroup
+
+    constructor(private fb: FormBuilder) {
+        this.createQuotationForm = this.fb.group({
+            message: new FormControl<string>(null, Validators.required),
+            purchaseConditions: new FormControl<string>(null, Validators.required),
+            lines: this.fb.array([])
+        });
+    }
+
+    get lines(): FormArray {
+        return this.createQuotationForm.get('lines') as FormArray;
+    }
+
+    // Ajouter des produits sélectionnés dans le formulaire
+    syncSelectedProducts(selectedProducts: GetProductDto[]) {
+        this.lines.clear();
+        selectedProducts.forEach(p => {
+            this.lines.push(this.fb.group({
+                productId: [p.id],
+                name: [p.name],
+                quantity: [1, [Validators.required, Validators.min(1)]]
+            }));
+        });
+    }
+}

src/app/components/deliverer-form/deliverer-form.html

@@ -0,0 +1,11 @@
+<form nz-form nzLayout="horizontal" [formGroup]="delivererForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Transporteur
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Transporteur" formControlName="transporter">
+        </nz-form-control>
+    </nz-form-item>
+</form>

src/app/components/deliverer-form/deliverer-form.ts

@@ -0,0 +1,39 @@
+import {Component, effect, input} from '@angular/core';
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {GetDelivererDto} from "../../services/api";
+
+@Component({
+  selector: 'app-deliverer-form',
+    imports: [
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './deliverer-form.html',
+  styleUrl: './deliverer-form.css',
+})
+export class DelivererForm {
+    delivererForm: FormGroup = new FormGroup({
+        transporter: new FormControl<string>(null, [Validators.required])
+    })
+
+    deliverer= input<GetDelivererDto>();
+    constructor() {
+        effect(() => {
+            if (this.deliverer()) {
+                this.delivererForm.patchValue({
+                    transporter: this.deliverer().transporter
+                });
+            }
+        });
+    }
+}

src/app/components/deliverer-table/deliverer-table.css

@@ -0,0 +1,85 @@
+/* Table globale */
+nz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px; /* espace entre les lignes */
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* En-tête */
+nz-table thead tr {
+    background-color: #f5f5f5;
+    text-align: left;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+nz-table thead th {
+    padding: 12px 16px;
+}
+
+/* Lignes du tableau */
+nz-table tbody tr {
+    background-color: #fff;
+    transition: background 0.2s ease;
+}
+
+nz-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+nz-table tbody tr:hover {
+    background-color: #e6f7ff; /* survol */
+}
+
+/* Cellules */
+nz-table tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: #444;
+}
+
+/* Boutons */
+nz-table button[nz-button] {
+    margin-right: 8px;
+}
+
+/* Modals dans le tableau */
+nz-table app-modal {
+    margin-right: 8px;
+}
+
+/* Dates (pour alignement et style) */
+nz-table tbody td p {
+    margin: 0;
+    font-size: 14px;
+    color: #555;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nz-table thead {
+        display: none;
+    }
+    nz-table tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+    nz-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 12px;
+    }
+    nz-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+    }
+}

src/app/components/deliverer-table/deliverer-table.html

@@ -0,0 +1,58 @@
+<nz-table   [nzData]="deliverers()"
+            [nzFrontPagination]="false"
+            [nzLoading]="deliverersLoading()">
+    <thead>
+    <tr class="text-center">
+        <th>Transporteur</th>
+        <th>Bon de livraison</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+    <tbody class="text-center">
+        @for (deliverer of deliverers(); track deliverer.id) {
+            <tr>
+                <td>{{deliverer.transporter}}</td>
+                <td>
+                    <app-modal-button type="link" name="Voir tout les bons de livraison" size="50%">
+                        <div style="max-height: 400px; overflow-y: auto;">
+                            <nz-table [nzData]="deliverers()"
+                                        [nzFrontPagination]="false">
+                                <thead>
+                                <tr class="text-center">
+                                    <th>Numéro de livraison</th>
+                                    <th>Date d'expédition</th>
+                                    <th>Date de livraison estimée</th>
+                                    <th>Date de livraison réelle</th>
+                                </tr>
+                                </thead>
+                                <tbody class="text-center">
+                                    @for (deliveryInfo of deliverer.deliveryNotes; track deliveryInfo.id) {
+                                        <tr>
+                                            <td>{{deliveryInfo.trackingNumber}}</td>
+                                            <td>{{deliveryInfo.expeditionDate | date: 'dd/MM/yyyy'}}</td>
+                                            <td>{{deliveryInfo.estimateDeliveryDate | date: 'dd/MM/yyyy'}}</td>
+                                            <td>{{deliveryInfo.realDeliveryDate | date: 'dd/MM/yyyy'}}</td>
+                                        </tr>
+                                    }
+                                </tbody>
+                            </nz-table>
+                        </div>
+                    </app-modal-button>
+                </td>
+                <td>
+                    <div style="justify-content: center; display: flex">
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(deliverer)"></nz-icon>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliverer.id)" class="text-red-600 cursor-pointer"></nz-icon>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
+
+<div class="hidden">
+    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedDeliverer.id, delivererForm, modalNav)" (cancel)="onModalCancel(modalNav)">
+        <app-deliverer-form #delivererForm [deliverer]="selectedDeliverer"></app-deliverer-form>
+    </app-modal-nav>
+</div>

src/app/components/deliverer-table/deliverer-table.ts

@@ -0,0 +1,109 @@
+import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
+import {ModalNav} from "../modal-nav/modal-nav";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {ModalButton} from "../modal-button/modal-button";
+import {DatePipe} from "@angular/common";
+import {DelivererForm} from "../deliverer-form/deliverer-form";
+import {DeliverersService, GetDelivererDto, GetSupplierDto} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+import {SupplierForm} from "../supplier-form/supplier-form";
+
+@Component({
+  selector: 'app-deliverer-table',
+    imports: [
+        ModalNav,
+        NzDividerComponent,
+        NzIconDirective,
+        NzTableComponent,
+        ModalButton,
+        DatePipe,
+        DelivererForm,
+    ],
+  templateUrl: './deliverer-table.html',
+  styleUrl: './deliverer-table.css',
+})
+
+export class DelivererTable implements OnInit {
+    private deliverersService = inject(DeliverersService);
+    private notificationService = inject(NzNotificationService)
+    deliverers = signal<GetDelivererDto[]>([]);
+    deliverersLoading = signal<boolean>(false);
+    updateDeliverer = viewChild.required<DelivererForm>('delivererForm');
+    modal = viewChild.required<ModalNav>('modalNav');
+
+    async ngOnInit() {
+        await this.fetchDeliverers();
+    }
+
+    async fetchDeliverers() {
+        this.deliverersLoading.set(true)
+
+        try {
+            const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint())
+            this.deliverers.set(deliverers);
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
+        }
+        this.deliverersLoading.set(false)
+    }
+
+    async delete(deliverer:number) {
+        try {
+            await firstValueFrom(this.deliverersService.deleteDelivererEndpoint(deliverer))
+            this.notificationService.success(
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de supprimer la ligne'
+            )
+        }
+        await this.fetchDeliverers();
+    }
+
+    async edit(id: number, updateDelivererComponent: DelivererForm) {
+        if (updateDelivererComponent.delivererForm.invalid) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+            return;
+        }
+
+        try {
+            const deliverers = updateDelivererComponent.delivererForm.getRawValue();
+            await firstValueFrom(this.deliverersService.updateDelivererEndpoint(id, deliverers))
+
+            this.notificationService.success('Success', 'Transporteur modifié')
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Erreur lors de la modification')
+        }
+    }
+
+    selectedDeliverer: GetDelivererDto | null = null;
+    openEditModal(supplier: GetSupplierDto) {
+        this.selectedDeliverer = { ...supplier };
+        this.modal().showModal();
+    }
+
+    async onModalOk(supplierId: number, updateDelivererComponent: DelivererForm, modal: ModalNav) {
+        if (!this.selectedDeliverer) return;
+
+        await this.edit(supplierId, updateDelivererComponent);
+        updateDelivererComponent.delivererForm.reset();
+        modal.isVisible = false;
+        await this.fetchDeliverers();
+    }
+
+    onModalCancel(modal: ModalNav) {
+        modal.isVisible = false;
+    }
+}

src/app/components/deliverery-note-form/deliverery-note-form.html

@@ -0,0 +1,45 @@
+<form nz-form nzLayout="horizontal" [formGroup]="deliveryNoteForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Transporteur
+        </nz-form-label>
+
+        <nz-form-control nzSpan="9" nzErrorTip="Ce champ est requis">
+            <nz-select formControlName="delivererId" [nzPlaceHolder]="'Choisir un transporteur'" nzShowSearch [nzFilterOption]="filter">
+                @for (deliverer of deliverers(); track deliverer.id) {
+                    <nz-option [nzValue]="deliverer.id" [nzLabel]="deliverer.transporter"></nz-option>
+                }
+            </nz-select>
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Date d'expédition
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <nz-date-picker formControlName="expeditionDate"></nz-date-picker>
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Date de livraison estimée
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <nz-date-picker formControlName="estimatedDate"></nz-date-picker>
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Date de livraison réelle
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <nz-date-picker formControlName="realDeliveryDate"></nz-date-picker>
+        </nz-form-control>
+    </nz-form-item>
+</form>

src/app/components/deliverery-note-form/deliverery-note-form.ts

@@ -0,0 +1,74 @@
+import {Component, effect, inject, input, OnInit, signal} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {DeliverersService, GetDelivererDto, GetDeliveryNoteDto} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+
+@Component({
+  selector: 'app-deliverery-note-form',
+    imports: [
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzFormControlComponent,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormDirective,
+        ReactiveFormsModule,
+        NzDatePickerComponent,
+        NzSelectComponent,
+        NzOptionComponent,
+    ],
+  templateUrl: './deliverery-note-form.html',
+  styleUrl: './deliverery-note-form.css',
+})
+export class DelivereryNoteForm implements OnInit {
+    deliveryNoteForm: FormGroup = new FormGroup({
+        trackingNumber: new FormControl<string>(null),
+        delivererId: new FormControl<number>(null,[Validators.required]),
+        expeditionDate: new FormControl(null,[Validators.required]),
+        estimatedDate: new FormControl(null),
+        realDeliveryDate: new FormControl(null)
+    })
+
+    private deliverersService = inject(DeliverersService);
+    private notificationService = inject(NzNotificationService);
+    deliverers = signal<GetDelivererDto[]>([]);
+
+    async fetchDeliverers() {
+        try {
+            const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint());
+            this.deliverers.set(deliverers);
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Impossible de récupérer les transporteurs');
+        }
+    }
+
+    async ngOnInit() {
+        await this.fetchDeliverers();
+    }
+
+    filter(input: string, option: any) {
+        return option.nzLabel.toLowerCase().includes(input.toLowerCase());
+    }
+
+    deliveryNote= input<GetDeliveryNoteDto>();
+    constructor() {
+        effect(() => {
+            if (this.deliveryNote()) {
+                this.deliveryNoteForm.patchValue({
+                    trackingNumber: this.deliveryNote().trackingNumber,
+                    expeditionDate: this.deliveryNote().expeditionDate,
+                    realDeliveryDate: this.deliveryNote().expeditionDate,
+                    estimatedDate: this.deliveryNote().expeditionDate,
+                    delivererId: this.deliveryNote().delivererId
+                });
+            }
+        });
+    }
+
+}

src/app/components/deliverery-note-table/deliverery-note-table.css

@@ -0,0 +1,85 @@
+/* Table globale */
+nz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px; /* espace entre les lignes */
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* En-tête */
+nz-table thead tr {
+    background-color: #f5f5f5;
+    text-align: left;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+nz-table thead th {
+    padding: 12px 16px;
+}
+
+/* Lignes du tableau */
+nz-table tbody tr {
+    background-color: #fff;
+    transition: background 0.2s ease;
+}
+
+nz-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+nz-table tbody tr:hover {
+    background-color: #e6f7ff; /* survol */
+}
+
+/* Cellules */
+nz-table tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: #444;
+}
+
+/* Boutons */
+nz-table button[nz-button] {
+    margin-right: 8px;
+}
+
+/* Modals dans le tableau */
+nz-table app-modal {
+    margin-right: 8px;
+}
+
+/* Dates (pour alignement et style) */
+nz-table tbody td p {
+    margin: 0;
+    font-size: 14px;
+    color: #555;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nz-table thead {
+        display: none;
+    }
+    nz-table tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+    nz-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 12px;
+    }
+    nz-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+    }
+}

src/app/components/deliverery-note-table/deliverery-note-table.html

@@ -0,0 +1,69 @@
+<nz-table  [nzData]="deliveryNotes()"
+           class="mr-7"
+           [nzFrontPagination]="false"
+           [nzLoading]="deliveryNotesLoading()">
+    <thead>
+        <tr class="text-center">
+            <th>Numéro de livraison</th>
+            <th>Transporteur</th>
+            <th>Date d'expédition</th>
+            <th>Date de livraison estimée</th>
+            <th>Date de livraison réelle</th>
+            <th>Produits</th>
+            <th>Action</th>
+        </tr>
+    </thead >
+    <tbody class="text-center">
+        @for (deliveryNote of deliveryNotes(); track deliveryNote.id) {
+            <tr>
+                <td>{{deliveryNote.trackingNumber}}</td>
+                <td>{{deliveryNote.delivererTransporter}}</td>
+                <td>{{deliveryNote.expeditionDate | date: 'dd/MM/yyyy'}}</td>
+                <td>{{deliveryNote.estimateDeliveryDate | date: 'dd/MM/yyyy'}}</td>
+                <td>{{deliveryNote.realDeliveryDate | date: 'dd/MM/yyyy'}}</td>
+                <td>
+                    <app-modal-button type="link" name="Voir les produits" size="40%">
+                        <div style="max-height: 400px; overflow-y: auto;">
+                            <nz-table [nzData]="deliveryNotes()"
+                                      [nzFrontPagination]="false">
+                                <thead>
+                                    <tr class="text-center">
+                                        <th>Réference</th>
+                                        <th>Nom</th>
+                                        <th>Quantité</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="text-center">
+                                    @for (product of deliveryNote.products; track product.productId) {
+                                        <tr>
+                                            <td>{{product.productReference}}</td>
+                                            <td>{{product.productName}}</td>
+                                            <td>{{product.quantity}}</td>
+                                        </tr>
+                                    }
+                                </tbody>
+                            </nz-table>
+                        </div>
+                    </app-modal-button>
+                </td>
+                <td>
+                    <div style="justify-content: center; display: flex">
+                        <nz-icon nzType="check" nzTheme="outline" (click)="validate(deliveryNote.id)" class="cursor-pointer text-green-700"/>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(deliveryNote)"></nz-icon>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliveryNote.id)" class="cursor-pointer text-red-700"/>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="export" nzTheme="outline" (click)="export(deliveryNote.id)" class="cursor-pointer text-green-700"/>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
+
+<div class="hidden">
+    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier un bon de livraison'" (ok)="onModalOk(selectedDeliveryNote.id, deliveryNoteForm, modalNav)" (cancel)="onModalCancel(modalNav)">
+        <app-deliverery-note-form #deliveryNoteForm [deliveryNote]="selectedDeliveryNote"></app-deliverery-note-form>
+    </app-modal-nav>
+</div>

src/app/components/deliverery-note-table/deliverery-note-table.ts

@@ -0,0 +1,178 @@
+import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
+import {DatePipe} from "@angular/common";
+import {ModalButton} from "../modal-button/modal-button";
+import {ModalNav} from "../modal-nav/modal-nav";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {DelivereryNoteForm} from "../deliverery-note-form/deliverery-note-form";
+import {DeliverynotesService, GetDeliveryNoteDto} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+import {format} from "date-fns";
+import {FileService} from "../../services/file.service";
+
+@Component({
+  selector: 'app-deliverery-note-table',
+    imports: [
+        ModalButton,
+        ModalNav,
+        NzDividerComponent,
+        NzIconDirective,
+        NzTableComponent,
+        DelivereryNoteForm,
+        DatePipe,
+    ],
+  templateUrl: './deliverery-note-table.html',
+  styleUrl: './deliverery-note-table.css',
+})
+export class DelivereryNoteTable implements OnInit {
+    private deliveryNotesService = inject(DeliverynotesService);
+    private notificationService = inject(NzNotificationService);
+    private fileService = inject(FileService);
+    deliveryNotes = signal<GetDeliveryNoteDto[]>([]);
+    deliveryNotesLoading = signal<boolean>(false);
+    modal = viewChild.required<ModalNav>('modalNav');
+
+    async ngOnInit() {
+        await this.fetchDeliveryNotes();
+    }
+
+    async fetchDeliveryNotes() {
+        this.deliveryNotesLoading.set(true)
+        try {
+            const deliveryNotes = await firstValueFrom(this.deliveryNotesService.getAllDeliveryNoteEndpoint())
+            this.deliveryNotes.set(deliveryNotes);
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
+        }
+        this.deliveryNotesLoading.set(false)
+    }
+
+    async delete(deliveryNote:number) {
+        this.deliveryNotesLoading.set(true)
+        try {
+            await firstValueFrom(this.deliveryNotesService.deleteDeliveryNoteEndpoint(deliveryNote));
+            this.notificationService.success(
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de supprimer la ligne'
+            )
+        }
+        this.deliveryNotesLoading.set(false)
+        await this.fetchDeliveryNotes();
+    }
+
+    async validate(deliveryNote:number) {
+        this.deliveryNotesLoading.set(true)
+        try {
+            const PatchRealDate = {
+                realDeliveryDate: format(new Date(), 'yyyy-MM-dd')
+            };
+
+            try {
+                await firstValueFrom(this.deliveryNotesService.patchRealDeliveryDateEndpoint(deliveryNote, PatchRealDate))
+
+                this.notificationService.success(
+                    'Success',
+                    'Date actualisée'
+                )
+            } catch (e) {
+                this.notificationService.error(
+                    'Erreur',
+                    'La date à déjà été actualisée'
+                )
+            }
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'actualisation de la date'
+            )
+        }
+        this.deliveryNotesLoading.set(false)
+        await this.fetchDeliveryNotes()
+    }
+
+    async export(deliveryNoteId: number) {
+        this.deliveryNotesLoading.set(true)
+        try {
+            const pdf = await firstValueFrom(
+                this.deliveryNotesService.getDeliveryNotePdfEndpoint(deliveryNoteId, "response")
+            );
+            this.fileService.downloadBlob(pdf)
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de générer un PDF'
+            );
+        }
+        this.deliveryNotesLoading.set(false)
+    }
+
+    async edit(id: number, updateDelivereryNoteComponent: DelivereryNoteForm) {
+        if (updateDelivereryNoteComponent.deliveryNoteForm.invalid) {
+            this.notificationService.error('Erreur', 'Formulaire invalide');
+            return;
+        }
+
+        try {
+            const raw = updateDelivereryNoteComponent.deliveryNoteForm.getRawValue();
+
+            // convertit proprement les dates (string OU Date)
+            const toIso = (val: any) => {
+                if (!val) return null;
+
+                // si c’est déjà un string ISO "yyyy-MM-dd", on renvoie tel quel
+                if (typeof val === 'string' && /^\d{4}-\d{2}-\d{2}/.test(val)) {
+                    return val.substring(0, 10);
+                }
+
+                // sinon on reconstruit une Date
+                const d = new Date(val);
+                if (isNaN(d.getTime())) return null;
+
+                return d.toISOString().substring(0, 10); // yyyy-MM-dd
+            };
+
+            const deliveryNoteDto = {
+                trackingNumber: raw.trackingNumber,
+                delivererId: raw.delivererId,
+                expeditionDate: toIso(raw.expeditionDate),
+                estimatedDate: toIso(raw.estimatedDate),
+                realDeliveryDate: toIso(raw.realDeliveryDate)
+            };
+
+            await firstValueFrom(this.deliveryNotesService.updateDeliveryNoteEndpoint(id, deliveryNoteDto));
+            this.notificationService.success('Success', 'Bon de livraison modifié');
+        } catch (e) {
+            console.error(e);
+            this.notificationService.error('Erreur', 'Erreur lors de la modification');
+        }
+    }
+
+    selectedDeliveryNote: GetDeliveryNoteDto | null = null;
+    openEditModal(deliveryNote: GetDeliveryNoteDto) {
+        this.selectedDeliveryNote = { ...deliveryNote };
+        this.modal().showModal();
+    }
+
+    async onModalOk(id: number, updateDelivereryNoteComponent: DelivereryNoteForm, modal: ModalNav) {
+        if (!this.selectedDeliveryNote) return;
+
+        await this.edit(id, updateDelivereryNoteComponent);
+        updateDelivereryNoteComponent.deliveryNoteForm.reset();
+        modal.isVisible = false;
+        await this.fetchDeliveryNotes();
+    }
+
+    onModalCancel(modal: ModalNav) {
+        modal.isVisible = false;
+    }
+}

src/app/components/delivery-validator/delivery-validator.css

@@ -0,0 +1,114 @@
+/* Conteneur principal centré */
+.livraisons-container {
+    max-width: 650px;
+    margin: 40px 0 0 80px;
+    padding: 25px;
+    background: #f9fafb;
+    border-radius: 16px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    /* Box shadow pour effet superposition */
+    box-shadow:
+            0 4px 8px rgba(0, 0, 0, 0.06),
+            0 8px 20px rgba(0, 0, 0, 0.08),
+            0 16px 40px rgba(0, 0, 0, 0.06);
+}
+
+
+/* Barre de recherche */
+.search-input {
+    width: 100%;
+    padding: 14px 18px;
+    border-radius: 12px;
+    border: 1px solid #ddd;
+    margin-bottom: 20px;
+    font-size: 16px;
+    transition: all 0.3s ease;
+}
+
+.search-input:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 8px rgba(59,130,246,0.2);
+    outline: none;
+}
+
+/* Liste scrollable */
+.livraisons-list {
+    width: 100%;
+    max-height: 350px; /* hauteur max de la liste */
+    overflow-y: auto;  /* scroll vertical activé */
+    padding-right: 10px; /* pour le scrollbar */
+}
+
+/* Scrollbar personnalisée (optionnel) */
+.livraisons-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+.livraisons-list::-webkit-scrollbar-thumb {
+    background: #9ca3af;
+    border-radius: 4px;
+}
+
+.livraisons-list::-webkit-scrollbar-track {
+    background: #f3f4f6;
+}
+
+/* Carte de livraison */
+.livraison-card {
+    background: #ffffff;
+    padding: 20px 22px;
+    border-radius: 14px;
+    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 18px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.livraison-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
+}
+
+/* Infos livraison */
+.livraison-info h3 {
+    font-size: 17px;
+    margin: 0 0 4px;
+    color: #111827;
+}
+
+.livraison-info p {
+    margin: 0;
+    font-size: 14px;
+    color: #6b7280;
+}
+
+/* Bouton valider */
+.validate-btn {
+    padding: 10px 20px;
+    border-radius: 12px;
+    border: none;
+    cursor: pointer;
+    font-weight: 600;
+    background: #3b82f6;
+    color: white;
+    transition: all 0.3s ease;
+}
+
+.validate-btn:hover {
+    background: #2563eb;
+}
+
+.validate-btn.validated {
+    background: #9ca3af;
+    cursor: default;
+    color: #ffffff;
+    opacity: 0.9;
+}

src/app/components/delivery-validator/delivery-validator.html

@@ -0,0 +1,20 @@
+<div class="livraisons-container">
+    <input type="text" placeholder="Rechercher une livraison" class="search-input" (input)="search.set($any($event.target).value)"/>
+
+    <div class="livraisons-list">
+        @for (deliveryItem of filteredLivraisons(); track deliveryItem.id) {
+            <div class="livraison-card">
+                <div class="livraison-info">
+                    <h3>{{ deliveryItem.client }}</h3>
+                    <p class="mr-5">Date d'expédition: {{ deliveryItem.date }}</p>
+                    <p>Produits : {{ deliveryItem.produits }}</p>
+                </div>
+
+                <button nz-button nzType="primary" [nzSize]="size" nzShape="round" (click)="validate(deliveryItem.id)">
+                    <nz-icon nzType="check" />
+                    Valider
+                </button>
+            </div>
+        }
+    </div>
+</div>

src/app/components/delivery-validator/delivery-validator.ts

@@ -0,0 +1,44 @@
+import {Component, computed, signal} from '@angular/core';
+import {NzButtonComponent, NzButtonSize} from "ng-zorro-antd/button";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+
+@Component({
+  selector: 'app-delivery-validator',
+    imports: [
+        NzButtonComponent,
+        NzIconDirective
+    ],
+  templateUrl: './delivery-validator.html',
+  styleUrl: './delivery-validator.css',
+})
+export class DeliveryValidator {
+    size: NzButtonSize = 'large';
+    search = signal('');
+
+    livraisons = signal([
+        { id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
+        { id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
+        { id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 },
+        { id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
+        { id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
+        { id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 },
+        { id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
+        { id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
+        { id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 },
+        { id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
+        { id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
+        { id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 }
+    ]);
+
+    filteredLivraisons = computed(() => {
+        const query = this.search().toLowerCase();
+        return this.livraisons().filter(l =>
+            l.client.toLowerCase().includes(query) ||
+            l.date.includes(query)
+        );
+    });
+
+    validate(id: number) {
+        return
+    }
+}

src/app/components/info-card/info-card.css

@@ -0,0 +1,42 @@
+.card-content {
+    background: #ffffff;
+    padding: 32px 36px;
+    border-radius: 20px;
+    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+    width: 350px;
+    min-height: 180px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card-content:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16);
+}
+
+/* Ligne du haut : icône ET nombre */
+.card-top {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+/* Icône à gauche (plus grande) */
+.card-top nz-icon {
+    font-size: 50px;
+}
+
+/* Nombre à droite de l'icône (plus grand) */
+.card-number {
+    font-size: 48px;
+    font-weight: 700;
+    margin: 0;
+    color: #111827;
+}
+
+/* Texte en dessous (plus lisible) */
+.card-text {
+    margin-top: 18px;
+    font-size: 18px;
+    line-height: 1.4;
+    color: #4b5563;
+}

src/app/components/info-card/info-card.html

@@ -0,0 +1,7 @@
+<div class="card-content">
+    <div class="card-top">
+        <nz-icon [ngStyle]="{ 'color': color() }" [nzType]="icon()" nzTheme="outline"></nz-icon>
+        <p class="card-number">{{value()}}</p>
+    </div>
+    <p class="card-text">{{description()}}</p>
+</div>

src/app/components/info-card/info-card.ts

@@ -0,0 +1,19 @@
+import {Component, input} from '@angular/core';
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NgStyle} from "@angular/common";
+
+@Component({
+  selector: 'app-info-card',
+    imports: [
+        NzIconDirective,
+        NgStyle
+    ],
+  templateUrl: './info-card.html',
+  styleUrl: './info-card.css',
+})
+export class InfoCard {
+    icon = input.required<string>()
+    value = input.required<string>()
+    description = input.required<string>()
+    color = input.required<string>()
+}

src/app/components/info-table/info-table.css

@@ -0,0 +1,72 @@
+.documents-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; /* contenu aligné à gauche */
+    gap: 16px; /* espace entre le titre et la liste */
+    margin: 40px 6%;
+}
+
+/* Titre */
+.documents-section h1 {
+    font-size: 24px;
+    font-weight: 700;
+    color: #111827;
+    margin: 0; /* on gère l’espace avec le gap */
+    letter-spacing: 0.5px;
+    text-transform: capitalize;
+    border-left: 4px solid #3b82f6;
+    padding-left: 12px;
+}
+
+/* Liste de documents scrollable */
+.content {
+    width: 1000px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding: 30px 15px;
+    border-radius: 20px;
+    box-shadow:
+            0 4px 8px rgba(0, 0, 0, 0.06),
+            0 8px 20px rgba(0, 0, 0, 0.08),
+            0 16px 40px rgba(0, 0, 0, 0.06);
+    max-height: 390px;
+    overflow-y: auto;
+}
+
+/* Chaque carte */
+.content > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 120px;
+    height: 140px;
+    padding: 12px;
+    background: #ffffff;
+    border-radius: 14px;
+    cursor: pointer;
+    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
+    transition: all 0.2s ease;
+    text-align: center;
+}
+
+.content > div:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
+}
+
+.content img {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 10px;
+    object-fit: contain;
+}
+
+.content p {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #111827;
+    word-break: break-word;
+}

src/app/components/info-table/info-table.html

@@ -0,0 +1,11 @@
+<div class="documents-section">
+    <h1>Documents récents</h1>
+    <div class="content">
+        @for (doc of purchaseOrder(); track doc.id) {
+            <div>
+                <img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" alt="pdf">
+                <p>{{ doc.name }}</p>
+            </div>
+        }
+    </div>
+</div>

src/app/components/info-table/info-table.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+interface PurchaseOrder {
+    id: number;
+    name: string;
+}
+
+@Component({
+    selector: 'app-info-table',
+    templateUrl: './info-table.html',
+    styleUrls: ['./info-table.css'],
+})
+export class InfoTable {
+    docs: PurchaseOrder[] = [
+        { id: 1, name: 'Bon de commande'},
+        { id: 2, name: 'Bon de commande'},
+        { id: 3, name: 'Bon de commande'},
+        { id: 1, name: 'Bon de commande'},
+        { id: 2, name: 'Bon de commande'},
+        { id: 3, name: 'Bon de commande'},
+        { id: 1, name: 'Bon de commande'},
+        { id: 2, name: 'Bon de commande'},
+        { id: 3, name: 'Bon de commande'},
+        { id: 1, name: 'Bon de commande'},
+        { id: 2, name: 'Bon de commande'},
+        { id: 3, name: 'Bon de commande'},
+        { id: 1, name: 'Bon de commande'},
+        { id: 2, name: 'Bon de commande'},
+        { id: 3, name: 'Bon de commande'},
+        { id: 1, name: 'Bon de commande'},
+        { id: 2, name: 'Bon de commande'},
+        { id: 3, name: 'Bon de commande'},
+        { id: 1, name: 'Bon de commande'},
+        { id: 2, name: 'Bon de commande'},
+        { id: 3, name: 'Bon de commande'},
+        { id: 1, name: 'Bon de commande'},
+        { id: 2, name: 'Bon de commande'},
+        { id: 3, name: 'Bon de commande'},
+    ];
+
+    purchaseOrder(): PurchaseOrder[] {
+        return this.docs;
+    }
+}

src/app/components/modal-button/modal-button.html

@@ -0,0 +1,17 @@
+<button nz-button [nzType]="type()" (click)="showModal()">{{name()}}</button>
+
+<ng-template #modalContent>
+    <ng-content></ng-content>
+</ng-template>
+
+<nz-modal
+        [(nzVisible)]="isVisible"
+        [nzTitle]="name()"
+        (nzOnCancel)="handleCancel()"
+        (nzOnOk)="handleOk()"
+        [nzOkLoading]="isOkLoading"
+        [nzContent]="modalContent"
+        [nzWidth]="size()"
+>
+</nz-modal>
+

src/app/components/modal-button/modal-button.ts

@@ -0,0 +1,43 @@
+import {Component, input, Input, output} from '@angular/core';
+import {NzModalComponent} from "ng-zorro-antd/modal";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+
+@Component({
+    selector: 'app-modal-button',
+    imports: [
+        NzModalComponent,
+        NzButtonComponent,
+    ],
+    templateUrl: './modal-button.html',
+    styleUrl: './modal-button.css',
+})
+
+export class ModalButton {
+    size = input<string>();
+    name = input.required<string>()
+    type = input<"primary" | "default" | "dashed" | "link" | "text">()
+
+    ok = output<void>();
+    cancel = output<void>();
+
+    isVisible = false;
+    isOkLoading = false;
+
+    showModal(): void {
+        this.isVisible = true;
+    }
+
+    handleOk(): void {
+        this.isOkLoading = true;
+        setTimeout(() => {
+            this.ok.emit();
+            this.isVisible = false;
+            this.isOkLoading = false;
+        }, 1000);
+    }
+
+    handleCancel(): void {
+        this.cancel.emit();
+        this.isVisible = false;
+    }
+}

src/app/components/modal-nav/modal-nav.html

@@ -0,0 +1,18 @@
+<div (click)="showModal()">
+    <nz-icon [nzType]="nameIcon()" nzTheme="outline"></nz-icon>
+</div>
+
+<ng-template #modalContent>
+    <ng-content></ng-content>
+</ng-template>
+
+<nz-modal
+        [(nzVisible)]="isVisible"
+        [nzTitle]="name()"
+        (nzOnCancel)="handleCancel()"
+        (nzOnOk)="handleOk()"
+        [nzOkLoading]="isOkLoading"
+        [nzContent]="modalContent"
+>
+</nz-modal>
+

src/app/components/modal-nav/modal-nav.ts

@@ -0,0 +1,37 @@
+import {Component, Input, input, output} from '@angular/core';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import {NzIconDirective} from "ng-zorro-antd/icon";
+
+@Component({
+    selector: 'app-modal-nav',
+    imports: [NzButtonModule, NzModalModule, NzIconDirective],
+    templateUrl: 'modal-nav.html',
+    styleUrls: ['./modal-nav.css'],
+})
+export class ModalNav {
+    nameIcon = input.required<string>()
+    name = input.required<string>()
+    ok = output<void>();
+    cancel = output<void>();
+    isVisible = false;
+    isOkLoading = false;
+
+    showModal(): void {
+        this.isVisible = true;
+    }
+
+    handleOk(): void {
+        this.isOkLoading = true;
+        setTimeout(() => {
+            this.ok.emit();
+            this.isOkLoading = false;
+        }, 1000);
+    }
+
+    handleCancel(): void {
+        this.isVisible = false;
+        this.cancel.emit();
+
+    }
+}

src/app/components/notif-list/notif-list.html

@@ -0,0 +1,34 @@
+<div class="ml-90">
+    <p class="cursor-pointer text-red-700" (click)="delete()">
+        <nz-icon nzType="delete" nzTheme="outline"/> Tout supprimer
+    </p>
+</div>
+
+<nz-list nzItemLayout="vertical" class="max-w-xl mx-auto max-h-[400px] overflow-y-auto border border-gray-200 rounded-lg">
+    @for (item of notifList; track item) {
+        <nz-list-item class="flex items-start p-4 border-b border-gray-200">
+
+            <nz-list-item-meta class="flex-1">
+                <nz-list-item-meta-avatar>
+                    <img src="https://cdn-icons-png.flaticon.com/512/1/1176.png" alt="info" class="w-10 h-10 rounded-full mt-10 mr-2 w-10">
+                </nz-list-item-meta-avatar>
+
+                <nz-list-item-meta-title>
+                    <p class="font-semibold mb-1">{{item.title}}</p>
+                    <p class="text-gray-500 mb-1">{{item.author}}</p>
+                </nz-list-item-meta-title>
+
+                <nz-list-item-meta-description>
+                    <p>{{item.content}}</p>
+                </nz-list-item-meta-description>
+            </nz-list-item-meta>
+
+            <nz-list-item-extra>
+                <img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
+                     alt="logo"
+                     class="w-35 object-contain mt-4">
+            </nz-list-item-extra>
+
+        </nz-list-item>
+    }
+</nz-list>

src/app/components/notif-list/notif-list.ts

@@ -0,0 +1,92 @@
+import { Component } from '@angular/core';
+import {NotifInfo} from "../../interfaces/notif.interface";
+import {
+    NzListComponent,
+    NzListItemComponent,
+    NzListItemExtraComponent, NzListItemMetaAvatarComponent,
+    NzListItemMetaComponent, NzListItemMetaDescriptionComponent, NzListItemMetaTitleComponent
+} from "ng-zorro-antd/list";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+
+@Component({
+  selector: 'app-notif-list',
+    imports: [
+        NzListComponent,
+        NzListItemComponent,
+        NzListItemMetaComponent,
+        NzListItemExtraComponent,
+        NzListItemMetaDescriptionComponent,
+        NzListItemMetaAvatarComponent,
+        NzListItemMetaTitleComponent,
+        NzIconDirective
+    ],
+  templateUrl: './notif-list.html',
+  styleUrl: './notif-list.css',
+})
+export class NotifList {
+    notifList: NotifInfo[] = [
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        },
+        {
+            author: 'Admin',
+            title: 'Information system',
+            content: 'L\'utilisateur à bien été crée.'
+        }
+    ];
+
+    delete() {
+        this.notifList = [];
+    }
+
+    addContent(author: string, title: string, content: string) {
+        this.notifList.push({ author, title, content });
+    }
+}

src/app/components/price-form/price-form.html

@@ -0,0 +1,13 @@
+<form nz-form nzLayout="horizontal" [formGroup]="priceForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Prix
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input type="number" placeholder="€€€" formControlName="price">
+        </nz-form-control>
+    </nz-form-item>
+</form>
+
+

src/app/components/price-form/price-form.ts

@@ -0,0 +1,40 @@
+import {Component, effect, input} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {GetPriceDto, GetSupplierDto} from "../../services/api";
+
+@Component({
+  selector: 'app-price-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './price-form.html',
+  styleUrl: './price-form.css',
+})
+export class PriceForm {
+    priceForm: FormGroup = new FormGroup({
+        price: new FormControl<string>(null, [Validators.required]),
+    })
+
+    price= input<GetPriceDto>();
+    constructor() {
+        effect(() => {
+            if (this.price()) {
+                this.priceForm.patchValue({
+                    price: this.price().sellingPrice
+                });
+            }
+        });
+    }
+}

src/app/components/product-form/product-form.html

@@ -0,0 +1,21 @@
+<form nz-form nzLayout="horizontal" [formGroup]="productForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Prix
+        </nz-form-label>
+
+        <nz-form-control nzSpan="8" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prix" formControlName="price">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Quantité
+        </nz-form-label>
+
+        <nz-form-control nzSpan="8" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Quantité" formControlName="quantity">
+        </nz-form-control>
+    </nz-form-item>
+</form>

src/app/components/product-form/product-form.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+
+@Component({
+  selector: 'app-product-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './product-form.html',
+  styleUrl: './product-form.css',
+})
+export class ProductForm {
+    productForm: FormGroup = new FormGroup({
+        price: new FormControl<string>(null, [Validators.required]),
+        quantity: new FormControl<string>(null, [Validators.required])
+    })
+}

src/app/components/product-table/product-table.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-product-table',
+  imports: [],
+  templateUrl: './product-table.html',
+  styleUrl: './product-table.css',
+})
+export class ProductTable {}

src/app/components/profil-form/profil-form.html

@@ -0,0 +1,44 @@
+<form nz-form nzLayout="horizontal" [formGroup]="profilForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Prénom
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prénom" formControlName="name">
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Email
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Email" formControlName="email">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Fonction
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <nz-select formControlName="fonction" [nzPlaceHolder]="'Choisir une fonction'">
+                <nz-option nzLabel="Admin" nzValue="Admin"></nz-option>
+                <nz-option nzLabel="Visiteur" nzValue="Visiteur"></nz-option>
+                <nz-option nzLabel="Partenaire" nzValue="Partenaire"></nz-option>
+            </nz-select>
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Mot de passe
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input type="password" placeholder="Nouveau mot de passe" formControlName="password">
+        </nz-form-control>
+    </nz-form-item>
+</form>

src/app/components/profil-form/profil-form.ts

@@ -0,0 +1,49 @@
+import {Component, effect, input} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {GetUserDto} from "../../services/api";
+
+@Component({
+  selector: 'app-profil-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule,
+        NzSelectComponent,
+        NzOptionComponent
+    ],
+  templateUrl: './profil-form.html',
+  styleUrl: './profil-form.css',
+})
+export class ProfilForm {
+    profilForm: FormGroup = new FormGroup({
+        name: new FormControl<string>(null, [Validators.required]),
+        email: new FormControl<string>(null, [Validators.required]),
+        fonction: new FormControl<string>(null, [Validators.required]),
+        password: new FormControl<string>(null, [Validators.required])
+    })
+
+    user = input<GetUserDto>();
+    constructor() {
+        effect(() => {
+            if (this.user()) {
+                this.profilForm.patchValue({
+                    name: this.user().name,
+                    email: this.user().email,
+                    fonction: this.user().fonction,
+                    password: this.user().password
+                });
+            }
+        });
+    }
+}

src/app/components/profil/profil.css

@@ -0,0 +1,12 @@
+.fontProfil {
+    font-family: "Arial", cursive;
+    text-shadow: 2px 2px #8C731A, -2px -2px #8C731A;
+    font-weight: bold;
+}
+
+.festive2 {
+    font-family: "Comic Sans MS", cursive;
+    color: #001529;
+    font-weight: bold;
+}
+

src/app/components/profil/profil.html

@@ -0,0 +1,15 @@
+<div class="ml-110 cursor-pointer">
+    <app-modal-nav nameIcon="edit" name="Modification du profil">
+        <app-profil-form [user]=""></app-profil-form>
+    </app-modal-nav>
+</div>
+
+<div class="mx-auto flex items-center justify-center w-30 h-30 rounded-full bg-blue-900 text-white text-6xl fontProfil">
+    {{ getInitial(data.name) }}
+</div>
+
+<div class="mt-6">
+    <p class="text-3xl festive2 mx-auto flex items-center justify-center">{{data.name}}</p>
+    <p class="text-xl festive2 mt-0 flex items-center justify-center">{{data.email}}</p>
+    <p class="text-xl festive2 mt-0 flex items-center justify-center">{{data.fonction}}</p>
+</div>

src/app/components/profil/profil.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import {UserInfo} from "../../interfaces/user.interface";
+import {ProfilForm} from "../profil-form/profil-form";
+import {ModalNav} from "../modal-nav/modal-nav";
+
+@Component({
+  selector: 'app-profil',
+    imports: [
+        ProfilForm,
+        ModalNav
+    ],
+  templateUrl: './profil.html',
+  styleUrl: './profil.css',
+})
+export class Profil {
+    data: UserInfo =
+    {
+        name: 'Mathys Sanchez Vendé',
+        email: 'mathys.sanchez@vende.fr',
+        fonction: 'admin',
+    };
+
+    getInitial(name: string): string {
+        if (!name || name.trim() === '') return '?';
+        return name[0].toUpperCase();
+    }
+}

src/app/components/purchase-order-form/purchase-order-form.html

@@ -0,0 +1,11 @@
+<form nz-form nzLayout="horizontal" [formGroup]="purchaseOrderForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="12" nzRequired>
+            Conditions générales de vente
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Conditions générales de vente" formControlName="purchaseConditions">
+        </nz-form-control>
+    </nz-form-item>
+</form>

src/app/components/purchase-order-form/purchase-order-form.ts

@@ -0,0 +1,40 @@
+import {Component, effect, input} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {GetPurchaseOrderDto} from "../../services/api";
+
+@Component({
+  selector: 'app-purchase-order-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './purchase-order-form.html',
+  styleUrl: './purchase-order-form.css',
+})
+export class PurchaseOrderForm {
+    purchaseOrderForm: FormGroup = new FormGroup({
+        purchaseConditions: new FormControl<string>(null,[Validators.required])
+    })
+
+    purchaseOrder= input<GetPurchaseOrderDto>();
+    constructor() {
+        effect(() => {
+            if (this.purchaseOrder()) {
+                this.purchaseOrderForm.patchValue({
+                    purchaseConditions: this.purchaseOrder().purchaseConditions,
+                });
+            }
+        });
+    }
+}

src/app/components/purchase-order-table/purchase-order-table.css

@@ -0,0 +1,85 @@
+/* Table globale */
+nz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px; /* espace entre les lignes */
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* En-tête */
+nz-table thead tr {
+    background-color: #f5f5f5;
+    text-align: left;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+nz-table thead th {
+    padding: 12px 16px;
+}
+
+/* Lignes du tableau */
+nz-table tbody tr {
+    background-color: #fff;
+    transition: background 0.2s ease;
+}
+
+nz-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+nz-table tbody tr:hover {
+    background-color: #e6f7ff; /* survol */
+}
+
+/* Cellules */
+nz-table tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: #444;
+}
+
+/* Boutons */
+nz-table button[nz-button] {
+    margin-right: 8px;
+}
+
+/* Modals dans le tableau */
+nz-table app-modal {
+    margin-right: 8px;
+}
+
+/* Dates (pour alignement et style) */
+nz-table tbody td p {
+    margin: 0;
+    font-size: 14px;
+    color: #555;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nz-table thead {
+        display: none;
+    }
+    nz-table tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+    nz-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 12px;
+    }
+    nz-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+    }
+}

src/app/components/purchase-order-table/purchase-order-table.html

@@ -0,0 +1,83 @@
+<nz-table [nzData]="purchaseOrders()"
+          [nzLoading]="purchaseOrdersLoading()"
+          [nzFrontPagination]="false"
+          class="mr-7">
+    <thead>
+    <tr class="text-center">
+        <th>Numéro</th>
+        <th>Conditions de vente</th>
+        <th>Fournisseur</th>
+        <th>Produits</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+    <tbody class="text-center">
+        @for (purchaseOrder of purchaseOrders(); track purchaseOrder.id) {
+            <tr>
+                <td>{{ purchaseOrder.id }}</td>
+                <td>{{purchaseOrder.purchaseConditions}}</td>
+                <td>Fournisseur ???</td>
+                <td>
+                    <app-modal-button type="link" name="Voir les produits" size="45%">
+                        <div style="max-height: 400px; overflow-y: auto;">
+                            <nz-table [nzData]="purchaseOrders()"
+                                      [nzFrontPagination]="false">
+                                <thead>
+                                <tr class="text-center">
+                                    <th>Nom</th>
+                                    <th>Reférence</th>
+                                    <th>Prix</th>
+                                    <th>Quantité</th>
+                                    <th>Action</th>
+                                </tr>
+                                </thead>
+                                <tbody class="text-center">
+                                    @for (product of purchaseOrder.products; track product.productId) {
+                                        <tr>
+                                            <td>{{product.productName}}</td>
+                                            <td>{{product.productReferences}}</td>
+                                            <td>Prix €€€€</td>
+                                            <td>{{product.quantity}}</td>
+                                            <td>
+                                                <div style="justify-content: center; display: flex">
+                                                    <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditQuantityModal(product)"></nz-icon>
+                                                    <nz-divider nzType="vertical"></nz-divider>
+                                                    <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="deleteProduct(product.productId, purchaseOrder.id)"/>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    }
+                                </tbody>
+                            </nz-table>
+                        </div>
+                    </app-modal-button>
+                </td>
+                <td>
+                    <div style="justify-content: center; display: flex">
+                        <nz-icon nzType="plus-circle" nzTheme="outline" class="cursor-pointer text-green-700"/>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(purchaseOrder)"></nz-icon>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(purchaseOrder.id)" class="cursor-pointer text-red-700"/>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="export" nzTheme="outline" (click)="export(purchaseOrder.id)" class="cursor-pointer text-green-700"/>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="interaction" nzTheme="outline" (click)="transfer()" class="cursor-pointer text-blue-700"/>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
+
+<div class="hidden">
+    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modification des conditions de vente'" (ok)="onModalOk(selectedPurchaseOrder.id, purchaseOrderForm, modalNav)" (cancel)="onModalCancel(modalNav)">
+        <app-purchase-order-form #purchaseOrderForm [purchaseOrder]="selectedPurchaseOrder"></app-purchase-order-form>
+    </app-modal-nav>
+</div>
+
+<div class="hidden">
+    <app-modal-nav #modalQuantity nameIcon="edit" [name]="'Modification de la quantité'" (ok)="onModalQuantityOk(selectedQuantity.productId, selectedQuantity.purchaseOrderId, quantityForm, modalQuantity)" (cancel)="onModalCancel(modalQuantity)">
+        <app-quantity-form #quantityForm [quantity]="selectedQuantity"></app-quantity-form>
+    </app-modal-nav>
+</div>

src/app/components/purchase-order-table/purchase-order-table.ts

@@ -0,0 +1,189 @@
+import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
+import {ModalNav} from "../modal-nav/modal-nav";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {PurchaseOrderForm} from "../purchase-order-form/purchase-order-form";
+import {ModalButton} from "../modal-button/modal-button";
+import {
+    GetPurchaseOrderDto,
+    GetPurchaseProductDto,
+    PurchaseordersService,
+    PurchaseproductsService
+} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+import {FileService} from "../../services/file.service";
+import {QuantityForm} from "../quantity-form/quantity-form";
+
+@Component({
+  selector: 'app-purchase-order-table',
+    imports: [
+        ModalNav,
+        NzDividerComponent,
+        NzIconDirective,
+        NzTableComponent,
+        PurchaseOrderForm,
+        ModalButton,
+        QuantityForm,
+    ],
+  templateUrl: './purchase-order-table.html',
+  styleUrl: './purchase-order-table.css',
+})
+export class PurchaseOrderTable implements OnInit {
+    private purchaseOrdersService = inject(PurchaseordersService);
+    private notificationService = inject(NzNotificationService);
+    private fileService = inject(FileService);
+    private purchaseProductService = inject(PurchaseproductsService)
+    purchaseOrders = signal<GetPurchaseOrderDto[]>([]);
+    purchaseOrdersLoading = signal<boolean>(false);
+    modal = viewChild.required<ModalNav>('modalNav');
+    modalQuantity = viewChild.required<ModalNav>('modalQuantity');
+
+    async ngOnInit() {
+        await this.fetchPurchaseOrder();
+    }
+
+    async fetchPurchaseOrder() {
+        this.purchaseOrdersLoading.set(true)
+
+        try {
+            const purchaseOrders = await firstValueFrom(this.purchaseOrdersService.getAllPurchaseOrderEndpoint())
+            this.purchaseOrders.set(purchaseOrders);
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
+        }
+        this.purchaseOrdersLoading.set(false)
+    }
+
+    async delete(purchaseOrderId:number) {
+        this.purchaseOrdersLoading.set(true)
+        try {
+            await firstValueFrom(this.purchaseOrdersService.deletePurchaseOrderEndpoint(purchaseOrderId))
+            this.notificationService.success(
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de supprimer la ligne'
+            )
+        }
+        this.purchaseOrdersLoading.set(false)
+        await this.fetchPurchaseOrder();
+    }
+
+    async export(purchaseOrderId: number){
+        this.purchaseOrdersLoading.set(true)
+        try {
+            const pdf = await firstValueFrom(
+                this.purchaseOrdersService.getPurchaseOrderPdfEndpoint(purchaseOrderId, "response")
+            );
+            this.fileService.downloadBlob(pdf)
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de générer un PDF'
+            );
+        }
+        this.purchaseOrdersLoading.set(false)
+    }
+
+    transfer() {
+        return
+    }
+
+    async edit(id: number, updatePurchaseOrderComponent: PurchaseOrderForm) {
+        if (updatePurchaseOrderComponent.purchaseOrderForm.invalid) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+            return;
+        }
+
+        try {
+            const purchaseOrders = updatePurchaseOrderComponent.purchaseOrderForm.getRawValue();
+            await firstValueFrom(this.purchaseOrdersService.patchPurchaseOrderPurchaseConditionsEndpoint(id, purchaseOrders))
+
+            this.notificationService.success('Success', 'Bon de commande modifié')
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Erreur lors de la modification')
+        }
+    }
+
+    async deleteProduct(productId: number, purchaseOrderId: number) {
+        this.purchaseOrdersLoading.set(true)
+        try {
+            await firstValueFrom(this.purchaseProductService.deletePurchaseProductEndpoint(productId, purchaseOrderId))
+            this.notificationService.success(
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de supprimer la ligne'
+            )
+        }
+        this.purchaseOrdersLoading.set(false)
+        await this.fetchPurchaseOrder();
+    }
+
+    async editQuantity(productId: number, purchaseOrderId: number, updateQuantityComponent: QuantityForm) {
+        if (updateQuantityComponent.quantityForm.invalid) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+            return;
+        }
+
+        try {
+            const quantity = updateQuantityComponent.quantityForm.getRawValue();
+            await firstValueFrom(this.purchaseProductService.patchPurchaseProductQuantityEndpoint(productId, purchaseOrderId, quantity))
+
+            this.notificationService.success('Success', 'Quantité modifiée')
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Erreur lors de la modification')
+        }
+    }
+
+    selectedPurchaseOrder: GetPurchaseOrderDto | null = null;
+    openEditModal(purchaseOrder: GetPurchaseOrderDto) {
+        this.selectedPurchaseOrder = { ...purchaseOrder };
+        this.modal().showModal();
+    }
+
+    async onModalOk(id: number, updatePurchaseOrderComponent: PurchaseOrderForm, modal: ModalNav) {
+        if (!this.selectedPurchaseOrder) return;
+
+        await this.edit(id, updatePurchaseOrderComponent);
+        updatePurchaseOrderComponent.purchaseOrderForm.reset();
+        modal.isVisible = false;
+        await this.fetchPurchaseOrder();
+    }
+
+    onModalCancel(modal: ModalNav) {
+        modal.isVisible = false;
+    }
+
+    selectedQuantity: GetPurchaseProductDto | null = null;
+    openEditQuantityModal(quantity: GetPurchaseProductDto) {
+        this.selectedQuantity = { ...quantity };
+        this.modalQuantity().showModal();
+    }
+
+    async onModalQuantityOk(productId: number, purchaseOrderId: number, updateQuantityComponent: QuantityForm, modal: ModalNav) {
+        if (!this.selectedQuantity) return;
+
+        await this.editQuantity(productId, purchaseOrderId, updateQuantityComponent);
+        updateQuantityComponent.quantityForm.reset();
+        modal.isVisible = false;
+        await this.fetchPurchaseOrder();
+    }
+}

src/app/components/quantity-form/quantity-form.html

@@ -0,0 +1,11 @@
+<form nz-form nzLayout="horizontal" [formGroup]="quantityForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Quantité
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input type="number" placeholder="0" formControlName="quantity">
+        </nz-form-control>
+    </nz-form-item>
+</form>

src/app/components/quantity-form/quantity-form.ts

@@ -0,0 +1,40 @@
+import {Component, effect, input} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {GetDelivererDto, GetPurchaseProductDto} from "../../services/api";
+
+@Component({
+  selector: 'app-quantity-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './quantity-form.html',
+  styleUrl: './quantity-form.css',
+})
+export class QuantityForm {
+    quantityForm: FormGroup = new FormGroup({
+        quantity: new FormControl<number>(null, [Validators.required])
+    })
+
+    quantity= input<GetPurchaseProductDto>();
+    constructor() {
+        effect(() => {
+            if (this.quantity()) {
+                this.quantityForm.patchValue({
+                    quantity: this.quantity().quantity
+                });
+            }
+        });
+    }
+}

src/app/components/quotation-form/quotation-form.html

@@ -0,0 +1,22 @@
+<form nz-form nzLayout="horizontal" [formGroup]="quotationForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Message du devis
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input placeholder="Message du devis" formControlName="message">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Conditions de vente
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input placeholder="Conditions de vente" formControlName="conditionsSale">
+        </nz-form-control>
+    </nz-form-item>
+</form>
+

src/app/components/quotation-form/quotation-form.ts

@@ -0,0 +1,41 @@
+import {Component, effect, input} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {GetQuotationDto} from "../../services/api";
+
+@Component({
+    selector: 'app-quotation-form',
+    imports: [
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzFormControlComponent,
+        NzInputDirective,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormDirective,
+        ReactiveFormsModule
+    ],
+    templateUrl: './quotation-form.html',
+    styleUrl: './quotation-form.css',
+})
+export class QuotationForm {
+    quotationForm: FormGroup = new FormGroup({
+        message: new FormControl<string>(null, [Validators.required]),
+        conditionsSale: new FormControl<string>(null, [Validators.required]),
+    })
+
+    quotation= input<GetQuotationDto>();
+    constructor() {
+        effect(() => {
+            if (this.quotation()) {
+                this.quotationForm.patchValue({
+                    message: this.quotation().message,
+                    conditionsSale: this.quotation().conditionsSale,
+                });
+            }
+        });
+    }
+}

src/app/components/quotation-table/quotation-table.css

@@ -0,0 +1,85 @@
+/* Table globale */
+nz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px; /* espace entre les lignes */
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* En-tête */
+nz-table thead tr {
+    background-color: #f5f5f5;
+    text-align: left;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+nz-table thead th {
+    padding: 12px 16px;
+}
+
+/* Lignes du tableau */
+nz-table tbody tr {
+    background-color: #fff;
+    transition: background 0.2s ease;
+}
+
+nz-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+nz-table tbody tr:hover {
+    background-color: #e6f7ff; /* survol */
+}
+
+/* Cellules */
+nz-table tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: #444;
+}
+
+/* Boutons */
+nz-table button[nz-button] {
+    margin-right: 8px;
+}
+
+/* Modals dans le tableau */
+nz-table app-modal {
+    margin-right: 8px;
+}
+
+/* Dates (pour alignement et style) */
+nz-table tbody td p {
+    margin: 0;
+    font-size: 14px;
+    color: #555;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nz-table thead {
+        display: none;
+    }
+    nz-table tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+    nz-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 12px;
+    }
+    nz-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+    }
+}

src/app/components/quotation-table/quotation-table.html

@@ -0,0 +1,81 @@
+<nz-table class="mr-7"
+          [nzData]="quotations()"
+          [nzLoading]="quotationsLoading()"
+          [nzFrontPagination]="false"
+>
+    <thead>
+    <tr class="text-center">
+        <th>Numéro de Devis</th>
+        <th>Message</th>
+        <th>Conditions de vente</th>
+        <th>Produit</th>
+        <th>Action</th>
+    </tr>
+    </thead >
+    <tbody class="text-center">
+        @for (quotation of quotations(); track quotation.id) {
+            <tr>
+                <td>{{quotation.id}}</td>
+                <td>{{quotation.message}}</td>
+                <td>{{quotation.conditionsSale}}</td>
+                <td>
+                    <app-modal-button type="link" name="Voir les produits" size="45%">
+                        <div style="max-height: 400px; overflow-y: auto;">
+                            <nz-table>
+                                <thead>
+                                <tr class="text-center">
+                                    <th>Réference</th>
+                                    <th>Nom</th>
+                                    <th>Prix</th>
+                                    <th>Quantité</th>
+                                    <th>Action</th>
+                                </tr>
+                                </thead>
+                                <tbody class="text-center">
+                                    @for (product of quotation.products; track product.productId) {
+                                        <tr>
+                                            <td>{{ product.productReferences }}</td>
+                                            <td>{{ product.productName }}</td>
+                                            <td>Price ???</td>
+                                            <td>{{ product.quantity }}</td>
+                                            <td>
+                                                <div style="justify-content: center; display: flex">
+                                                    <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditQuantityModal(product)"></nz-icon>
+                                                    <nz-divider nzType="vertical"></nz-divider>
+                                                    <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="deleteProduct(product.productId, quotation.id)"/>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    }
+                                </tbody>
+                            </nz-table>
+                        </div>
+                    </app-modal-button>
+                </td>
+                <td>
+                    <div style="justify-content: center; display: flex">
+                        <nz-icon nzType="plus-circle" nzTheme="outline" class="cursor-pointer text-green-700" />
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(quotation)"></nz-icon>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="delete(quotation.id)"/>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="export" (click)="export(quotation.id)" nzTheme="outline" class="cursor-pointer text-green-700"/>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
+
+<div class="hidden">
+    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modification du devis'" (ok)="onModalOk(selectedQuotation.id, quotationForm, modalNav)" (cancel)="onModalCancel(modalNav)">
+        <app-quotation-form #quotationForm [quotation]="selectedQuotation"></app-quotation-form>
+    </app-modal-nav>
+</div>
+
+<div class="hidden">
+    <app-modal-nav #modalQuantity nameIcon="edit" [name]="'Modification de la quantité'" (ok)="onModalQuantityOk(selectedQuantity.productId, selectedQuantity.quotationId, quantityForm, modalQuantity)" (cancel)="onModalCancel(modalQuantity)">
+        <app-quantity-form #quantityForm [quantity]="selectedQuantity"></app-quantity-form>
+    </app-modal-nav>
+</div>

src/app/components/quotation-table/quotation-table.ts

@@ -0,0 +1,185 @@
+import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {ModalButton} from "../modal-button/modal-button";
+import {ModalNav} from "../modal-nav/modal-nav";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {QuotationForm} from "../quotation-form/quotation-form";
+import {
+    GetQuotationDto,
+    GetQuotationProductDto,
+    QuotationproductsService,
+    QuotationsService
+} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+import {FileService} from "../../services/file.service";
+import {QuantityForm} from "../quantity-form/quantity-form";
+
+@Component({
+    selector: 'app-quotation-table',
+    imports: [
+        ModalButton,
+        ModalNav,
+        NzDividerComponent,
+        NzIconDirective,
+        NzTableComponent,
+        QuotationForm,
+        QuantityForm,
+    ],
+    templateUrl: './quotation-table.html',
+    styleUrl: './quotation-table.css',
+})
+
+export class QuotationTable implements OnInit {
+    private quotationsService = inject(QuotationsService);
+    private notificationService = inject(NzNotificationService);
+    private quotationProductsService = inject(QuotationproductsService)
+    private fileService = inject(FileService);
+    quotations = signal<GetQuotationDto[]>([]);
+    quotationsLoading = signal<boolean>(false);
+    modal = viewChild.required<ModalNav>('modalNav');
+    modalQuantity = viewChild.required<ModalNav>('modalQuantity');
+
+    async ngOnInit() {
+        await this.fetchQuotations();
+    }
+
+    async fetchQuotations() {
+        this.quotationsLoading.set(true)
+
+        try {
+            const quotations = await firstValueFrom(this.quotationsService.getAllQuotationEndpoint())
+            this.quotations.set(quotations);
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
+        }
+        this.quotationsLoading.set(false)
+    }
+
+    async delete(quotation:number) {
+        this.quotationsLoading.set(true)
+        try {
+            await firstValueFrom(this.quotationsService.deleteQuotationEndpoint(quotation))
+            this.notificationService.success(
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de supprimer la ligne'
+            )
+        }
+        this.quotationsLoading.set(false)
+        await this.fetchQuotations();
+    }
+
+    async export(quotationId: number){
+        this.quotationsLoading.set(true)
+        try {
+            const pdf = await firstValueFrom(
+                this.quotationsService.getQuotationPdfEndpoint(quotationId, "response")
+            );
+            this.fileService.downloadBlob(pdf)
+        } catch (e) {
+            console.error(e);
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de générer un PDF'
+            );
+        }
+        this.quotationsLoading.set(false)
+    }
+
+    async edit(id: number, updateQuotationComponent: QuotationForm) {
+        if (updateQuotationComponent.quotationForm.invalid) {
+            this.notificationService.error('Erreur', 'Formulaire invalide');
+            return;
+        }
+
+        try {
+            const quotations = updateQuotationComponent.quotationForm.getRawValue();
+            await firstValueFrom(this.quotationsService.updateQuotationEndpoint(id, quotations));
+            this.notificationService.success('Success', 'Devis modifié')
+        } catch (e) {
+            console.error(e)
+            this.notificationService.error('Erreur', 'Erreur lors de la modification')
+        }
+    }
+
+    async deleteProduct(productId: number, quotationId: number) {
+        this.quotationsLoading.set(true)
+        try {
+            await firstValueFrom(this.quotationProductsService.deleteQuotationProductEndpoint(productId, quotationId))
+            this.notificationService.success(
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de supprimer la ligne'
+            )
+        }
+        this.quotationsLoading.set(false)
+        await this.fetchQuotations();
+    }
+
+    async editQuantity(productId: number, quotationId: number, updateQuantityComponent: QuantityForm) {
+        if (updateQuantityComponent.quantityForm.invalid) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+            return;
+        }
+
+        try {
+            const quantity = updateQuantityComponent.quantityForm.getRawValue();
+            await firstValueFrom(this.quotationProductsService.patchQuotationProductQuantityEndpoint(productId, quotationId, quantity))
+
+            this.notificationService.success('Success', 'Quantité modifiée')
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Erreur lors de la modification')
+        }
+    }
+
+    selectedQuotation: GetQuotationDto | null = null;
+    openEditModal(quotation: GetQuotationDto) {
+        this.selectedQuotation = { ...quotation };
+        this.modal().showModal();
+    }
+
+    async onModalOk(id: number, updateQuotationComponent: QuotationForm, modal: ModalNav) {
+        if (!this.selectedQuotation) return;
+
+        await this.edit(id, updateQuotationComponent);
+        updateQuotationComponent.quotationForm.reset();
+        modal.isVisible = false;
+        await this.fetchQuotations();
+    }
+
+    onModalCancel(modal: ModalNav) {
+        modal.isVisible = false;
+    }
+
+    selectedQuantity: GetQuotationProductDto | null = null;
+    openEditQuantityModal(quantity: GetQuotationProductDto) {
+        this.selectedQuantity = { ...quantity };
+        this.modalQuantity().showModal();
+    }
+
+    async onModalQuantityOk(productId: number, quotationId: number, updateQuantityComponent: QuantityForm, modal: ModalNav) {
+        if (!this.selectedQuantity) return;
+
+        await this.editQuantity(productId, quotationId, updateQuantityComponent);
+        updateQuantityComponent.quantityForm.reset();
+        modal.isVisible = false;
+        await this.fetchQuotations();
+    }
+}
+

src/app/components/search/search.css

@@ -0,0 +1,36 @@
+/* From Uiverse.io by LightAndy1 */
+.group {
+    box-shadow: 0 1px 2px 1px #001529;
+    border-radius: 15px;
+    padding: 0.1rem 0.5rem 0.1rem 1rem;
+    display: flex;
+    line-height: 28px;
+    align-items: center;
+    position: relative;
+    max-width: 400px;
+}
+
+.input {
+    width: 100%;
+    height: 32px;
+    line-height: 28px;
+    padding: 0 1rem;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    outline: none;
+    background-color: #f3f3f4;
+    color: #0d0c22;
+    transition: 0.3s ease;
+}
+
+.input::placeholder {
+    color: #9e9ea7;
+}
+
+.input:focus,
+input:hover {
+    outline: none;
+    border-color: #40A9FF;
+    background-color: #fff;
+    box-shadow: 0 0 0 4px rgba(199, 199, 197, 0.1);
+}

src/app/components/search/search.html

@@ -0,0 +1,10 @@
+<form nz-form nzLayout="horizontal" [formGroup]="searchForm">
+    <nz-form-item nz-flex>
+        <nz-form-control nzSpan="12">
+            <div class="group">
+                <nz-icon nzType="search" nzTheme="outline" class="mr-2 text-xl" (click)="OnSearch()"></nz-icon>
+                <input class="input" placeholder="Rechercher" formControlName="searchValue" (input)="OnSearch()"/>
+            </div>
+        </nz-form-control>
+    </nz-form-item>
+</form>

src/app/components/search/search.ts

@@ -0,0 +1,35 @@
+import { Component, output } from '@angular/core';
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent} from "ng-zorro-antd/form";
+import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
+
+@Component({
+  selector: 'app-search',
+    imports: [
+        NzIconDirective,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        ReactiveFormsModule
+    ],
+  templateUrl: './search.html',
+  styleUrl: './search.css',
+})
+export class Search {
+    searchForm: FormGroup = new FormGroup({
+        searchValue: new FormControl<string>(null)
+    })
+
+    searchEvent = output<string>();
+
+    OnSearch(): void {
+        const raw = this.searchForm.controls['searchValue'].value ?? '';
+        const value = String(raw).trim();
+        this.searchEvent.emit(value);
+
+    }
+}

src/app/components/setting-form/setting-form.css

@@ -0,0 +1,36 @@
+/* Container de chaque ligne */
+.row {
+    display: flex;
+    align-items: center; /* centre verticalement les images et champs */
+    gap: 24px; /* espace entre preview et champ */
+    margin-bottom: 20px;
+}
+
+/* Colonne gauche : preview */
+.row-left {
+    width: 180px; /* fixe la largeur pour aligner toutes les images */
+    display: flex;
+    justify-content: center;
+}
+
+/* Image de preview */
+.row-left img {
+    max-width: 100%;
+    max-height: 80px;
+    object-fit: contain;
+    border: 1px solid #e6e6e6;
+    border-radius: 6px;
+    background-color: #fafafa;
+    padding: 4px;
+}
+
+/* Colonne droite : input */
+.row-right {
+    flex: 1; /* prend le reste de l'espace */
+}
+
+/* Retire la largeur forcée du nz-form-label et nz-form-control */
+.row-right nz-form-item nz-form-label,
+.row-right nz-form-item nz-form-control {
+    width: auto !important;
+}

src/app/components/setting-form/setting-form.html

@@ -0,0 +1,35 @@
+<form nz-form nzLayout="horizontal" [formGroup]="settingForm" (ngSubmit)="submitForm()">
+
+    <!-- Logo -->
+    <div class="row">
+        <div class="row-left">
+            <img [src]="setting.logo" alt="logo">
+        </div>
+
+        <div class="row-right">
+            <nz-form-item>
+                <nz-form-label nzSpan="9">Logo</nz-form-label>
+                <nz-form-control nzSpan="25">
+                    <input nz-input type="file" formControlName="logo" />
+                </nz-form-control>
+            </nz-form-item>
+        </div>
+    </div>
+
+    <!-- Signature -->
+    <div class="row">
+        <div class="row-left">
+            <img [src]="setting.signature" alt="logo">
+        </div>
+
+        <div class="row-right">
+            <nz-form-item>
+                <nz-form-label nzSpan="9">Signature</nz-form-label>
+                <nz-form-control nzSpan="25">
+                    <input nz-input type="file" formControlName="signature" />
+                </nz-form-control>
+            </nz-form-item>
+        </div>
+    </div>
+
+</form>

src/app/components/setting-form/setting-form.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {SettingInfo} from "../../interfaces/setting.interface";
+
+@Component({
+  selector: 'app-setting-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './setting-form.html',
+  styleUrl: './setting-form.css',
+})
+export class SettingForm {
+    settingForm: FormGroup = new FormGroup({
+        logo: new FormControl<string>(null),
+        signature: new FormControl<string>(null)
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.settingForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.settingForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.settingForm.reset()
+    }
+
+    setting: SettingInfo = {
+        logo: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png',
+        signature: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png'
+    }
+}

src/app/components/stock-form/stock-form.html

@@ -0,0 +1,12 @@
+<form nz-form nzLayout="horizontal" [formGroup]="stockForm">
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="15" nzRequired>
+            Quantité minimale du produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="4" nzErrorTip="Requis">
+            <input nz-input type="number" placeholder="12345" formControlName="minimalQuantity">
+        </nz-form-control>
+    </nz-form-item>
+</form>

src/app/components/stock-form/stock-form.ts

@@ -0,0 +1,41 @@
+import {Component, effect, input} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {GetProductDto} from "../../services/api";
+
+@Component({
+  selector: 'app-stock-form',
+    imports: [
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzFormControlComponent,
+        NzInputDirective,
+        NzColDirective,
+        NzFormDirective,
+        ReactiveFormsModule,
+        NzFlexDirective
+    ],
+  templateUrl: './stock-form.html',
+  styleUrl: './stock-form.css',
+})
+export class StockForm {
+    stockForm = new FormGroup({
+        id: new FormControl<number>(null),
+        minimalQuantity: new FormControl<number>(null, [Validators.required])
+    })
+
+    product= input<GetProductDto>();
+    constructor() {
+        effect(() => {
+            if (this.product()) {
+                this.stockForm.patchValue({
+                    id: this.product().id,
+                    minimalQuantity: this.product().minimalQuantity,
+                });
+            }
+        });
+    }
+}

src/app/components/stock-table/stock-table.css

@@ -0,0 +1,85 @@
+/* Table globale */
+nz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px; /* espace entre les lignes */
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* En-tête */
+nz-table thead tr {
+    background-color: #f5f5f5;
+    text-align: left;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+nz-table thead th {
+    padding: 12px 16px;
+}
+
+/* Lignes du tableau */
+nz-table tbody tr {
+    background-color: #fff;
+    transition: background 0.2s ease;
+}
+
+nz-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+nz-table tbody tr:hover {
+    background-color: #e6f7ff; /* survol */
+}
+
+/* Cellules */
+nz-table tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: #444;
+}
+
+/* Boutons */
+nz-table button[nz-button] {
+    margin-right: 8px;
+}
+
+/* Modals dans le tableau */
+nz-table app-modal {
+    margin-right: 8px;
+}
+
+/* Dates (pour alignement et style) */
+nz-table tbody td p {
+    margin: 0;
+    font-size: 14px;
+    color: #555;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nz-table thead {
+        display: none;
+    }
+    nz-table tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+    nz-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 12px;
+    }
+    nz-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+    }
+}

src/app/components/stock-table/stock-table.html

@@ -0,0 +1,64 @@
+<nz-table
+    [nzData]="filteredProducts()"
+    [nzFrontPagination]="false"
+    [nzLoading]="productsLoading()"
+    (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
+>
+    <thead>
+    <tr class="text-center">
+        <th nzWidth="40px">
+            <label
+                    nz-checkbox
+                    [(ngModel)]="checked"
+                    [nzIndeterminate]="indeterminate"
+                    (ngModelChange)="onAllChecked($event)"
+            ></label>
+        </th>
+        <th>Nom</th>
+        <th>Référence</th>
+        <th>Nec</th>
+        <th>Calibre</th>
+        <th>Poids</th>
+        <th>Durée</th>
+        <th>Quantité</th>
+        <th>Limite</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+
+    <tbody class="text-center">
+        @for (product of filteredProducts(); track product.id) {
+            <tr>
+                <td nzWidth="40px">
+                    <label
+                            nz-checkbox
+                            [ngModel]="setOfCheckedId.has(product.id)"
+                            (ngModelChange)="onItemChecked(product.id, $event)"
+                    ></label>
+                </td>
+
+                <td>{{ product.name }}</td>
+                <td>{{ product.references }}</td>
+                <td>{{ product.nec }}</td>
+                <td>{{ product.caliber }}</td>
+                <td>{{ product.weight }}</td>
+                <td>{{ product.duration }}</td>
+                <td>{{ product.totalQuantity }}</td>
+                <td>{{ product.minimalQuantity }}</td>
+                <td>
+                    <div style="justify-content: center; display: flex">
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(product)"></nz-icon>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(product.id)" class="text-red-600 cursor-pointer"></nz-icon>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
+
+<div class="hidden">
+    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedProduct.id, stockForm, modalNav)" (cancel)="onModalCancel(modalNav)">
+        <app-stock-form #stockForm [product]="selectedProduct"></app-stock-form>
+    </app-modal-nav>
+</div>

src/app/components/stock-table/stock-table.ts

@@ -0,0 +1,204 @@
+import {Component, computed, inject, OnInit, output, signal, viewChild} from '@angular/core';
+import {NzTableComponent, NzThMeasureDirective} from "ng-zorro-antd/table";
+import {ModalNav} from "../modal-nav/modal-nav";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {StockForm} from "../stock-form/stock-form";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {FormsModule} from "@angular/forms";
+import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
+import {GetProductDto, ProductsService, WarehouseproductsService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+
+interface ProductWithQuantity extends GetProductDto {
+    totalQuantity?: number;
+}
+
+@Component({
+    selector: 'app-stock-table',
+    imports: [
+        NzTableComponent,
+        ModalNav,
+        NzIconDirective,
+        StockForm,
+        NzDividerComponent,
+        FormsModule,
+        NzCheckboxComponent,
+        NzThMeasureDirective,
+    ],
+    templateUrl: './stock-table.html',
+    styleUrl: './stock-table.css',
+})
+
+export class StockTable implements OnInit {
+    private productsService = inject(ProductsService);
+    private wareHousseProductsService = inject(WarehouseproductsService)
+    private notificationService = inject(NzNotificationService)
+    products = signal<ProductWithQuantity[]>([]);
+    productsLoading = signal<boolean>(false);
+    updateProduct = viewChild.required<StockForm>('stockForm');
+    modal = viewChild.required<ModalNav>('modalNav');
+
+    checked = false;
+    indeterminate = false;
+    setOfCheckedId = new Set<number>();
+    selectionChange = output<boolean>()
+    currentPageData: GetProductDto[] = [];
+
+    private searchQuery = signal<string>('');
+
+    filteredProducts = computed(() => {
+        const q = this.searchQuery().toLowerCase().trim();
+
+        if (!q) return this.products();
+
+        return this.products().filter(s => {
+            const name = (s.name ?? '').toLowerCase();
+            return name.includes(q);
+        });
+    });
+
+    applySearch(query: string) {
+        this.searchQuery.set(query);
+    }
+    get hasSelection(): boolean {
+        return this.setOfCheckedId.size > 0;
+    }
+
+    updateCheckedSet(id: number, checked: boolean): void {
+        if (checked) this.setOfCheckedId.add(id);
+        else this.setOfCheckedId.delete(id);
+    }
+
+    onItemChecked(id: number, checked: boolean): void {
+        this.updateCheckedSet(id, checked);
+        this.refreshCheckedStatus();
+    }
+
+    onAllChecked(checked: boolean): void {
+        this.currentPageData.forEach(item =>
+            this.updateCheckedSet(item.id, checked)
+        );
+        this.refreshCheckedStatus();
+    }
+
+    onCurrentPageDataChange($event: GetProductDto[]): void {
+        this.currentPageData = $event;
+        this.refreshCheckedStatus();
+    }
+
+    refreshCheckedStatus(): void {
+        const total = this.currentPageData.length;
+        const checkedCount = this.currentPageData.filter(p => this.setOfCheckedId.has(p.id)).length;
+
+        this.checked = checkedCount === total;
+        this.indeterminate = checkedCount > 0 && checkedCount < total;
+
+        setTimeout(() => this.selectionChange.emit(this.hasSelection));
+    }
+
+    get selectedIds() {
+        return Array.from(this.setOfCheckedId);
+    }
+
+    async ngOnInit() {
+        await this.fetchProducts();
+    }
+
+    async fetchTotalQuantity(product: ProductWithQuantity) {
+        try {
+            const res = await firstValueFrom(
+                this.wareHousseProductsService.getTotalQuantityEndpoint(product.id)
+            );
+            product.totalQuantity = res.totalQuantity;
+        } catch (e) {
+            product.totalQuantity = 0;
+        }
+    }
+
+    async fetchProducts() {
+        this.productsLoading.set(true);
+        try {
+            const products = await firstValueFrom(this.productsService.getAllProductsEndpoint());
+
+            // transforme chaque produit en ProductWithQuantity
+            const productsWithQuantity: ProductWithQuantity[] = products.map(p => ({ ...p }));
+
+            this.products.set(productsWithQuantity);
+
+            // récupérer la quantité pour chaque produit en parallèle
+            await Promise.all(productsWithQuantity.map(p => this.fetchTotalQuantity(p)));
+
+            // déclencher la mise à jour du signal
+            this.products.set([...productsWithQuantity]);
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            );
+        }
+        this.productsLoading.set(false);
+    }
+
+    async delete(productId:number) {
+        try {
+            await firstValueFrom(this.productsService.deleteProductEndpoint(productId))
+            this.notificationService.success(
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de supprimer la ligne'
+            )
+        }
+        await this.fetchProducts();
+    }
+
+    async edit(id: number, updateProductComponent: StockForm) {
+        if (updateProductComponent.stockForm.invalid) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+            return;
+        }
+
+        try {
+
+            const products = updateProductComponent.stockForm.getRawValue();
+            await firstValueFrom(this.productsService.patchProductMinimalStockEndpoint(id, products))
+
+            this.notificationService.success(
+                'Success',
+                'Limite de stock modifiée'
+            )
+        } catch (e) {
+            console.error(e);
+            this.notificationService.error(
+                'Erreur',
+                'Erreur lors de la modification'
+            )
+        }
+    }
+
+    selectedProduct: GetProductDto | null = null;
+    openEditModal(product: GetProductDto) {
+        this.selectedProduct = { ...product};
+        this.modal().showModal();
+    }
+
+    async onModalOk(productId: number, updateProductComponent: StockForm, modal: ModalNav) {
+        if (!this.selectedProduct) return;
+
+        await this.edit(productId, updateProductComponent);
+        updateProductComponent.stockForm.reset();
+        modal.isVisible = false;
+        await this.fetchProducts();
+    }
+
+    onModalCancel(modal: ModalNav) {
+        modal.isVisible = false;
+    }
+}

src/app/components/supplier-form/supplier-form.html

@@ -0,0 +1,66 @@
+<form nz-form nzLayout="horizontal" [formGroup]="supplierForm">
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Fournisseur
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Fournisseur" formControlName="name">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Email
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Email" formControlName="email">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Téléphone
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Téléphone" formControlName="phone">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Adresse
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Adresse" formControlName="address">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Code Postal
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Code Postal" formControlName="zipCode">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Ville
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Ville" formControlName="city">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Délai Moyen
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input type="number" placeholder="Délai Moyen" formControlName="deliveryDelay">
+        </nz-form-control>
+    </nz-form-item>
+
+</form>

src/app/components/supplier-form/supplier-form.ts

@@ -0,0 +1,52 @@
+import {Component, effect, input} from '@angular/core';
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {GetSupplierDto} from "../../services/api";
+
+@Component({
+    selector: 'app-supplier-form',
+    imports: [
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+    templateUrl: './supplier-form.html',
+    styleUrl: './supplier-form.css',
+})
+export class SupplierForm {
+    supplierForm: FormGroup = new FormGroup({
+        name: new FormControl<string>(null, [Validators.required]),
+        email: new FormControl<string>(null, [Validators.required]),
+        phone: new FormControl<string>(null, [Validators.required]),
+        address: new FormControl<string>(null, [Validators.required]),
+        zipCode: new FormControl<string>(null, [Validators.required]),
+        city: new FormControl<string>(null, [Validators.required]),
+        deliveryDelay: new FormControl<string>(null, [Validators.required]),
+
+    })
+
+    supplier= input<GetSupplierDto>();
+    constructor() {
+        effect(() => {
+            if (this.supplier()) {
+                this.supplierForm.patchValue({
+                    name: this.supplier().name,
+                    email: this.supplier().email,
+                    phone: this.supplier().phone,
+                    address: this.supplier().address,
+                    zipCode: this.supplier().zipCode,
+                    city: this.supplier().city,
+                    deliveryDelay: this.supplier().deliveryDelay,
+                });
+            }
+        });
+    }
+}

src/app/components/supplier-table/supplier-table.css

@@ -0,0 +1,85 @@
+/* Table globale */
+nz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px; /* espace entre les lignes */
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* En-tête */
+nz-table thead tr {
+    background-color: #f5f5f5;
+    text-align: left;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+nz-table thead th {
+    padding: 12px 16px;
+}
+
+/* Lignes du tableau */
+nz-table tbody tr {
+    background-color: #fff;
+    transition: background 0.2s ease;
+}
+
+nz-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+nz-table tbody tr:hover {
+    background-color: #e6f7ff; /* survol */
+}
+
+/* Cellules */
+nz-table tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: #444;
+}
+
+/* Boutons */
+nz-table button[nz-button] {
+    margin-right: 8px;
+}
+
+/* Modals dans le tableau */
+nz-table app-modal {
+    margin-right: 8px;
+}
+
+/* Dates (pour alignement et style) */
+nz-table tbody td p {
+    margin: 0;
+    font-size: 14px;
+    color: #555;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nz-table thead {
+        display: none;
+    }
+    nz-table tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+    nz-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 12px;
+    }
+    nz-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+    }
+}

src/app/components/supplier-table/supplier-table.html

@@ -0,0 +1,88 @@
+<nz-table [nzData]="filteredSuppliers()"
+          [nzLoading]="suppliersLoading()"
+          [nzFrontPagination]="false">
+    <thead>
+    <tr style="text-align: center">
+        <th>Nom</th>
+        <th>Téléphone</th>
+        <th>Email</th>
+        <th>Adresse</th>
+        <th>Code Postal</th>
+        <th>Ville</th>
+        <th>Délai moyen</th>
+        <th>Produits</th>
+        <th style="display: flex; align-items: center;">Action</th>
+    </tr>
+    </thead>
+    <tbody style="text-align: center">
+        @for (supplier of filteredSuppliers(); track supplier.id) {
+            <tr>
+                <td>{{ supplier.name }}</td>
+                <td>{{ supplier.phone }}</td>
+                <td>{{ supplier.email }}</td>
+                <td>{{ supplier.address }}</td>
+                <td>{{ supplier.zipCode }}</td>
+                <td>{{ supplier.city }}</td>
+                <td>{{ supplier.deliveryDelay }} jours</td>
+                <td>
+                    <app-modal-button type="link" [name]="'Voir les produits'" size="45%">
+                        <nz-table [nzData]="filteredSuppliers()" [nzFrontPagination]="false">
+                            <thead>
+                            <tr class="text-center">
+                                <th>Produit</th>
+                                <th>Référence</th>
+                                <th>Prix</th>
+                                <th>Action</th>
+                            </tr>
+                            </thead>
+                            <tbody class="text-center">
+                                @for (product of supplier.prices; track product.id) {
+                                    <tr>
+                                        <td>{{ product.productName }}</td>
+                                        <td>{{ product.productReferences }}</td>
+                                        <td>{{ product.sellingPrice }}€</td>
+                                        <td>
+                                            <div class="flex items-center justify-center space-x-2">
+                                                <nz-icon nzType="edit" nzTheme="outline"
+                                                         class="cursor-pointer text-gray-600 hover:text-gray-900"
+                                                         (click)="openEditProductModal(product, supplier.id)"></nz-icon>
+                                                <nz-divider nzType="vertical"></nz-divider>
+                                                <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-600 hover:text-red-800"
+                                                         (click)="deleteProduct(product.productId, product.supplierId)"></nz-icon>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </nz-table>
+                    </app-modal-button>
+                </td>
+                <td>
+                    <div style="display: flex; align-items: center;">
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
+                                 (click)="openEditModal(supplier)"></nz-icon>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(supplier.id)"
+                                 class="text-red-600 cursor-pointer"></nz-icon>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
+
+<div class="hidden">
+    <app-modal-nav #supplierModal nameIcon="edit" [name]="'Modifier'"
+                   (ok)="onModalOk(selectedSupplier?.id, supplierForm, supplierModal)"
+                   (cancel)="onModalCancel(supplierModal)">
+        <app-supplier-form #supplierForm [supplier]="selectedSupplier"></app-supplier-form>
+    </app-modal-nav>
+</div>
+
+<div class="hidden">
+    <app-modal-nav #productModal nameIcon="edit" [name]="'Modifier les prix des fournisseurs'"
+                   (ok)="onModalProductOk(selectedProduct?.productId, selectedProductSupplierId, priceForm, productModal)"
+                   (cancel)="onModalCancel(productModal)">
+        <app-price-form #priceForm [price]="selectedProduct"></app-price-form>
+    </app-modal-nav>
+</div>

src/app/components/supplier-table/supplier-table.ts

@@ -0,0 +1,169 @@
+import {Component, computed, inject, OnInit, signal, viewChild} from '@angular/core';
+import {ModalNav} from "../modal-nav/modal-nav";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {ModalButton} from "../modal-button/modal-button";
+import {SupplierForm} from "../supplier-form/supplier-form";
+import {GetPriceDto, GetSupplierDto, PricesService, SuppliersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+import {PriceForm} from "../price-form/price-form";
+
+@Component({
+    selector: 'app-supplier-table',
+    imports: [
+        ModalNav,
+        NzDividerComponent,
+        NzIconDirective,
+        NzTableComponent,
+        ModalButton,
+        SupplierForm,
+        PriceForm,
+    ],
+    templateUrl: './supplier-table.html',
+    styleUrl: './supplier-table.css',
+})
+
+export class SupplierTable implements OnInit {
+    private suppliersService = inject(SuppliersService);
+    private pricesService = inject(PricesService);
+    private notificationService = inject(NzNotificationService);
+    suppliers = signal<GetSupplierDto[]>([]);
+    suppliersLoading = signal<boolean>(false);
+    updateSupplier = viewChild.required<SupplierForm>('supplierForm');
+    supplierModal = viewChild.required<ModalNav>('supplierModal');
+    productModal = viewChild.required<ModalNav>('productModal');
+    selectedSupplier: GetSupplierDto | null = null;
+    selectedProduct: GetPriceDto | null = null;
+    selectedProductSupplierId: number | null = null;
+
+    async ngOnInit() {
+        await this.fetchSuppliers();
+    }
+
+    private searchQuery = signal<string>('');
+
+    filteredSuppliers = computed(() => {
+        const q = this.searchQuery().toLowerCase().trim();
+
+        if (!q) return this.suppliers();
+
+        return this.suppliers().filter(s => {
+            const name = (s.name ?? '').toLowerCase();
+            return name.includes(q);
+        });
+    });
+
+    applySearch(query: string) {
+        this.searchQuery.set(query);
+    }
+
+    async fetchSuppliers() {
+        this.suppliersLoading.set(true);
+        try {
+            const suppliers = await firstValueFrom(this.suppliersService.getAllSuppliersEndpoint());
+            this.suppliers.set(suppliers);
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
+        }
+        this.suppliersLoading.set(false);
+    }
+
+    async edit(id: number, updateSupplierComponent: SupplierForm) {
+        if (updateSupplierComponent.supplierForm.invalid) {
+            this.notificationService.error('Erreur', 'Erreur d\'écriture dans le formulaire');
+            return;
+        }
+        try {
+            const suppliers = updateSupplierComponent.supplierForm.getRawValue();
+            await firstValueFrom(this.suppliersService.updateSupplierEndpoint(id, suppliers));
+            this.notificationService.success('Success', 'Fournisseur modifié');
+        } catch (e) {
+            console.error(e);
+            this.notificationService.error('Erreur', 'Erreur lors de la modification');
+        }
+    }
+
+    async delete(supplier: number) {
+        try {
+            await firstValueFrom(this.suppliersService.deleteSupplierEndpoint(supplier));
+            this.notificationService.success('Succès', 'Suppression effectuée');
+            await this.fetchSuppliers();
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Impossible de supprimer la ligne');
+        }
+    }
+
+    openEditModal(supplier: GetSupplierDto) {
+        this.selectedSupplier = { ...supplier };
+        this.supplierModal().showModal();
+    }
+
+    openEditProductModal(product: GetPriceDto, supplierId: number) {
+        this.selectedProduct = { ...product };
+        this.selectedProductSupplierId = supplierId;
+        this.productModal().showModal();
+    }
+
+    async onModalOk(supplierId: number | undefined, updateSupplierComponent: SupplierForm, modal: ModalNav) {
+        if (!supplierId || !this.selectedSupplier) return;
+
+        await this.edit(supplierId, updateSupplierComponent);
+        updateSupplierComponent.supplierForm.reset();
+        modal.isVisible = false;
+        await this.fetchSuppliers();
+    }
+
+    async onModalProductOk(
+        productId: number | undefined,
+        supplierId: number | null | undefined,
+        updateProductComponent: PriceForm,
+        modal: ModalNav
+    ) {
+        if (productId == null || supplierId == null || !this.selectedProduct) {
+            this.notificationService.error('Erreur', 'Identifiants produit/fournisseur manquants');
+            return;
+        }
+
+        await this.editPrice(productId, supplierId, updateProductComponent);
+        updateProductComponent.priceForm.reset();
+        modal.isVisible = false;
+        await this.fetchSuppliers();
+    }
+
+    onModalCancel(modal: ModalNav) {
+        modal.isVisible = false;
+    }
+
+    async editPrice(productId: number, supplierId: number, updateProductComponent: PriceForm) {
+        if (updateProductComponent.priceForm.invalid) {
+            this.notificationService.error('Erreur', 'Erreur d\'écriture dans le formulaire');
+            return;
+        }
+        try {
+            const formValue = updateProductComponent.priceForm.getRawValue();
+            const body = {
+                productId,
+                supplierId,
+                sellingPrice: Number(formValue.price),
+            };
+            await firstValueFrom(this.pricesService.patchPriceEndpoint(productId, supplierId, body));
+            this.notificationService.success('Success', 'Prix modifié');
+        } catch (e) {
+            console.error(e);
+            this.notificationService.error('Erreur', 'Erreur lors de la modification');
+        }
+    }
+
+
+    async deleteProduct(idProduct: number, idSupplier: number) {
+        try {
+            await firstValueFrom(this.pricesService.deletePriceEndpoint(idProduct, idSupplier));
+            this.notificationService.success('Succès', 'Produit supprimé');
+            await this.fetchSuppliers();
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Impossible de supprimer le produit');
+        }
+    }
+}

src/app/components/user-table/user-table.css

@@ -0,0 +1,85 @@
+/* Table globale */
+nz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px; /* espace entre les lignes */
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* En-tête */
+nz-table thead tr {
+    background-color: #f5f5f5;
+    text-align: left;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+nz-table thead th {
+    padding: 12px 16px;
+}
+
+/* Lignes du tableau */
+nz-table tbody tr {
+    background-color: #fff;
+    transition: background 0.2s ease;
+}
+
+nz-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+nz-table tbody tr:hover {
+    background-color: #e6f7ff; /* survol */
+}
+
+/* Cellules */
+nz-table tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: #444;
+}
+
+/* Boutons */
+nz-table button[nz-button] {
+    margin-right: 8px;
+}
+
+/* Modals dans le tableau */
+nz-table app-modal {
+    margin-right: 8px;
+}
+
+/* Dates (pour alignement et style) */
+nz-table tbody td p {
+    margin: 0;
+    font-size: 14px;
+    color: #555;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nz-table thead {
+        display: none;
+    }
+    nz-table tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+    nz-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 12px;
+    }
+    nz-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+    }
+}

src/app/components/user-table/user-table.html

@@ -0,0 +1,37 @@
+<nz-table [nzData]="users()"
+          [nzLoading]="usersLoading()"
+          [nzFrontPagination]="false"
+          class="mr-7">
+<thead>
+    <tr class="text-center">
+        <th>Prénom</th>
+        <th>Email</th>
+        <th>Fonction</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+    <tbody class="text-center">
+        @for (user of users(); track user.id) {
+            <tr>
+                <td>{{user.name}}</td>
+                <td>{{user.email}}</td>
+                <td>{{user.fonction}}</td>
+                <td>
+                    <div style="justify-content: center; display: flex">
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(user)"></nz-icon>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(user.id)" class="cursor-pointer text-red-700"/>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
+
+<div class="hidden">
+    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedUser.id, updateUser, modalNav)" (cancel)="onModalCancel(modalNav)">
+        <app-profil-form #updateUser [user]="selectedUser"></app-profil-form>
+    </app-modal-nav>
+</div>

src/app/components/user-table/user-table.ts

@@ -0,0 +1,111 @@
+import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
+import {ModalNav} from "../modal-nav/modal-nav";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {ProfilForm} from "../profil-form/profil-form";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {GetUserDto, UsersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+
+@Component({
+  selector: 'app-user-table',
+    imports: [
+        ModalNav,
+        NzIconDirective,
+        NzTableComponent,
+        ProfilForm,
+        NzDividerComponent
+    ],
+  templateUrl: './user-table.html',
+  styleUrl: './user-table.css',
+})
+export class UserTable implements OnInit {
+    private usersService = inject(UsersService);
+    private notificationService = inject(NzNotificationService)
+    users = signal<GetUserDto[]>([]);
+    usersLoading = signal<boolean>(false);
+    updateUser = viewChild.required<ProfilForm>('profilForm');
+    modal = viewChild.required<ModalNav>('modalNav');
+
+    async ngOnInit() {
+        await this.fetchUsers();
+    }
+
+    async fetchUsers() {
+        this.usersLoading.set(true)
+
+        try {
+            const users = await firstValueFrom(this.usersService.getAllUsersEndpoint())
+            this.users.set(users);
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
+        }
+        this.usersLoading.set(false)
+    }
+
+    async delete(user:number) {
+        try {
+            await firstValueFrom(this.usersService.deleteUserEndpoint(user))
+            this.notificationService.success(
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de supprimer la ligne'
+            )
+        }
+        await this.fetchUsers();
+    }
+
+    async edit(id: number, updateUserComponent: ProfilForm) {
+        if (updateUserComponent.profilForm.invalid) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+            return;
+        }
+
+        try {
+            const users = updateUserComponent.profilForm.getRawValue();
+            await firstValueFrom(this.usersService.updateUserEndpoint(id, users))
+
+            this.notificationService.success(
+                'Success',
+                'Utilisateur modifié'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur lors de la modification'
+            )
+        }
+    }
+
+    selectedUser: GetUserDto | null = null;
+    openEditModal(user: GetUserDto) {
+        this.selectedUser = { ...user };
+        this.modal().showModal();
+    }
+
+    async onModalOk(userId: number, updateUserComponent: ProfilForm, modal: ModalNav) {
+        if (!this.selectedUser) return;
+
+        await this.edit(userId, updateUserComponent);
+        updateUserComponent.profilForm.reset();
+        modal.isVisible = false;
+        await this.fetchUsers();
+    }
+    onModalCancel(modal: ModalNav) {
+        modal.isVisible = false;
+    }
+    filterUser(input: string, option: any) {
+        return option.nzLabel.toLowerCase().includes(input.toLowerCase());
+    }
+}

src/app/interfaces/notif.interface.ts

@@ -0,0 +1,5 @@
+export interface NotifInfo {
+    author: string;
+    title: string;
+    content: string;
+}

src/app/interfaces/setting.interface.ts

@@ -0,0 +1,4 @@
+export interface SettingInfo {
+    logo: string;
+    signature: string;
+}

src/app/interfaces/user.interface.ts

@@ -0,0 +1,5 @@
+export interface UserInfo {
+    name: string;
+    email: string;
+    fonction: string;
+}

src/app/pages/deliverer/deliverer.html

@@ -1 +1,19 @@
-<p>deliverer works!</p>
+<div class="flex mt-2">
+    <app-modal-button #modalButton
+                      type="primary"
+                      name="Ajouter un transporteur"
+                      (ok)="onModalOk()"
+                      (cancel)="onModalCancel()"
+                      size="35%">
+
+        <app-deliverer-form #delivererForm></app-deliverer-form>
+    </app-modal-button>
+
+    <div class="ml-95 w-150">
+        <app-search class="w-full"></app-search>
+    </div>
+</div>
+
+<div class="mt-1">
+    <app-deliverer-table #delivererTable></app-deliverer-table>
+</div>

src/app/pages/deliverer/deliverer.ts

@@ -1,11 +1,62 @@
-import { Component } from '@angular/core';
+import {Component, inject, viewChild} from '@angular/core';
+import {ModalButton} from "../../components/modal-button/modal-button";
+import {DelivererTable} from "../../components/deliverer-table/deliverer-table";
+import {DelivererForm} from "../../components/deliverer-form/deliverer-form";
+import {Search} from "../../components/search/search";
+import {DeliverersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-deliverer',
-  imports: [],
+    imports: [
+        ModalButton,
+        DelivererTable,
+        DelivererForm,
+        Search
+    ],
   templateUrl: './deliverer.html',
   styleUrl: './deliverer.css',
 })
 export class Deliverer {
+    modal = viewChild.required<ModalButton>('modalButton');
+    createDeliverer = viewChild.required<DelivererForm>('delivererForm');
+    delivererTable = viewChild.required<DelivererTable>('delivererTable');
+    private deliverersService = inject(DeliverersService);
+    private notificationService = inject(NzNotificationService)
 
+    async onModalOk() {
+        await this.addDeliverer()
+        this.createDeliverer().delivererForm.reset();
+        this.modal().isVisible = false;
+        await this.delivererTable().fetchDeliverers()
+    }
+
+    onModalCancel() {
+        this.modal().isVisible = false;
+    }
+
+    async addDeliverer() {
+        if (this.createDeliverer().delivererForm.invalid)
+        {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+        }
+        try {
+            const deliverers = this.createDeliverer().delivererForm.getRawValue();
+            await firstValueFrom(this.deliverersService.createDelivererEndpoint(deliverers))
+
+            this.notificationService.success(
+                'Success',
+                'Transporteur enregistré'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'enregistrement'
+            )
+        }
+    }
 }