Real value for products under limit

package-lock.json

@@ -17,11 +17,8 @@
         "@openapitools/openapi-generator-cli": "^2.25.2",
         "@tailwindcss/postcss": "^4.1.17",
         "@tailwindcss/vite": "^4.1.17",
-        "browser-image-compression": "^2.0.2",
-        "jwt-decode": "^4.0.0",
         "ng-zorro-antd": "^20.4.0",
         "postcss": "^8.5.6",
-        "rimraf": "^6.1.3",
         "rxjs": "~7.8.0",
         "tailwindcss": "^4.1.17",
         "tslib": "^2.3.0",
@@ -31,7 +28,6 @@
         "@angular/build": "^20.3.9",
         "@angular/cli": "^20.3.9",
         "@angular/compiler-cli": "^20.3.0",
-        "baseline-browser-mapping": "^2.10.32",
         "less": "^4.2.0",
         "typescript": "~5.9.2"
       }
@@ -504,7 +500,6 @@
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.11.tgz",
       "integrity": "sha512-zQ8xlyUBS+UDAUKk7z/hhWdTtQU2oc/Dwo7jXpyrYlz9y2X1A6sAZpUigdYpbrBkIaNs3MplJevgMiCm3kmN8g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -521,7 +516,6 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.11.tgz",
       "integrity": "sha512-3O0iMPttD8a4QQQrjVfIjboiZZ17ErkZuqK8BXJBTn2rplpkq1m3kVhgsmzN2OANRR05GF9Ed1dTf8ycTrO1yg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -535,7 +529,6 @@
       "integrity": "sha512-u6T8kxj7LzK3btEln6Vd8y7p+O1eNXrLiGwqPuRF/QoyjBrRkTYufZ1I4TvzUxdd0ot6mPDRfdmiD15q//Y+oQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/core": "7.28.3",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -568,7 +561,6 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.11.tgz",
       "integrity": "sha512-tOXlxG0SI9Yy1b/ntGyBahfffDpFg7vAbAt+9riOb5ZZ8GYyyOzg78Lqa/lrdBVEG0PXdDjEa0MV93qCyqwYlg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -594,7 +586,6 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.11.tgz",
       "integrity": "sha512-jXDvW6a9HUzmLmvgPE+hVoZzc6QJBtQ1kYNn/FZDhbtmjRThJtaMW9YfS0Vz/a9KT9cxBf+8O8Q+yspvgsh3fg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -613,7 +604,6 @@
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.11.tgz",
       "integrity": "sha512-hh+8O8m4QzYYlQr9WGew472P37GF1u64NF3HfHmUKJ0xSqqTOHfpni3utev8upJAFJXBKOUZETgeHu2JRcGavg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -636,7 +626,6 @@
       "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.11.tgz",
       "integrity": "sha512-kuv7Yso7GY3tfRtQN0kW4v2Or4NUEBdjxTz5C8YuAhGDpiKXxDNkXzFliYTVWpJkr3EkTuR9mt9IAc+wxof3Pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -718,7 +707,6 @@
       "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -1660,7 +1648,6 @@
       "integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^4.2.1",
         "@inquirer/confirm": "^5.1.14",
@@ -2520,7 +2507,6 @@
       "resolved": "https://registry.npmjs.org/@nestjs/common/-/common-11.1.9.tgz",
       "integrity": "sha512-zDntUTReRbAThIfSp3dQZ9kKqI+LjgLp5YZN5c1bgNRDuoeLySAoZg46Bg1a+uV8TMgIRziHocglKGNzr6l+bQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "file-type": "21.1.0",
         "iterare": "1.2.1",
@@ -4284,7 +4270,6 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
       "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.4",
@@ -4319,16 +4304,13 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.32",
+      "version": "2.8.27",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.32.tgz",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.27.tgz",
-      "integrity": "sha512-wbPvpyjJPC0zdfdKXxqEL3Ea+bOMD/87X4lftiJkkaBiuG6ALQy1SLmEd7BSmVCuwCQsBrCamgBoLyfFDD1EPg==",
+      "integrity": "sha512-2CXFpkjVnY2FT+B6GrSYxzYf65BJWEqz5tIRHCvNsZZ2F3CmsCB37h8SpYgKG7y9C4YAeTipIPWG7EmFmhAeXA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.cjs"
+        "baseline-browser-mapping": "dist/cli.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
       }
     },
     "node_modules/basic-ftp": {
@@ -4435,15 +4417,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/browser-image-compression": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-2.0.2.tgz",
-      "integrity": "sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw==",
-      "license": "MIT",
-      "dependencies": {
-        "uzip": "0.20201231.0"
-      }
-    },
     "node_modules/browserslist": {
       "version": "4.28.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
@@ -4464,7 +4437,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -5663,7 +5635,6 @@
       "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.0",
@@ -6913,22 +6884,12 @@
       ],
       "license": "MIT"
     },
-    "node_modules/jwt-decode": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
-      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/less": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/less/-/less-4.4.2.tgz",
       "integrity": "sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -7216,7 +7177,6 @@
       "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cli-truncate": "^4.0.0",
         "colorette": "^2.0.20",
@@ -7605,10 +7565,10 @@
       }
     },
     "node_modules/minipass": {
-      "version": "7.1.3",
+      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "BlueOak-1.0.0",
+      "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -8414,6 +8374,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/pacote": {
@@ -8871,8 +8832,7 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
       "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
-      "license": "Apache-2.0",
+      "license": "Apache-2.0"
-      "peer": true
     },
     "node_modules/require-directory": {
       "version": "2.1.1",
@@ -8948,103 +8908,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/rimraf": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-6.1.3.tgz",
-      "integrity": "sha512-LKg+Cr2ZF61fkcaK1UdkH2yEBBKnYjTyWzTJT6KNPcSPaiT7HSdhtMXQuN5wkTX0Xu72KQ1l8S42rlmexS2hSA==",
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "glob": "^13.0.3",
-        "package-json-from-dist": "^1.0.1"
-      },
-      "bin": {
-        "rimraf": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": "20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rimraf/node_modules/balanced-match": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
-      "license": "MIT",
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/rimraf/node_modules/brace-expansion": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
-      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^4.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/rimraf/node_modules/glob": {
-      "version": "13.0.6",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
-      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "minimatch": "^10.2.2",
-        "minipass": "^7.1.3",
-        "path-scurry": "^2.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rimraf/node_modules/lru-cache": {
-      "version": "11.5.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
-      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": "20 || >=22"
-      }
-    },
-    "node_modules/rimraf/node_modules/minimatch": {
-      "version": "10.2.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
-      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "brace-expansion": "^5.0.5"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rimraf/node_modules/path-scurry": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
-      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^11.0.0",
-        "minipass": "^7.1.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/rollup": {
       "version": "4.52.3",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.3.tgz",
@@ -9117,7 +8980,6 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -9154,7 +9016,6 @@
       "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -9903,8 +9764,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
+      "license": "0BSD"
-      "peer": true
     },
     "node_modules/tuf-js": {
       "version": "3.1.0",
@@ -9954,7 +9814,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -10079,12 +9938,6 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
-    "node_modules/uzip": {
-      "version": "0.20201231.0",
-      "resolved": "https://registry.npmjs.org/uzip/-/uzip-0.20201231.0.tgz",
-      "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng==",
-      "license": "MIT"
-    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -10121,7 +9974,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz",
       "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -10509,7 +10361,6 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -10528,8 +10379,7 @@
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
       "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     }
   }
 }

package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "openapi": "rimraf 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"
+    "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,
@@ -31,11 +32,8 @@
     "@openapitools/openapi-generator-cli": "^2.25.2",
     "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
-    "browser-image-compression": "^2.0.2",
-    "jwt-decode": "^4.0.0",
     "ng-zorro-antd": "^20.4.0",
     "postcss": "^8.5.6",
-    "rimraf": "^6.1.3",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.17",
     "tslib": "^2.3.0",
@@ -45,7 +43,6 @@
     "@angular/build": "^20.3.9",
     "@angular/cli": "^20.3.9",
     "@angular/compiler-cli": "^20.3.0",
-    "baseline-browser-mapping": "^2.10.32",
     "less": "^4.2.0",
     "typescript": "~5.9.2"
   }

src/app/app.config.ts

@@ -1,21 +1,19 @@
-import {ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection} from '@angular/core';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
-import {provideRouter} from '@angular/router';
+import { provideRouter } from '@angular/router';
 
-import {routes} from './app.routes';
+import { routes } from './app.routes';
-import {fr_FR, provideNzI18n} from 'ng-zorro-antd/i18n';
+import { fr_FR, provideNzI18n } from 'ng-zorro-antd/i18n';
-import {registerLocaleData} from '@angular/common';
+import { registerLocaleData } from '@angular/common';
 import fr from '@angular/common/locales/fr';
-import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import {provideHttpClient, withInterceptors} from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
-import {authInterceptor} from "./interceptors/auth-interceptor";
 
 registerLocaleData(fr);
 
 export const appConfig: ApplicationConfig = {
-    providers: [
+  providers: [
-        provideBrowserGlobalErrorListeners(),
+    provideBrowserGlobalErrorListeners(),
-        provideZoneChangeDetection({eventCoalescing: true}),
+    provideZoneChangeDetection({ eventCoalescing: true }),
-        provideRouter(routes), provideNzI18n(fr_FR), provideAnimationsAsync(), provideHttpClient(),
+    provideRouter(routes), provideNzI18n(fr_FR), provideAnimationsAsync(), provideHttpClient()
-        provideHttpClient(withInterceptors([authInterceptor]))
+  ]
-    ]
 };

src/app/app.css

@@ -0,0 +1,113 @@
+:host {
+    display: flex;
+}
+
+.app-layout {
+    height: 100vh;
+}
+
+nz-header {
+    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 {
+    display: flex;
+    align-items: center;
+}
+
+.logo a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+}
+
+.logo img {
+    height: 40px;
+    width: auto;
+}
+
+.logo h1 {
+    margin: 0 0 0 10px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 20px;
+    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+}
+
+/* --- 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;
+}
+
+.inner-content {
+    padding: 24px;
+    background: #fff;
+    height: 100%;
+}

src/app/app.html

@@ -1 +1,90 @@
-<router-outlet></router-outlet>
+<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"
+                    />
+                    <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">
+                        <nz-icon nzType="stock"></nz-icon>
+                        <span>Stock</span>
+                    </a>
+                </li>
+                <li nz-submenu nzTitle="Partenaires" nzIcon="team">
+                    <ul>
+                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                            <a routerLink="/supplier">
+                                <nz-icon nzType="shop"></nz-icon>
+                                <span>Fournisseurs</span>
+                            </a>
+                        </li>
+                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                            <a routerLink="/deliverer">
+                                <nz-icon nzType="car"></nz-icon>
+                                <span>Livreurs</span>
+                            </a>
+                        </li>
+                    </ul>
+                </li>
+                <li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
+                    <ul>
+                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                            <a routerLink="/quotation">
+                                <nz-icon nzType="file"></nz-icon>
+                                <span>Devis</span>
+                            </a>
+                        </li>
+                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                            <a routerLink="/purchase-order">
+                                <nz-icon nzType="file"></nz-icon>
+                                <span>Bon de commande</span>
+                            </a>
+                        </li>
+                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                            <a routerLink="/delivery-note">
+                                <nz-icon nzType="file"></nz-icon>
+                                <span>Bon de livraison</span>
+                            </a>
+                        </li>
+                    </ul>
+                </li>
+                <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                    <a routerLink="/user">
+                        <nz-icon nzType="user"></nz-icon>
+                        <span>Utilisateur</span>
+                    </a>
+                </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 overflow-auto">
+            <router-outlet></router-outlet>
+        </div>
+    </nz-content>
+</nz-layout>

src/app/app.routes.ts

@@ -1,70 +1,41 @@
-import {Routes} from '@angular/router';
+import { Routes } from '@angular/router';
-import {authGuard} from "./guards/auth.guard";
 
 export const routes: Routes = [
     {
         path: '',
         pathMatch: 'full',
-        redirectTo: '/login'
+        redirectTo: '/welcome'
     },
     {
-        path: 'login',
+        path: 'welcome',
-        loadComponent: () => import('./pages/login/login').then(x => x.Login)
+        loadComponent: () => import('./pages/welcome/welcome').then(x => x.Welcome)
     },
     {
-        path: '',
+        path: 'stock',
-        loadComponent: () =>
+        loadComponent: () => import('./pages/stock/stock').then(x => x.Stock)
-            import('./components/layout/layout').then(m => m.Layout),
+    },
-        children: [
+    {
-            {
+        path: 'supplier',
-                path: '',
+        loadComponent: () => import('./pages/supplier/supplier').then(x => x.Supplier)
-                pathMatch: 'full',
+    },
-                redirectTo: '/dashboard'
+    {
-            },
+        path: 'deliverer',
-            {
+        loadComponent: () => import('./pages/deliverer/deliverer').then(x => x.Deliverer)
-                path: 'dashboard',
+    },
-                loadComponent: () => import('./pages/dashboard/dashboard').then(m => m.Dashboard),
+    {
-                canActivate: [authGuard]
+        path: 'quotation',
-            },
+        loadComponent: () => import('./pages/quotation/quotation').then(x => x.Quotation)
-            {
+    },
-                path: 'stock',
+    {
-                loadComponent: () => import('./pages/stock/stock').then(m => m.Stock),
+        path: 'purchase-order',
-                canActivate: [authGuard]
+        loadComponent: () => import('./pages/purchase-order/purchase-order').then(x => x.PurchaseOrder)
-            },
+    },
-            {
+    {
-                path: 'supplier',
+        path: 'delivery-note',
-                loadComponent: () => import('./pages/supplier/supplier').then(m => m.Supplier),
+        loadComponent: () => import('./pages/delivery-note/delivery-note').then(x => x.DeliveryNote)
-                canActivate: [authGuard]
+    },
-            },
+    {
-            {
+        path: 'user',
-                path: 'deliverer',
+        loadComponent: () => import('./pages/user/user').then(x => x.User)
-                loadComponent: () => import('./pages/deliverer/deliverer').then(m => m.Deliverer),
-                canActivate: [authGuard]
-            },
-            {
-                path: 'quotation',
-                loadComponent: () => import('./pages/quotation/quotation').then(m => m.Quotation),
-                canActivate: [authGuard]
-            },
-            {
-                path: 'purchase-order',
-                loadComponent: () => import('./pages/purchase-order/purchase-order').then(m => m.PurchaseOrder),
-                canActivate: [authGuard]
-            },
-            {
-                path: 'delivery-note',
-                loadComponent: () => import('./pages/delivery-note/delivery-note').then(m => m.DeliveryNote),
-                canActivate: [authGuard]
-            },
-            {
-                path: 'user',
-                loadComponent: () => import('./pages/user/user').then(m => m.User),
-                canActivate: [authGuard],
-            },
-            {
-                path: '**',
-                redirectTo: 'dashboard'
-            }
-        ]
     }
 ];

src/app/app.ts

@@ -1,13 +1,17 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {RouterOutlet} from '@angular/router';
+import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
-import {NzLayoutModule} from 'ng-zorro-antd/layout';
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
-import {NzMenuModule} from 'ng-zorro-antd/menu';
+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";
+import {NotifList} from "./components/notif-list/notif-list";
+import {SettingForm} from "./components/setting-form/setting-form";
 
 @Component({
-    selector: 'app-root',
+  selector: 'app-root',
-    imports: [RouterOutlet, NzLayoutModule, NzMenuModule],
+    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil, NotifList, SettingForm],
-    templateUrl: './app.html',
+  templateUrl: './app.html',
-    styleUrl: './app.css'
+  styleUrl: './app.css'
 })
-export class App {
+export class App {}
-}

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

@@ -1,40 +0,0 @@
-<form [formGroup]="addProductForm">
-    <nz-form-item nz-flex>
-        <nz-form-label nzSpan="12" nzRequired>
-            Fournisseur
-        </nz-form-label>
-
-        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="supplierId" nzPlaceHolder="Choisir un fournisseur" nzShowSearch>
-                @for (supplier of suppliers(); track supplier.id) {
-                    <nz-option [nzLabel]="supplier.name" [nzValue]="supplier.id"></nz-option>
-                }
-            </nz-select>
-        </nz-form-control>
-    </nz-form-item>
-
-    <div class="overflow-x-auto mt-6">
-        <nz-table [nzBordered]="true" class="mx-auto text-center">
-            <thead>
-            <tr>
-                <th class="text-center">Produit</th>
-                <th class="text-center">Prix</th>
-            </tr>
-            </thead>
-            <tbody formArrayName="lines">
-                @for (line of lines.controls; 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="price"
-                                    [nzMin]="0"
-                                    [nzStep]="1">
-                            </nz-input-number>
-                        </td>
-                    </tr>
-                }
-            </tbody>
-        </nz-table>
-    </div>
-</form>

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

@@ -1,54 +0,0 @@
-import {Component, input} from '@angular/core';
-import {FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {GetProductDto, GetSupplierDto} from "../../services/api";
-import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
-import {NzFormControlComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
-import {NzFlexDirective} from "ng-zorro-antd/flex";
-import {NzTableComponent} from "ng-zorro-antd/table";
-import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
-import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
-
-@Component({
-    selector: 'app-add-product-supplier-form',
-    imports: [
-        NzRowDirective,
-        NzFormControlComponent,
-        NzFormLabelComponent,
-        ReactiveFormsModule,
-        NzFlexDirective,
-        NzColDirective,
-        NzTableComponent,
-        NzInputNumberComponent,
-        NzOptionComponent,
-        NzSelectComponent
-    ],
-    templateUrl: './add-product-supplier-form.html',
-    styleUrl: './add-product-supplier-form.css',
-})
-export class AddProductSupplierForm {
-    addProductForm: FormGroup = new FormGroup({
-        supplierId: new FormControl<number>(null, Validators.required),
-        lines: new FormArray([], Validators.required),
-    });
-
-    suppliers = input.required<GetSupplierDto[]>();
-    products = input.required<GetProductDto[]>();
-
-    get lines(): FormArray {
-        return this.addProductForm.get('lines') as FormArray;
-    }
-
-    addProductToForm() {
-        this.lines.clear();
-
-        this.products().forEach(x => {
-            this.lines.push(
-                new FormGroup({
-                    productId: new FormControl(x.id),
-                    name: new FormControl(x.name),
-                    price: new FormControl(0, [Validators.required, Validators.min(0)])
-                })
-            );
-        });
-    }
-}

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

@@ -1,53 +0,0 @@
-<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>
-
-    <nz-form-item nz-flex>
-        <nz-form-label nzSpan="12" nzRequired>
-            Fournisseur
-        </nz-form-label>
-
-        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="supplierId"
-                       (ngModelChange)="refresh()"
-                       [nzPlaceHolder]="getBestSupplier().name ?? 'Choisir un fournisseur'"
-                       nzShowSearch>
-                @for (supplier of suppliers(); track supplier.id) {
-                    <nz-option [nzLabel]="supplier.name" [nzValue]="supplier.id"></nz-option>
-                }
-            </nz-select>
-        </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; 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

@@ -1,93 +0,0 @@
-import {Component, input, OnInit, signal} from '@angular/core';
-import {FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule, FormControl} from '@angular/forms';
-import {GetProductDto, GetSupplierDto} 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";
-import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
-import {min} from "rxjs";
-
-@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,
-        NzOptionComponent,
-        NzSelectComponent,
-    ]
-})
-export class CreatePurchaseorderForm {
-    suppliers = input.required<GetSupplierDto[]>();
-    products = input.required<GetProductDto[]>();
-
-    getBestSupplier() {
-        let bestSupplier: GetSupplierDto = this.suppliers()[0];
-        let maxProducts = 0;
-
-        const selectedProducts = this.products().map(x => x.id);
-
-        this.suppliers().forEach(x => {
-            const supplierProductsCount = x.prices.filter(p => selectedProducts.includes(p.productId)).length ?? 0;
-
-            if (supplierProductsCount > maxProducts) {
-                maxProducts = supplierProductsCount;
-                bestSupplier = x;
-            }
-        })
-        return bestSupplier;
-    }
-
-    getProductsOfSupplier() {
-        const supplier = this.suppliers().find(x => x.id === this.createPurchaseOrderForm.value.supplierId);
-        if (!supplier) return [];
-
-        const supplierProductIds = supplier.prices.map(x => x.productId);
-
-        return this.products().filter(product => supplierProductIds.includes(product.id));
-    }
-
-    createPurchaseOrderForm: FormGroup = new FormGroup({
-        purchaseConditions: new FormControl<string | null>(null, Validators.required),
-        lines: new FormArray([], Validators.required),
-        supplierId: new FormControl<number>(null, Validators.required),
-    })
-
-    get lines(): FormArray {
-        return this.createPurchaseOrderForm.get('lines') as FormArray;
-    }
-
-    addProductToForm() {
-        const supplierId = this.createPurchaseOrderForm.value.supplierId ?? this.getBestSupplier().id;
-        this.createPurchaseOrderForm.patchValue({
-            supplierId
-        });
-
-        this.refresh();
-    }
-
-    refresh() {
-        this.lines.clear();
-
-        this.getProductsOfSupplier().forEach(x => {
-            this.lines.push(
-                new FormGroup({
-                    productId: new FormControl(x.id),
-                    name: new FormControl(x.name),
-                    quantity: new FormControl(1, [Validators.required, Validators.min(1)])
-                })
-            );
-        });
-    }
-}

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

@@ -1,62 +0,0 @@
-<form [formGroup]="createQuotationForm">
-    <nz-form-item nz-flex>
-        <nz-form-label nzSpan="12" nzRequired>
-            Client
-        </nz-form-label>
-
-        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="customerId" nzPlaceHolder="Choisir un client"
-                       nzShowSearch>
-                @for (customer of customers(); track customer.id) {
-                    <nz-option [nzLabel]="customer.note" [nzValue]="customer.id"></nz-option>
-                }
-            </nz-select>
-        </nz-form-control>
-    </nz-form-item>
-
-
-    <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="conditionsSale">
-        </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; 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

@@ -1,105 +0,0 @@
-import {Component, inject, input, OnInit, signal} 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 {CustomersService, GetCustomerDto, GetProductDto, GetSupplierDto} from "../../services/api";
-import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
-import {firstValueFrom} from "rxjs";
-import {NzNotificationService} from "ng-zorro-antd/notification";
-
-@Component({
-    selector: 'app-create-quotation-form',
-    imports: [
-        FormsModule,
-        NzColDirective,
-        NzFlexDirective,
-        NzFormControlComponent,
-        NzFormItemComponent,
-        NzFormLabelComponent,
-        NzInputDirective,
-        NzInputNumberComponent,
-        NzTableComponent,
-        ReactiveFormsModule,
-        NzOptionComponent,
-        NzSelectComponent
-    ],
-    templateUrl: './create-quotation-form.html',
-    styleUrl: './create-quotation-form.css',
-})
-export class CreateQuotationForm implements OnInit {
-    private customersService = inject(CustomersService);
-    private notificationService = inject(NzNotificationService);
-
-    suppliers = input.required<GetSupplierDto[]>();
-    products = input.required<GetProductDto[]>();
-
-    customers = signal<GetCustomerDto[]>([]);
-
-    async ngOnInit() {
-        try {
-            const customers = await firstValueFrom(this.customersService.getAllCustomersEndpoint())
-            this.customers.set(customers);
-        } catch {
-            this.notificationService.error('Erreur', 'Erreur de communication avec l\'API')
-        }
-    }
-
-    createQuotationForm: FormGroup = new FormGroup({
-        message: new FormControl<string>(null, Validators.required),
-        conditionsSale: new FormControl<string>(null, Validators.required),
-        supplierId: new FormControl<number>(null, Validators.required),
-        customerId: new FormControl<number>(null, Validators.required),
-        lines: new FormArray([], Validators.required),
-    })
-
-    get lines(): FormArray {
-        return this.createQuotationForm.get('lines') as FormArray;
-    }
-
-    getDefaultSupplier() {
-        let defaultSupplier: GetSupplierDto = this.suppliers()[0];
-        let maxProducts = 0;
-
-        const selectedProducts = this.products().map(x => x.id);
-
-        this.suppliers().forEach(x => {
-            const supplierProductsCount = x.prices.filter(p => selectedProducts.includes(p.productId)).length ?? 0;
-
-            if (supplierProductsCount > maxProducts) {
-                maxProducts = supplierProductsCount;
-                defaultSupplier = x;
-            }
-        })
-
-        return defaultSupplier;
-    }
-
-    addProductToForm() {
-        this.lines.clear();
-        this.products().forEach(x => {
-            this.lines.push(
-                new FormGroup({
-                    productId: new FormControl(x.id),
-                    name: new FormControl(x.name),
-                    quantity: new FormControl(1, [Validators.required, Validators.min(1)])
-                })
-            );
-        });
-
-        this.createQuotationForm.patchValue({
-            supplierId: this.getDefaultSupplier().id,
-        });
-    }
-}

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

@@ -1,15 +0,0 @@
-<form [formGroup]="choiceDelivererForm">
-    <nz-form-item nz-flex>
-        <nz-form-label nzSpan="12" nzRequired>
-            Transporteur
-        </nz-form-label>
-
-        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="delivererId" nzPlaceHolder="Choisir un transporteur" nzShowSearch>
-                @for (deliverer of deliverers(); track deliverer.id) {
-                    <nz-option [nzLabel]="deliverer.transporter" [nzValue]="deliverer.id"></nz-option>
-                }
-            </nz-select>
-        </nz-form-control>
-    </nz-form-item>
-</form>

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

@@ -1,45 +0,0 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
-import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
-import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
-import {NzFlexDirective} from "ng-zorro-antd/flex";
-import {NzFormControlComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
-import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
-import {DeliverersService, GetDelivererDto} from "../../services/api";
-import {firstValueFrom} from "rxjs";
-import {NzNotificationService} from "ng-zorro-antd/notification";
-
-@Component({
-    selector: 'app-deliverer-choice',
-    imports: [
-        FormsModule,
-        NzColDirective,
-        NzFlexDirective,
-        NzFormControlComponent,
-        NzFormLabelComponent,
-        NzOptionComponent,
-        NzRowDirective,
-        NzSelectComponent,
-        ReactiveFormsModule
-    ],
-    templateUrl: './deliverer-choice.html',
-    styleUrl: './deliverer-choice.css',
-})
-export class DelivererChoice implements OnInit {
-    private deliverersService = inject(DeliverersService);
-    private notificationService = inject(NzNotificationService);
-
-    choiceDelivererForm: FormGroup = new FormGroup({
-        delivererId: new FormControl<number>(null, Validators.required),
-    });
-
-    deliverers = signal<GetDelivererDto[]>([]);
-
-    async ngOnInit() {
-        try {
-            const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint());
-            this.deliverers.set(deliverers);
-        } catch {
-            this.notificationService.error('Erreur', 'Erreur lors de l\'affichage des livreurs');
-        }
-    }
-}

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

@@ -7,7 +7,7 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/
 import {GetDelivererDto} from "../../services/api";
 
 @Component({
-    selector: 'app-deliverer-form',
+  selector: 'app-deliverer-form',
     imports: [
         NzColDirective,
         NzFlexDirective,
@@ -18,16 +18,15 @@ import {GetDelivererDto} from "../../services/api";
         NzInputDirective,
         ReactiveFormsModule
     ],
-    templateUrl: './deliverer-form.html',
+  templateUrl: './deliverer-form.html',
-    styleUrl: './deliverer-form.css',
+  styleUrl: './deliverer-form.css',
 })
 export class DelivererForm {
     delivererForm: FormGroup = new FormGroup({
         transporter: new FormControl<string>(null, [Validators.required])
     })
 
-    deliverer = input<GetDelivererDto>();
+    deliverer= input<GetDelivererDto>();
-
     constructor() {
         effect(() => {
             if (this.deliverer()) {

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

@@ -6,7 +6,7 @@ nz-table {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -66,21 +66,18 @@ nz-table tbody td p {
     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);
+        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

@@ -1,6 +1,6 @@
-<nz-table [nzData]="deliverers()"
+<nz-table   [nzData]="deliverers()"
-          [nzFrontPagination]="false"
+            [nzFrontPagination]="false"
-          [nzLoading]="deliverersLoading()">
+            [nzLoading]="deliverersLoading()">
     <thead>
     <tr class="text-center">
         <th>Transporteur</th>
@@ -11,12 +11,12 @@
     <tbody class="text-center">
         @for (deliverer of deliverers(); track deliverer.id) {
             <tr>
-                <td>{{ deliverer.transporter }}</td>
+                <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">
+                                        [nzFrontPagination]="false">
                                 <thead>
                                 <tr class="text-center">
                                     <th>Numéro de livraison</th>
@@ -28,10 +28,10 @@
                                 <tbody class="text-center">
                                     @for (deliveryInfo of deliverer.deliveryNotes; track deliveryInfo.id) {
                                         <tr>
-                                            <td>{{ deliveryInfo.trackingNumber }}</td>
+                                            <td>{{deliveryInfo.trackingNumber}}</td>
-                                            <td>{{ deliveryInfo.expeditionDate | date: 'dd/MM/yyyy' }}</td>
+                                            <td>{{deliveryInfo.expeditionDate | date: 'dd/MM/yyyy'}}</td>
-                                            <td>{{ deliveryInfo.estimateDeliveryDate | date: 'dd/MM/yyyy' }}</td>
+                                            <td>{{deliveryInfo.estimateDeliveryDate | date: 'dd/MM/yyyy'}}</td>
-                                            <td>{{ deliveryInfo.realDeliveryDate | date: 'dd/MM/yyyy' }}</td>
+                                            <td>{{deliveryInfo.realDeliveryDate | date: 'dd/MM/yyyy'}}</td>
                                         </tr>
                                     }
                                 </tbody>
@@ -41,13 +41,9 @@
                 </td>
                 <td>
                     <div style="justify-content: center; display: flex">
-                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(deliverer)"></nz-icon>
-                                 (click)="openEditModal(deliverer)"></nz-icon>
+                        <nz-divider nzType="vertical"></nz-divider>
-                        @if (admin()){
+                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliverer.id)" class="text-red-600 cursor-pointer"></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>
@@ -56,8 +52,7 @@
 </nz-table>
 
 <div class="hidden">
-    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'"
+    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedDeliverer.id, delivererForm, modalNav)" (cancel)="onModalCancel(modalNav)">
-                   (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

@@ -9,10 +9,10 @@ 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 {AuthService} from "../../services/auth.service";
+import {SupplierForm} from "../supplier-form/supplier-form";
 
 @Component({
-    selector: 'app-deliverer-table',
+  selector: 'app-deliverer-table',
     imports: [
         ModalNav,
         NzDividerComponent,
@@ -22,24 +22,20 @@ import {AuthService} from "../../services/auth.service";
         DatePipe,
         DelivererForm,
     ],
-    templateUrl: './deliverer-table.html',
+  templateUrl: './deliverer-table.html',
-    styleUrl: './deliverer-table.css',
+  styleUrl: './deliverer-table.css',
 })
 
 export class DelivererTable implements OnInit {
     private deliverersService = inject(DeliverersService);
     private notificationService = inject(NzNotificationService)
-    private authService = inject(AuthService);
-
     deliverers = signal<GetDelivererDto[]>([]);
     deliverersLoading = signal<boolean>(false);
-    admin = signal<boolean>(false);
+    updateDeliverer = viewChild.required<DelivererForm>('delivererForm');
-
     modal = viewChild.required<ModalNav>('modalNav');
 
     async ngOnInit() {
         await this.fetchDeliverers();
-        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchDeliverers() {
@@ -48,17 +44,23 @@ export class DelivererTable implements OnInit {
         try {
             const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint())
             this.deliverers.set(deliverers);
-        } catch {
+        } catch (e) {
-            this.notificationService.error('Erreur', 'Erreur lors du chargement des transporteurs');
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
         }
         this.deliverersLoading.set(false)
     }
 
-    async delete(deliverer: number) {
+    async delete(deliverer:number) {
         try {
             await firstValueFrom(this.deliverersService.deleteDelivererEndpoint(deliverer))
-            this.notificationService.success('Success', 'Suppression effectuée');
+            this.notificationService.success(
-        } catch {
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
             this.notificationService.error(
                 'Erreur',
                 'Impossible de supprimer la ligne'
@@ -69,24 +71,34 @@ export class DelivererTable implements OnInit {
 
     async edit(id: number, updateDelivererComponent: DelivererForm) {
         if (updateDelivererComponent.delivererForm.invalid) {
-            this.notificationService.error('Erreur', 'Formulaire invalide');
+            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é')
+            this.notificationService.success(
-        } catch {
+                'Success',
-            this.notificationService.error('Erreur', 'Erreur lors de la modification')
+                'Transporteur modifié'
+            )
+        } catch (e) {
+            console.error(e);
+            this.notificationService.error(
+                'Erreur',
+                'Erreur lors de la modification'
+            )
         }
     }
 
     selectedDeliverer: GetDelivererDto | null = null;
-
     openEditModal(supplier: GetSupplierDto) {
-        this.selectedDeliverer = {...supplier};
+        this.selectedDeliverer = { ...supplier };
         this.modal().showModal();
     }
 
@@ -95,7 +107,7 @@ export class DelivererTable implements OnInit {
 
         await this.edit(supplierId, updateDelivererComponent);
         updateDelivererComponent.delivererForm.reset();
-        this.onModalCancel(modal);
+        modal.isVisible = false;
         await this.fetchDeliverers();
     }
 

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

@@ -5,7 +5,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="9" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="delivererId" nzPlaceHolder="Choisir un transporteur" nzShowSearch>
+            <nz-select formControlName="deliverer" [nzPlaceHolder]="'Choisir un transporteur'" nzShowSearch [nzFilterOption]="filter">
                 @for (deliverer of deliverers(); track deliverer.id) {
                     <nz-option [nzValue]="deliverer.id" [nzLabel]="deliverer.transporter"></nz-option>
                 }

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

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

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

@@ -6,7 +6,7 @@ nz-table {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -66,21 +66,18 @@ nz-table tbody td p {
     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);
+        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

@@ -1,61 +1,71 @@
-<nz-table [nzData]="deliveryNotes()"
+<nz-table  [nzData]="deliveryNotes()"
-          class="mr-7"
+           class="mr-7"
-          [nzFrontPagination]="false"
+           [nzFrontPagination]="false"
-          [nzLoading]="deliveryNotesLoading()">
+           [nzLoading]="deliveryNotesLoading()">
     <thead>
-    <tr class="text-center">
+        <tr class="text-center">
-        <th>Numéro de livraison</th>
+            <th>Numéro de livraison</th>
-        <th>Transporteur</th>
+            <th>Transporteur</th>
-        <th>Date d'expédition</th>
+            <th>Date d'expédition</th>
-        <th>Date de livraison estimée</th>
+            <th>Date de livraison estimée</th>
-        <th>Date de livraison réelle</th>
+            <th>Date de livraison réelle</th>
-        <th>Statut</th>
+            <th>Produits</th>
-        <th>Action</th>
+            <th>Action</th>
-    </tr>
+        </tr>
-    </thead>
+    </thead >
     <tbody class="text-center">
         @for (deliveryNote of deliveryNotes(); track deliveryNote.id) {
             <tr>
-                <td>{{ deliveryNote.trackingNumber }}</td>
+                <td>{{deliveryNote.trackingNumber}}</td>
-                <td>{{ deliveryNote.delivererTransporter }}</td>
+                <td>{{deliveryNote.delivererTransporter}}</td>
-                <td>{{ deliveryNote.expeditionDate | date: 'dd/MM/yyyy' }}</td>
+                <td>{{deliveryNote.expeditionDate | date: 'dd/MM/yyyy'}}</td>
-                <td>{{ deliveryNote.estimateDeliveryDate | date: 'dd/MM/yyyy' }}</td>
+                <td>{{deliveryNote.estimateDeliveryDate | date: 'dd/MM/yyyy'}}</td>
-                <td>{{ deliveryNote.realDeliveryDate | date: 'dd/MM/yyyy' }}</td>
+                <td>{{deliveryNote.realDeliveryDate | date: 'dd/MM/yyyy'}}</td>
                 <td>
-                    @if (deliveryNote.estimateDeliveryDate >= date && deliveryNote.realDeliveryDate == null) {
+                    <app-modal-button type="link" name="Voir les produits" size="40%">
-                        <p class="text-blue-900 font-semibold">En cours</p>
+                        <div style="max-height: 400px; overflow-y: auto;">
-                    } @else if (deliveryNote.realDeliveryDate == null) {
+                            <nz-table [nzData]="deliveryNotes()"
-                        <p class="text-red-600 font-semibold">En retard</p>
+                                      [nzFrontPagination]="false">
-                    } @else {
+                                <thead>
-                        <p class="text-green-800 font-semibold">Terminée</p>
+                                    <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)"
+                        <div>
-                                 class="cursor-pointer text-green-700"/>
+                            <nz-icon nzType="check" nzTheme="outline" (click)="validate(deliveryNote.id)" class="cursor-pointer text-green-700"/>
+                        </div>
                         <nz-divider nzType="vertical"></nz-divider>
-                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
+                        <app-modal-nav nameIcon="edit" name="Modification du bon de livraison" class="cursor-pointer">
-                                 (click)="openEditModal(deliveryNote)"></nz-icon>
+                            <app-deliverery-note-form></app-deliverery-note-form>
+                        </app-modal-nav>
                         <nz-divider nzType="vertical"></nz-divider>
-                        @if (admin()){
+                        <div>
-                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliveryNote.id)"
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliveryNote.id)" class="cursor-pointer text-red-700"/>
-                                     class="cursor-pointer text-red-700"/>
+                        </div>
-                            <nz-divider nzType="vertical"></nz-divider>
+                        <nz-divider nzType="vertical"></nz-divider>
-                        }
+                        <div>
-                        <nz-icon nzType="export" nzTheme="outline" (click)="export(deliveryNote.id)"
+                            <nz-icon nzType="export" nzTheme="outline" (click)="export(deliveryNote.id)" class="cursor-pointer text-green-700"/>
-                                 class="cursor-pointer text-green-700"/>
+                        </div>
                     </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

@@ -1,20 +1,21 @@
-import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
+import {Component, inject, OnInit, signal} 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, UpdateDeliveryNoteDto} from "../../services/api";
+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";
-import {AuthService} from "../../services/auth.service";
 
 @Component({
-    selector: 'app-deliverery-note-table',
+  selector: 'app-deliverery-note-table',
     imports: [
+        ModalButton,
         ModalNav,
         NzDividerComponent,
         NzIconDirective,
@@ -22,52 +23,53 @@ import {AuthService} from "../../services/auth.service";
         DelivereryNoteForm,
         DatePipe,
     ],
-    templateUrl: './deliverery-note-table.html',
+  templateUrl: './deliverery-note-table.html',
-    styleUrl: './deliverery-note-table.css',
+  styleUrl: './deliverery-note-table.css',
 })
 export class DelivereryNoteTable implements OnInit {
     private deliveryNotesService = inject(DeliverynotesService);
     private notificationService = inject(NzNotificationService);
     private fileService = inject(FileService);
-    private authService = inject(AuthService);
-
     deliveryNotes = signal<GetDeliveryNoteDto[]>([]);
     deliveryNotesLoading = signal<boolean>(false);
-    admin = signal<boolean>(false);
-
-    modal = viewChild.required<ModalNav>('modalNav');
-
-    date = new Date().toISOString().split('T')[0]; // yyyy-mm-dd
 
     async ngOnInit() {
         await this.fetchDeliveryNotes();
-        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchDeliveryNotes() {
         this.deliveryNotesLoading.set(true)
         try {
-            const deliveryNotes = await firstValueFrom(this.deliveryNotesService.getAllDeliveryNoteEndpoint());
+            const deliveryNotes = await firstValueFrom(this.deliveryNotesService.getAllDeliveryNoteEndpoint())
             this.deliveryNotes.set(deliveryNotes);
-        } catch {
+        } catch (e) {
-            this.notificationService.error('Erreur', 'Erreur lors du chargement des bons de livraison');
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
         }
         this.deliveryNotesLoading.set(false)
     }
 
-    async delete(deliveryNote: number) {
+    async delete(deliveryNote:number) {
         this.deliveryNotesLoading.set(true)
         try {
             await firstValueFrom(this.deliveryNotesService.deleteDeliveryNoteEndpoint(deliveryNote));
-            this.notificationService.success('Success', 'Suppression effectuée');
+            this.notificationService.success(
-        } catch {
+                'Success',
-            this.notificationService.error('Erreur', 'Impossible de supprimer la ligne');
+                '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) {
+    async validate(deliveryNote:number) {
         this.deliveryNotesLoading.set(true)
         try {
             const PatchRealDate = {
@@ -76,12 +78,22 @@ export class DelivereryNoteTable implements OnInit {
 
             try {
                 await firstValueFrom(this.deliveryNotesService.patchRealDeliveryDateEndpoint(deliveryNote, PatchRealDate))
-                this.notificationService.success('Success', 'Date actualisée');
+
-            } catch {
+                this.notificationService.success(
-                this.notificationService.error('Erreur', 'La date à déjà été actualisée');
+                    'Success',
+                    'Date actualisée'
+                )
+            } catch (e) {
+                this.notificationService.error(
+                    'Erreur',
+                    'La date à déjà été actualisée'
+                )
             }
-        } catch {
+        } catch (e) {
-            this.notificationService.error('Erreur', 'Erreur d\'actualisation de la date');
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'actualisation de la date'
+            )
         }
         this.deliveryNotesLoading.set(false)
         await this.fetchDeliveryNotes()
@@ -90,58 +102,17 @@ export class DelivereryNoteTable implements OnInit {
     async export(deliveryNoteId: number) {
         this.deliveryNotesLoading.set(true)
         try {
-            const pdf = await firstValueFrom(this.deliveryNotesService.getDeliveryNotePdfEndpoint(deliveryNoteId, "response"));
+            const pdf = await firstValueFrom(
+                this.deliveryNotesService.getDeliveryNotePdfEndpoint(deliveryNoteId, "response")
+            );
             this.fileService.downloadBlob(pdf)
-        } catch {
+        } catch (e) {
-            this.notificationService.error('Erreur', 'Impossible de générer un PDF');
+            console.error(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();
-
-            const toIso = (val: any) =>
-                val ? new Date(val).toISOString().substring(0, 10) : null;
-
-            const deliveryNoteDto: UpdateDeliveryNoteDto = {
-                trackingNumber: raw.trackingNumber,
-                delivererId: raw.delivererId,
-                expeditionDate: toIso(raw.expeditionDate),
-                estimateDeliveryDate: toIso(raw.estimatedDate),
-                realDeliveryDate: toIso(raw.realDeliveryDate)
-            };
-
-            await firstValueFrom(this.deliveryNotesService.updateDeliveryNoteEndpoint(id, deliveryNoteDto));
-            this.notificationService.success('Success', 'Bon de livraison modifié');
-        } catch {
-            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();
-        this.onModalCancel(modal);
-        await this.fetchDeliveryNotes();
-    }
-
-    onModalCancel(modal: ModalNav) {
-        modal.isVisible = false;
-    }
 }

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

@@ -11,9 +11,11 @@
     flex-direction: column;
     align-items: flex-start;
 
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06),
+    /* Box shadow pour effet superposition */
-    0 8px 20px rgba(0, 0, 0, 0.08),
+    box-shadow:
-    0 16px 40px rgba(0, 0, 0, 0.06);
+            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);
 }
 
 
@@ -30,17 +32,19 @@
 
 .search-input:focus {
     border-color: #3b82f6;
-    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
+    box-shadow: 0 0 8px rgba(59,130,246,0.2);
     outline: none;
 }
 
+/* Liste scrollable */
 .livraisons-list {
     width: 100%;
-    max-height: 500px;
+    max-height: 350px; /* hauteur max de la liste */
-    overflow-y: auto;
+    overflow-y: auto;  /* scroll vertical activé */
-    padding-right: 10px;
+    padding-right: 10px; /* pour le scrollbar */
 }
 
+/* Scrollbar personnalisée (optionnel) */
 .livraisons-list::-webkit-scrollbar {
     width: 8px;
 }
@@ -54,11 +58,12 @@
     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);
+    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -69,9 +74,10 @@
 
 .livraison-card:hover {
     transform: translateY(-3px);
-    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
 }
 
+/* Infos livraison */
 .livraison-info h3 {
     font-size: 17px;
     margin: 0 0 4px;
@@ -83,3 +89,26 @@
     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

@@ -1,57 +1,19 @@
 <div class="livraisons-container">
-    <input type="text" placeholder="Rechercher une livraison" class="search-input"
+    <input type="text" placeholder="Rechercher une livraison" class="search-input" (input)="search.set($any($event.target).value)"/>
-           (input)="search.set($any($event.target).value)"/>
 
     <div class="livraisons-list">
-        @for (deliveryItem of filteredDeliveries(); track deliveryItem.id) {
+        @for (deliveryItem of filteredLivraisons(); track deliveryItem.id) {
             <div class="livraison-card">
                 <div class="livraison-info">
-                    <h3>{{ deliveryItem.delivererTransporter }}</h3>
+                    <h3>{{ deliveryItem.client }}</h3>
-                    <p class="mr-5">Date d'expédition: {{ deliveryItem.expeditionDate }}</p>
+                    <p class="mr-5">Date d'expédition: {{ deliveryItem.date }}</p>
-                    <p>Quantité livrée : {{ deliveryItem.products.length }}</p>
+                    <p>Produits : {{ deliveryItem.produits }}</p>
                 </div>
 
-                <app-modal-nav #modal name="Valider la livraison" nameIcon="check"
+                <button nz-button nzType="primary" [nzSize]="size" nzShape="round" (click)="validate(deliveryItem.id)">
-                               (click)="check(deliveryItem.id)"
+                    <nz-icon nzType="check" />
-                               (ok)="validate(deliveryItem.id, selectedWarehouseId!, modal)"
+                    Valider
-                               (cancel)="reject(modal)">
+                </button>
-
-                    <div class="mb-4 flex justify-center">
-                        <nz-select
-                                [(ngModel)]="selectedWarehouseId"
-                                nzPlaceHolder="Sélectionner un entrepôt"
-                                required
-                                class="w-64">
-
-                            @for (wareHouse of wareHouses(); track wareHouse.id) {
-                                <nz-option [nzValue]="wareHouse.id" [nzLabel]="wareHouse.name"/>
-                            }
-                        </nz-select>
-                    </div>
-
-
-                    <div style="max-height: 400px; overflow-y: auto;">
-                        <nz-table [nzData]="filteredDeliveries()"
-                                  [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 deliveryItem.products; track product.productId) {
-                                    <tr>
-                                        <td>{{ product.productReference }}</td>
-                                        <td>{{ product.productName }}</td>
-                                        <td>{{ product.quantity }}</td>
-                                    </tr>
-                                }
-                            </tbody>
-                        </nz-table>
-                    </div>
-                </app-modal-nav>
             </div>
         }
     </div>

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

@@ -1,105 +1,44 @@
-import {Component, computed, inject, OnInit, signal} from '@angular/core';
+import {Component, computed, signal} from '@angular/core';
-import {
+import {NzButtonComponent, NzButtonSize} from "ng-zorro-antd/button";
-    DeliverynotesService,
+import {NzIconDirective} from "ng-zorro-antd/icon";
-    GetDeliveryNoteDto, GetWareHouseDto,
-    WarehouseproductsService,
-    WarehousesService
-} from "../../services/api";
-import {firstValueFrom} from "rxjs";
-import {NzNotificationService} from "ng-zorro-antd/notification";
-import {NzTableComponent} from "ng-zorro-antd/table";
-import {format} from "date-fns";
-import {ModalNav} from "../modal-nav/modal-nav";
-import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
-import {FormsModule} from "@angular/forms";
 
 @Component({
-    selector: 'app-delivery-validator',
+  selector: 'app-delivery-validator',
     imports: [
-        NzTableComponent,
+        NzButtonComponent,
-        ModalNav,
+        NzIconDirective
-        NzSelectComponent,
-        NzOptionComponent,
-        FormsModule
     ],
-    templateUrl: './delivery-validator.html',
+  templateUrl: './delivery-validator.html',
-    styleUrl: './delivery-validator.css',
+  styleUrl: './delivery-validator.css',
 })
-export class DeliveryValidator implements OnInit {
+export class DeliveryValidator {
-    private deliveryNotesService = inject(DeliverynotesService);
+    size: NzButtonSize = 'large';
-    private notificationService = inject(NzNotificationService);
+    search = signal('');
-    private warehousesService = inject(WarehousesService);
-    private warehouseProductsService = inject(WarehouseproductsService);
 
-    search = signal<string>('');
+    livraisons = signal([
-    deliveryNotes = signal<GetDeliveryNoteDto[]>([]);
+        { id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
-    wareHouses = signal<GetWareHouseDto[]>([]);
+        { 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 }
+    ]);
 
-    selectedWarehouseId: number | null = null;
+    filteredLivraisons = computed(() => {
-
-    async ngOnInit() {
-        await this.fetchDeliveryNotes();
-        try {
-            const wareHouses = await firstValueFrom(this.warehousesService.getAllWarehouseEndpoint());
-            this.wareHouses.set(wareHouses);
-        } catch {
-            this.notificationService.error('Erreur', 'Erreur lors du chargement des quantitées')
-        }
-    }
-
-    async fetchDeliveryNotes() {
-        try {
-            const deliveries = await firstValueFrom(this.deliveryNotesService.getAllDeliveryNotesNotArrivedEndpoint());
-            this.deliveryNotes.set(deliveries);
-        } catch {
-            this.notificationService.error('Erreur', 'Erreur lors du chargement des bon de livraison')
-        }
-    }
-
-    filteredDeliveries = computed(() => {
         const query = this.search().toLowerCase();
-        return this.deliveryNotes().filter(l =>
+        return this.livraisons().filter(l =>
-            l.delivererTransporter.toLowerCase().includes(query) ||
+            l.client.toLowerCase().includes(query) ||
-            l.expeditionDate.includes(query)
+            l.date.includes(query)
         );
     });
 
-    async check(id: number) {
+    validate(id: number) {
-        try {
+        return
-            const PatchRealDate = {
-                realDeliveryDate: format(new Date(), 'yyyy-MM-dd')
-            };
-            await firstValueFrom(this.deliveryNotesService.patchRealDeliveryDateEndpoint(id, PatchRealDate));
-        } catch {
-            this.notificationService.error('Erreur', 'Impossible d\'actualiser la date')
-        }
-    }
-
-    async validate(id: number, warehouseId: number, modal: ModalNav) {
-        try {
-            const deliveryNote = this.deliveryNotes().find(x => x.id === id);
-
-            for (const product of deliveryNote.products) {
-                await firstValueFrom(this.warehouseProductsService.patchWareHouseProductQuantityEndpoint(
-                    product.productId,
-                    warehouseId,
-                    {
-                        quantity: product.quantity
-                    }
-                ));
-            }
-
-            this.notificationService.success('Succès', 'Les produits sont bien ajoutés au stock')
-
-            modal.isVisible = false;
-            await this.fetchDeliveryNotes();
-        } catch {
-            this.notificationService.error('Erreur', 'Vous devez choisir un entrepôt')
-        }
-    }
-
-    async reject(modal: ModalNav) {
-        modal.isVisible = false;
-        await this.fetchDeliveryNotes();
     }
 }

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

@@ -1,7 +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>
+        <p class="card-number">{{value()}}</p>
     </div>
-    <p class="card-text">{{ description() }}</p>
+    <p class="card-text">{{description()}}</p>
 </div>

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

@@ -3,13 +3,13 @@ import {NzIconDirective} from "ng-zorro-antd/icon";
 import {NgStyle} from "@angular/common";
 
 @Component({
-    selector: 'app-info-card',
+  selector: 'app-info-card',
     imports: [
         NzIconDirective,
         NgStyle
     ],
-    templateUrl: './info-card.html',
+  templateUrl: './info-card.html',
-    styleUrl: './info-card.css',
+  styleUrl: './info-card.css',
 })
 export class InfoCard {
     icon = 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/layout/layout.css

@@ -1,122 +0,0 @@
-:host {
-    display: flex;
-}
-
-.app-layout {
-    height: 100vh;
-}
-
-nz-header {
-    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 {
-    display: flex;
-    align-items: center;
-}
-
-.logo a {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-}
-
-.logo img {
-    height: 40px;
-    width: auto;
-}
-
-.logo h1 {
-    margin: 0 0 0 10px;
-    color: #fff;
-    font-weight: 600;
-    font-size: 20px;
-    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-}
-
-/* --- 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;
-}
-
-.disconnect {
-    transition: transform 0.2s ease, color 0.2s ease;
-}
-
-.disconnect:hover {
-    color: #40a9ff;
-    transform: scale(1.2);
-}
-
-.right-icons app-modal-nav:hover {
-    color: #40a9ff;
-    transform: scale(1.2);
-}
-
-/* --- CONTENU --- */
-nz-content {
-    padding: 24px 50px;
-}
-
-.inner-content {
-    padding: 24px;
-    background: #fff;
-    height: 100%;
-}

src/app/components/layout/layout.html

@@ -1,90 +0,0 @@
-<nz-layout class="app-layout">
-    <nz-header>
-        <div class="header-container">
-            <!-- LOGO -->
-            <div class="logo">
-                <a routerLink="/dashboard">
-                    <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"
-                    />
-                    <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">
-                        <nz-icon nzType="stock"></nz-icon>
-                        <span>Stock</span>
-                    </a>
-                </li>
-                <li nz-submenu nzTitle="Partenaires" nzIcon="team">
-                    <ul>
-                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                            <a routerLink="/supplier">
-                                <nz-icon nzType="shop"></nz-icon>
-                                <span>Fournisseurs</span>
-                            </a>
-                        </li>
-                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                            <a routerLink="/deliverer">
-                                <nz-icon nzType="car"></nz-icon>
-                                <span>Livreurs</span>
-                            </a>
-                        </li>
-                    </ul>
-                </li>
-                <li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
-                    <ul>
-                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                            <a routerLink="/quotation">
-                                <nz-icon nzType="file"></nz-icon>
-                                <span>Devis</span>
-                            </a>
-                        </li>
-                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                            <a routerLink="/purchase-order">
-                                <nz-icon nzType="file"></nz-icon>
-                                <span>Bon de commande</span>
-                            </a>
-                        </li>
-                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                            <a routerLink="/delivery-note">
-                                <nz-icon nzType="file"></nz-icon>
-                                <span>Bon de livraison</span>
-                            </a>
-                        </li>
-                    </ul>
-                </li>
-                @if (admin()) {
-                    <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                        <a routerLink="/user">
-                            <nz-icon nzType="user"></nz-icon>
-                            <span>Utilisateur</span>
-                        </a>
-                    </li>
-                }
-            </ul>
-
-            <!-- ICONES À DROITE -->
-            <div class="right-icons">
-                <nz-icon nzType="logout" nzTheme="outline" class="disconnect" (click)="disconnect()"/>
-                <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 overflow-auto">
-            <router-outlet></router-outlet>
-        </div>
-    </nz-content>
-</nz-layout>

src/app/components/layout/layout.ts

@@ -1,45 +0,0 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
-import {ModalNav} from "../modal-nav/modal-nav";
-import {NzContentComponent, NzHeaderComponent, NzLayoutComponent} from "ng-zorro-antd/layout";
-import {NzIconDirective} from "ng-zorro-antd/icon";
-import {NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu";
-import {Profil} from "../profil/profil";
-import {Router, RouterLink, RouterLinkActive, RouterOutlet} from "@angular/router";
-import {SettingForm} from "../setting-form/setting-form";
-import {AuthService} from "../../services/auth.service";
-
-@Component({
-    selector: 'app-layout',
-    imports: [
-        ModalNav,
-        NzContentComponent,
-        NzHeaderComponent,
-        NzIconDirective,
-        NzLayoutComponent,
-        NzMenuDirective,
-        NzMenuItemComponent,
-        NzSubMenuComponent,
-        Profil,
-        RouterLink,
-        RouterLinkActive,
-        RouterOutlet,
-        SettingForm
-    ],
-    templateUrl: './layout.html',
-    styleUrl: './layout.css',
-})
-export class Layout implements OnInit {
-    private authService = inject(AuthService);
-    private router = inject(Router);
-
-    admin = signal<boolean>(false);
-
-    ngOnInit() {
-        this.admin.set(this.authService.isAdmin());
-    }
-
-    async disconnect() {
-        this.authService.logout();
-        await this.router.navigate(['/login']);
-    }
-}

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

@@ -1,4 +1,4 @@
-<button nz-button [nzType]="type()" (click)="showModal()">{{ name() }}</button>
+<button nz-button [nzType]="type()" (click)="showModal()">{{name()}}</button>
 
 <ng-template #modalContent>
     <ng-content></ng-content>

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

@@ -1,4 +1,4 @@
-import {Component, input, output} from '@angular/core';
+import {Component, input, Input, output} from '@angular/core';
 import {NzModalComponent} from "ng-zorro-antd/modal";
 import {NzButtonComponent} from "ng-zorro-antd/button";
 

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

@@ -1,6 +1,6 @@
-import {Component, input, output} from '@angular/core';
+import {Component, Input, input, output} from '@angular/core';
-import {NzButtonModule} from 'ng-zorro-antd/button';
+import { NzButtonModule } from 'ng-zorro-antd/button';
-import {NzModalModule} from 'ng-zorro-antd/modal';
+import { NzModalModule } from 'ng-zorro-antd/modal';
 import {NzIconDirective} from "ng-zorro-antd/icon";
 
 @Component({

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.ts

@@ -4,10 +4,10 @@ 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} from "../../services/api";
+import {GetPriceDto, GetSupplierDto} from "../../services/api";
 
 @Component({
-    selector: 'app-price-form',
+  selector: 'app-price-form',
     imports: [
         FormsModule,
         NzColDirective,
@@ -19,16 +19,15 @@ import {GetPriceDto} from "../../services/api";
         NzInputDirective,
         ReactiveFormsModule
     ],
-    templateUrl: './price-form.html',
+  templateUrl: './price-form.html',
-    styleUrl: './price-form.css',
+  styleUrl: './price-form.css',
 })
 export class PriceForm {
     priceForm: FormGroup = new FormGroup({
         price: new FormControl<string>(null, [Validators.required]),
     })
 
-    price = input<GetPriceDto>();
+    price= input<GetPriceDto>();
-
     constructor() {
         effect(() => {
             if (this.price()) {

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

@@ -1,13 +1,12 @@
-import {Component, effect, input} from '@angular/core';
+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";
-import {GetPurchaseProductDto} from "../../services/api";
 
 @Component({
-    selector: 'app-quantity-form',
+  selector: 'app-product-form',
     imports: [
         FormsModule,
         NzColDirective,
@@ -19,23 +18,12 @@ import {GetPurchaseProductDto} from "../../services/api";
         NzInputDirective,
         ReactiveFormsModule
     ],
-    templateUrl: './quantity-form.html',
+  templateUrl: './product-form.html',
-    styleUrl: './quantity-form.css',
+  styleUrl: './product-form.css',
 })
-export class QuantityForm {
+export class ProductForm {
-    quantityForm: FormGroup = new FormGroup({
+    productForm: FormGroup = new FormGroup({
-        quantity: new FormControl<number>(null, [Validators.required])
+        price: new FormControl<string>(null, [Validators.required]),
+        quantity: new FormControl<string>(null, [Validators.required])
     })
-
-    quantity = input<GetPurchaseProductDto>();
-
-    constructor() {
-        effect(() => {
-            if (this.quantity()) {
-                this.quantityForm.patchValue({
-                    quantity: this.quantity().quantity
-                });
-            }
-        });
-    }
 }

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

@@ -26,7 +26,8 @@
         <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="Employé" nzValue="Employe"></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>

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

@@ -8,7 +8,7 @@ import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
 import {GetUserDto} from "../../services/api";
 
 @Component({
-    selector: 'app-profil-form',
+  selector: 'app-profil-form',
     imports: [
         FormsModule,
         NzColDirective,
@@ -22,8 +22,8 @@ import {GetUserDto} from "../../services/api";
         NzSelectComponent,
         NzOptionComponent
     ],
-    templateUrl: './profil-form.html',
+  templateUrl: './profil-form.html',
-    styleUrl: './profil-form.css',
+  styleUrl: './profil-form.css',
 })
 export class ProfilForm {
     profilForm: FormGroup = new FormGroup({
@@ -34,7 +34,6 @@ export class ProfilForm {
     })
 
     user = input<GetUserDto>();
-
     constructor() {
         effect(() => {
             if (this.user()) {

src/app/components/profil/profil.html

@@ -1,9 +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(user().name) }}
+    {{ getInitial(data.name) }}
 </div>
 
 <div class="mt-6">
-    <p class="text-3xl festive2 mx-auto flex items-center justify-center">{{ user().name }}</p>
+    <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">{{ user().email }}</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">{{ user().fonction }}</p>
+    <p class="text-xl festive2 mt-0 flex items-center justify-center">{{data.fonction}}</p>
 </div>

src/app/components/profil/profil.ts

@@ -1,28 +1,24 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
+import { Component } from '@angular/core';
-import {NzNotificationService} from "ng-zorro-antd/notification";
+import {UserInfo} from "../../interfaces/user.interface";
-import {GetUserDto, UserService} from "../../services/api";
+import {ProfilForm} from "../profil-form/profil-form";
-import {firstValueFrom} from "rxjs";
+import {ModalNav} from "../modal-nav/modal-nav";
 
 @Component({
-    selector: 'app-profil',
+  selector: 'app-profil',
-    imports: [],
+    imports: [
-    templateUrl: './profil.html',
+        ProfilForm,
-    styleUrl: './profil.css',
+        ModalNav
+    ],
+  templateUrl: './profil.html',
+  styleUrl: './profil.css',
 })
-export class Profil implements OnInit {
+export class Profil {
-    private notificationService = inject(NzNotificationService);
+    data: UserInfo =
-    private userService = inject(UserService);
+    {
-
+        name: 'Mathys Sanchez Vendé',
-    user = signal<GetUserDto>({});
+        email: 'mathys.sanchez@vende.fr',
-
+        fonction: 'admin',
-    async ngOnInit() {
+    };
-        try {
-            const user = await firstValueFrom(this.userService.getUserEndpoint());
-            this.user.set(user);
-        } catch {
-            this.notificationService.error('Erreur', 'Impossible de charger l\'utilisateur');
-        }
-    }
 
     getInitial(name: string): string {
         if (!name || name.trim() === '') return '?';

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

@@ -5,7 +5,7 @@
         </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">
+            <input nz-input placeholder="Conditions générales de vente" formControlName="purchaseCondition">
         </nz-form-control>
     </nz-form-item>
 </form>

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

@@ -1,13 +1,12 @@
-import {Component, effect, input} from '@angular/core';
+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";
-import {GetPurchaseOrderDto} from "../../services/api";
 
 @Component({
-    selector: 'app-purchase-order-form',
+  selector: 'app-purchase-order-form',
     imports: [
         FormsModule,
         NzColDirective,
@@ -19,23 +18,11 @@ import {GetPurchaseOrderDto} from "../../services/api";
         NzInputDirective,
         ReactiveFormsModule
     ],
-    templateUrl: './purchase-order-form.html',
+  templateUrl: './purchase-order-form.html',
-    styleUrl: './purchase-order-form.css',
+  styleUrl: './purchase-order-form.css',
 })
 export class PurchaseOrderForm {
     purchaseOrderForm: FormGroup = new FormGroup({
-        purchaseConditions: new FormControl<string>(null, [Validators.required])
+        purchaseCondition: 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

@@ -6,7 +6,7 @@ nz-table {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -66,21 +66,18 @@ nz-table tbody td p {
     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);
+        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

@@ -15,8 +15,8 @@
         @for (purchaseOrder of purchaseOrders(); track purchaseOrder.id) {
             <tr>
                 <td>{{ purchaseOrder.id }}</td>
-                <td>{{ purchaseOrder.purchaseConditions }}</td>
+                <td>{{purchaseOrder.purchaseConditions}}</td>
-                <td>{{ purchaseOrder.supplierName }}</td>
+                <td>Fournisseur ???</td>
                 <td>
                     <app-modal-button type="link" name="Voir les produits" size="45%">
                         <div style="max-height: 400px; overflow-y: auto;">
@@ -32,20 +32,17 @@
                                 </tr>
                                 </thead>
                                 <tbody class="text-center">
-                                    @for (product of purchaseOrder.products; track product.productId) {
+                                    @for (product of purchaseOrder.getPurchaseProductDto; track product.productId) {
                                         <tr>
-                                            <td>{{ product.productName }}</td>
+                                            <td>{{product.productName}}</td>
-                                            <td>{{ product.productReference }}</td>
+                                            <td>{{product.productReferences}}</td>
-                                            <td>{{ product.productPrice }} €</td>
+                                            <td>Prix €€€€</td>
-                                            <td>{{ product.quantity }}</td>
+                                            <td>{{product.quantity}}</td>
                                             <td>
                                                 <div style="justify-content: center; display: flex">
-                                                    <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
+                                                    <div>
-                                                             (click)="openEditQuantityModal(product)"></nz-icon>
+                                                        <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
-                                                    <nz-divider nzType="vertical"></nz-divider>
+                                                    </div>
-                                                    <nz-icon nzType="delete" nzTheme="outline"
-                                                             class="cursor-pointer text-red-700"
-                                                             (click)="deleteProduct(product.productId, purchaseOrder.id)"/>
                                                 </div>
                                             </td>
                                         </tr>
@@ -57,46 +54,28 @@
                 </td>
                 <td>
                     <div style="justify-content: center; display: flex">
-                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
+                        <div>
-                                 (click)="openEditModal(purchaseOrder)"></nz-icon>
+                            <nz-icon nzType="plus-circle" nzTheme="outline" (click)="delete(purchaseOrder.id)" class="cursor-pointer text-green-700"/>
+                        </div>
                         <nz-divider nzType="vertical"></nz-divider>
-                        @if (admin()) {
+                        <app-modal-nav nameIcon="edit" name="Modification des conditions de vente" class="cursor-pointer">
-                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(purchaseOrder.id)"
+                            <app-purchase-order-form></app-purchase-order-form>
-                                     class="cursor-pointer text-red-700"/>
+                        </app-modal-nav>
-                            <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)="openDelivererModal(purchaseOrder)"
+                        <div>
-                                 class="cursor-pointer text-blue-700"/>
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(purchaseOrder.id)" class="cursor-pointer text-red-700"/>
+                        </div>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="export" nzTheme="outline" (click)="export(purchaseOrder.id)" class="cursor-pointer text-green-700"/>
+                        </div>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="interaction" nzTheme="outline" (click)="transfer()" class="cursor-pointer text-blue-700"/>
+                        </div>
                     </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>
-
-<div class="hidden">
-    <app-modal-nav #modalDeliverer nameIcon="edit" name="Choix du transporteur"
-                   (ok)="transfer(selectedPurchaseOrder, delivererChoice)"
-                   (cancel)="onModalCancel(modalDeliverer)">
-        <app-deliverer-choice #delivererChoice></app-deliverer-choice>
-    </app-modal-nav>
-</div>

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

@@ -1,26 +1,17 @@
-import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
+import {Component, inject, OnInit, signal} 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 {
+import {GetPurchaseOrderDto, PurchaseordersService} from "../../services/api";
-    CreateDeliveryNoteDto,
-    DeliverynotesService,
-    GetPurchaseOrderDto,
-    GetPurchaseProductDto,
-    PurchaseordersService,
-} 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";
-import {DelivererChoice} from "../deliverer-choice/deliverer-choice";
-import {AuthService} from "../../services/auth.service";
 
 @Component({
-    selector: 'app-purchase-order-table',
+  selector: 'app-purchase-order-table',
     imports: [
         ModalNav,
         NzDividerComponent,
@@ -28,30 +19,19 @@ import {AuthService} from "../../services/auth.service";
         NzTableComponent,
         PurchaseOrderForm,
         ModalButton,
-        QuantityForm,
-        DelivererChoice,
     ],
-    templateUrl: './purchase-order-table.html',
+  templateUrl: './purchase-order-table.html',
-    styleUrl: './purchase-order-table.css',
+  styleUrl: './purchase-order-table.css',
 })
 export class PurchaseOrderTable implements OnInit {
     private purchaseOrdersService = inject(PurchaseordersService);
     private notificationService = inject(NzNotificationService);
     private fileService = inject(FileService);
-    private deliveryNoteService = inject(DeliverynotesService);
-    private authService = inject(AuthService);
-
     purchaseOrders = signal<GetPurchaseOrderDto[]>([]);
     purchaseOrdersLoading = signal<boolean>(false);
-    admin = signal<boolean>(false);
-
-    modal = viewChild.required<ModalNav>('modalNav');
-    modalQuantity = viewChild.required<ModalNav>('modalQuantity');
-    modalDeliverer = viewChild.required<ModalNav>('modalDeliverer');
 
     async ngOnInit() {
         await this.fetchPurchaseOrder();
-        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchPurchaseOrder() {
@@ -60,156 +40,51 @@ export class PurchaseOrderTable implements OnInit {
         try {
             const purchaseOrders = await firstValueFrom(this.purchaseOrdersService.getAllPurchaseOrderEndpoint())
             this.purchaseOrders.set(purchaseOrders);
-        } catch {
+        } catch (e) {
-            this.notificationService.error('Erreur', 'Erreur lors du chargement des bons de commande')
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
         }
         this.purchaseOrdersLoading.set(false)
     }
 
-    async delete(purchaseOrderId: number) {
+    async delete(purchaseOrderId:number) {
         this.purchaseOrdersLoading.set(true)
         try {
             await firstValueFrom(this.purchaseOrdersService.deletePurchaseOrderEndpoint(purchaseOrderId))
-            this.notificationService.success('Success', 'Suppression effectuée')
+            this.notificationService.success(
-        } catch {
+                'Success',
-            this.notificationService.error('Erreur', 'Impossible de supprimer la ligne')
+                '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) {
+    async export(purchaseOrderId: number){
         this.purchaseOrdersLoading.set(true)
         try {
             const pdf = await firstValueFrom(
                 this.purchaseOrdersService.getPurchaseOrderPdfEndpoint(purchaseOrderId, "response")
             );
             this.fileService.downloadBlob(pdf)
-        } catch {
+        } catch (e) {
-            this.notificationService.error('Erreur', 'Impossible de générer un PDF');
+            console.error(e);
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de générer un PDF'
+            );
         }
         this.purchaseOrdersLoading.set(false)
     }
 
-    async transfer(purchaseOrder: GetPurchaseOrderDto, delivererForm: DelivererChoice) {
+    transfer() {
-        this.purchaseOrdersLoading.set(true);
+        return
-        try {
-            const deliverer = delivererForm.choiceDelivererForm.getRawValue();
-
-            const date = new Date().toISOString().split('T')[0]; // yyyy-mm-dd
-
-            let trackingValue = 'TRK-';
-            const idStr = purchaseOrder.id?.toString() ?? '';
-            if (idStr.length < 2) trackingValue += '00' + idStr + '-' + date;
-            else if (idStr.length < 3) trackingValue += '0' + idStr + '-' + date;
-            else trackingValue += idStr.substring(0, 3) + date.replace(/-/g, '');
-
-            const productQuantities: Record<number, number> = {};
-            purchaseOrder.products?.forEach(p => {
-                if (p.productId != null && p.quantity != null) {
-                    productQuantities[p.productId] = p.quantity;
-                }
-            });
-
-            const deliveryNoteDto: CreateDeliveryNoteDto = {
-                trackingNumber: trackingValue,
-                delivererId: deliverer.delivererId,
-                productQuantities: productQuantities,
-                supplierId: purchaseOrder.supplierId
-            };
-
-            await firstValueFrom(this.deliveryNoteService.createDeliveryNoteEndpoint(deliveryNoteDto));
-            this.notificationService.success('Succès', 'Bon de livraison créé avec succès');
-        } catch {
-            this.notificationService.error('Erreur', 'Erreur lors du transfert');
-        }
-        this.onModalCancel(this.modalDeliverer());
-        this.purchaseOrdersLoading.set(false);
-    }
-
-
-    async edit(id: number, updatePurchaseOrderComponent: PurchaseOrderForm) {
-        if (updatePurchaseOrderComponent.purchaseOrderForm.invalid) {
-            this.notificationService.error('Erreur', 'Formulaire invalide')
-            return;
-        }
-
-        try {
-            const purchaseOrders = updatePurchaseOrderComponent.purchaseOrderForm.getRawValue();
-            await firstValueFrom(this.purchaseOrdersService.patchPurchaseOrderPurchaseConditionsEndpoint(id, purchaseOrders))
-
-            this.notificationService.success('Success', 'Bon de commande modifié')
-        } catch {
-            this.notificationService.error('Erreur', 'Erreur lors de la modification')
-        }
-    }
-
-    async deleteProduct(productId: number, purchaseOrderId: number) {
-        this.purchaseOrdersLoading.set(true)
-        try {
-            await firstValueFrom(this.purchaseOrdersService.deleteProductFromPurchaseOrderEndpoint(productId, purchaseOrderId))
-            this.notificationService.success('Success', 'Suppression effectuée')
-        } catch {
-            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.purchaseOrdersService.patchPurchaseProductQuantityEndpoint(productId, purchaseOrderId, quantity))
-
-            this.notificationService.success('Success', 'Quantité modifiée');
-        } catch {
-            this.notificationService.error('Erreur', 'Erreur lors de la modification');
-        }
-    }
-
-    selectedPurchaseOrder: GetPurchaseOrderDto | null = null;
-
-    openEditModal(purchaseOrder: GetPurchaseOrderDto) {
-        this.selectedPurchaseOrder = {...purchaseOrder};
-        this.modal().showModal();
-    }
-
-    openDelivererModal(purchaseOrder: GetPurchaseOrderDto) {
-        this.selectedPurchaseOrder = {...purchaseOrder};
-        this.modalDeliverer().showModal();
-    }
-
-    async onModalOk(id: number, updatePurchaseOrderComponent: PurchaseOrderForm, modal: ModalNav) {
-        if (!this.selectedPurchaseOrder) return;
-
-        await this.edit(id, updatePurchaseOrderComponent);
-        updatePurchaseOrderComponent.purchaseOrderForm.reset();
-        this.onModalCancel(modal);
-        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();
-        this.onModalCancel(modal);
-        await this.fetchPurchaseOrder();
     }
 }

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

@@ -1,11 +0,0 @@
-<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/quotation-form/quotation-form.html

@@ -1,11 +1,11 @@
-<form nz-form nzLayout="horizontal" [formGroup]="quotationForm">
+<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">
+            <input nz-input placeholder="Message du devis" formControlName="quotationMessage">
         </nz-form-control>
     </nz-form-item>
 
@@ -15,7 +15,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="12">
-            <input nz-input placeholder="Conditions de vente" formControlName="conditionsSale">
+            <input nz-input placeholder="Conditions de vente" formControlName="quotationConditionsSale">
         </nz-form-control>
     </nz-form-item>
 </form>

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

@@ -1,10 +1,10 @@
-import {Component, effect, input} from '@angular/core';
+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 {GetQuotationDto} from "../../services/api";
+import {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
 
 @Component({
     selector: 'app-quotation-form',
@@ -22,21 +22,8 @@ import {GetQuotationDto} from "../../services/api";
     styleUrl: './quotation-form.css',
 })
 export class QuotationForm {
-    quotationForm: FormGroup = new FormGroup({
+    QuotationForm: FormGroup = new FormGroup({
-        message: new FormControl<string>(null, [Validators.required]),
+        quotationMessage: new FormControl<string>(null),
-        conditionsSale: new FormControl<string>(null, [Validators.required]),
+        quotationConditionsSale: new FormControl<string>(null),
     })
-
-    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

@@ -6,7 +6,7 @@ nz-table {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -66,21 +66,18 @@ nz-table tbody td p {
     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);
+        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

@@ -11,13 +11,13 @@
         <th>Produit</th>
         <th>Action</th>
     </tr>
-    </thead>
+    </thead >
     <tbody class="text-center">
         @for (quotation of quotations(); track quotation.id) {
             <tr>
-                <td>{{ quotation.id }}</td>
+                <td>{{quotation.id}}</td>
-                <td>{{ quotation.message }}</td>
+                <td>{{quotation.message}}</td>
-                <td>{{ quotation.conditionsSale }}</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;">
@@ -32,20 +32,15 @@
                                 </tr>
                                 </thead>
                                 <tbody class="text-center">
-                                    @for (product of quotation.products; track product.productId) {
+                                    @for (product of quotation.getQuotationProductDto; track product.productId) {
                                         <tr>
-                                            <td>{{ product.productReference }}</td>
+                                            <td>{{ product.productReferences }}</td>
                                             <td>{{ product.productName }}</td>
-                                            <td>{{ product.productPrice }} €</td>
+                                            <td>Price ???</td>
-                                            <td>{{ product.quantity }}</td>
+                                            <td>Quantité ???</td>
                                             <td>
                                                 <div style="justify-content: center; display: flex">
-                                                    <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
+                                                    <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
-                                                             (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>
@@ -57,16 +52,21 @@
                 </td>
                 <td>
                     <div style="justify-content: center; display: flex">
-                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
+                        <div>
-                                 (click)="openEditModal(quotation)"></nz-icon>
+                            <nz-icon nzType="plus-circle" nzTheme="outline" class="cursor-pointer text-green-700" />
+                        </div>
                         <nz-divider nzType="vertical"></nz-divider>
-                        @if (admin()) {
+                        <app-modal-nav nameIcon="edit" name="Modification du devis" class="cursor-pointer">
-                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"
+                            <app-quotation-form></app-quotation-form>
-                                     (click)="delete(quotation.id)"/>
+                        </app-modal-nav>
-                            <nz-divider nzType="vertical"></nz-divider>
+                        <nz-divider nzType="vertical"></nz-divider>
-                        }
+                        <div>
-                        <nz-icon nzType="export" (click)="export(quotation.id)" nzTheme="outline"
+                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="delete(quotation.id)"/>
-                                 class="cursor-pointer text-green-700"/>
+                        </div>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="export" (click)="export(quotation.id)" nzTheme="outline" class="cursor-pointer text-green-700"/>
+                        </div>
                     </div>
                 </td>
             </tr>
@@ -74,17 +74,3 @@
     </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

@@ -1,20 +1,14 @@
-import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
+import {Component, inject, OnInit, signal} 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 {
+import {GetQuotationDto, QuotationsService} from "../../services/api";
-    GetQuotationDto,
-    GetQuotationProductDto,
-    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";
-import {AuthService} from "../../services/auth.service";
 
 @Component({
     selector: 'app-quotation-table',
@@ -25,7 +19,6 @@ import {AuthService} from "../../services/auth.service";
         NzIconDirective,
         NzTableComponent,
         QuotationForm,
-        QuantityForm,
     ],
     templateUrl: './quotation-table.html',
     styleUrl: './quotation-table.css',
@@ -35,18 +28,11 @@ export class QuotationTable implements OnInit {
     private quotationsService = inject(QuotationsService);
     private notificationService = inject(NzNotificationService);
     private fileService = inject(FileService);
-    private authService = inject(AuthService);
-
     quotations = signal<GetQuotationDto[]>([]);
     quotationsLoading = signal<boolean>(false);
-    admin = signal<boolean>(false);
-
-    modal = viewChild.required<ModalNav>('modalNav');
-    modalQuantity = viewChild.required<ModalNav>('modalQuantity');
 
     async ngOnInit() {
         await this.fetchQuotations();
-        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchQuotations() {
@@ -55,114 +41,48 @@ export class QuotationTable implements OnInit {
         try {
             const quotations = await firstValueFrom(this.quotationsService.getAllQuotationEndpoint())
             this.quotations.set(quotations);
-        } catch {
+        } catch (e) {
-            this.notificationService.error('Erreur', 'Erreur lors du chargement des devis')
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
         }
         this.quotationsLoading.set(false)
     }
 
-    async delete(quotation: number) {
+    async delete(quotation:number) {
         this.quotationsLoading.set(true)
         try {
             await firstValueFrom(this.quotationsService.deleteQuotationEndpoint(quotation))
-            this.notificationService.success('Success', 'Suppression effectuée')
+            this.notificationService.success(
-        } catch {
+                'Success',
-            this.notificationService.error('Erreur', 'Impossible de supprimer la ligne')
+                '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) {
+    async export(quotationId: number){
         this.quotationsLoading.set(true)
         try {
             const pdf = await firstValueFrom(
                 this.quotationsService.getQuotationPdfEndpoint(quotationId, "response")
             );
             this.fileService.downloadBlob(pdf)
-        } catch {
+        } catch (e) {
-            this.notificationService.error('Erreur', 'Impossible de générer un PDF');
+            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 {
-            this.notificationService.error('Erreur', 'Erreur lors de la modification')
-        }
-    }
-
-    async deleteProduct(productId: number, quotationId: number) {
-        this.quotationsLoading.set(true)
-        try {
-            await firstValueFrom(this.quotationsService.deleteProductFromQuotationEndpoint(productId, quotationId))
-            this.notificationService.success('Success', 'Suppression effectuée')
-        } catch {
-            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', 'Formulaire invalide')
-            return;
-        }
-
-        try {
-            const quantity = updateQuantityComponent.quantityForm.getRawValue();
-            await firstValueFrom(this.quotationsService.patchQuotationProductQuantityEndpoint(productId, quotationId, quantity))
-
-            this.notificationService.success('Success', 'Quantité modifiée')
-        } catch {
-            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();
-        this.onModalCancel(modal);
-        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();
-        this.onModalCancel(modal);
-        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" (ngSubmit)="submitForm()">
+    <nz-form-item nz-flex>
+        <nz-form-control nzSpan="12">
+            <div class="group">
+                <nz-icon nzType="search" nzTheme="outline" class="mr-2 text-xl"></nz-icon>
+                <input class="input" placeholder="Rechercher" formControlName="searchValue"/>
+            </div>
+        </nz-form-control>
+    </nz-form-item>
+</form>

src/app/components/search/search.ts

@@ -0,0 +1,37 @@
+import { Component } 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)
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.searchForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.searchForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.searchForm.reset()
+    }
+}

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

@@ -1,60 +1,35 @@
-<form nz-form nzLayout="horizontal" [formGroup]="settingForm">
+<form nz-form nzLayout="horizontal" [formGroup]="settingForm" (ngSubmit)="submitForm()">
 
     <!-- Logo -->
     <div class="row">
         <div class="row-left">
-            @if (settings().logo) {
+            <img [src]="setting.logo" alt="logo">
-                <img [src]="settings().logo" alt=""/>
-            } @else {
-                <img [src]="setting.logo" alt="logo">
-            }
         </div>
 
-        @if (admin()){
+        <div class="row-right">
-            <div class="row-right">
+            <nz-form-item>
-                <nz-form-item>
+                <nz-form-label nzSpan="9">Logo</nz-form-label>
-                    <nz-form-label nzSpan="9">Logo</nz-form-label>
+                <nz-form-control nzSpan="25">
-                    <nz-form-control nzErrorTip="Ce champ est requis">
+                    <input nz-input type="file" formControlName="logo" />
-                        <input #fileInputLogo nz-input type="file" placeholder="Déposer"
+                </nz-form-control>
-                               (change)="onFileChange('logo', fileInputLogo.files)">
+            </nz-form-item>
-                    </nz-form-control>
+        </div>
-                </nz-form-item>
-            </div>
-        } @else {
-            <div class="row-right">
-                <nz-form-item>
-                    <p class="text-red-600">Vous ne pouvez pas modifier le logo</p>
-                </nz-form-item>
-            </div>
-        }
     </div>
 
     <!-- Signature -->
     <div class="row">
         <div class="row-left">
-            @if (settings().electronicSignature) {
+            <img [src]="setting.signature" alt="logo">
-                <img [src]="settings().electronicSignature" alt=""/>
-            } @else {
-                <img [src]="setting.electronicSignature" alt="logo">
-            }
         </div>
 
-        @if (admin()) {
+        <div class="row-right">
-            <div class="row-right">
+            <nz-form-item>
-                <nz-form-item>
+                <nz-form-label nzSpan="9">Signature</nz-form-label>
-                    <nz-form-label nzSpan="9">Signature</nz-form-label>
+                <nz-form-control nzSpan="25">
-                    <nz-form-control nzErrorTip="Ce champ est requis">
+                    <input nz-input type="file" formControlName="signature" />
-                        <input #fileInputSignature nz-input type="file" placeholder="Déposer"
+                </nz-form-control>
-                               (change)="onFileChange('electronicSignature', fileInputSignature.files)">
+            </nz-form-item>
-                    </nz-form-control>
+        </div>
-                </nz-form-item>
-            </div>
-        } @else {
-            <div class="row-right">
-                <nz-form-item>
-                    <p class="text-red-600">Vous ne pouvez pas modifier la signature</p>
-                </nz-form-item>
-            </div>
-        }
     </div>
+
 </form>

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

@@ -1,17 +1,12 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
+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";
-import {firstValueFrom} from "rxjs";
-import {GetSettingDto, SettingsService} from "../../services/api";
-import {NzNotificationService} from "ng-zorro-antd/notification";
-import imageCompression from "browser-image-compression";
-import {AuthService} from "../../services/auth.service";
 
 @Component({
-    selector: 'app-setting-form',
+  selector: 'app-setting-form',
     imports: [
         FormsModule,
         NzColDirective,
@@ -20,68 +15,30 @@ import {AuthService} from "../../services/auth.service";
         NzFormItemComponent,
         NzFormLabelComponent,
         NzInputDirective,
-        ReactiveFormsModule,
+        ReactiveFormsModule
     ],
-    templateUrl: './setting-form.html',
+  templateUrl: './setting-form.html',
-    styleUrl: './setting-form.css',
+  styleUrl: './setting-form.css',
 })
-export class SettingForm implements OnInit {
+export class SettingForm {
-    private settingsService = inject(SettingsService);
+    settingForm: FormGroup = new FormGroup({
-    private notificationService = inject(NzNotificationService);
+        logo: new FormControl<string>(null),
-    private authService = inject(AuthService);
+        signature: new FormControl<string>(null)
+    })
 
-    settings = signal<GetSettingDto>({});
+    submitForm() {
-    admin = signal<boolean>(false);
+        // 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',
-        electronicSignature: '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'
-    }
-
-    settingForm: FormGroup = new FormGroup({
-        logo: new FormControl<string>(null),
-        electronicSignature: new FormControl<string>(null)
-    })
-
-    async ngOnInit() {
-        await this.fetchSettings();
-        this.admin.set(this.authService.isAdmin());
-    }
-
-    async fetchSettings() {
-        try {
-            const settingsPicture = await firstValueFrom(this.settingsService.getSettingEndpoint());
-            this.settings.set(settingsPicture);
-        } catch {
-            this.notificationService.error('Erreur', 'Aucun paramètre défini')
-        }
-    }
-
-    async onFileChange(control: string, files?: FileList | null) {
-        if (!files?.length) return;
-
-        const file = files[0];
-
-        const options = {
-            maxSizeMB: 1,
-            maxWidthOrHeight: 1080,
-            useWebWorker: true,
-            fileType: 'image/jpeg'
-        }
-
-        const compressed = await imageCompression(file, options);
-
-        try {
-            if (control === 'logo') {
-                await firstValueFrom(this.settingsService.patchSettingLogoEndpoint(compressed));
-            } else {
-                await firstValueFrom(this.settingsService.patchSettingElectronicSignatureEndpoint(compressed));
-            }
-            await this.fetchSettings();
-        } catch {
-            this.notificationService.error('Erreur', 'Impossible de changer les paramètres actuellement');
-        }
-
-        this.settingForm.reset();
     }
 }

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

@@ -6,7 +6,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="4" nzErrorTip="Requis">
-            <input nz-input type="number" placeholder="0" formControlName="minimalQuantity">
+            <input nz-input type="number" placeholder="12345" formControlName="minimalQuantity">
         </nz-form-control>
     </nz-form-item>
 </form>

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

@@ -7,7 +7,7 @@ import {NzFlexDirective} from "ng-zorro-antd/flex";
 import {GetProductDto} from "../../services/api";
 
 @Component({
-    selector: 'app-stock-form',
+  selector: 'app-stock-form',
     imports: [
         NzFormItemComponent,
         NzFormLabelComponent,
@@ -18,8 +18,8 @@ import {GetProductDto} from "../../services/api";
         ReactiveFormsModule,
         NzFlexDirective
     ],
-    templateUrl: './stock-form.html',
+  templateUrl: './stock-form.html',
-    styleUrl: './stock-form.css',
+  styleUrl: './stock-form.css',
 })
 export class StockForm {
     stockForm = new FormGroup({
@@ -27,8 +27,7 @@ export class StockForm {
         minimalQuantity: new FormControl<number>(null, [Validators.required])
     })
 
-    product = input<GetProductDto>();
+    product= input<GetProductDto>();
-
     constructor() {
         effect(() => {
             if (this.product()) {

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

@@ -6,7 +6,7 @@ nz-table {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -66,21 +66,18 @@ nz-table tbody td p {
     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);
+        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

@@ -1,16 +1,18 @@
 <nz-table
-        [nzData]="products()"
+    [nzData]="products()"
-        [nzFrontPagination]="false"
+    [nzFrontPagination]="false"
-        [nzLoading]="productsLoading()"
+    [nzLoading]="productsLoading()"
+    (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
 >
     <thead>
     <tr class="text-center">
         <th nzWidth="40px">
-            <label nz-checkbox
+            <label
-                   [(ngModel)]="checked"
+                    nz-checkbox
-                   [nzIndeterminate]="indeterminate"
+                    [(ngModel)]="checked"
-                   (ngModelChange)="allCheck($event)">
+                    [nzIndeterminate]="indeterminate"
-            </label>
+                    (ngModelChange)="onAllChecked($event)"
+            ></label>
         </th>
         <th>Nom</th>
         <th>Référence</th>
@@ -30,10 +32,11 @@
                 <td nzWidth="40px">
                     <label
                             nz-checkbox
-                            [ngModel]="selectedIds.includes(product.id)"
+                            [ngModel]="setOfCheckedId.has(product.id)"
                             (ngModelChange)="onItemChecked(product.id, $event)"
                     ></label>
                 </td>
+
                 <td>{{ product.name }}</td>
                 <td>{{ product.references }}</td>
                 <td>{{ product.nec }}</td>
@@ -44,13 +47,9 @@
                 <td>{{ product.minimalQuantity }}</td>
                 <td>
                     <div style="justify-content: center; display: flex">
-                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(product)"></nz-icon>
-                                 (click)="openEditModal(product)"></nz-icon>
+                        <nz-divider nzType="vertical"></nz-divider>
-                        @if (admin()) {
+                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(product.id)" class="text-red-600 cursor-pointer"></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>
@@ -59,8 +58,7 @@
 </nz-table>
 
 <div class="hidden">
-    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'"
+    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedProduct.id, stockForm, modalNav)" (cancel)="onModalCancel(modalNav)">
-                   (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

@@ -5,11 +5,10 @@ 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";
-import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
-import {AuthService} from "../../services/auth.service";
 
 interface ProductWithQuantity extends GetProductDto {
     totalQuantity?: number;
@@ -24,8 +23,8 @@ interface ProductWithQuantity extends GetProductDto {
         StockForm,
         NzDividerComponent,
         FormsModule,
-        NzThMeasureDirective,
         NzCheckboxComponent,
+        NzThMeasureDirective,
     ],
     templateUrl: './stock-table.html',
     styleUrl: './stock-table.css',
@@ -35,125 +34,155 @@ export class StockTable implements OnInit {
     private productsService = inject(ProductsService);
     private wareHousseProductsService = inject(WarehouseproductsService)
     private notificationService = inject(NzNotificationService)
-    private authService = inject(AuthService);
-
     products = signal<ProductWithQuantity[]>([]);
     productsLoading = signal<boolean>(false);
-    admin = signal<boolean>(false);
+    updateProduct = viewChild.required<StockForm>('stockForm');
-
     modal = viewChild.required<ModalNav>('modalNav');
 
-    selectionChange = output<number[]>();
+    checked = false;
-    productsTables = output<GetProductDto[]>();
+    indeterminate = false;
+    setOfCheckedId = new Set<number>();
+    selectionChange = output<boolean>()
+    currentPageData: GetProductDto[] = [];
 
-    selectedProduct: GetProductDto | null = null;
+    get hasSelection(): boolean {
-    checked: boolean = false;
+        return this.setOfCheckedId.size > 0;
-    indeterminate: boolean = false;
+    }
-    selectedIds: number[] = [];
+
+    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();
-        this.admin.set(this.authService.isAdmin());
+    }
+
+    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());
-            this.productsTables.emit(products);
 
-            const productsWithQuantity = await Promise.all(
+            // transforme chaque produit en ProductWithQuantity
-                products.map(async (x) => {
+            const productsWithQuantity: ProductWithQuantity[] = products.map(p => ({ ...p }));
-                    try {
+
-                        const quantity = await firstValueFrom(this.wareHousseProductsService.getTotalQuantityEndpoint(x.id));
-                        return {
-                            ...x,
-                            totalQuantity: quantity.totalQuantity ?? 0
-                        };
-                    } catch {
-                        return {
-                            ...x,
-                            totalQuantity: 0
-                        };
-                    }
-                })
-            );
             this.products.set(productsWithQuantity);
-        } catch {
+
-            this.notificationService.error('Erreur', 'Impossible de charger le catalogue');
+            // 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) {
+    async delete(productId:number) {
         try {
             await firstValueFrom(this.productsService.deleteProductEndpoint(productId))
-            this.notificationService.success('Success', 'Suppression effectuée');
+            this.notificationService.success(
-        } catch {
+                'Success',
-            this.notificationService.error('Erreur', 'Impossible de supprimer la ligne');
+                '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', 'Formulaire invalide')
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
             return;
         }
+
         try {
+
             const products = updateProductComponent.stockForm.getRawValue();
-            await firstValueFrom(this.productsService.patchProductMinimalStockEndpoint(id, products));
+            await firstValueFrom(this.productsService.patchProductMinimalStockEndpoint(id, products))
-            await this.fetchProducts();
+
-            this.notificationService.success('Success', 'Limite de stock modifiée');
+            this.notificationService.success(
-        } catch {
+                'Success',
-            this.notificationService.error('Erreur', 'Erreur lors de la modification');
+                '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.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();
-        this.onModalCancel(modal);
+        modal.isVisible = false;
         await this.fetchProducts();
     }
 
     onModalCancel(modal: ModalNav) {
         modal.isVisible = false;
     }
-
-    updateCheck(id: number, checked: boolean) {
-        if (checked) {
-            if (!this.selectedIds.includes(id)) {
-                this.selectedIds.push(id);
-            }
-        } else this.selectedIds = this.selectedIds.filter(x => x !== id);
-    }
-
-    refreshCheckStatus() {
-        const total = this.products().length;
-        const checkedCount = this.selectedIds.length;
-
-        this.checked = checkedCount === total;
-        this.indeterminate = checkedCount > 0 && checkedCount < total;
-
-        this.selectionChange.emit(this.selectedIds);
-    }
-
-    allCheck(checked: boolean) {
-        this.products().forEach(x =>
-            this.updateCheck(x.id, checked)
-        );
-        this.refreshCheckStatus();
-    }
-
-    onItemChecked(id: number, checked: boolean): void {
-        this.updateCheck(id, checked);
-        this.refreshCheckStatus();
-    }
 }

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

@@ -22,8 +22,6 @@ import {GetSupplierDto} from "../../services/api";
     styleUrl: './supplier-form.css',
 })
 export class SupplierForm {
-    supplier = input<GetSupplierDto>();
-
     supplierForm: FormGroup = new FormGroup({
         name: new FormControl<string>(null, [Validators.required]),
         email: new FormControl<string>(null, [Validators.required]),
@@ -35,6 +33,7 @@ export class SupplierForm {
 
     })
 
+    supplier= input<GetSupplierDto>();
     constructor() {
         effect(() => {
             if (this.supplier()) {

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

@@ -6,7 +6,7 @@ nz-table {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -66,21 +66,18 @@ nz-table tbody td p {
     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);
+        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

@@ -36,22 +36,19 @@
                             </tr>
                             </thead>
                             <tbody class="text-center">
-                                @for (product of supplier.prices; track product.productId) {
+                                @for (product of supplier.prices; track product.id) {
                                     <tr>
                                         <td>{{ product.productName }}</td>
-                                        <td>{{ product.productReference }}</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>
-                                                @if (admin()) {
+                                                <nz-divider nzType="vertical"></nz-divider>
-                                                    <nz-divider nzType="vertical"></nz-divider>
+                                                <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-600 hover:text-red-800"
-                                                    <nz-icon nzType="delete" nzTheme="outline"
+                                                         (click)="deleteProduct(product.productId, product.supplierId)"></nz-icon>
-                                                             class="cursor-pointer text-red-600 hover:text-red-800"
-                                                             (click)="deleteProduct(product.productId, supplier.id)"></nz-icon>
-                                                }
                                             </div>
                                         </td>
                                     </tr>
@@ -64,11 +61,9 @@
                     <div style="display: flex; align-items: center;">
                         <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
                                  (click)="openEditModal(supplier)"></nz-icon>
-                        @if (admin()) {
+                        <nz-divider nzType="vertical"></nz-divider>
-                            <nz-divider nzType="vertical"></nz-divider>
+                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(supplier.id)"
-                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(supplier.id)"
+                                 class="text-red-600 cursor-pointer"></nz-icon>
-                                     class="text-red-600 cursor-pointer"></nz-icon>
-                        }
                     </div>
                 </td>
             </tr>

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

@@ -9,7 +9,6 @@ import {GetPriceDto, GetSupplierDto, PricesService, SuppliersService} from "../.
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 import {PriceForm} from "../price-form/price-form";
-import {AuthService} from "../../services/auth.service";
 
 @Component({
     selector: 'app-supplier-table',
@@ -30,22 +29,17 @@ export class SupplierTable implements OnInit {
     private suppliersService = inject(SuppliersService);
     private pricesService = inject(PricesService);
     private notificationService = inject(NzNotificationService);
-    private authService = inject(AuthService);
-
     suppliers = signal<GetSupplierDto[]>([]);
     suppliersLoading = signal<boolean>(false);
-    admin = 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();
-        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchSuppliers() {
@@ -53,7 +47,7 @@ export class SupplierTable implements OnInit {
         try {
             const suppliers = await firstValueFrom(this.suppliersService.getAllSuppliersEndpoint());
             this.suppliers.set(suppliers);
-        } catch {
+        } catch (e) {
             this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
         }
         this.suppliersLoading.set(false);
@@ -68,7 +62,8 @@ export class SupplierTable implements OnInit {
             const suppliers = updateSupplierComponent.supplierForm.getRawValue();
             await firstValueFrom(this.suppliersService.updateSupplierEndpoint(id, suppliers));
             this.notificationService.success('Success', 'Fournisseur modifié');
-        } catch {
+        } catch (e) {
+            console.error(e);
             this.notificationService.error('Erreur', 'Erreur lors de la modification');
         }
     }
@@ -78,18 +73,18 @@ export class SupplierTable implements OnInit {
             await firstValueFrom(this.suppliersService.deleteSupplierEndpoint(supplier));
             this.notificationService.success('Succès', 'Suppression effectuée');
             await this.fetchSuppliers();
-        } catch {
+        } catch (e) {
             this.notificationService.error('Erreur', 'Impossible de supprimer la ligne');
         }
     }
 
     openEditModal(supplier: GetSupplierDto) {
-        this.selectedSupplier = {...supplier};
+        this.selectedSupplier = { ...supplier };
         this.supplierModal().showModal();
     }
 
     openEditProductModal(product: GetPriceDto, supplierId: number) {
-        this.selectedProduct = {...product};
+        this.selectedProduct = { ...product };
         this.selectedProductSupplierId = supplierId;
         this.productModal().showModal();
     }
@@ -110,13 +105,13 @@ export class SupplierTable implements OnInit {
         modal: ModalNav
     ) {
         if (productId == null || supplierId == null || !this.selectedProduct) {
-            this.notificationService.error('Erreur', 'Identifiants produit ou fournisseur manquants');
+            this.notificationService.error('Erreur', 'Identifiants produit/fournisseur manquants');
             return;
         }
 
         await this.editPrice(productId, supplierId, updateProductComponent);
         updateProductComponent.priceForm.reset();
-        this.onModalCancel(modal);
+        modal.isVisible = false;
         await this.fetchSuppliers();
     }
 
@@ -138,7 +133,8 @@ export class SupplierTable implements OnInit {
             };
             await firstValueFrom(this.pricesService.patchPriceEndpoint(productId, supplierId, body));
             this.notificationService.success('Success', 'Prix modifié');
-        } catch {
+        } catch (e) {
+            console.error(e);
             this.notificationService.error('Erreur', 'Erreur lors de la modification');
         }
     }
@@ -146,10 +142,10 @@ export class SupplierTable implements OnInit {
 
     async deleteProduct(idProduct: number, idSupplier: number) {
         try {
-            await firstValueFrom(this.suppliersService.deleteProductToSupplierEndpoint(idSupplier, idProduct));
+            await firstValueFrom(this.pricesService.deletePriceEndpoint(idProduct, idSupplier));
             this.notificationService.success('Succès', 'Produit supprimé');
             await this.fetchSuppliers();
-        } catch {
+        } catch (e) {
             this.notificationService.error('Erreur', 'Impossible de supprimer le produit');
         }
     }

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

@@ -6,7 +6,7 @@ nz-table {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -66,21 +66,18 @@ nz-table tbody td p {
     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);
+        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

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

@@ -9,7 +9,7 @@ import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 
 @Component({
-    selector: 'app-user-table',
+  selector: 'app-user-table',
     imports: [
         ModalNav,
         NzIconDirective,
@@ -17,16 +17,15 @@ import {firstValueFrom} from "rxjs";
         ProfilForm,
         NzDividerComponent
     ],
-    templateUrl: './user-table.html',
+  templateUrl: './user-table.html',
-    styleUrl: './user-table.css',
+  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() {
@@ -39,25 +38,37 @@ export class UserTable implements OnInit {
         try {
             const users = await firstValueFrom(this.usersService.getAllUsersEndpoint())
             this.users.set(users);
-        } catch {
+        } catch (e) {
-            this.notificationService.error('Erreur', 'Impossible de charger les utilisateurs')
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
         }
         this.usersLoading.set(false)
     }
 
-    async delete(user: number) {
+    async delete(user:number) {
         try {
             await firstValueFrom(this.usersService.deleteUserEndpoint(user))
-            this.notificationService.success('Success', 'Suppression effectuée')
+            this.notificationService.success(
-        } catch {
+                'Success',
-            this.notificationService.error('Erreur', 'Impossible de supprimer la ligne')
+                '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', 'Formulaire invalide')
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
             return;
         }
 
@@ -65,16 +76,21 @@ export class UserTable implements OnInit {
             const users = updateUserComponent.profilForm.getRawValue();
             await firstValueFrom(this.usersService.updateUserEndpoint(id, users))
 
-            this.notificationService.success('Success', 'Utilisateur modifié')
+            this.notificationService.success(
-        } catch {
+                'Success',
-            this.notificationService.error('Erreur', 'Erreur lors de la modification')
+                'Utilisateur modifié'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur lors de la modification'
+            )
         }
     }
 
     selectedUser: GetUserDto | null = null;
-
     openEditModal(user: GetUserDto) {
-        this.selectedUser = {...user};
+        this.selectedUser = { ...user };
         this.modal().showModal();
     }
 
@@ -83,10 +99,9 @@ export class UserTable implements OnInit {
 
         await this.edit(userId, updateUserComponent);
         updateUserComponent.profilForm.reset();
-        this.onModalCancel(modal);
+        modal.isVisible = false;
         await this.fetchUsers();
     }
-
     onModalCancel(modal: ModalNav) {
         modal.isVisible = false;
     }

src/app/guards/auth.guard.ts

@@ -1,14 +0,0 @@
-import { inject } from '@angular/core';
-import { Router } from '@angular/router';
-import { AuthService} from "../services/auth.service";
-
-export const authGuard = async () => {
-    const auth = inject(AuthService);
-    const router = inject(Router);
-
-    if(!auth.userAuthenticated()) {
-        await router.navigateByUrl('/login');
-        return false;
-    }
-    return true
-};

src/app/interceptors/auth-interceptor.ts

@@ -1,48 +0,0 @@
-import {HttpInterceptorFn, HttpErrorResponse, HttpRequest, HttpHandlerFn} from '@angular/common/http';
-import {inject} from '@angular/core';
-import {AuthService} from '../services/auth.service';
-import {RefreshService} from '../services/api';
-import {NzNotificationService} from 'ng-zorro-antd/notification';
-import {catchError, switchMap, throwError} from 'rxjs';
-
-export const authInterceptor: HttpInterceptorFn = (req: HttpRequest<any>, next: HttpHandlerFn) => {
-    const authService = inject(AuthService);
-    const refreshService = inject(RefreshService);
-    const notification = inject(NzNotificationService);
-    const token = authService.getToken();
-
-    let authReq = req;
-    if (token) {
-        authReq = req.clone({
-            setHeaders: {Authorization: `Bearer ${token}`}
-        });
-    }
-
-    return next(authReq).pipe(
-        catchError((error: HttpErrorResponse) => {
-            if (error.status === 401 && token) {
-                return refreshService.refreshTokenEndpoint({token})
-                    .pipe(
-                        switchMap((res: any) => {
-                            authService.setToken(res.token);
-                            const newReq = req.clone({
-                                setHeaders: {Authorization: `Bearer ${res.token}`}
-                            });
-                            return next(newReq);
-                        }),
-                        catchError((refreshErr) => {
-                            authService.logout();
-                            notification.error('Session expirée', 'Veuillez vous reconnecter.');
-                            return throwError(() => refreshErr);
-                        })
-                    );
-            }
-
-            if (error.status === 403) {
-                notification.error('Accès refusé', 'Vous n’avez pas les droits pour cette action.');
-            }
-
-            return throwError(() => error);
-        })
-    );
-};

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

@@ -1,4 +1,4 @@
 export interface SettingInfo {
     logo: string;
-    electronicSignature: 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/dashboard/dashboard.html

@@ -1,27 +0,0 @@
-<div class="flex w-full px-4 gap-4 items-start mt-6">
-    <div class="w-1/2">
-        <app-delivery-validator></app-delivery-validator>
-    </div>
-
-    <div class="w-1/2 mt-10 flex flex-col gap-4">
-        <p class="text-2xl font-bold">Tableau de bord</p>
-        <div class="grid grid-cols-2 gap-4">
-            <app-info-card color="#f59e0b" icon="inbox"
-                           [value]="productsUnderLimitCount()"
-                           description="Produits sous le seuil minimal.">
-            </app-info-card>
-            <app-info-card color="#3b82f6" icon="team"
-                           [value]="deliversCount()+suppliersCount()"
-                           description="Partenaires actifs.">
-            </app-info-card>
-            <app-info-card color="#10b981" icon="truck"
-                           [value]="deliversCount()"
-                           description="Livreurs partenaires.">
-            </app-info-card>
-            <app-info-card color="#ef4444" icon="shop"
-                           [value]="suppliersCount()"
-                           description="Fournisseurs partenaires.">
-            </app-info-card>
-        </div>
-    </div>
-</div>

src/app/pages/deliverer/deliverer.html

@@ -8,8 +8,12 @@
 
         <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-4">
+<div class="mt-1">
     <app-deliverer-table #delivererTable></app-deliverer-table>
 </div>

src/app/pages/deliverer/deliverer.ts

@@ -2,19 +2,21 @@ 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',
+  selector: 'app-deliverer',
     imports: [
         ModalButton,
         DelivererTable,
         DelivererForm,
+        Search
     ],
-    templateUrl: './deliverer.html',
+  templateUrl: './deliverer.html',
-    styleUrl: './deliverer.css',
+  styleUrl: './deliverer.css',
 })
 export class Deliverer {
     modal = viewChild.required<ModalButton>('modalButton');
@@ -26,7 +28,7 @@ export class Deliverer {
     async onModalOk() {
         await this.addDeliverer()
         this.createDeliverer().delivererForm.reset();
-        this.onModalCancel();
+        this.modal().isVisible = false;
         await this.delivererTable().fetchDeliverers()
     }
 
@@ -35,16 +37,26 @@ export class Deliverer {
     }
 
     async addDeliverer() {
-        if (this.createDeliverer().delivererForm.invalid) {
+        if (this.createDeliverer().delivererForm.invalid)
-            this.notificationService.error('Erreur', 'Formulaire invalide')
+        {
+            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é')
+            this.notificationService.success(
-        } catch {
+                'Success',
-            this.notificationService.error('Erreur', 'Erreur d\'enregistrement')
+                'Transporteur enregistré'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'enregistrement'
+            )
         }
     }
 }

src/app/pages/delivery-note/delivery-note.html

@@ -1,3 +1,13 @@
-<div class="mt-2">
+<div class="flex mt-2">
+    <app-modal-button type="primary" name="Créer un bon de livraison" size="32%">
+        <app-deliverery-note-form></app-deliverery-note-form>
+    </app-modal-button>
+
+    <div class="ml-95 w-150">
+        <app-search></app-search>
+    </div>
+</div>
+
+<div class="mt-1">
     <app-deliverery-note-table></app-deliverery-note-table>
 </div>

src/app/pages/delivery-note/delivery-note.ts

@@ -1,13 +1,19 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 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 {Search} from "../../components/search/search";
 
 @Component({
-    selector: 'app-delivery-note',
+  selector: 'app-delivery-note',
     imports: [
         DelivereryNoteTable,
+        ModalButton,
+        DelivereryNoteForm,
+        Search
     ],
-    templateUrl: './delivery-note.html',
+  templateUrl: './delivery-note.html',
-    styleUrl: './delivery-note.css',
+  styleUrl: './delivery-note.css',
 })
 export class DeliveryNote {
 

src/app/pages/login/login.html

@@ -1,46 +0,0 @@
-<div class="grid grid-cols-9 min-h-screen bg-blue-950">
-    <div class="col-span-6 w-full h-full border rounded-r-4xl overflow-hidden">
-        <img src="https://www.pyro-fetes.com/wp-content/uploads/2023/03/5I9A3180-scaled.jpg"
-             class="w-full h-full object-cover"
-             alt=""
-        />
-    </div>
-
-    <div class="col-span-3 w-full flex items-center justify-center">
-
-        <div class="flex flex-col items-center">
-            <img src="https://www.pyro-fetes.com/wp-content/uploads/2020/10/PyroFetes-logo-OR.png"
-                 class="w-9/12 mb-10"
-                 alt=""
-            />
-
-            <div class="bg-white border rounded-2xl p-8 w-80 shadow-lg">
-                <form nz-form nzLayout="vertical" [formGroup]="loginForm">
-                    <nz-form-item>
-                        <nz-form-label nzRequired>
-                            Nom d'utilisateur
-                        </nz-form-label>
-                        <nz-form-control nzErrorTip="Ce champ est requis">
-                            <input nz-input placeholder="Nom d'utilisateur" formControlName="name">
-                        </nz-form-control>
-                    </nz-form-item>
-
-                    <nz-form-item>
-                        <nz-form-label nzRequired class="mt-3">
-                            Mot de passe
-                        </nz-form-label>
-                        <nz-form-control nzErrorTip="Ce champ est requis">
-                            <input nz-input type="password" placeholder="Mot de passe" formControlName="password">
-                        </nz-form-control>
-                    </nz-form-item>
-
-                    <button class="mt-4 rounded-xl w-full" nz-button nzType="primary" (click)="connectUser()">
-                        Connexion
-                    </button>
-
-                </form>
-            </div>
-
-        </div>
-    </div>
-</div>

src/app/pages/login/login.ts

@@ -1,43 +0,0 @@
-import {Component, inject, OnInit} from '@angular/core';
-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 {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {NzButtonComponent} from "ng-zorro-antd/button";
-import {AuthService} from "../../services/auth.service";
-import {Router} from "@angular/router";
-
-@Component({
-    selector: 'app-login',
-    imports: [
-        NzColDirective,
-        NzFormControlComponent,
-        NzFormDirective,
-        NzFormItemComponent,
-        NzFormLabelComponent,
-        NzInputDirective,
-        ReactiveFormsModule,
-        NzButtonComponent
-    ],
-    templateUrl: './login.html',
-    styleUrl: './login.css',
-})
-export class Login implements OnInit {
-    private authService = inject(AuthService);
-    private router = inject(Router);
-
-    ngOnInit() {
-        this.authService.logout();
-    }
-
-    loginForm: FormGroup = new FormGroup({
-        name: new FormControl<string>(null, [Validators.required]),
-        password: new FormControl<string>(null, [Validators.required])
-    })
-
-    async connectUser() {
-        if (this.loginForm.invalid) return;
-        const ok = await this.authService.connectUser(this.loginForm.value.name, this.loginForm.value.password);
-        if (ok) await this.router.navigate(['/dashboard']);
-    }
-}

src/app/pages/purchase-order/purchase-order.html

@@ -1,4 +1,10 @@
-<div class="mt-2">
+<div class="flex mt-2">
+    <div class="ml-95 w-150">
+        <app-search></app-search>
+    </div>
+</div>
+
+<div class="mt-1">
     <app-purchase-order-table></app-purchase-order-table>
 </div>
 

src/app/pages/purchase-order/purchase-order.ts

@@ -1,13 +1,15 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
+import {Search} from "../../components/search/search";
 import {PurchaseOrderTable} from "../../components/purchase-order-table/purchase-order-table";
 
 @Component({
-    selector: 'app-purchase-order',
+  selector: 'app-purchase-order',
     imports: [
+        Search,
         PurchaseOrderTable,
     ],
-    templateUrl: './purchase-order.html',
+  templateUrl: './purchase-order.html',
-    styleUrl: './purchase-order.css',
+  styleUrl: './purchase-order.css',
 })
 export class PurchaseOrder {
 

src/app/pages/quotation/quotation.html

@@ -1,3 +1,9 @@
-<div class="mt-2">
+<div class="flex mt-2">
+    <div class="ml-95 w-150">
+        <app-search></app-search>
+    </div>
+</div>
+
+<div class="mt-1">
     <app-quotation-table></app-quotation-table>
 </div>

src/app/pages/quotation/quotation.ts

@@ -1,13 +1,15 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
+import {Search} from "../../components/search/search";
 import {QuotationTable} from "../../components/quotation-table/quotation-table";
 
 @Component({
-    selector: 'app-quotation',
+  selector: 'app-quotation',
     imports: [
+        Search,
         QuotationTable
     ],
-    templateUrl: './quotation.html',
+  templateUrl: './quotation.html',
-    styleUrl: './quotation.css',
+  styleUrl: './quotation.css',
 })
 export class Quotation {
 

src/app/pages/stock/stock.html

@@ -1,51 +1,19 @@
 <div class="flex mt-2">
-    @if (productIds().length) {
+    @if (hasSelection) {
-        <app-modal-button #modalButtonPurchaseOrder
+        <app-modal-button #modalButton type="default" name="Créer un bon de commande" size="35%" class="ml-4">
-                          (click)="openPurchaseOrderForm()"
+            <app-purchase-order-form #purchaseOrderForm></app-purchase-order-form>
-                          (ok)="onModalPurchaseOrderOk()"
-                          (cancel)="onModalPurchaseOrderCancel()"
-                          type="default"
-                          name="Créer un bon de commande"
-                          size="35%"
-                          class="ml-4">
-            <app-create-purchaseorder-form #purchaseOrderForm
-                                           [suppliers]="suppliers()"
-                                           [products]="selectedProducts()">
-            </app-create-purchaseorder-form>
         </app-modal-button>
 
-        <app-modal-button #modalButtonQuotation
+        <app-modal-button #modalButton type="default" name="Créer un devis" size="35%" class="ml-4" (click)="test()">
-                          type="default"
+            <app-quotation-form #quotationForm></app-quotation-form>
-                          name="Créer un devis"
-                          size="35%"
-                          class="ml-4"
-                          (click)="openQuotationForm()"
-                          (ok)="onModalQuotationOk()"
-                          (cancel)="onModalQuotationCancel()">
-            <app-create-quotation-form #quotationForm
-                                       [suppliers]="suppliers()"
-                                       [products]="selectedProducts()">
-            </app-create-quotation-form>
-        </app-modal-button>
-
-        <app-modal-button #modalButtonSupplier
-                          type="default"
-                          name="Associer à un fournisseur"
-                          size="35%"
-                          class="ml-4"
-                          (click)="openSupplierForm()"
-                          (ok)="onModalSupplierOk()"
-                          (cancel)="onModalSupplierCancel()">
-            <app-add-product-supplier-form #supplierForm
-                                           [suppliers]="suppliers()"
-                                           [products]="selectedProducts()">
-            </app-add-product-supplier-form>
         </app-modal-button>
     }
+
+    <div class="ml-95 w-150">
+        <app-search class="w-full"></app-search>
+    </div>
 </div>
 
-<div class="mt-4">
+<div class="mt-1">
-    <app-stock-table (selectionChange)="onSelectionChange($event)"
+    <app-stock-table #stockTable (selectionChange)="onSelectionChange($event)"></app-stock-table>
-                     (productsTables)="products.set($event)">
-    </app-stock-table>
 </div>

src/app/pages/stock/stock.ts

@@ -1,210 +1,77 @@
-import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
+import {Component, inject, viewChild} from '@angular/core';
 import {StockTable} from "../../components/stock-table/stock-table";
+import {Search} from "../../components/search/search";
 import {ModalButton} from "../../components/modal-button/modal-button";
-import {CreatePurchaseorderForm} from "../../components/create-purchaseorder-form/create-purchaseorder-form";
+import {PurchaseOrderForm} from "../../components/purchase-order-form/purchase-order-form";
+import {QuotationForm} from "../../components/quotation-form/quotation-form";
+import {ProductsService} from "../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
-import {
-    CreatePurchaseOrderDto, CreateQuotationDto,
-    GetProductDto,
-    GetSupplierDto,
-    PurchaseordersService,
-    QuotationsService,
-    SuppliersService
-} from "../../services/api";
 import {firstValueFrom} from "rxjs";
-import {CreateQuotationForm} from "../../components/create-quotation-form/create-quotation-form";
-import {AddProductSupplierForm} from "../../components/add-product-supplier-form/add-product-supplier-form";
 
 @Component({
-    selector: 'app-stock',
+  selector: 'app-stock',
     imports: [
         StockTable,
+        Search,
         ModalButton,
-        CreatePurchaseorderForm,
+        PurchaseOrderForm,
-        CreateQuotationForm,
+        QuotationForm,
-        AddProductSupplierForm,
     ],
-    templateUrl: './stock.html',
+  templateUrl: './stock.html',
-    styleUrl: './stock.css',
+  styleUrl: './stock.css',
 })
 
-export class Stock implements OnInit {
+export class Stock {
-    createPurchaseOrder = viewChild.required<CreatePurchaseorderForm>('purchaseOrderForm');
+    modal = viewChild.required<ModalButton>('modalButton');
-    createQuotation = viewChild.required<CreateQuotationForm>('quotationForm');
+    createQuotation = viewChild.required<QuotationForm>('quotationForm');
-    addProduct = viewChild.required<AddProductSupplierForm>('supplierForm');
+    createPurchaseOrder = viewChild.required<PurchaseOrderForm>('purchaseOrderForm');
-    modalButtonPurchaseOrder = viewChild.required<ModalButton>('modalButtonPurchaseOrder');
+    productTable = viewChild.required<StockTable>('stockTable');
-    modalButtonQuotation = viewChild.required<ModalButton>('modalButtonQuotation');
+    private productsService = inject(ProductsService);
-    modalButtonSupplier = viewChild.required<ModalButton>('modalButtonSupplier');
+    private notificationService = inject(NzNotificationService)
 
-    private purchaseOrdersService = inject(PurchaseordersService);
+    // async onModalOk() {
-    private quotationsService = inject(QuotationsService);
+    //     await this.addSupplier()
-    private suppliersService = inject(SuppliersService);
+    //     this.createSupplier().supplierForm.reset();
-    private notificationService = inject(NzNotificationService);
+    //     this.modal().isVisible = false;
+    //     await this.supplierTable().fetchSuppliers()
+    // }
+    //
+    // onModalCancel() {
+    //     this.modal().isVisible = false;
+    // }
+    //
+    // async addSupplier() {
+    //     if (this.createSupplier().supplierForm.invalid)
+    //     {
+    //         this.notificationService.error(
+    //             'Erreur',
+    //             'Erreur d\'écriture dans le formulaire'
+    //         )
+    //     }
+    //     try {
+    //         const suppliers = this.createSupplier().supplierForm.getRawValue();
+    //         await firstValueFrom(this.usersService.createSupplierEndpoint(suppliers))
+    //
+    //         this.notificationService.success(
+    //             'Success',
+    //             'Fournisseur enregistré'
+    //         )
+    //     } catch (e) {
+    //         this.notificationService.error(
+    //             'Erreur',
+    //             'Erreur d\'enregistrement'
+    //         )
+    //     }
+    // }
 
-    products = signal<GetProductDto[]>([]);
+    hasSelection = false;
-    suppliers = signal<GetSupplierDto[]>([]);
-    selectedProducts = signal([]);
 
-    productIds = signal<number[]>([]);
+    onSelectionChange(value: boolean) {
-
+        this.hasSelection = value;
-    async ngOnInit() {
-        try {
-            const suppliers = await firstValueFrom(this.suppliersService.getAllSuppliersEndpoint());
-            this.suppliers.set(suppliers);
-        } catch {
-            this.notificationService.error('Erreur', 'Impossible de charger les fournisseurs');
-        }
     }
 
-    onSelectionChange(ids: number[]) {
+    test(){
-        this.productIds.set(ids);
+        console.log(this.productTable().selectedIds);
-        this.selectedProducts.set(this.products().filter(x => ids.includes(x.id)));
     }
 
-    openPurchaseOrderForm() {
-        this.createPurchaseOrder().addProductToForm();
-    }
-
-    openQuotationForm() {
-        this.createQuotation().addProductToForm();
-    }
-
-    openSupplierForm() {
-        this.addProduct().addProductToForm();
-    }
-
-    async addPurchaseOrder() {
-        const form = this.createPurchaseOrder().createPurchaseOrderForm;
-
-        if (form.invalid) {
-            this.notificationService.error('Erreur', 'Formulaire invalide');
-            return;
-        }
-
-        const orderLines = this.createPurchaseOrder().lines.value.map((line: { productId: any; quantity: any; }) => ({
-            productId: line.productId,
-            quantity: line.quantity
-        }));
-
-        if (!orderLines.length) {
-            this.notificationService.error('Erreur', 'Aucun produit sélectionné');
-            return;
-        }
-
-        const purchaseOrder: CreatePurchaseOrderDto = {
-            purchaseConditions: form.value.purchaseConditions,
-            products: orderLines,
-            supplierId: form.value.supplierId
-        };
-
-        try {
-            await firstValueFrom(this.purchaseOrdersService.createPurchaseOrder(purchaseOrder));
-            this.notificationService.success('Succès', 'Bon de commande créé');
-        } catch {
-            this.notificationService.error('Erreur', 'Erreur lors de la création du bon de commande.');
-        }
-    }
-
-    async addQuotation() {
-        const form = this.createQuotation().createQuotationForm;
-
-        if (form.invalid) {
-            this.notificationService.error('Erreur', 'Formulaire invalide');
-            return;
-        }
-
-        const orderLines = this.createQuotation().lines.value.map((line: { productId: any; quantity: any; }) => ({
-            productId: line.productId,
-            quantity: line.quantity
-        }));
-
-        if (!orderLines.length) {
-            this.notificationService.error('Erreur', 'Aucun produit sélectionné');
-            return;
-        }
-
-        const quotation: CreateQuotationDto = {
-            message: this.createQuotation().createQuotationForm.value.message,
-            conditionsSale: this.createQuotation().createQuotationForm.value.conditionsSale,
-            customerId: this.createQuotation().createQuotationForm.value.customerId,
-            supplierId: this.createQuotation().createQuotationForm.value.supplierId,
-            products: orderLines
-        };
-
-        try {
-            await firstValueFrom(this.quotationsService.createQuotationEndpoint(quotation));
-            this.notificationService.success('Succès', 'Devis créé');
-        } catch {
-            this.notificationService.error('Erreur', 'Erreur lors de la création du devis.');
-        }
-    }
-
-    async addProductFromSupplier() {
-        const form = this.addProduct().addProductForm;
-        let success = 0;
-
-        if (form.invalid) {
-            this.notificationService.error('Erreur', 'Formulaire invalide');
-            return;
-        }
-
-        const supplierId = form.value.supplierId;
-        const lines = this.addProduct().lines.value;
-
-        if (!lines.length) {
-            this.notificationService.error('Erreur', 'Aucun produit sélectionné');
-            return;
-        }
-
-        for (const line of lines) {
-            try {
-                await firstValueFrom(
-                    this.suppliersService.addProductToSupplierEndpoint(
-                        supplierId,
-                        line.productId,
-                        {
-                            sellingPrice: line.price
-                        }
-                    )
-                );
-
-                success++;
-            } catch {
-            }
-        }
-        this.notificationService.success('Succès', `${success} produits ajoutés`);
-    }
-
-    async onModalPurchaseOrderOk() {
-        await this.addPurchaseOrder();
-        this.createPurchaseOrder().createPurchaseOrderForm.reset();
-        this.modalButtonPurchaseOrder().isVisible = false;
-        this.onModalPurchaseOrderCancel();
-    }
-
-    onModalPurchaseOrderCancel() {
-        this.modalButtonPurchaseOrder().isVisible = false;
-    }
-
-    async onModalQuotationOk() {
-        await this.addQuotation();
-        this.createQuotation().createQuotationForm.reset();
-        this.modalButtonQuotation().isVisible = false;
-        this.onModalQuotationCancel();
-    }
-
-    onModalQuotationCancel() {
-        this.modalButtonQuotation().isVisible = false;
-    }
-
-    async onModalSupplierOk() {
-        await this.addProductFromSupplier();
-        this.addProduct().addProductForm.reset();
-        this.modalButtonSupplier().isVisible = false;
-        this.onModalSupplierCancel();
-    }
-
-    onModalSupplierCancel() {
-        this.modalButtonSupplier().isVisible = false;
-    }
 }