add crud for the ain domains

c7831f2c · hasan khaddour · f7030244 · c7831f2c · c7831f2c · c7831f2c
Commit c7831f2c authored Aug 23, 2024 by hasan khaddour
40 changed files
--- a/angular.json
+++ b/angular.json
@@ -44,6 +44,7 @@
              }
            ],
          "styles": [
+             "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "@angular/material/prebuilt-themes/azure-blue.css",
            "src/styles.css",
            "src/assets/css/app-light.css",
@@ -51,6 +52,8 @@
            "./node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
          "scripts": [
+             "node_modules/@popperjs/core/dist/umd/popper.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.min.js",
            "./node_modules/jquery-sparkline/jquery.sparkline.min.js",
          "./node_modules/@popperjs/core/dist/umd/popper.min.js",
          "node_modules/feather-icons/dist/feather.min.js"

--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
        "@angular/platform-browser-dynamic": "^18.0.0",
        "@angular/router": "^18.0.0",
        "@fortawesome/fontawesome-free": "^6.6.0",
+        "@ng-bootstrap/ng-bootstrap": "^17.0.0",
        "@ngx-translate/core": "^15.0.0",
        "@ngx-translate/http-loader": "^8.0.0",
        "@popperjs/core": "^2.11.8",
@@ -43,6 +44,7 @@
        "@angular/cli": "^18.0.6",
        "@angular/compiler-cli": "^18.0.0",
        "@angular/localize": "^18.1.0",
+        "@types/bootstrap": "^5.2.10",
        "@types/dom-to-image": "^2.6.7",
        "@types/feather-icons": "^4.29.4",
        "@types/jasmine": "~5.1.0",
@@ -62,7 +64,6 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/gen-mapping": "^0.3.5",
        "@jridgewell/trace-mapping": "^0.3.24"
@@ -450,7 +451,6 @@
      "version": "18.1.0",
      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-18.1.0.tgz",
      "integrity": "sha512-BBsogLPJwxkPh7f8RVHsxyyqNE8XpHbAanjB5fAwnU4W6Sw1kR5rFzkeZM3xaRm2MDiC8DovIl6hlf+s/mKYOw==",
-      "dev": true,
      "dependencies": {
        "@babel/core": "7.24.7",
        "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -510,7 +510,6 @@
      "version": "18.1.0",
      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-18.1.0.tgz",
      "integrity": "sha512-84D06p2Th5NxoJZzsSIn4FkTJGImj7rtNnvyTrHvHdomzzUKwiBOXDB2FiCLDstND0DsCtgjD/uBJivg77z9tg==",
-      "dev": true,
      "dependencies": {
        "@babel/core": "7.24.7",
        "@types/babel__core": "7.20.5",
@@ -606,7 +605,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
-      "dev": true,
      "dependencies": {
        "@babel/highlight": "^7.24.7",
        "picocolors": "^1.0.0"
@@ -619,7 +617,6 @@
      "version": "7.24.9",
      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.9.tgz",
      "integrity": "sha512-e701mcfApCJqMMueQI0Fb68Amflj83+dvAvHawoBpAz+GDjCIyGHzNwnefjsWJ3xiYAqqiQFoWbspGYBdb2/ng==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -628,7 +625,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.7.tgz",
      "integrity": "sha512-nykK+LEK86ahTkX/3TgauT0ikKoNCfKHEaZYTUVupJdTLzGNvrblu4u6fa7DhZONAltdf8e662t/abY8idrd/g==",
-      "dev": true,
      "dependencies": {
        "@ampproject/remapping": "^2.2.0",
        "@babel/code-frame": "^7.24.7",
@@ -657,14 +653,12 @@
    "node_modules/@babel/core/node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
    },
    "node_modules/@babel/core/node_modules/semver": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
      "bin": {
        "semver": "bin/semver.js"
      }
@@ -673,7 +667,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.7.tgz",
      "integrity": "sha512-oipXieGC3i45Y1A41t4tAqpnEZWgB/lC6Ehh6+rOviR5XWpTtMmLN+fGjz9vOiNRt0p6RtO6DtD0pdU3vpqdSA==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.24.7",
        "@jridgewell/gen-mapping": "^0.3.5",
@@ -713,7 +706,6 @@
      "version": "7.24.8",
      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.8.tgz",
      "integrity": "sha512-oU+UoqCHdp+nWVDkpldqIQL/i/bvAv53tRqLG/s+cOXxe66zOYLU7ar/Xs3LdmBihrUMEUhwu6dMZwbNOYDwvw==",
-      "dev": true,
      "dependencies": {
        "@babel/compat-data": "^7.24.8",
        "@babel/helper-validator-option": "^7.24.8",
@@ -729,7 +721,6 @@
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
      "bin": {
        "semver": "bin/semver.js"
      }
@@ -812,7 +803,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.7.tgz",
      "integrity": "sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.24.7"
      },
@@ -824,7 +814,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz",
      "integrity": "sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==",
-      "dev": true,
      "dependencies": {
        "@babel/template": "^7.24.7",
        "@babel/types": "^7.24.7"
@@ -837,7 +826,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.7.tgz",
      "integrity": "sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.24.7"
      },
@@ -862,7 +850,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
      "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
-      "dev": true,
      "dependencies": {
        "@babel/traverse": "^7.24.7",
        "@babel/types": "^7.24.7"
@@ -875,7 +862,6 @@
      "version": "7.24.9",
      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.9.tgz",
      "integrity": "sha512-oYbh+rtFKj/HwBQkFlUzvcybzklmVdVV3UU+mN7n2t/q3yGHbuVdNxyFvSBO1tfvjyArpHNcWMAzsSPdyI46hw==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-environment-visitor": "^7.24.7",
        "@babel/helper-module-imports": "^7.24.7",
@@ -949,7 +935,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
      "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
-      "dev": true,
      "dependencies": {
        "@babel/traverse": "^7.24.7",
        "@babel/types": "^7.24.7"
@@ -975,7 +960,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz",
      "integrity": "sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.24.7"
      },
@@ -987,7 +971,6 @@
      "version": "7.24.8",
      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -996,7 +979,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -1005,7 +987,6 @@
      "version": "7.24.8",
      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -1029,7 +1010,6 @@
      "version": "7.24.8",
      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.8.tgz",
      "integrity": "sha512-gV2265Nkcz7weJJfvDoAEVzC1e2OTDpkGbEsebse8koXUJUXPsCMi7sRo/+SPMuMZ9MtUPnGwITTnQnU5YjyaQ==",
-      "dev": true,
      "dependencies": {
        "@babel/template": "^7.24.7",
        "@babel/types": "^7.24.8"
@@ -1042,7 +1022,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-validator-identifier": "^7.24.7",
        "chalk": "^2.4.2",
@@ -1057,7 +1036,6 @@
      "version": "7.24.8",
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz",
      "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
-      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@@ -2315,7 +2293,6 @@
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.7.tgz",
      "integrity": "sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==",
-      "dev": true,
      "dependencies": {
        "@babel/code-frame": "^7.24.7",
        "@babel/parser": "^7.24.7",
@@ -2329,7 +2306,6 @@
      "version": "7.24.8",
      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.8.tgz",
      "integrity": "sha512-t0P1xxAPzEDcEPmjprAQq19NWum4K0EQPjMwZQZbHt+GiZqvjCHjj755Weq1YRPVzBI+3zSfvScfpnuIecVFJQ==",
-      "dev": true,
      "dependencies": {
        "@babel/code-frame": "^7.24.7",
        "@babel/generator": "^7.24.8",
@@ -2350,7 +2326,6 @@
      "version": "7.24.10",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.10.tgz",
      "integrity": "sha512-o9HBZL1G2129luEUlG1hB4N/nlYNWHnpwlND9eOMclRqqu1YDy2sSYVCFUZwl8I1Gxh+QSRrP2vD7EpUmFVXxg==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.24.9",
        "@jridgewell/gen-mapping": "^0.3.5",
@@ -2365,7 +2340,6 @@
      "version": "7.24.9",
      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.9.tgz",
      "integrity": "sha512-xm8XrMKz0IlUdocVbYJe0Z9xEgidU7msskG8BbhnTPK/HZ2z/7FP7ykqPgrUH+C+r414mNfNWam1f2vqOjqjYQ==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-string-parser": "^7.24.8",
        "@babel/helper-validator-identifier": "^7.24.7",
@@ -3224,7 +3198,6 @@
      "version": "0.3.5",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/set-array": "^1.2.1",
        "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -3238,7 +3211,6 @@
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
      "engines": {
        "node": ">=6.0.0"
      }
@@ -3247,7 +3219,6 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
      "engines": {
        "node": ">=6.0.0"
      }
@@ -3265,14 +3236,12 @@
    "node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
    },
    "node_modules/@jridgewell/trace-mapping": {
      "version": "0.3.25",
      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/resolve-uri": "^3.1.0",
        "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -3509,6 +3478,22 @@
        "win32"
      ]
    },
+    "node_modules/@ng-bootstrap/ng-bootstrap": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-17.0.0.tgz",
+      "integrity": "sha512-hTbBtozJlpevF1RO6J2adCoXiAkMTPV3wmXIyK05dVha4VsKjHibgaL6YldToKoh6ElQnIYkPEIJHX9z5EtyMw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^18.0.0",
+        "@angular/core": "^18.0.0",
+        "@angular/forms": "^18.0.0",
+        "@angular/localize": "^18.0.0",
+        "@popperjs/core": "^2.11.8",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
    "node_modules/@ngtools/webpack": {
      "version": "18.1.0",
      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-18.1.0.tgz",
@@ -3556,7 +3541,6 @@
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
      "dependencies": {
        "@nodelib/fs.stat": "2.0.5",
        "run-parallel": "^1.1.9"
@@ -3569,7 +3553,6 @@
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
      "engines": {
        "node": ">= 8"
      }
@@ -3578,7 +3561,6 @@
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
      "dependencies": {
        "@nodelib/fs.scandir": "2.1.5",
        "fastq": "^1.6.0"
@@ -4229,7 +4211,6 @@
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "dev": true,
      "dependencies": {
        "@babel/parser": "^7.20.7",
        "@babel/types": "^7.20.7",
@@ -4242,7 +4223,6 @@
      "version": "7.6.8",
      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.0.0"
      }
@@ -4251,7 +4231,6 @@
      "version": "7.4.4",
      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "dev": true,
      "dependencies": {
        "@babel/parser": "^7.1.0",
        "@babel/types": "^7.0.0"
@@ -4261,7 +4240,6 @@
      "version": "7.20.6",
      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.20.7"
      }
@@ -4285,6 +4263,15 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
    "node_modules/@types/connect": {
      "version": "3.4.38",
      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -4896,7 +4883,6 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@@ -4905,7 +4891,6 @@
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
      "dependencies": {
        "color-convert": "^1.9.0"
      },
@@ -4917,7 +4902,6 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
      "dependencies": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
@@ -4930,7 +4914,6 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
      "engines": {
        "node": ">=8.6"
      },
@@ -5173,7 +5156,6 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      },
@@ -5279,7 +5261,6 @@
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
      "dependencies": {
        "fill-range": "^7.1.1"
      },
@@ -5291,7 +5272,6 @@
      "version": "4.23.2",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@@ -5489,7 +5469,6 @@
      "version": "1.0.30001642",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
      "integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@@ -5540,7 +5519,6 @@
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
      "dependencies": {
        "ansi-styles": "^3.2.1",
        "escape-string-regexp": "^1.0.5",
@@ -5560,7 +5538,6 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
      "dependencies": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
@@ -5668,7 +5645,6 @@
      "version": "8.0.1",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "dev": true,
      "dependencies": {
        "string-width": "^4.2.0",
        "strip-ansi": "^6.0.1",
@@ -5682,7 +5658,6 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
      "dependencies": {
        "color-convert": "^2.0.1"
      },
@@ -5697,7 +5672,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
      "dependencies": {
        "color-name": "~1.1.4"
      },
@@ -5708,20 +5682,17 @@
    "node_modules/cliui/node_modules/color-name": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
    },
    "node_modules/cliui/node_modules/emoji-regex": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
    },
    "node_modules/cliui/node_modules/is-fullwidth-code-point": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@@ -5730,7 +5701,6 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
      "dependencies": {
        "emoji-regex": "^8.0.0",
        "is-fullwidth-code-point": "^3.0.0",
@@ -5744,7 +5714,6 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
      "dependencies": {
        "ansi-styles": "^4.0.0",
        "string-width": "^4.1.0",
@@ -5784,7 +5753,6 @@
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
      "dependencies": {
        "color-name": "1.1.3"
      }
@@ -5792,8 +5760,7 @@
    "node_modules/color-name": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
    },
    "node_modules/colorette": {
      "version": "2.0.20",
@@ -5954,8 +5921,7 @@
    "node_modules/convert-source-map": {
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
    },
    "node_modules/cookie": {
      "version": "0.4.2",
@@ -6316,7 +6282,6 @@
      "version": "4.3.5",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
-      "dev": true,
      "dependencies": {
        "ms": "2.1.2"
      },
@@ -6580,8 +6545,7 @@
    "node_modules/electron-to-chromium": {
      "version": "1.4.828",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.828.tgz",
-      "integrity": "sha512-QOIJiWpQJDHAVO4P58pwb133Cwee0nbvy/MV1CwzZVGpkH1RX33N3vsaWRCpR6bF63AAq366neZrRTu7Qlsbbw==",
-      "dev": true
+      "integrity": "sha512-QOIJiWpQJDHAVO4P58pwb133Cwee0nbvy/MV1CwzZVGpkH1RX33N3vsaWRCpR6bF63AAq366neZrRTu7Qlsbbw=="
    },
    "node_modules/emoji-regex": {
      "version": "10.3.0",
@@ -6815,7 +6779,6 @@
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-      "dev": true,
      "engines": {
        "node": ">=6"
      }
@@ -6830,7 +6793,6 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
      "engines": {
        "node": ">=0.8.0"
      }
@@ -7078,7 +7040,6 @@
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
      "dependencies": {
        "@nodelib/fs.stat": "^2.0.2",
        "@nodelib/fs.walk": "^1.2.3",
@@ -7100,7 +7061,6 @@
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
      "dependencies": {
        "reusify": "^1.0.4"
      }
@@ -7135,7 +7095,6 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@@ -7361,7 +7320,6 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
      "hasInstallScript": true,
      "optional": true,
      "os": [
@@ -7384,7 +7342,6 @@
      "version": "1.0.0-beta.2",
      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -7393,7 +7350,6 @@
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
      "engines": {
        "node": "6.* || 8.* || >= 10.*"
      }
@@ -7475,7 +7431,6 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
      "dependencies": {
        "is-glob": "^4.0.1"
      },
@@ -7493,7 +7448,6 @@
      "version": "11.12.0",
      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
      "engines": {
        "node": ">=4"
      }
@@ -7591,7 +7545,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
      "engines": {
        "node": ">=4"
      }
@@ -8125,7 +8078,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
      "dependencies": {
        "binary-extensions": "^2.0.0"
      },
@@ -8167,7 +8119,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -8188,7 +8139,6 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
      "dependencies": {
        "is-extglob": "^2.1.1"
      },
@@ -8245,7 +8195,6 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
      "engines": {
        "node": ">=0.12.0"
      }
@@ -8541,8 +8490,7 @@
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
    },
    "node_modules/js-yaml": {
      "version": "4.1.0",
@@ -8566,7 +8514,6 @@
      "version": "2.5.2",
      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
      "bin": {
        "jsesc": "bin/jsesc"
      },
@@ -8605,7 +8552,6 @@
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
      "bin": {
        "json5": "lib/cli.js"
      },
@@ -9448,7 +9394,6 @@
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
      "dependencies": {
        "yallist": "^3.0.2"
      }
@@ -9549,7 +9494,6 @@
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
      "engines": {
        "node": ">= 8"
      }
@@ -9567,7 +9511,6 @@
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
-      "dev": true,
      "dependencies": {
        "braces": "^3.0.3",
        "picomatch": "^2.3.1"
@@ -9580,7 +9523,6 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
      "engines": {
        "node": ">=8.6"
      },
@@ -9868,8 +9810,7 @@
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
    "node_modules/msgpackr": {
      "version": "1.11.0",
@@ -10232,8 +10173,7 @@
    "node_modules/node-releases": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-      "dev": true
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
    },
    "node_modules/nopt": {
      "version": "7.2.1",
@@ -10268,7 +10208,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -10920,8 +10859,7 @@
    "node_modules/picocolors": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "dev": true
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
    },
    "node_modules/picomatch": {
      "version": "4.0.2",
@@ -11215,7 +11153,6 @@
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -11291,7 +11228,6 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
      "dependencies": {
        "picomatch": "^2.2.1"
      },
@@ -11303,7 +11239,6 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
      "engines": {
        "node": ">=8.6"
      },
@@ -11314,8 +11249,7 @@
    "node_modules/reflect-metadata": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
-      "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
-      "dev": true
+      "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q=="
    },
    "node_modules/regenerate": {
      "version": "1.4.2",
@@ -11448,7 +11382,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -11568,7 +11501,6 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
      "engines": {
        "iojs": ">=1.0.0",
        "node": ">=0.10.0"
@@ -11656,7 +11588,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -11832,7 +11763,6 @@
      "version": "7.6.2",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
-      "dev": true,
      "bin": {
        "semver": "bin/semver.js"
      },
@@ -12540,7 +12470,6 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
      "dependencies": {
        "ansi-regex": "^5.0.1"
      },
@@ -12574,7 +12503,6 @@
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
      "dependencies": {
        "has-flag": "^3.0.0"
      },
@@ -12832,7 +12760,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
      "engines": {
        "node": ">=4"
      }
@@ -12841,7 +12768,6 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
      "dependencies": {
        "is-number": "^7.0.0"
      },
@@ -12983,7 +12909,6 @@
      "version": "5.4.5",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
-      "dev": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -13128,7 +13053,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@@ -13933,7 +13857,6 @@
      "version": "5.0.8",
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "dev": true,
      "engines": {
        "node": ">=10"
      }
@@ -13941,14 +13864,12 @@
    "node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
    },
    "node_modules/yargs": {
      "version": "17.7.2",
      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
-      "dev": true,
      "dependencies": {
        "cliui": "^8.0.1",
        "escalade": "^3.1.1",
@@ -13966,7 +13887,6 @@
      "version": "21.1.1",
      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true,
      "engines": {
        "node": ">=12"
      }
@@ -13974,14 +13894,12 @@
    "node_modules/yargs/node_modules/emoji-regex": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
    },
    "node_modules/yargs/node_modules/is-fullwidth-code-point": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@@ -13990,7 +13908,6 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
      "dependencies": {
        "emoji-regex": "^8.0.0",
        "is-fullwidth-code-point": "^3.0.0",

--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@ng-bootstrap/ng-bootstrap": "^17.0.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@popperjs/core": "^2.11.8",
@@ -46,6 +47,7 @@
    "@angular/cli": "^18.0.6",
    "@angular/compiler-cli": "^18.0.0",
    "@angular/localize": "^18.1.0",
+    "@types/bootstrap": "^5.2.10",
    "@types/dom-to-image": "^2.6.7",
    "@types/feather-icons": "^4.29.4",
    "@types/jasmine": "~5.1.0",
@@ -60,4 +62,4 @@
    "typescript": "~5.4.2",
    "xliffmerge": "^1.0.0"
  }
-}
\ No newline at end of file
+}
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,6 +7,7 @@ import { AuthGuard } from './core/guards/auth.guard';
 import { CustomerListComponent } from './customers/pages/customer-list/customer-list.component';
 import { PageNotfoundComponent } from './pages/page-notfound/page-notfound.component';
 import { ProjectFAQComponent } from './pages/project-faq/project-faq.component';
+import { PsmStartComponent } from './pages/psm-start/psm-start.component';

 export const routes: Routes = [
  
@@ -27,6 +28,11 @@ export const routes: Routes = [
        path: 'Project-FAQ',
        component: ProjectFAQComponent,
        
+      },
+      {
+        path: 'Help',
+        component: PsmStartComponent,
+        
      },
      {
        path: '',
@@ -40,6 +46,7 @@ export const routes: Routes = [
     , {
      path: 'projects',
      loadChildren: () => import('./projects/projects.module').then(m => m.ProjectsModule)
+      
    }
    , {
      path: 'employees',

--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -29,6 +29,8 @@ import { LoadingInterceptor } from './core/interceptors/loading.interceptor';
 import { ProjectsModule } from './projects/projects.module';
 import { ProjectRoutingModule } from './projects/project-routing.module';
 import { ProjectFAQComponent } from './pages/project-faq/project-faq.component';
+import { PsmStartComponent } from './pages/psm-start/psm-start.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

 @NgModule({
  declarations: [
@@ -37,6 +39,7 @@ import { ProjectFAQComponent } from './pages/project-faq/project-faq.component';
    LoginComponent,
    PageNotfoundComponent,
    ProjectFAQComponent,
+    PsmStartComponent,
  
  ],
  imports: [
@@ -57,7 +60,8 @@ import { ProjectFAQComponent } from './pages/project-faq/project-faq.component';
      preventDuplicates: true,
      progressBar: true, // Prevent duplicate toasts
    }),
-    HttpClientModule
+    HttpClientModule,
+    NgbModule
  
 ],
  providers: [

--- a/src/app/customers/models/requests/updateCustomerRequest.ts
+++ b/src/app/customers/models/requests/updateCustomerRequest.ts
+export class UpdateCustomerRequest{
+    customerId: number 
+    customerName : string 
+    address : {
+        city : string ,
+        streetNumber : number ,
+        streetName : string 
+    }
+    email :string 
+}
\ No newline at end of file
--- a/src/app/customers/pages/customer-details/customer-details.component.html
+++ b/src/app/customers/pages/customer-details/customer-details.component.html
@@ -21,8 +21,10 @@
            </div>
            <div class="row mb-4">

-                <button class="col-4 offset-1 m-4 btn btn-danger" (click)="onDelete(customer.id)">إزالة</button>
-                <button class="col-4 m-4 btn btn-info" (click)="addContact(customer.id)">إضافة معلومة اتصال</button>
+                <button class="col-3 offset-1 m-4 btn btn-danger" (click)="openModal('delete')">إزالة</button>
+                <button class="col-3 offset-1 m-4 btn btn-primary" (click)="openModal('edit')">تعديل</button>
+                
+                <button class="col-3 m-4 btn btn-primary" (click)="addContact(customer.id)">إضافة معلومة اتصال</button>
            
            </div>
            
@@ -30,4 +32,59 @@
        </div> <!-- /.card -->
      </div> <!-- /.col-12 -->
 </div> <!-- .row -->
-  
\ No newline at end of file
+<div class="modal   fade" id="customerModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <h5 class="modal-title" id="modalLabel">{{ modalTitle }}</h5>
+
+      </div>
+      <div class="modal-body">
+        <!-- Edit Form -->
+        <div *ngIf="modalMode === 'edit'">
+          <form (ngSubmit)="saveCustomer()">
+              <div class="row">
+
+                  <div class="mb-3 col-5  offset-1">
+                    <label for="stepName" class="form-label">نوع الكلفة</label>
+                    <input type="text" name="stepName" id="stepName" class="form-control" [(ngModel)]="selectedCustomer.customerName" required>
+                  </div>
+                  
+                  <div class="mb-3 col-5">
+                    <label for="expectedSpendingDate" class="form-label">تاريخ الانفاق المتوقع</label>
+                    <input type="date" id="expectedSpendingDate" class="form-control" [(ngModel)]="selectedCustomer.email" name="expectedSpendingDate" required>
+                  </div>
+            
+                <div class="mb-3 col-4  offset-1">
+                  <label for="local" class="form-label">الشراء المحلي</label>
+                  <input  id="local" class="form-control" [(ngModel)]="selectedCustomer.address.city" name="local" required>
+                </div>
+                <div class="mb-3 col-4 ">
+                  <label for="completion" class="form-label">الشراء الخارجي </label>
+                  <input  id="completion" class="form-control" [(ngModel)]="selectedCustomer.address.streetName" name="completion" required>
+                </div>
+                
+              <div class="mb-3 col-2">
+                <label for="duration" class="form-label">نوغ القطع</label>
+                <input  type="number" id="duration" class="form-control select " [(ngModel)]="selectedCustomer.address.streetNumber" name="duration" required>
+              </div>
+                </div>
+                  <div class="row">
+
+            
+
+              </div>
+              <button type="submit" class="btn btn-success">حفظ</button>
+          </form>
+        </div>
+        <!-- Delete Confirmation -->
+        <div *ngIf="modalMode === 'delete'">
+          <p>هل أنت متأكد من أنك تريد حذف عنصر {{ selectedCustomer.customerName }} ؟</p>
+          <button type="button" class="btn m-4 btn-danger" (click)="delete()">Delete</button>
+          <button type="button" class="btn m-4 btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
--- a/src/app/customers/pages/customer-details/customer-details.component.ts
+++ b/src/app/customers/pages/customer-details/customer-details.component.ts
@@ -3,6 +3,9 @@ import { Customer } from '../../models/customer';
 import { CustomerService } from '../../services/customer.service';
 import { ActivatedRoute, Router, RouteReuseStrategy } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
+import { Modal } from 'bootstrap';
+import { UpdateCustomerComponent } from '../update-customer/update-customer.component';
+import { UpdateCustomerRequest } from '../../models/requests/updateCustomerRequest';

 @Component({
  selector: 'customer-details',
@@ -11,9 +14,11 @@ import { ToastrService } from 'ngx-toastr';
 })

 export class CustomerDetailsComponent implements OnInit {
+  modalMode: 'edit' | 'delete' = 'edit';
+  modalTitle: string = '';

-  customer: Customer | undefined;
-
+  customer: Customer ;
+  selectedCustomer :Customer ;
  constructor(
    private router : Router,
    private route: ActivatedRoute,
@@ -23,11 +28,13 @@ export class CustomerDetailsComponent implements OnInit {

  ngOnInit(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
+    
    this.customerService.getCustomerById(id).subscribe({
      next :(data) => {
        
         this.customer = data;
-        
+     
+         this.selectedCustomer=this.customer;
    },
    error : (err)=>{ console.log(err)}

@@ -37,14 +44,78 @@ export class CustomerDetailsComponent implements OnInit {
    throw new Error('Method not implemented.');
    }
    
-    onDelete(id: number) {
-      this.customerService.deleteCustomer(id).subscribe({
-        next : (data)=> {
-          this.toastr.success('تم حذف الجهة بنجاح');
-          this.router.navigate(['/customers']);
-        },
-        error: (err)=>this.toastr.error('لقد حدث خطاء ما')
-      });
+
+    openModal(mode: 'edit' | 'delete'): void {
+      this.modalMode = mode;
+      
+      if (mode === 'edit') {
+        this.modalTitle = 'تعديل جهة طارحة ';
+      } else if (mode === 'delete') {
+        this.modalTitle = 'حذف جهة طارحة';
+      }
+  
+      const modalElement = document.getElementById('customerModal');
+      if (modalElement) {
+        new Modal(modalElement).show(); // Open the modal
+      }
    }
+  
+    saveCustomer(): void {
+      
+      let request : UpdateCustomerRequest ={
+        ...this.selectedCustomer,
+        customerId: this.selectedCustomer.id
+      }
+
+      this.customerService.updateCustomer(this.selectedCustomer.id,request).subscribe({
+        next :()=>{
+     
+          this.customer.address=this.selectedCustomer.address ;
+          this.customer.customerName=this.selectedCustomer.customerName;
+          this.customer.email=this.selectedCustomer.email
+          this.closeModal();
+        
+        }
+        ,
+        error:(err)=>{
+          this.toastr.error("لقد حدث خطاء ما ")
+        
+          this.closeModal();
+        }
+  
+      })
    
+    }
+  
+    delete(): void {
+  
+      this.customerService.deleteCustomer(this.customer.id).subscribe({
+  
+        next :()=>{
+          this.router.navigate(['/customers'])
+          this.closeModal();
+          
+        }
+        ,
+        error:(err)=>{
+          this.toastr.error("لقد حدث خطاء ما ")
+        
+          this.closeModal();
+        }
+  
+  
+      }
+    );
+  
+    }
+  
+    closeModal(): void {
+      const modalElement = document.getElementById('customerModal');
+      if (modalElement) {
+        new Modal(modalElement).hide(); // Close the modal
+      }
+    }
+  
+  
+     
 }
\ No newline at end of file
--- a/src/app/customers/pages/update-customer/update-customer.component.ts
+++ b/src/app/customers/pages/update-customer/update-customer.component.ts
@@ -16,15 +16,15 @@ export class UpdateCustomerComponent {
  }
  onSubmit(customer: Customer) {

-    this.customerService
-        .updateCustomer(customer.id,customer)
-        .subscribe({
-          next: (res)=>{
-            console.log(res)
-          },
-          error: (error)=> console.log(error)
-        }
-      );
+    // this.customerService
+    //     .updateCustomer(customer.id,customer)
+    //     .subscribe({
+    //       next: (res)=>{
+    //         console.log(res)
+    //       },
+    //       error: (error)=> console.log(error)
+    //     }
+    //   );

  }
  

--- a/src/app/customers/services/customer.service.ts
+++ b/src/app/customers/services/customer.service.ts
@@ -5,6 +5,7 @@ import { ConfigurationService } from '../../core/services/configuration/configur
 import { Observable } from 'rxjs';
 import { Result } from '../../core/models/result';
 import { CreateCustomerRequest } from '../models/createCustomerRequest';
+import { UpdateCustomerRequest } from '../models/requests/updateCustomerRequest';

 @Injectable({
  providedIn: 'root'
@@ -28,9 +29,9 @@ export class CustomerService {
    return this.http.post<Customer>(this.config.getServerUrl()+ "/Customers",customer);
  }

-  public updateCustomer(id :number ,customer :Customer):Observable<void>{
+  public updateCustomer(id :number ,request :UpdateCustomerRequest):Observable<void>{
    
-    return this.http.put<void>(`${this.config.getServerUrl()}/Customers/${id}` ,customer);
+    return this.http.put<void>(`${this.config.getServerUrl()}/Customers/${id}` ,request);
  }
  
  public deleteCustomer(customerId: number): Observable<void> {

--- a/src/app/pages/psm-start/psm-start.component.css
+++ b/src/app/pages/psm-start/psm-start.component.css
+
+.hero .btn-get-started {
+    color: var(--contrast-color);
+    background: var(--accent-color);
+    font-family: var(--heading-font);
+    font-weight: 400;
+    font-size: 15px;
+    letter-spacing: 1px;
+    display: inline-block;
+    padding: 10px 28px;
+    border-radius: 50px;
+    transition: 0.5s;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+  }
+  
+  .hero .btn-get-started:hover {
+    color: var(--contrast-color);
+    background: color-mix(in srgb, var(--accent-color), transparent 15%);
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+  }
+  
+  .hero .btn-watch-video {
+    font-size: 16px;
+    transition: 0.5s;
+    margin-left: 25px;
+    color: var(--default-color);
+    font-weight: 500;
+  }
+  
+  .hero .btn-watch-video i {
+    color: var(--accent-color);
+    font-size: 32px;
+    transition: 0.3s;
+    line-height: 0;
+    margin-right: 8px;
+  }
+  
+  .hero .btn-watch-video:hover {
+    color: var(--accent-color);
+  }
+  
+  .hero .btn-watch-video:hover i {
+    color: color-mix(in srgb, var(--accent-color), transparent 15%);
+  }
+  
+  .hero .animated {
+    margin-bottom: 60px;
+    animation: up-down 2s ease-in-out infinite alternate-reverse both;
+  }
+  
+  @media (min-width: 992px) {
+    .hero .animated {
+      max-width: 45%;
+    }
+  }
+  
+  @media (max-width: 991px) {
+    .hero .animated {
+      max-width: 60%;
+    }
+  }
+  
+  @media (max-width: 575px) {
+    .hero .animated {
+      max-width: 80%;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    .hero h1 {
+      font-size: 28px;
+      line-height: 36px;
+    }
+  
+    .hero p {
+      font-size: 18px;
+      line-height: 24px;
+      margin-bottom: 30px;
+    }
+  
+    .hero .btn-get-started,
+    .hero .btn-watch-video {
+      font-size: 13px;
+    }
+  }
+  
+  @keyframes up-down {
+    0% {
+      transform: translateY(10px);
+    }
+  
+    100% {
+      transform: translateY(-10px);
+    }
+  }
+  
\ No newline at end of file
--- a/src/app/pages/psm-start/psm-start.component.html
+++ b/src/app/pages/psm-start/psm-start.component.html
+<div class="container d-flex flex-column justify-content-center align-items-center text-center position-relative aos-init aos-animate" data-aos="zoom-out">
+    <img height="400px"  src="assets/images/home/hero-img.png" class=" animated" alt="">
+    <h3>مرحبا بك  <span>في موقعنا</span></h3>
+    <p class="text-important text-italic">هل تحتاج إلى مساعدة ؟ </p>
+    <div class="d-flex">
+      <a href="#about" class="btn-get-started mr-4 scrollto">انطلق الآن</a>
+      <a  class="glightbox mr-4 btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>طريقة الاستخدام</span></a>
+    </div>
+  </div>
\ No newline at end of file
--- a/src/app/pages/psm-start/psm-start.component.ts
+++ b/src/app/pages/psm-start/psm-start.component.ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'psm-start',
+  templateUrl: './psm-start.component.html',
+  styleUrl: './psm-start.component.css'
+})
+export class PsmStartComponent {
+
+}
--- a/src/app/projects/components/financial-item/financial-item.component.css
+++ b/src/app/projects/components/financial-item/financial-item.component.css
--- a/src/app/projects/components/financial-item/financial-item.component.html
+++ b/src/app/projects/components/financial-item/financial-item.component.html
+<div class="card shadow mb-4 col-8 offset-2">
+    <div class="card-header py-3">
+      <div class="row align-items-center">
+        <div class="col-auto">
+          <a href="profile-posts.html" class="avatar avatar-md">
+            <img src="./assets/images/users/4.jpg" alt="..." class="avatar-img rounded-circle">
+          </a>
+        </div>
+        <div class="col ml-n2">
+          <strong class="mb-1">{{item.costType}}</strong><span class=" ml-1"></span>
+          <p class="small text-muted mb-1">{{item.description}}</p>
+        </div>
+        <div class="col-auto">
+        </div>
+      </div>
+    </div>
+    <div class="card-body ">
+      <div class="row align-items-center">
+        <div class="col-8 ">
+          <div class="small mb-2 d-flex">
+            <span class="text-muted flex-fill">الشراء المحلي  {{item.localPurchase}}</span>
+            <span class="text-muted">تاريخ الصرف المتوقع {{item.expectedSpendingDate | date}}</span>
+          
+          </div>
+        </div>
+        <div  class="col-8 ">
+          <div class="small mb-2 d-flex">
+       
+          <span class="text-muted flex-fill">الشراء الخارجي   {{item.externalPurchase.ammount}} {{item.externalPurchase.currency}}</span>
+          
+          
+          </div>
+          
+        <div class="col-auto">
+          <button type="button" (click)="onEdit()" class="btn m-2 btn-sm btn-secondary">تعديل المعلومات</button>
+          <button type="button" (click)="onDelete()"class="btn m-2 btn-sm btn-danger">إزالة</button>
+       
+        </div>
+        </div>
+      </div>
+    </div> <!-- / .card-body -->
+  </div>
\ No newline at end of file
--- a/src/app/projects/components/financial-item/financial-item.component.ts
+++ b/src/app/projects/components/financial-item/financial-item.component.ts
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FinancialSpending } from '../../models/responses/FinancialSpending';
+
+@Component({
+  selector: 'financial-item',
+  templateUrl: './financial-item.component.html',
+  styleUrl: './financial-item.component.css'
+})
+export class FinancialItemComponent {
+  @Input() item :FinancialSpending
+
+  @Output() edit = new EventEmitter<void>();
+  @Output() delete = new EventEmitter<void>();
+  onEdit() {
+    this.edit.emit();
+  }
+
+  onDelete() {
+    this.delete.emit();
+  }
+}
--- a/src/app/projects/components/modals/add-financial-spend-modal/add-financial-spend-modal.component.html
+++ b/src/app/projects/components/modals/add-financial-spend-modal/add-financial-spend-modal.component.html
-<p>add-financial-spend-modal works!</p>
+<div class="modal-header">
+    <button type="button" class="btn-close" (click)="onClose()" ></button>
+    <h5 class="modal-title text-center">إضافة  عنصر جديد </h5>
+  </div>
+  <div class="modal-body">
+    <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
+      <div class="row">
+  
+        <div class="mb-3 col-3  offset-1">
+          <label for="stepName" class="form-label">نوع الكلفة</label>
+          <input type="text" name="stepName" id="stepName" class="form-control" [(ngModel)]="request.costType" required>
+        </div>
+        
+        <div class="mb-3 col-3">
+          <label for="start" class="form-label">تاريخ الانفاق المتوقع</label>
+          <input type="date" id="start" class="form-control" [(ngModel)]="request.expectedSpendingDate" name="start" required>
+        </div>
+  
+      <div class="mb-3 col-3">
+        <label for="worker" class="form-label">الكلفة  بالليرة السورية</label>
+        <input  id="worker" class="form-control" [(ngModel)]="request.localPurchase" name="worker" required>
+      </div>
+      
+      </div>
+      <div class="row">
+        <div class="mb-3 col-8 offset-1" >
+          <label for="decription" class="form-label">البيان</label>
+          <textarea col="3" name="worker" id="decription" class="form-control" [(ngModel)]="request.description"  required>
+            </textarea>
+        </div>
+        </div>
+        <div class="row">
+          <div class="mb-3 col-3  offset-1">
+            <label for="completion" class="form-label">الشراء الخارجي </label>
+            <input  id="completion" class="form-control" [(ngModel)]="request.externalPurchase.ammount" name="completion" required>
+          </div>
+          
+        <div class="mb-3 col-3">
+          <label for="duration" class="form-label">نوغ القطع</label>
+          <select  id="duration" class="form-control select " [(ngModel)]="request.externalPurchase.currency" name="duration" required>
+          <option value="USA">USA</option>  
+          <option value="EUR">EUR</option>  
+            
+        </select>
+        </div>
+  
+        </div>
+      <div class="row ">
+        <button type="submit" class=" col-3 btn btn-primary">إضافة</button>
+        <button  class="btn btn-seondary col-3" (click)="onClose()" >إغلاق</button>
+     
+      </div>
+       </form>
+  </div>
+  
\ No newline at end of file
--- a/src/app/projects/components/modals/add-financial-spend-modal/add-financial-spend-modal.component.ts
+++ b/src/app/projects/components/modals/add-financial-spend-modal/add-financial-spend-modal.component.ts
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { FinancialSpending } from '../../../models/responses/FinancialSpending';
+import { CreateFinancialSpendItemRequest } from '../../../models/requests/financial-reuqests/CreateFinancialSpendItemRequest';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { ProjectService } from '../../../services/project.service';
+import { FinancialSpendingService } from '../../../services/financial-spending.service';

 @Component({
  selector: 'add-financial-spend-modal',
@@ -6,5 +12,42 @@ import { Component } from '@angular/core';
  styleUrl: './add-financial-spend-modal.component.css'
 })
 export class AddFinancialSpendModalComponent {
+  item  = new FinancialSpending()
+  @Input() projectId : number 
+  request :CreateFinancialSpendItemRequest 
+  
+  constructor(private toastr :ToastrService, public activeModal: NgbActiveModal,private financialService :FinancialSpendingService) {}

+  ngOnInit(): void {
+    this.request ={
+      projectId: this.projectId ,
+      localPurchase: 0,
+      expectedSpendingDate :new Date(),
+      externalPurchase :{
+        ammount :0 ,
+        currency :""
+      },
+      costType:"" ,
+      description:""
+       
+    };
+  }
+  onSubmit(): void {
+    // Emit the project data or handle it as needed
+    console.log('Project data submitted:', this.request);
+    this.financialService.addSpendItem(this.request).subscribe({
+  
+      next: (data)=>{
+
+        this.activeModal.close(data); // Close modal and pass data
+  
+      },
+      error: (err )=> this.toastr.error("لقد حدث خطاء ما")
+
+    })
+  }
+
+  onClose():void {
+    this.activeModal.close();
+  }
 }
--- a/src/app/projects/components/modals/add-step-modal/add-step-modal.component.css
+++ b/src/app/projects/components/modals/add-step-modal/add-step-modal.component.css
+.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+  
+  .popup-content {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 300px;
+  }
+  
+  .popup-actions {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+  }
+  
\ No newline at end of file
--- a/src/app/projects/components/modals/add-step-modal/add-step-modal.component.html
+++ b/src/app/projects/components/modals/add-step-modal/add-step-modal.component.html
-<h1 mat-dialog-title>Add Step</h1>
-<div mat-dialog-content>
-  <form [formGroup]="stepForm">
-    <mat-form-field>
-      <mat-label>Name</mat-label>
-      <input matInput formControlName="name">
-      <mat-error *ngIf="stepForm.get('name')!.hasError('required')">Name is required</mat-error>
-    </mat-form-field>
+<div class="modal-header">
+  <button type="button" class="btn-close" (click)="onClose()" ></button>
+  <h5 class="modal-title text-center">إضافة  مرحلة جديدة</h5>
+</div>
+<div class="modal-body">
+  <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
+    <div class="row">

-    <mat-form-field>
-      <mat-label>Description</mat-label>
-      <textarea matInput formControlName="description"></textarea>
-      <mat-error *ngIf="stepForm.get('description')!.hasError('required')">Description is required</mat-error>
-    </mat-form-field>
+      <div class="mb-3 col-3  offset-1">
+        <label for="stepName" class="form-label">اسم المرحلة</label>
+        <input type="text" name="stepName" id="stepName" class="form-control" [(ngModel)]="request.stepInfo.stepName" required>
+      </div>
+      
+      <div class="mb-3 col-3">
+        <label for="start" class="form-label">تاريخ البدء</label>
+        <input type="date" id="start" class="form-control" [(ngModel)]="request.stepInfo.startDate" name="start" required>
+      </div>

-    <mat-form-field>
-      <mat-label>Weight</mat-label>
-      <input matInput type="number" formControlName="weight">
-      <mat-error *ngIf="stepForm.get('weight')!.hasError('required')">Weight is required</mat-error>
-      <mat-error *ngIf="stepForm.get('weight')!.hasError('min') || stepForm.get('weight')!.hasError('max')">
-        Weight must be between 1 and 100
-      </mat-error>
-    </mat-form-field>
-  </form>
-</div>
-<div mat-dialog-actions>
-  <button mat-button (click)="onCancel()">Cancel</button>
-  <button mat-button color="primary" (click)="onSubmit()" [disabled]="stepForm.invalid">Add Step</button>
+    <div class="mb-3 col-3">
+      <label for="worker" class="form-label">عدد العمال المطلوب</label>
+      <input  id="worker" class="form-control" [(ngModel)]="request.stepInfo.NumberOfWorker" name="worker" required>
+    </div>
+    
+    </div>
+    <div class="row">
+      <div class="mb-3 col-8 offset-1" >
+        <label for="decription" class="form-label">الوصف</label>
+        <textarea col="3" name="worker" id="decription" class="form-control" [(ngModel)]="request.stepInfo.description"  required>
+          </textarea>
+      </div>
+      </div>
+      <div class="row">
+        <div class="mb-3 col-3  offset-1">
+          <label for="completion" class="form-label">نسبة الانجاز</label>
+          <input  id="completion" class="form-control" [(ngModel)]="request.currentCompletionRatio" name="completion" required>
+        </div>
+        
+      <div class="mb-3 col-3">
+        <label for="duration" class="form-label">المدة</label>
+        <input  id="duration" class="form-control" [(ngModel)]="request.stepInfo.duration" name="duration" required>
+      </div>
+
+    <div class="mb-3 col-3">
+      <label for="weight" class="form-label">الثقل</label>
+      <input id="weight" name="weight" class="form-control" [(ngModel)]="request.weight"  required>
+    </div>
+      </div>
+    <div class="row ">
+      <button type="submit" class="btn btn-primary">إضافة</button>
+      <button  class="btn btn-seondary" (click)="onClose()" >إغلاق</button>
+   
+    </div>
+     </form>
 </div>
--- a/src/app/projects/components/modals/add-step-modal/add-step-modal.component.ts
+++ b/src/app/projects/components/modals/add-step-modal/add-step-modal.component.ts
-import { Component, Inject } from '@angular/core';
+import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Step } from '../../../models/responses/Step';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { StepService } from '../../../services/step.service';
+import { AddProjectStepRequest } from '../../../models/requests/project-requests/AddProjectStepRequest';
+import { ProjectService } from '../../../services/project.service';
+import { ToastrService } from 'ngx-toastr';

 @Component({
  selector: 'add-step-modal',
  templateUrl: './add-step-modal.component.html',
  styleUrl: './add-step-modal.component.css'
 })
-export class AddStepModalComponent {
-  stepForm: FormGroup;
+export class AddStepModalComponent implements OnInit {
+  step :Step = new Step()
+  @Input() projectId : number 
+  request :AddProjectStepRequest 
+  
+  constructor(private toastr :ToastrService, public activeModal: NgbActiveModal,private projectService :ProjectService) {}

-  constructor(
-    private fb: FormBuilder,
-    public dialogRef: MatDialogRef<AddStepModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {
-    this.stepForm = this.fb.group({
-      name: ['', Validators.required],
-      description: ['', Validators.required],
-      weight: [0, [Validators.required, Validators.min(1), Validators.max(100)]]
-    });
+  ngOnInit(): void {
+    this.request ={
+      stepInfo: {
+        startDate:new Date (),
+        description :'',
+        NumberOfWorker :0,
+        stepName:'',
+        duration:0
+      },
+      currentCompletionRatio:0,
+      weight:0,
+      projectId: this.projectId 
+    };
  }
+  onSubmit(): void {
+    // Emit the project data or handle it as needed
+    console.log('Project data submitted:', this.request);
+    this.projectService.addStepToProject(this.request).subscribe({
+  
+      next: (data)=>{
+        this.step= {
+          id :  data ,
+          stepInfo: this.request.stepInfo ,
+          weight: this.request.weight ,
+          currentCompletionRatio: this.request.currentCompletionRatio,
+          projectId: this.projectId
+        }
+        this.activeModal.close(this.step); // Close modal and pass data
+  
+      },
+      error: (err )=> this.toastr.error("لقد حدث خطاء ما")

-  onSubmit() {
-    if (this.stepForm.valid) {
-      this.dialogRef.close(this.stepForm.value);
-    }
+    })
  }

-  onCancel(): void {
-    this.dialogRef.close();
+  onClose():void {
+    this.activeModal.close();
  }
+
 }
--- a/src/app/projects/components/project-item/project-item.component.html
+++ b/src/app/projects/components/project-item/project-item.component.html
@@ -10,7 +10,7 @@
        <strong class="card-title my-0">{{project.projectInfo.name}} </strong>
        <p class="small">{{project.projectInfo.description}}</p>
        <p class="small">ينفذ من قبل {{project.executer.name}}</p>
-        <p class="small">الطور   {{project.currentState  }}</p>
+        <p class="small">الطور   {{project.currentState }}</p>
      
        <p class="small text-muted mb-0"> <span class="badge badge-light text-muted"> رمز المشروع {{project.projectInfo.code}} </span>, <span class="badge badge-light text-muted"> تاريخ البدء {{project.projectInfo.startDate | date}} </span></p>
      

--- a/src/app/projects/models/requests/financial-reuqests/createFinancialSpendItemRequest.ts
+++ b/src/app/projects/models/requests/financial-reuqests/createFinancialSpendItemRequest.ts
+
+export class CreateFinancialSpendItemRequest {
+    projectId: number;
+    externalPurchase: {
+        ammount: number;
+        currency: string;
+    };
+    localPurchase: number;
+    costType: string;
+    description: string;
+    expectedSpendingDate: Date;
+}
--- a/src/app/projects/models/requests/financial-reuqests/getFinancialSpendItemByIdRequest.ts
+++ b/src/app/projects/models/requests/financial-reuqests/getFinancialSpendItemByIdRequest.ts
+
+export class GetFinancialSpendItemByIdRequest {
+    projectId: number;
+    id: number;
+}
--- a/src/app/projects/models/requests/financial-reuqests/getFinancialSpendItemByProjectRequest.ts
+++ b/src/app/projects/models/requests/financial-reuqests/getFinancialSpendItemByProjectRequest.ts
+export class GetFinancialSpendItemByProjecRequest{
+    projectId :number 
+    pageNumber :number |null
+    pageSize : number | null 
+}
+
--- a/src/app/projects/models/requests/financial-reuqests/removeFinancialSpendItemRequest.ts
+++ b/src/app/projects/models/requests/financial-reuqests/removeFinancialSpendItemRequest.ts
+export class RemoveFinancialSpendItemRequest {
+    projectId: number;
+    id: number;
+}
--- a/src/app/projects/models/requests/financial-reuqests/updateFinancialSpendItemRequest.ts
+++ b/src/app/projects/models/requests/financial-reuqests/updateFinancialSpendItemRequest.ts
+export class UpdateFinancialSpendItemRequest {
+    projectId: number;
+    id: number;
+    externalPurchase: {
+        ammount: number;
+        currency: string;
+    };
+    localPurchase: number;
+    costType: string;
+    description: string;
+    expectedSpendingDate: Date;
+}
--- a/src/app/projects/models/responses/FinancialSpending.ts
+++ b/src/app/projects/models/responses/FinancialSpending.ts
 export class FinancialSpending {
    id: number;
-    expectedSpendingDate: number;
-    costType: number;
+    expectedSpendingDate: Date;
+    costType: string;
    description: string;
    localPurchase: number;
    externalPurchase: {

--- a/src/app/projects/models/valueObjects/StepInfo.ts
+++ b/src/app/projects/models/valueObjects/StepInfo.ts
@@ -4,5 +4,6 @@ export interface StepInfo {
    description: string;
    startDate: Date;
    duration: number;
+    NumberOfWorker : number 
 }

--- a/src/app/projects/pages/financial-spending/financial-spending.component.css
+++ b/src/app/projects/pages/financial-spending/financial-spending.component.css
--- a/src/app/projects/pages/financial-spending/financial-spending.component.html
+++ b/src/app/projects/pages/financial-spending/financial-spending.component.html
+<section  *ngIf="spends" class="row">
+    <div class="row justify-content-center">
+        <div class="col-12">
+            <div class="row align-items-center my-4">
+                <div class="col">
+                <h2 class="h3 mb-0 page-title">  قائمة خطة الانفاق </h2>
+                </div>
+            <div class="col-auto">
+            <button type="button" (click)="openAddModal()" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة عنصر </button>
+        </div>
+   </div>
+<hr>
+
+
+  <financial-item class=" offset-2" 
+    *ngFor="let item of spends" 
+    [item]="item"
+    (edit)="openModal('edit', item)"
+    (delete)="openModal('delete', item)"
+  >
+  
+  </financial-item>
+
+    <div *ngIf="spends.length==0">
+        للأسف هذا المشروع لايحوي على خطة انفاق
+    </div>
+    </div>
+    </div>
+</section>
+<div class="modal   fade" id="projectModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <h5 class="modal-title" id="modalLabel">{{ modalTitle }}</h5>
+
+        </div>
+        <div class="modal-body">
+          <!-- Edit Form -->
+          <div *ngIf="modalMode === 'edit'">
+            <form (ngSubmit)="saveProject()">
+                <div class="row">
+  
+                    <div class="mb-3 col-5  offset-1">
+                      <label for="stepName" class="form-label">نوع الكلفة</label>
+                      <input type="text" name="stepName" id="stepName" class="form-control" [(ngModel)]="selectedItem.costType" required>
+                    </div>
+                    
+                    <div class="mb-3 col-5">
+                      <label for="expectedSpendingDate" class="form-label">تاريخ الانفاق المتوقع</label>
+                      <input type="date" id="expectedSpendingDate" class="form-control" [(ngModel)]="selectedItem.expectedSpendingDate" name="expectedSpendingDate" required>
+                    </div>
+              
+                  <div class="mb-3 col-4  offset-1">
+                    <label for="local" class="form-label">الشراء المحلي</label>
+                    <input  id="local" class="form-control" [(ngModel)]="selectedItem.localPurchase" name="local" required>
+                  </div>
+                  <div class="mb-3 col-4 ">
+                    <label for="completion" class="form-label">الشراء الخارجي </label>
+                    <input  id="completion" class="form-control" [(ngModel)]="selectedItem.externalPurchase.ammount" name="completion" required>
+                  </div>
+                  
+                <div class="mb-3 col-2">
+                  <label for="duration" class="form-label">نوغ القطع</label>
+                  <select  id="duration" class="form-control select " [(ngModel)]="selectedItem.externalPurchase.currency" name="duration" required>
+                    <option value="USA">USA</option>  
+                    <option value="EUR">EUR</option>  
+                  </select>
+                </div>
+                  </div>
+                  <div class="row">
+                    <div class="mb-3 col-10 offset-1 " >
+                      <label for="decription" class="form-label">البيان</label>
+                      <textarea col="3" name="worker" id="decription" class="form-control" [(ngModel)]="selectedItem.description"  required>
+                        </textarea>
+                    </div>
+                    </div>
+                    <div class="row">
+
+              
+
+                </div>
+                <button type="submit" class="btn btn-success">حفظ</button>
+            </form>
+          </div>
+          <!-- Delete Confirmation -->
+          <div *ngIf="modalMode === 'delete'">
+            <p>هل أنت متأكد من أنك تريد حذف عنصر {{ selectedItem.costType }}?</p>
+            <button type="button" class="btn m-4 btn-danger" (click)="deleteProject()">Delete</button>
+            <button type="button" class="btn m-4 btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
--- a/src/app/projects/pages/financial-spending/financial-spending.component.ts
+++ b/src/app/projects/pages/financial-spending/financial-spending.component.ts
+import { Component } from '@angular/core';
+import { FinancialSpending } from '../../models/responses/FinancialSpending';
+import { FinancialSpendingService } from '../../services/financial-spending.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { AddStepModalComponent } from '../../components/modals/add-step-modal/add-step-modal.component';
+import { GetFinancialSpendItemByIdRequest } from '../../models/requests/financial-reuqests/GetFinancialSpendItemByIdRequest';
+import { GetFinancialSpendItemByProjecRequest } from '../../models/requests/financial-reuqests/GetFinancialSpendItemByProjectRequest';
+import { AddFinancialSpendModalComponent } from '../../components/modals/add-financial-spend-modal/add-financial-spend-modal.component';
+import { UpdateFinancialSpendItemRequest } from '../../models/requests/financial-reuqests/UpdateFinancialSpendItemRequest';
+import { RemoveFinancialSpendItemRequest } from '../../models/requests/financial-reuqests/RemoveFinancialSpendItemRequest';
+import { Modal } from 'bootstrap';
+
+@Component({
+  selector: 'financial-spending',
+  templateUrl: './financial-spending.component.html',
+  styleUrl: './financial-spending.component.css'
+})
+export class FinancialSpendingComponent {
+  spends :FinancialSpending[]
+  selectedItem : FinancialSpending;
+
+  projectId = Number(this.route.snapshot.paramMap.get('id'));
+  modalMode: 'edit' | 'delete' = 'edit';
+  modalTitle: string = '';
+
+  constructor(
+    private financialService :FinancialSpendingService,
+    private toastr : ToastrService,
+    private route: ActivatedRoute,
+    public router :Router,
+    private modalService: NgbModal
+  ) {
+    
+  }
+  ngOnInit(): void {
+    this.loadSpends();
+    this.selectedItem ={
+      id:-1 ,
+      costType:'',
+      expectedSpendingDate: new Date (),
+      localPurchase:0,
+      externalPurchase: {
+        currency:"",
+        ammount:0
+      },
+      description:""
+    }
+  }
+
+
+  loadSpends(): void{
+    let request : GetFinancialSpendItemByProjecRequest ={
+      projectId : this.projectId ,
+      pageNumber: null ,
+      pageSize: null
+    }
+    this.financialService.getSpendByProject(request).subscribe({
+      next: (data)=> {
+        this.spends= data 
+        this.toastr.success("تم تحميل خطة الانفاق بنجاح");
+      }
+      ,
+
+      error:(err)=>{
+        console.log(err)
+        this.toastr.error("لقد حدث خطاء ما")
+      }
+    })
+
+  }
+  openModal(mode: 'edit' | 'delete', item: FinancialSpending): void {
+    this.modalMode = mode;
+    this.selectedItem = { ...item }; // Clone project to prevent direct mutation
+    console.log(this.selectedItem)
+    if (mode === 'edit') {
+      this.modalTitle = 'تعديل عنصر ';
+    } else if (mode === 'delete') {
+      this.modalTitle = 'حذف عنصر';
+    }
+
+    const modalElement = document.getElementById('projectModal');
+    if (modalElement) {
+      new Modal(modalElement).show(); // Open the modal
+    }
+  }
+
+  saveProject(): void {
+    let request : UpdateFinancialSpendItemRequest ={
+      ...this.selectedItem,
+      projectId: this.projectId
+    }
+    this.financialService.updateSpendItem(request).subscribe({
+      next :()=>{
+        const index = this.spends.findIndex(p => p.id === this.selectedItem.id);
+        if (index !== -1) {
+          this.spends[index] = this.selectedItem;
+        }
+        this.closeModal();
+      }
+      ,
+      error:(err)=>{
+        this.toastr.error("لقد حدث خطاء ما ")
+      
+        this.closeModal();
+      }
+
+    })
+  
+  }
+
+  deleteProject(): void {
+    let request : RemoveFinancialSpendItemRequest= {
+      projectId: this.projectId ,
+      id: this.selectedItem.id
+    } 
+
+    this.financialService.delete(request).subscribe({
+
+      next :()=>{
+        this.spends = this.spends.filter(p => p.id !== this.selectedItem.id);
+        this.toastr.success("تم الحذف بنجاح")
+        this.closeModal();
+        
+      }
+      ,
+      error:(err)=>{
+        this.toastr.error("لقد حدث خطاء ما ")
+      
+        this.closeModal();
+      }
+
+
+    }
+  );
+
+  }
+
+  closeModal(): void {
+    const modalElement = document.getElementById('projectModal');
+    if (modalElement) {
+      new Modal(modalElement).hide(); // Close the modal
+    }
+  }
+
+
+  openAddModal(): void {
+    const modalRef = this.modalService.open(AddFinancialSpendModalComponent, { size: 'lg' });
+    modalRef.componentInstance.projectId = this.projectId;
+
+    modalRef.result.then((result) => {
+      if (result) {
+        // Add the new project to the list
+        this.spends.push(result);
+        console.log('Project added:', result);
+      }
+    }, (reason) => {
+      // Handle modal dismiss
+      console.log('Modal dismissed with reason:', reason);
+    });
+  }
+
+}
--- a/src/app/projects/pages/project-details/project-details.component.html
+++ b/src/app/projects/pages/project-details/project-details.component.html
@@ -29,7 +29,7 @@
              </div>

              <div class="row">
-                <div class="col-md-6 col-lg-4">
+                <div class="col-md-6 col-lg-4" [routerLink]="['/projects/spending/',project.id]">
                  <div class="card shadow mb-4">
                    <div class="card-body file-list">
                      <div class="d-flex align-items-center">

--- a/src/app/projects/pages/step-list/step-list.component.html
+++ b/src/app/projects/pages/step-list/step-list.component.html
@@ -6,10 +6,12 @@
                <h2 class="h3 mb-0 page-title">  قائمة مراحل المشروع </h2>
                </div>
            <div class="col-auto">
-            <button type="button" mat-raised-button color="primary" (click)="addStep()"class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة مرحلة </button>
+            <button type="button" (click)="openAddModal()" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة مرحلة </button>
        </div>
   </div>
 <hr>
+
+
    <step-row-item class=" offset-2" *ngFor="let step of steps" [step]="step"></step-row-item>

    <div *ngIf="steps.length==0">

--- a/src/app/projects/pages/step-list/step-list.component.ts
+++ b/src/app/projects/pages/step-list/step-list.component.ts
-import { Component } from '@angular/core';
+import { Component, NgModuleRef } from '@angular/core';
 import { Step } from '../../models/responses/Step';
 import { ProjectService } from '../../services/project.service';
 import { ToastrService } from 'ngx-toastr';
 import { ActivatedRoute, Route, Router } from '@angular/router';
 import { StepService } from '../../services/step.service';
-import { ModalService } from '../../../core/services/modals/modal.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { AddStepModalComponent } from '../../components/modals/add-step-modal/add-step-modal.component';
-
 @Component({
  selector: 'step-list',
  templateUrl: './step-list.component.html',
@@ -14,13 +13,15 @@ import { AddStepModalComponent } from '../../components/modals/add-step-modal/ad
 })
 export class StepListComponent {
  steps : Step[]
+
  projectId = Number(this.route.snapshot.paramMap.get('id'));
+
  constructor(
    private stepService :StepService,
    private toastr : ToastrService,
    private route: ActivatedRoute,
    public router :Router,
-    private modalService: ModalService
+    private modalService: NgbModal
  ) {
    
  }
@@ -46,12 +47,19 @@ export class StepListComponent {
    })

  }
-  addStep() {
-    this.modalService.openModal({},AddStepModalComponent).then(result => {
+  openAddModal(): void {
+    const modalRef = this.modalService.open(AddStepModalComponent, { size: 'lg' });
+    modalRef.componentInstance.projectId = this.projectId;
+
+    modalRef.result.then((result) => {
      if (result) {
-        // Logic to handle the step after it's been added, such as updating the project steps
-        console.log('New Step:', result);
+        // Add the new project to the list
+        this.steps.push(result);
+        console.log('Project added:', result);
      }
+    }, (reason) => {
+      // Handle modal dismiss
+      console.log('Modal dismissed with reason:', reason);
    });
  }
 }
--- a/src/app/projects/project-routing.module.ts
+++ b/src/app/projects/project-routing.module.ts
@@ -5,6 +5,7 @@ import { ProjectDetailsComponent } from './pages/project-details/project-details
 import { ProjectCreateComponent } from './pages/project-create/project-create.component';
 import { StepListComponent } from './pages/step-list/step-list.component';
 import { ParticipantsListComponent } from './pages/participants-list/participants-list.component';
+import { FinancialSpendingComponent } from './pages/financial-spending/financial-spending.component';


 const routes: Routes = [
@@ -12,7 +13,8 @@ const routes: Routes = [
  { path: 'detail/:id', component: ProjectDetailsComponent },
  { path: 'create', component: ProjectCreateComponent },
  { path: 'steps/:id', component: StepListComponent },
-  { path: 'participants/:id', component: ParticipantsListComponent }
+  { path: 'participants/:id', component: ParticipantsListComponent },
+  { path: 'spending/:id', component: FinancialSpendingComponent }
  

 

--- a/src/app/projects/projects.module.ts
+++ b/src/app/projects/projects.module.ts
@@ -28,6 +28,8 @@ import { RouterModule } from '@angular/router';
 import { AddStepModalComponent } from './components/modals/add-step-modal/add-step-modal.component';
 import { AddFinancialSpendModalComponent } from './components/modals/add-financial-spend-modal/add-financial-spend-modal.component';
 import { AddAttachmentModalComponent } from './components/modals/add-attachment-modal/add-attachment-modal.component';
+import { FinancialSpendingComponent } from './pages/financial-spending/financial-spending.component';
+import { FinancialItemComponent } from './components/financial-item/financial-item.component';

 @NgModule({
  declarations: [
@@ -46,7 +48,9 @@ import { AddAttachmentModalComponent } from './components/modals/add-attachment-
    InfoControllComponent,
    AddStepModalComponent,
    AddFinancialSpendModalComponent,
-    AddAttachmentModalComponent
+    AddAttachmentModalComponent,
+    FinancialSpendingComponent,
+    FinancialItemComponent
  ],
  providers: [
    ProjectService,

--- a/src/app/projects/services/financial-spending.service.ts
+++ b/src/app/projects/services/financial-spending.service.ts
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { ConfigurationService } from '../../core/services/configuration/configuration.service';
+import { FinancialSpending } from '../models/responses/FinancialSpending';
+import { Observable } from 'rxjs';
+import { CreateFinancialSpendItemRequest } from '../models/requests/financial-reuqests/CreateFinancialSpendItemRequest';
+import { GetFinancialSpendItemByProjecRequest } from '../models/requests/financial-reuqests/GetFinancialSpendItemByProjectRequest';
+import { RemoveFinancialSpendItemRequest } from '../models/requests/financial-reuqests/RemoveFinancialSpendItemRequest';
+import { UpdateFinancialSpendItemRequest } from '../models/requests/financial-reuqests/UpdateFinancialSpendItemRequest';
+import { GetFinancialSpendItemByIdRequest } from '../models/requests/financial-reuqests/GetFinancialSpendItemByIdRequest';

 @Injectable({
  providedIn: 'root'
 })
 export class FinancialSpendingService {

-  constructor() { }
+  constructor(private http : HttpClient , private config : ConfigurationService) { }
+
+  public getSpendById(request : GetFinancialSpendItemByIdRequest ):Observable<FinancialSpending>{
+    
+    return this.http.get<FinancialSpending>(`${this.config.getServerUrl()}/FinancialSpends/?id=${request.id}&projectId=${request.projectId}`);
+  }
+
+  public addSpendItem(request : CreateFinancialSpendItemRequest ):Observable<FinancialSpending>{
+    
+    return this.http.post<FinancialSpending>(this.config.getServerUrl()+ "/FinancialSpends/",request);
+  }
+
+  public getSpendByProject(request : GetFinancialSpendItemByProjecRequest ):Observable<FinancialSpending[]>{
+    let pagination = this.getPagination(request.pageSize,request.pageNumber)
+    return this.http.get<FinancialSpending[]>(`${this.config.getServerUrl()}/FinancialSpends/ByProject/?projectId=${request.projectId}${pagination}`);
+  }
+
+  public delete(request : RemoveFinancialSpendItemRequest ):Observable<any>{
+    return this.http.delete(`${this.config.getServerUrl()}/FinancialSpends/ByProject/${request.id}?id=${request.id}&projectId=${request.projectId}`);
+  }
+
+
+
+  public updateSpendItem(request : UpdateFinancialSpendItemRequest ):Observable<FinancialSpending>{
+    
+    return this.http.put<FinancialSpending>(this.config.getServerUrl()+ "/FinancialSpends/",request);
+  }
+
+
+  
+  //#region  pagination convert 
+  private getPagination( pageSize:number | null , pageNumber : number |null ){
+
+    if(pageNumber == null || pageSize == null){
+      return "";
+    }
+    else {
+
+      return `&pageSize=${pageSize}&PageNumber=${pageNumber}`;
+
+    }
+
+
+  }
+//#endregion pagination convert
 }
--- a/src/app/projects/services/project.service.ts
+++ b/src/app/projects/services/project.service.ts
@@ -95,7 +95,7 @@ export class ProjectService {
  //
  public addStepToProject(request  : AddProjectStepRequest ):Observable<number>{
    
-    return this.http.post<number>(this.config.getServerUrl()+ "/Projects/AddProjetStep",request);
+    return this.http.post<number>(this.config.getServerUrl()+ "/Projects/AddProjectStep",request);

  }
  //#endregion  planning  managment

--- a/src/assets/images/home/hero-img.png
+++ b/src/assets/images/home/hero-img.png