created stock page and stock-table component

src/app/compontents/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/compontents/stock-table/stock-table.html

@@ -0,0 +1,30 @@
+<nz-table #basicTable [nzData]="listOfData">
+    <thead>
+    <tr>
+        <th>Nom</th>
+        <th>Duration</th>
+        <th>Caliber</th>
+        <th>quantity</th>
+        <th>Weight</th>
+        <th>Nec</th>
+        <th>MinimalQuantity</th>
+    </tr>
+    </thead>
+    <tbody>
+        @for (data of basicTable.data; track data) {
+            <tr>
+                <td>{{data.name}}</td>
+                <td>{{data.duration}}</td>
+                <td>{{data.caliber}}</td>
+                <td>{{data.quantity}}</td>
+                <td>{{data.weight}}</td>
+                <td>{{data.nec}}</td>
+                <td>{{data.minimalQuantity}}</td>
+                <td>
+                    modifier
+                    <button nz-button nzType="primary" (click)="delete()" class="bg-red-600 border-red-600">Supprimer</button>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>

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

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import {StockInfo} from "../../interfaces/stock.interface";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+
+@Component({
+  selector: 'app-stock-table',
+    imports: [
+        NzTableComponent,
+        NzButtonComponent
+    ],
+  templateUrl: './stock-table.html',
+  styleUrl: './stock-table.css',
+})
+export class StockTable {
+    listOfData: StockInfo[] = [
+        {
+            name: 'Stock 1',
+            duration: '10 days',
+            caliber: '100g',
+            quantity: 100,
+            weight: 1000,
+            nec: '5kg',
+            minimalQuantity: 5
+        },
+        {
+            name: 'Stock 2',
+            duration: '20 days',
+            caliber: '200g',
+            quantity: 200,
+            weight: 2000,
+            nec: '10kg',
+            minimalQuantity: 10
+        }
+    ];
+    delete(){
+        return
+    }
+}

src/app/interfaces/stock.interface.ts

@@ -0,0 +1,9 @@
+export interface StockInfo {
+    name: string;
+    duration: string;
+    caliber: string;
+    quantity: number;
+    weight: number;
+    nec: string;
+    minimalQuantity: number;
+}

src/app/pages/stock/stock.html

@@ -1,25 +1 @@
-<nz-table #basicTable [nzData]="listOfData">
+<app-stock-table></app-stock-table>
-    <thead>
-    <tr>
-        <th>Nom</th>
-        <th>Duration</th>
-        <th>Caliber</th>
-        <th>quantity</th>
-        <th>Weight</th>
-        <th>Nec</th>
-        <th>MinimalQuantity</th>
-    </tr>
-    </thead>
-    <tbody>
-        @for (data of basicTable.data; track data) {
-            <tr>
-                <td>{{data.name}}</td>
-                <td>{{data.duration}}</td>
-                <td>{{data.caliber}}</td>
-                <td>{{data.quantity}}</td>
-                <td>{{data.weight}}</td>
-                <td>{{data.nec}}</td>
-                <td>{{data.minimalQuantity}}</td>
-            </tr>
-    </tbody>
-</nz-table>

src/app/pages/stock/stock.ts

@@ -1,51 +1,17 @@
 import { Component } from '@angular/core';
 import {NzTableComponent} from "ng-zorro-antd/table";
+import {StockTable} from "../../compontents/stock-table/stock-table";
 
 @Component({
   selector: 'app-stock',
     imports: [
-        NzTableComponent
+        NzTableComponent,
+        StockTable
     ],
   templateUrl: './stock.html',
   styleUrl: './stock.css',
 })
 
-class StockInfo {
-    id: number;
-    name: string;
-    Duration: string;
-    Caliber: string;
-    Quantity: number;
-    Weight: number;
-    Nec: string;
-    MinimalQuantity: number;
-}
-
-
 export class Stock {
-    listOfData: StockInfo[] = [
+
-        {
-            id: 1,
-            name: 'Stock 1',
-            Duration: '10 days',
-            Caliber: '100g',
-            Quantity: 100,
-            Weight: 1000,
-            Nec: '5kg',
-            MinimalQuantity: 5
-        },
-        {
-            id: 2,
-            name: 'Stock 2',
-            Duration: '20 days',
-            Caliber: '200g',
-            Quantity: 200,
-            Weight: 2000,
-            Nec: '10kg',
-            MinimalQuantity: 10
-        }
-    ];
-    delete(){
-        return
-    }
 }