added user page and create a new modal from use with button and text

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

@@ -0,0 +1,16 @@
+<button nz-button nzType="primary" (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"
+>
+</nz-modal>
+

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

@@ -0,0 +1,37 @@
+import {Component, input, Input} from '@angular/core';
+import {NzIconDirective} from "ng-zorro-antd/icon";
+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 {
+    name = input.required<string>()
+
+    isVisible = false;
+    isOkLoading = false;
+
+    showModal(): void {
+        this.isVisible = true;
+    }
+
+    handleOk(): void {
+        this.isOkLoading = true;
+        setTimeout(() => {
+            this.isVisible = false;
+            this.isOkLoading = false;
+        }, 1000);
+    }
+
+    handleCancel(): void {
+        this.isVisible = false;
+    }
+}

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

@@ -5,7 +5,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Alain" formControlName="newName">
+            <input nz-input placeholder="Alain" formControlName="name">
         </nz-form-control>
     </nz-form-item>
     <nz-form-item nz-flex>
@@ -14,7 +14,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="alain.terieur@pyrofetes.fr" formControlName="newEmail">
+            <input nz-input placeholder="alain.terieur@pyrofetes.fr" formControlName="email">
         </nz-form-control>
     </nz-form-item>
     <nz-form-item nz-flex>
@@ -23,7 +23,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="visiteur" formControlName="newFonction">
+            <input nz-input placeholder="visiteur" formControlName="fonction">
         </nz-form-control>
     </nz-form-item>
     <nz-form-item nz-flex>
@@ -32,7 +32,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
-            <input nz-input type="password" placeholder="Nouveau mot de passe" formControlName="newPassword">
+            <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

@@ -23,10 +23,10 @@ import {NzInputDirective} from "ng-zorro-antd/input";
 })
 export class ProfilForm {
     profilForm: FormGroup = new FormGroup({
-        newName: new FormControl<string>(null, [Validators.required]),
-        newEmail: new FormControl<string>(null, [Validators.required]),
-        newFonction: new FormControl<string>(null, [Validators.required]),
-        newPassword: new FormControl<string>(null, [Validators.required])
+        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])
     })
 
     submitForm() {

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,29 @@
+<nz-table #basicTable [nzData]="listOfData" class="mr-7">
+    <thead>
+    <tr>
+        <th>Nom</th>
+        <th>Email</th>
+        <th>Fonction</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+    <tbody>
+        @for (data of basicTable.data; track data) {
+            <tr>
+                <td>{{data.name}}</td>
+                <td>{{data.email}}</td>
+                <td>{{data.fonction}}</td>
+                <td>
+                    <div style="display: flex; gap: 10px;">
+                        <app-modal-nav nameIcon="edit" name="Modification de l'utilisateur" class="cursor-pointer">
+                            <app-profil-form></app-profil-form>
+                        </app-modal-nav>
+                        <div>
+                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>

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

@@ -0,0 +1,57 @@
+import { Component } 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 {StockForm} from "../stock-form/stock-form";
+import {UserInfo} from "../../interfaces/user.interface";
+import {ProfilForm} from "../profil-form/profil-form";
+
+@Component({
+  selector: 'app-user-table',
+    imports: [
+        ModalNav,
+        NzIconDirective,
+        NzTableComponent,
+        ProfilForm
+    ],
+  templateUrl: './user-table.html',
+  styleUrl: './user-table.css',
+})
+export class UserTable {
+    listOfData: UserInfo[] = [
+        { name: 'Alice Martin', email: 'alice.martin@example.com', fonction: 'Responsable Stock' },
+        { name: 'Bruno Lefevre', email: 'bruno.lefevre@example.com', fonction: 'Technicien' },
+        { name: 'Claire Dupont', email: 'claire.dupont@example.com', fonction: 'Chef d’équipe' },
+        { name: 'David Roux', email: 'david.roux@example.com', fonction: 'Opérateur' },
+        { name: 'Emma Girard', email: 'emma.girard@example.com', fonction: 'Manager' },
+        { name: 'Florian Petit', email: 'florian.petit@example.com', fonction: 'Contrôleur' },
+        { name: 'Gabriel Fabre', email: 'gabriel.fabre@example.com', fonction: 'Technicien' },
+        { name: 'Hélène Blanchard', email: 'helene.blanchard@example.com', fonction: 'Responsable Qualité' },
+        { name: 'Idris Caron', email: 'idris.caron@example.com', fonction: 'Opérateur' },
+        { name: 'Julie Laurent', email: 'julie.laurent@example.com', fonction: 'RH' },
+        { name: 'Kevin Becker', email: 'kevin.becker@example.com', fonction: 'Chef d’équipe' },
+        { name: 'Laura Denis', email: 'laura.denis@example.com', fonction: 'Responsable Stock' },
+        { name: 'Maxime Robert', email: 'maxime.robert@example.com', fonction: 'Technicien' },
+        { name: 'Nina Lambert', email: 'nina.lambert@example.com', fonction: 'Opérateur' },
+        { name: 'Olivier Garnier', email: 'olivier.garnier@example.com', fonction: 'Manager' },
+        { name: 'Pauline Henry', email: 'pauline.henry@example.com', fonction: 'Chef de Projet' },
+        { name: 'Quentin Millet', email: 'quentin.millet@example.com', fonction: 'Technicien' },
+        { name: 'Raphaël Julien', email: 'raphael.julien@example.com', fonction: 'Opérateur' },
+        { name: 'Sophie Moreau', email: 'sophie.moreau@example.com', fonction: 'Responsable Qualité' },
+        { name: 'Théo Renaud', email: 'theo.renaud@example.com', fonction: 'Technicien' },
+        { name: 'Ulysse Berger', email: 'ulysse.berger@example.com', fonction: 'Opérateur' },
+        { name: 'Valentine Roche', email: 'valentine.roche@example.com', fonction: 'RH' },
+        { name: 'William Arnaud', email: 'william.arnaud@example.com', fonction: 'Chef d’équipe' },
+        { name: 'Xavier Colin', email: 'xavier.colin@example.com', fonction: 'Technicien' },
+        { name: 'Yasmine Perrot', email: 'yasmine.perrot@example.com', fonction: 'Manager' },
+        { name: 'Zack Morel', email: 'zack.morel@example.com', fonction: 'Opérateur' },
+        { name: 'Adèle Simon', email: 'adele.simon@example.com', fonction: 'Responsable Stock' },
+        { name: 'Bastien Renault', email: 'bastien.renault@example.com', fonction: 'Technicien' },
+        { name: 'Cindy Barret', email: 'cindy.barret@example.com', fonction: 'Assistante' },
+        { name: 'Dorian Lefort', email: 'dorian.lefort@example.com', fonction: 'Contrôleur' },
+    ];
+
+    delete(){
+        return
+    }
+}

src/app/pages/user/user.html

@@ -1 +1,7 @@
-<p>user works!</p>
+<app-modal-button name="Ajouter un utilisateur">
+    <app-profil-form></app-profil-form>
+</app-modal-button>
+
+<div class="mt-2">
+    <app-user-table></app-user-table>
+</div>

src/app/pages/user/user.ts

@@ -1,8 +1,15 @@
 import { Component } from '@angular/core';
+import {UserTable} from "../../components/user-table/user-table";
+import {ModalButton} from "../../components/modal-button/modal-button";
+import {ProfilForm} from "../../components/profil-form/profil-form";
 
 @Component({
   selector: 'app-user',
-  imports: [],
+    imports: [
+        UserTable,
+        ModalButton,
+        ProfilForm
+    ],
   templateUrl: './user.html',
   styleUrl: './user.css',
 })