first of many

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

@@ -0,0 +1,152 @@
+<form nz-form nzLayout="horizontal" [formGroup]="QuotationForm" (ngSubmit)="submitForm()">
+    <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="Quantité" formControlName="quantity">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            ID Devis
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input type="number" placeholder="ID Devis" formControlName="quotationId">
+        </nz-form-control>
+    </nz-form-item>
+
+    <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="quotationMessage">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Conditions de vente
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input placeholder="Conditions de vente" formControlName="quotationConditionsSale">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            ID Produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input type="number" placeholder="ID Produit" formControlName="productId">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Référence produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input type="number" placeholder="Référence produit" formControlName="productReferences">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Nom du produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input placeholder="Nom du produit" formControlName="productName">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Durée produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input type="number" placeholder="Durée produit" formControlName="productDuration">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Calibre produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input type="number" placeholder="Calibre produit" formControlName="productCaliber">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Numéro d'approbation
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input type="number" placeholder="Numéro d'approbation" formControlName="productApprovalNumber">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Poids produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input type="number" placeholder="Poids produit" formControlName="productWeight">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            NEC Produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input type="number" placeholder="NEC Produit" formControlName="productNec">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Image produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input placeholder="Image produit" formControlName="productImage">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Lien produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input placeholder="Lien produit" formControlName="productLink">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Quantité minimale
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <input nz-input type="number" placeholder="Quantité minimale" formControlName="productMinimalQuantity">
+        </nz-form-control>
+    </nz-form-item>
+</form>
+

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

@@ -0,0 +1,54 @@
+import { Component } 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 {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
+
+@Component({
+    selector: 'app-quotation-form',
+    imports: [
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzFormControlComponent,
+        NzInputDirective,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormDirective,
+        ReactiveFormsModule,
+        NzDatePickerComponent
+    ],
+    templateUrl: './quotation-form.html',
+    styleUrl: './quotation-form.css',
+})
+export class QuotationForm {
+    QuotationForm: FormGroup = new FormGroup({
+        quantity: new FormControl<number>(null, [Validators.required]),
+        quotationId: new FormControl<number>(null),
+        quotationMessage: new FormControl<string>(null),
+        quotationConditionsSale: new FormControl<string>(null),
+        productId: new FormControl<number>(null),
+        productReferences: new FormControl<number>(null),
+        productName: new FormControl<string>(null),
+        productDuration: new FormControl<number>(null),
+        productCaliber: new FormControl<number>(null),
+        productApprovalNumber: new FormControl<number>(null),
+        productWeight: new FormControl<number>(null),
+        productNec: new FormControl<number>(null),
+        productImage: new FormControl<string>(null),
+        productLink: new FormControl<string>(null),
+        productMinimalQuantity: new FormControl<number>(null)
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.QuotationForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.QuotationForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.QuotationForm.reset()
+    }
+}

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,60 @@
+<nz-table #basicTable [nzData]="quotations" class="mr-7">
+    <thead>
+    <tr class="text-center">
+        <th>ID Devis</th>
+        <th>Nom du produit</th>
+        <th>Quantité</th>
+        <th>Message</th>
+        <th>Conditions de vente</th>
+        <th>Détails produit</th>
+        <th>Action</th>
+    </tr>
+    </thead >
+    <tbody class="text-center">
+        @for (data of basicTable.data; track data) {
+            <tr>
+                <td>{{data.quotationId}}</td>
+                <td>{{data.productName}}</td>
+                <td>{{data.quantity}}</td>
+                <td>{{data.quotationMessage}}</td>
+                <td>{{data.quotationConditionsSale}}</td>
+                <td>
+                    <app-modal-button type="link" name="Voir détails">
+                        <div style="max-height: 400px; overflow-y: auto;">
+                            <table style="width: 100%; text-align: left;">
+                                <tbody>
+                                <tr><th style="padding: 8px; font-weight: 600;">ID Produit:</th><td style="padding: 8px;">{{data.productId}}</td></tr>
+                                <tr><th style="padding: 8px; font-weight: 600;">Référence:</th><td style="padding: 8px;">{{data.productReferences}}</td></tr>
+                                <tr><th style="padding: 8px; font-weight: 600;">Durée:</th><td style="padding: 8px;">{{data.productDuration}}</td></tr>
+                                <tr><th style="padding: 8px; font-weight: 600;">Calibre:</th><td style="padding: 8px;">{{data.productCaliber}}</td></tr>
+                                <tr><th style="padding: 8px; font-weight: 600;">Numéro d'approbation:</th><td style="padding: 8px;">{{data.productApprovalNumber}}</td></tr>
+                                <tr><th style="padding: 8px; font-weight: 600;">Poids:</th><td style="padding: 8px;">{{data.productWeight}}</td></tr>
+                                <tr><th style="padding: 8px; font-weight: 600;">NEC:</th><td style="padding: 8px;">{{data.productNec}}</td></tr>
+                                <tr><th style="padding: 8px; font-weight: 600;">Quantité min:</th><td style="padding: 8px;">{{data.productMinimalQuantity}}</td></tr>
+                                <tr><th style="padding: 8px; font-weight: 600;">Image:</th><td style="padding: 8px;">{{data.productImage}}</td></tr>
+                                <tr><th style="padding: 8px; font-weight: 600;">Lien:</th><td style="padding: 8px;">{{data.productLink}}</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </app-modal-button>
+                </td>
+                <td>
+                    <div style="justify-content: center; display: flex">
+                        <app-modal-nav nameIcon="edit" name="Modification du devis" class="cursor-pointer">
+                            <app-quotation-form></app-quotation-form>
+                        </app-modal-nav>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
+                        </div>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="export" nzTheme="outline" class="cursor-pointer text-green-700"/>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
+

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

@@ -0,0 +1,96 @@
+import { Component } 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";
+
+interface QuotationInfo {
+    quantity: number;
+    quotationId: number;
+    quotationMessage?: string;
+    quotationConditionsSale?: string;
+    productId: number;
+    productReferences: number;
+    productName?: string;
+    productDuration: number;
+    productCaliber: number;
+    productApprovalNumber: number;
+    productWeight: number;
+    productNec: number;
+    productImage?: string;
+    productLink?: string;
+    productMinimalQuantity: number;
+}
+
+@Component({
+    selector: 'app-quotation-table',
+    imports: [
+        ModalButton,
+        ModalNav,
+        NzDividerComponent,
+        NzIconDirective,
+        NzTableComponent,
+        QuotationForm
+    ],
+    templateUrl: './quotation-table.html',
+    styleUrl: './quotation-table.css',
+})
+
+export class QuotationTable {
+    quotations: QuotationInfo[] = [
+        {
+            quantity: 10,
+            quotationId: 101,
+            quotationMessage: 'Livraison urgente demandée',
+            quotationConditionsSale: 'Paiement à 30 jours',
+            productId: 5001,
+            productReferences: 123456,
+            productName: 'Feu d\'artifice A',
+            productDuration: 45.5,
+            productCaliber: 30,
+            productApprovalNumber: 998877,
+            productWeight: 1.5,
+            productNec: 0.5,
+            productImage: 'url_to_image_a',
+            productLink: 'http://example.com/product/a',
+            productMinimalQuantity: 5
+        },
+        {
+            quantity: 20,
+            quotationId: 102,
+            quotationMessage: 'Livraison standard',
+            quotationConditionsSale: 'Payé d\'avance',
+            productId: 5002,
+            productReferences: 654321,
+            productName: 'Feu d\'artifice B',
+            productDuration: 60.0,
+            productCaliber: 50,
+            productApprovalNumber: 112233,
+            productWeight: 2.0,
+            productNec: 0.8,
+            productImage: 'url_to_image_b',
+            productLink: 'http://example.com/product/b',
+            productMinimalQuantity: 10
+        },
+        {
+            quantity: 5,
+            quotationId: 103,
+            quotationMessage: null,
+            quotationConditionsSale: 'Paiement à 15 jours',
+            productId: 5003,
+            productReferences: 789012,
+            productName: 'Feu d\'artifice C',
+            productDuration: 30.0,
+            productCaliber: 25,
+            productApprovalNumber: 445566,
+            productWeight: 1.0,
+            productNec: 0.3,
+            productImage: null,
+            productLink: null,
+            productMinimalQuantity: 1
+        }
+    ];
+}
+

src/app/pages/quotation/quotation.html

@@ -1,9 +1,13 @@
 <div class="flex mt-2">
+    <app-modal-button type="primary" name="Créer un devis">
+        <app-quotation-form></app-quotation-form>
+    </app-modal-button>
+
     <div class="ml-95 w-150">
-        <app-search class="w-full"></app-search>
+        <app-search></app-search>
     </div>
 </div>
 
 <div class="mt-1">
-    <p>quotation works!</p>
+    <app-quotation-table></app-quotation-table>
 </div>

src/app/pages/quotation/quotation.ts

@@ -1,11 +1,21 @@
 import { Component } from '@angular/core';
 import {Search} from "../../components/search/search";
+import {DelivereryNoteTable} from "../../components/deliverery-note-table/deliverery-note-table";
+import {ModalButton} from "../../components/modal-button/modal-button";
+import {DelivereryNoteForm} from "../../components/deliverery-note-form/deliverery-note-form";
+import {QuotationForm} from "../../components/quotation-form/quotation-form";
+import {QuotationTable} from "../../components/quotation-table/quotation-table";
 
 @Component({
   selector: 'app-quotation',
-  imports: [
-      Search
-  ],
+    imports: [
+        DelivereryNoteTable,
+        ModalButton,
+        DelivereryNoteForm,
+        Search,
+        QuotationForm,
+        QuotationTable
+    ],
   templateUrl: './quotation.html',
   styleUrl: './quotation.css',
 })