Merge branch 'feature/createProfilSection' into develop

.postcssrc.json

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

package-lock.json

@@ -14,8 +14,10 @@
         "@angular/forms": "^20.3.0",
         "@angular/platform-browser": "^20.3.0",
         "@angular/router": "^20.3.0",
+        "@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",
@@ -238,6 +240,18 @@
         "node": ">= 14.0.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -3680,6 +3694,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.17.tgz",
+      "integrity": "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.17",
+        "@tailwindcss/oxide": "4.1.17",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.17"
+      }
+    },
     "node_modules/@tailwindcss/vite": {
       "version": "4.1.17",
       "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.17.tgz",

package.json

@@ -27,8 +27,10 @@
     "@angular/forms": "^20.3.0",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
+    "@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.html

@@ -5,11 +5,11 @@
             <div class="logo">
                 <a routerLink="/welcome">
                     <img
-                            src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
+                        src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
-                            alt="logo"
+                        alt="logo"
-                            style="width: 100px; height: auto"
+                        style="width: 100px; height: auto"
                     />
-                    <h1>PYRO FÊTES</h1>
+                    <h1 class="text-amber-300">PYRO FÊTES</h1>
                 </a>
             </div>
 
@@ -70,14 +70,16 @@
             <!-- ICONES À DROITE -->
             <div class="right-icons">
                 <app-modal-nav nameIcon="bell" name="Notification"></app-modal-nav>
-                <app-modal-nav nameIcon="user" name="Profil"></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-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

@@ -4,10 +4,11 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {ModalNav} from "./components/modal-nav/modal-nav";
+import {Profil} from "./components/profil/profil";
 
 @Component({
   selector: 'app-root',
-    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav],
+    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })

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

@@ -0,0 +1,38 @@
+<form nz-form nzLayout="horizontal" [formGroup]="profilForm" (ngSubmit)="submitForm()">
+    <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="Alain" formControlName="newName">
+        </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="alain.terieur@pyrofetes.fr" formControlName="newEmail">
+        </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">
+            <input nz-input placeholder="visiteur" formControlName="newFonction">
+        </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="newPassword">
+        </nz-form-control>
+    </nz-form-item>
+</form>

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

@@ -0,0 +1,42 @@
+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-profil-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './profil-form.html',
+  styleUrl: './profil-form.css',
+})
+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])
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.profilForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.profilForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.profilForm.reset()
+    }
+}

src/app/components/profil/profil.css

@@ -0,0 +1,13 @@
+.festive {
+    font-family: "Comic Sans MS", cursive;
+    text-shadow: 2px 2px #8C731A, -2px -2px #8C731A;
+    color: #fff;
+    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></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 festive">
+    {{ getInitial(data.name) }}
+</div>
+
+<div class="mt-6">
+    <p class="text-2xl festive2 mx-auto flex items-center justify-center">{{data.name}}</p>
+    <p class="text-l festive2 mt-0 flex items-center justify-center">{{data.email}}</p>
+    <p class="text-l 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/stock-table/stock-table.html

@@ -1,13 +1,13 @@
-<nz-table #basicTable [nzData]="listOfData">
+<nz-table #basicTable [nzData]="listOfData" class="mr-7">
     <thead>
     <tr>
         <th>Nom</th>
-        <th>Duration</th>
-        <th>Caliber</th>
-        <th>quantity</th>
-        <th>Weight</th>
         <th>Nec</th>
-        <th>MinimalQuantity</th>
+        <th>Calibre</th>
+        <th>Poid</th>
+        <th>Durée</th>
+        <th>Quantité</th>
+        <th>Limite</th>
         <th>Action</th>
     </tr>
     </thead>
@@ -15,19 +15,19 @@
         @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.caliber}}</td>
+                <td>{{data.weight}}</td>
+                <td>{{data.duration}}</td>
+                <td>{{data.quantity}}</td>
                 <td>{{data.minimalQuantity}}</td>
                 <td>
                     <div style="display: flex; gap: 10px;">
-                        <app-modal-nav nameIcon="edit" name="Modification de la quantité minimale">
+                        <app-modal-nav nameIcon="edit" name="Modification de la quantité minimale" class="cursor-pointer">
                             <app-stock-form></app-stock-form>
                         </app-modal-nav>
                         <div>
-                            <nz-icon nzType="delete" nzTheme="outline"/>
+                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
                         </div>
                     </div>
                 </td>

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

@@ -18,25 +18,38 @@ import {StockForm} from "../stock-form/stock-form";
 })
 export class StockTable {
     listOfData: StockInfo[] = [
-        {
+        { name: 'Stock 1', duration: '10 days', caliber: '100g', quantity: 100, weight: 1000, nec: '5kg', minimalQuantity: 5 },
-            name: 'Stock 1',
+        { name: 'Stock 2', duration: '20 days', caliber: '200g', quantity: 200, weight: 2000, nec: '10kg', minimalQuantity: 10 },
-            duration: '10 days',
+        { name: 'Stock 3', duration: '15 days', caliber: '150g', quantity: 150, weight: 1500, nec: '7.5kg', minimalQuantity: 7 },
-            caliber: '100g',
+        { name: 'Stock 4', duration: '12 days', caliber: '120g', quantity: 120, weight: 1200, nec: '6kg', minimalQuantity: 6 },
-            quantity: 100,
+        { name: 'Stock 5', duration: '18 days', caliber: '180g', quantity: 180, weight: 1800, nec: '9kg', minimalQuantity: 9 },
-            weight: 1000,
+        { name: 'Stock 6', duration: '22 days', caliber: '220g', quantity: 220, weight: 2200, nec: '11kg', minimalQuantity: 11 },
-            nec: '5kg',
+        { name: 'Stock 7', duration: '8 days', caliber: '80g', quantity: 80, weight: 800, nec: '4kg', minimalQuantity: 4 },
-            minimalQuantity: 5
+        { name: 'Stock 8', duration: '25 days', caliber: '250g', quantity: 250, weight: 2500, nec: '12.5kg', minimalQuantity: 12 },
-        },
+        { name: 'Stock 9', duration: '14 days', caliber: '140g', quantity: 140, weight: 1400, nec: '7kg', minimalQuantity: 7 },
-        {
+        { name: 'Stock 10', duration: '16 days', caliber: '160g', quantity: 160, weight: 1600, nec: '8kg', minimalQuantity: 8 },
-            name: 'Stock 2',
+        { name: 'Stock 11', duration: '11 days', caliber: '110g', quantity: 110, weight: 1100, nec: '5.5kg', minimalQuantity: 5 },
-            duration: '20 days',
+        { name: 'Stock 12', duration: '19 days', caliber: '190g', quantity: 190, weight: 1900, nec: '9.5kg', minimalQuantity: 9 },
-            caliber: '200g',
+        { name: 'Stock 13', duration: '13 days', caliber: '130g', quantity: 130, weight: 1300, nec: '6.5kg', minimalQuantity: 6 },
-            quantity: 200,
+        { name: 'Stock 14', duration: '17 days', caliber: '170g', quantity: 170, weight: 1700, nec: '8.5kg', minimalQuantity: 8 },
-            weight: 2000,
+        { name: 'Stock 15', duration: '21 days', caliber: '210g', quantity: 210, weight: 2100, nec: '10.5kg', minimalQuantity: 10 },
-            nec: '10kg',
+        { name: 'Stock 16', duration: '9 days', caliber: '90g', quantity: 90, weight: 900, nec: '4.5kg', minimalQuantity: 4 },
-            minimalQuantity: 10
+        { name: 'Stock 17', duration: '23 days', caliber: '230g', quantity: 230, weight: 2300, nec: '11.5kg', minimalQuantity: 11 },
-        }
+        { name: 'Stock 18', duration: '7 days', caliber: '70g', quantity: 70, weight: 700, nec: '3.5kg', minimalQuantity: 3 },
+        { name: 'Stock 19', duration: '24 days', caliber: '240g', quantity: 240, weight: 2400, nec: '12kg', minimalQuantity: 12 },
+        { name: 'Stock 20', duration: '6 days', caliber: '60g', quantity: 60, weight: 600, nec: '3kg', minimalQuantity: 3 },
+        { name: 'Stock 21', duration: '26 days', caliber: '260g', quantity: 260, weight: 2600, nec: '13kg', minimalQuantity: 13 },
+        { name: 'Stock 22', duration: '5 days', caliber: '50g', quantity: 50, weight: 500, nec: '2.5kg', minimalQuantity: 2 },
+        { name: 'Stock 23', duration: '27 days', caliber: '270g', quantity: 270, weight: 2700, nec: '13.5kg', minimalQuantity: 13 },
+        { name: 'Stock 24', duration: '4 days', caliber: '40g', quantity: 40, weight: 400, nec: '2kg', minimalQuantity: 2 },
+        { name: 'Stock 25', duration: '28 days', caliber: '280g', quantity: 280, weight: 2800, nec: '14kg', minimalQuantity: 14 },
+        { name: 'Stock 26', duration: '3 days', caliber: '30g', quantity: 30, weight: 300, nec: '1.5kg', minimalQuantity: 1 },
+        { name: 'Stock 27', duration: '29 days', caliber: '290g', quantity: 290, weight: 2900, nec: '14.5kg', minimalQuantity: 14 },
+        { name: 'Stock 28', duration: '2 days', caliber: '20g', quantity: 20, weight: 200, nec: '1kg', minimalQuantity: 1 },
+        { name: 'Stock 29', duration: '30 days', caliber: '300g', quantity: 300, weight: 3000, nec: '15kg', minimalQuantity: 15 },
+        { name: 'Stock 30', duration: '1 day', caliber: '10g', quantity: 10, weight: 100, nec: '0.5kg', minimalQuantity: 1 },
     ];
+
     delete(){
         return
     }

src/app/interfaces/stock.interface.ts

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

src/app/interfaces/user.interface.ts

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