feature: login

91fbf237 · Nguyễn Thị Thanh Trúc · f87a738f · 91fbf237 · 91fbf237 · 91fbf237
Commit 91fbf237 authored Jul 07, 2025 by Nguyễn Thị Thanh Trúc
15 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,13 +9,19 @@
      "version": "0.0.0",
      "dependencies": {
        "@angular/animations": "^18.0.0",
+        "@angular/cdk": "^18.2.8",
        "@angular/common": "^18.0.0",
        "@angular/compiler": "^18.0.0",
        "@angular/core": "^18.0.0",
        "@angular/forms": "^18.0.0",
        "@angular/platform-browser": "^18.0.0",
        "@angular/platform-browser-dynamic": "^18.0.0",
+        "@angular/platform-server": "^18.2.8",
        "@angular/router": "^18.0.0",
+        "@ctrl/tinycolor": "^4.1.0",
+        "@ngrx/signals": "^18.1.0",
+        "express": "^4.21.1",
+        "ng-zorro-antd": "^18.2.1",
        "rxjs": "~7.8.0",
        "tslib": "^2.3.0",
        "zone.js": "~0.14.3"
@@ -25,13 +31,32 @@
        "@angular/cli": "^18.0.3",
        "@angular/compiler-cli": "^18.0.0",
        "@types/jasmine": "~5.1.0",
+        "autoprefixer": "^10.4.20",
        "jasmine-core": "~5.1.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.2.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.1.0",
+        "postcss": "^8.4.47",
+        "tailwindcss": "^3.4.13",
        "typescript": "~5.4.2"
+      },
+      "engines": {
+        "node": "20.15.1"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/@ampproject/remapping": {
@@ -190,6 +215,35 @@
        }
      }
    },
+    "node_modules/@angular-devkit/build-angular/node_modules/postcss": {
+      "version": "8.4.41",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
    "node_modules/@angular-devkit/build-angular/node_modules/tslib": {
      "version": "2.6.3",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
@@ -342,6 +396,23 @@
        }
      }
    },
+    "node_modules/@angular/cdk": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.2.14.tgz",
+      "integrity": "sha512-vDyOh1lwjfVk9OqoroZAP8pf3xxKUvyl+TVR8nJxL4c5fOfUFkD7l94HaanqKSRwJcI2xiztuu92IVoHn8T33Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^7.1.2"
+      },
+      "peerDependencies": {
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
    "node_modules/@angular/cli": {
      "version": "18.2.8",
      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.8.tgz",
@@ -507,6 +578,26 @@
        "@angular/platform-browser": "18.2.8"
      }
    },
+    "node_modules/@angular/platform-server": {
+      "version": "18.2.13",
+      "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-18.2.13.tgz",
+      "integrity": "sha512-eYYhFQkjg3rIBY0kG0XLZ3v6ObvDq9SMsGVtsddhlmdhkdO0Sdu9d8hjP7LmioO+60vUG2jNW02ROVMhSNBR5A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0",
+        "xhr2": "^0.2.0"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "18.2.13",
+        "@angular/common": "18.2.13",
+        "@angular/compiler": "18.2.13",
+        "@angular/core": "18.2.13",
+        "@angular/platform-browser": "18.2.13"
+      }
+    },
    "node_modules/@angular/router": {
      "version": "18.2.8",
      "resolved": "https://registry.npmjs.org/@angular/router/-/router-18.2.8.tgz",
@@ -524,6 +615,43 @@
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
+    "node_modules/@ant-design/colors": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.2.1.tgz",
+      "integrity": "sha512-lCHDcEzieu4GA3n8ELeZ5VQ8pKQAWcGGLRTQ50aQM2iqPpq2evTxER84jfdPvsPAtEcZ7m44NI45edFMo8oOYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^2.0.6"
+      }
+    },
+    "node_modules/@ant-design/fast-color": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@ant-design/fast-color/-/fast-color-2.0.6.tgz",
+      "integrity": "sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@ant-design/icons-angular": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-angular/-/icons-angular-18.0.0.tgz",
+      "integrity": "sha512-nxNtHKd7MyGNnEyv22NK5hZ/Pczp63XJfej9zPjxiXm0wvJeIdMNUPOKtsdVkyPTRjRGHGe7F9M0Gv9SmyIjrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^7.0.0",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^18.0.0",
+        "@angular/core": "^18.0.0",
+        "@angular/platform-browser": "^18.0.0",
+        "rxjs": "^6.4.0 || ^7.4.0"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.25.7",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.7.tgz",
@@ -2262,7 +2390,6 @@
      "version": "7.25.0",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
      "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
-      "dev": true,
      "dependencies": {
        "regenerator-runtime": "^0.14.0"
      },
@@ -2352,6 +2479,15 @@
        "node": ">=0.1.90"
      }
    },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.1.0.tgz",
+      "integrity": "sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/@discoveryjs/json-ext": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.6.1.tgz",
@@ -3358,6 +3494,24 @@
        "win32"
      ]
    },
+    "node_modules/@ngrx/signals": {
+      "version": "18.1.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/signals/-/signals-18.1.1.tgz",
+      "integrity": "sha512-7AaFp4VrzYhnDHlF15VZAMvp067zIC5arRRRMV+i+oi95sQVDXezpj74KTIguwRbZ3FU+GKGzFCNrwgYvginSg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "^18.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      },
+      "peerDependenciesMeta": {
+        "rxjs": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@ngtools/webpack": {
      "version": "18.2.8",
      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-18.2.8.tgz",
@@ -4454,7 +4608,6 @@
      "version": "1.3.8",
      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "dev": true,
      "dependencies": {
        "mime-types": "~2.1.34",
        "negotiator": "0.6.3"
@@ -4638,6 +4791,13 @@
        "node": ">=4"
      }
    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/anymatch": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -4663,6 +4823,13 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -4672,8 +4839,7 @@
    "node_modules/array-flatten": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
-      "dev": true
    },
    "node_modules/autoprefixer": {
      "version": "10.4.20",
@@ -4854,7 +5020,6 @@
      "version": "1.20.3",
      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
-      "dev": true,
      "dependencies": {
        "bytes": "3.1.2",
        "content-type": "~1.0.5",
@@ -4878,7 +5043,6 @@
      "version": "2.6.9",
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
      "dependencies": {
        "ms": "2.0.0"
      }
@@ -4886,8 +5050,7 @@
    "node_modules/body-parser/node_modules/ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-      "dev": true
    },
    "node_modules/bonjour-service": {
      "version": "1.2.1",
@@ -5008,7 +5171,6 @@
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -5090,7 +5252,6 @@
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dev": true,
      "dependencies": {
        "es-define-property": "^1.0.0",
        "es-errors": "^1.3.0",
@@ -5114,6 +5275,16 @@
        "node": ">=6"
      }
    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001668",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz",
@@ -5506,7 +5677,6 @@
      "version": "0.5.4",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "dev": true,
      "dependencies": {
        "safe-buffer": "5.2.1"
      },
@@ -5518,7 +5688,6 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -5541,8 +5710,7 @@
    "node_modules/cookie-signature": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
-      "dev": true
    },
    "node_modules/copy-anything": {
      "version": "2.0.6",
@@ -5833,6 +6001,22 @@
      "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
      "dev": true
    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
    "node_modules/date-format": {
      "version": "4.0.14",
      "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz",
@@ -5915,7 +6099,6 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
      "dependencies": {
        "es-define-property": "^1.0.0",
        "es-errors": "^1.3.0",
@@ -5944,7 +6127,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -5953,7 +6135,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8",
        "npm": "1.2.8000 || >= 1.4.16"
@@ -5980,6 +6161,20 @@
      "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
      "dev": true
    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/dns-packet": {
      "version": "5.6.1",
      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
@@ -6068,8 +6263,7 @@
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
-      "dev": true
    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.36",
@@ -6096,7 +6290,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -6183,7 +6376,7 @@
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
+      "devOptional": true,
      "engines": {
        "node": ">=0.12"
      },
@@ -6244,7 +6437,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
      "dependencies": {
        "get-intrinsic": "^1.2.4"
      },
@@ -6256,7 +6448,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4"
      }
@@ -6330,8 +6521,7 @@
    "node_modules/escape-html": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-      "dev": true
    },
    "node_modules/escape-string-regexp": {
      "version": "1.0.5",
@@ -6398,7 +6588,6 @@
      "version": "1.8.1",
      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -6472,7 +6661,6 @@
      "version": "4.21.1",
      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
-      "dev": true,
      "dependencies": {
        "accepts": "~1.3.8",
        "array-flatten": "1.1.1",
@@ -6514,7 +6702,6 @@
      "version": "0.7.1",
      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -6523,7 +6710,6 @@
      "version": "2.6.9",
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
      "dependencies": {
        "ms": "2.0.0"
      }
@@ -6532,7 +6718,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -6541,7 +6726,6 @@
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
-      "dev": true,
      "dependencies": {
        "debug": "2.6.9",
        "encodeurl": "~2.0.0",
@@ -6558,14 +6742,12 @@
    "node_modules/express/node_modules/ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-      "dev": true
    },
    "node_modules/express/node_modules/statuses": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -6801,7 +6983,6 @@
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -6823,7 +7004,6 @@
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -6878,7 +7058,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@@ -6917,7 +7096,6 @@
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
      "dependencies": {
        "es-errors": "^1.3.0",
        "function-bind": "^1.1.2",
@@ -7016,7 +7194,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
      "dependencies": {
        "get-intrinsic": "^1.1.3"
      },
@@ -7049,7 +7226,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
      "dependencies": {
        "es-define-property": "^1.0.0"
      },
@@ -7061,7 +7237,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@@ -7073,7 +7248,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@@ -7085,7 +7259,6 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
      "dependencies": {
        "function-bind": "^1.1.2"
      },
@@ -7210,7 +7383,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "dev": true,
      "dependencies": {
        "depd": "2.0.0",
        "inherits": "2.0.4",
@@ -7226,7 +7398,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -7316,7 +7487,6 @@
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
      "dependencies": {
        "safer-buffer": ">= 2.1.2 < 3"
      },
@@ -7468,8 +7638,7 @@
    "node_modules/inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-      "dev": true
    },
    "node_modules/ini": {
      "version": "4.1.3",
@@ -8450,6 +8619,19 @@
        }
      }
    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
    "node_modules/lines-and-columns": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -8888,7 +9070,6 @@
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -8916,7 +9097,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
-      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
@@ -8940,7 +9120,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -8986,7 +9165,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -8995,7 +9173,6 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@@ -9254,8 +9431,7 @@
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-      "dev": true
    },
    "node_modules/msgpackr": {
      "version": "1.11.0",
@@ -9310,10 +9486,22 @@
        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
      }
    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
    "node_modules/nanoid": {
-      "version": "3.3.7",
+      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
      "dev": true,
      "funding": [
        {
@@ -9321,6 +9509,7 @@
          "url": "https://github.com/sponsors/ai"
        }
      ],
+      "license": "MIT",
      "bin": {
        "nanoid": "bin/nanoid.cjs"
      },
@@ -9362,7 +9551,6 @@
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -9373,6 +9561,26 @@
      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
      "dev": true
    },
+    "node_modules/ng-zorro-antd": {
+      "version": "18.2.1",
+      "resolved": "https://registry.npmjs.org/ng-zorro-antd/-/ng-zorro-antd-18.2.1.tgz",
+      "integrity": "sha512-LAG3n7no9nwB0dZMaydSFutQ3JjipC88dpM23lxJCVTjzNHIbZiRrVdJcudpCs5RItBu74PMcXcSBmpF2E6SYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@angular/cdk": "^18.0.0",
+        "@ant-design/icons-angular": "^18.0.0",
+        "date-fns": "^2.16.1",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^18.0.0",
+        "@angular/common": "^18.0.0",
+        "@angular/core": "^18.0.0",
+        "@angular/forms": "^18.0.0",
+        "@angular/platform-browser": "^18.0.0",
+        "@angular/router": "^18.0.0"
+      }
+    },
    "node_modules/nice-napi": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -9708,11 +9916,20 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/object-inspect": {
      "version": "1.13.2",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@@ -9730,7 +9947,6 @@
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dev": true,
      "dependencies": {
        "ee-first": "1.1.1"
      },
@@ -10100,7 +10316,7 @@
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.0.tgz",
      "integrity": "sha512-ZkDsAOcxsUMZ4Lz5fVciOehNcJ+Gb8gTzcA4yl3wnc273BAybYWrQ+Ks/OjCjSEpjvQkDSeZbybK9qj2VHHdGA==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "entities": "^4.5.0"
      },
@@ -10138,7 +10354,6 @@
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -10201,8 +10416,7 @@
    "node_modules/path-to-regexp": {
      "version": "0.1.10",
      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
-      "dev": true
    },
    "node_modules/path-type": {
      "version": "5.0.0",
@@ -10217,10 +10431,11 @@
      }
    },
    "node_modules/picocolors": {
-      "version": "1.1.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
    },
    "node_modules/picomatch": {
      "version": "4.0.2",
@@ -10244,6 +10459,16 @@
        "node": ">=6"
      }
    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/piscina": {
      "version": "4.6.1",
      "resolved": "https://registry.npmjs.org/piscina/-/piscina-4.6.1.tgz",
@@ -10269,9 +10494,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.41",
+      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
      "dev": true,
      "funding": [
        {
@@ -10287,15 +10512,90 @@
          "url": "https://github.com/sponsors/ai"
        }
      ],
+      "license": "MIT",
      "dependencies": {
-        "nanoid": "^3.3.7",
+        "nanoid": "^3.3.11",
-        "picocolors": "^1.0.1",
+        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.0"
+        "source-map-js": "^1.2.1"
      },
      "engines": {
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/postcss-loader": {
      "version": "8.1.1",
      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz",
@@ -10392,6 +10692,32 @@
        "postcss": "^8.1.0"
      }
    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
    "node_modules/postcss-selector-parser": {
      "version": "6.1.2",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -10449,7 +10775,6 @@
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dev": true,
      "dependencies": {
        "forwarded": "0.2.0",
        "ipaddr.js": "1.9.1"
@@ -10462,7 +10787,6 @@
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "dev": true,
      "engines": {
        "node": ">= 0.10"
      }
@@ -10493,7 +10817,6 @@
      "version": "6.13.0",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
-      "dev": true,
      "dependencies": {
        "side-channel": "^1.0.6"
      },
@@ -10537,7 +10860,6 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -10546,7 +10868,6 @@
      "version": "2.5.2",
      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
-      "dev": true,
      "dependencies": {
        "bytes": "3.1.2",
        "http-errors": "2.0.0",
@@ -10557,6 +10878,26 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/read-cache/node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/readable-stream": {
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -10611,8 +10952,7 @@
    "node_modules/regenerator-runtime": {
      "version": "0.14.1",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
-      "dev": true
    },
    "node_modules/regenerator-transform": {
      "version": "0.15.2",
@@ -10904,7 +11244,6 @@
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -10923,8 +11262,7 @@
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-      "dev": true
    },
    "node_modules/sass": {
      "version": "1.77.6",
@@ -11121,7 +11459,6 @@
      "version": "0.19.0",
      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
-      "dev": true,
      "dependencies": {
        "debug": "2.6.9",
        "depd": "2.0.0",
@@ -11145,7 +11482,6 @@
      "version": "2.6.9",
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
      "dependencies": {
        "ms": "2.0.0"
      }
@@ -11153,14 +11489,12 @@
    "node_modules/send/node_modules/debug/node_modules/ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-      "dev": true
    },
    "node_modules/send/node_modules/mime": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
      "bin": {
        "mime": "cli.js"
      },
@@ -11172,7 +11506,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -11259,7 +11592,6 @@
      "version": "1.16.2",
      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
-      "dev": true,
      "dependencies": {
        "encodeurl": "~2.0.0",
        "escape-html": "~1.0.3",
@@ -11274,7 +11606,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -11283,7 +11614,6 @@
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
      "dependencies": {
        "define-data-property": "^1.1.4",
        "es-errors": "^1.3.0",
@@ -11299,8 +11629,7 @@
    "node_modules/setprototypeof": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
-      "dev": true
    },
    "node_modules/shallow-clone": {
      "version": "3.0.1",
@@ -11348,7 +11677,6 @@
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
-      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.7",
        "es-errors": "^1.3.0",
@@ -11810,6 +12138,86 @@
        "node": ">=6"
      }
    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
    "node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -11843,6 +12251,108 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
    "node_modules/tapable": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -12021,6 +12531,29 @@
        "url": "https://opencollective.com/webpack"
      }
    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/thingies": {
      "version": "1.21.0",
      "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz",
@@ -12076,7 +12609,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "dev": true,
      "engines": {
        "node": ">=0.6"
      }
@@ -12106,6 +12638,13 @@
        "tree-kill": "cli.js"
      }
    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
    "node_modules/tslib": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
@@ -12141,7 +12680,6 @@
      "version": "1.6.18",
      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dev": true,
      "dependencies": {
        "media-typer": "0.3.0",
        "mime-types": "~2.1.24"
@@ -12290,7 +12828,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -12353,7 +12890,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4.0"
      }
@@ -12390,7 +12926,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@@ -12860,34 +13395,6 @@
        "@esbuild/win32-x64": "0.21.5"
      }
    },
-    "node_modules/vite/node_modules/postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
    "node_modules/void-elements": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
@@ -13534,6 +14041,15 @@
        }
      }
    },
+    "node_modules/xhr2": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.2.1.tgz",
+      "integrity": "sha512-sID0rrVCqkVNUn8t6xuv9+6FViXjUVXq8H5rWOH2rz9fDNQEd4g0EA2XlcEdJXRz5BMEn4O1pJFdT+z4YHhoWw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/y18n": {
      "version": "5.0.8",
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -13549,6 +14065,19 @@
      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
      "dev": true
    },
+    "node_modules/yaml": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
+      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
    "node_modules/yargs": {
      "version": "17.7.2",
      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",

--- a/package.json
+++ b/package.json
@@ -25,9 +25,10 @@
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/platform-server": "^18.2.8",
    "@angular/router": "^18.0.0",
+    "@ctrl/tinycolor": "^4.1.0",
    "@ngrx/signals": "^18.1.0",
    "express": "^4.21.1",
-    "ng-zorro-antd": "^18.1.1",
+    "ng-zorro-antd": "^18.2.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"

--- a/src/app/+admin/admin.routes.ts
+++ b/src/app/+admin/admin.routes.ts
 import { Route } from '@angular/router';
 import { AdminLayoutComponent } from './layout/feature/ui/layout.component';
+import { AdminGuard } from '../+login/data-access/guard/admin.guard';
 const ADMIN_ROUTES: Route[] = [
  {
    path: '',
    component: AdminLayoutComponent,
+    canActivate: [AdminGuard],
    children: [
      {
        path: '',

--- a/src/app/+login/data-access/guard/admin.guard.ts
+++ b/src/app/+login/data-access/guard/admin.guard.ts
 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+import { CanActivate, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+import { AuthService } from '../../../shared/data-access/service/auth.service';
 @Injectable({
  providedIn: 'root',
 })
 export class AdminGuard implements CanActivate {
-  constructor() {}
+  constructor(
-  canActivate(): boolean {
+    private authService: AuthService,
-    return true;
+    private router: Router
+  ) {}
+  canActivate(): Observable<boolean> {
+    return this.authService.authState$.pipe(
+      take(1),
+      map(authState => {
+        // Check authentication first
+        if (!authState.isAuthenticated) {
+          this.router.navigate(['/login']);
+          return false;
+        }
+        // Check admin role
+        if (authState.user?.role !== 'admin') {
+          this.router.navigate(['/']);
+          return false;
+        }
+        return true;
+      })
+    );
  }
 }
--- a/src/app/+login/data-access/guard/auth.guard.ts
+++ b/src/app/+login/data-access/guard/auth.guard.ts
 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+import { AuthService } from '../../../shared/data-access/service/auth.service';
 @Injectable({
  providedIn: 'root',
 })
 export class AuthGuard implements CanActivate {
-  constructor() {}
+  constructor(
-  canActivate(): boolean {
+    private authService: AuthService,
-    return true;
+    private router: Router
+  ) {}
+  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
+    return this.authService.authState$.pipe(
+      take(1),
+      map(authState => {
+        // Check if user is authenticated
+        if (!authState.isAuthenticated) {
+          this.router.navigate(['/login']);
+          return false;
+        }
+        // Check role-based access if required
+        const requiredRole = route.data?.['role'];
+        if (requiredRole && authState.user?.role !== requiredRole) {
+          this.router.navigate(['/unauthorized']);
+          return false;
+        }
+        return true;
+      })
+    );
  }
 }
--- a/src/app/+login/feature/login.component.html
+++ b/src/app/+login/feature/login.component.html
+<div class="tw-min-h-screen tw-bg-gradient-to-br tw-from-gray-50 tw-via-blue-50 tw-to-indigo-100">
+  <div class="tw-flex tw-min-h-screen">
+    <!-- Left Panel - Modern & Clean -->
+    <div class="tw-hidden lg:tw-flex tw-w-1/2 tw-relative tw-overflow-hidden tw-bg-gradient-to-br tw-from-indigo-950 tw-via-blue-950 tw-to-slate-950">
+      <!-- Clean Background Pattern -->
+      <div class="tw-absolute tw-inset-0">
+        <!-- Floating geometric shapes -->
+        <div class="tw-absolute tw-top-20 tw-right-20 tw-w-32 tw-h-32 tw-border tw-border-white/10 tw-rounded-2xl tw-rotate-12"></div>
+        <div class="tw-absolute tw-bottom-32 tw-left-16 tw-w-24 tw-h-24 tw-border tw-border-blue-400/20 tw-rounded-full"></div>
+        <div class="tw-absolute tw-top-1/2 tw-right-1/3 tw-w-2 tw-h-20 tw-bg-gradient-to-b tw-from-blue-400/30 tw-to-transparent tw-rounded-full"></div>
+        <!-- Subtle grid overlay -->
+        <div class="tw-absolute tw-inset-0 tw-opacity-[0.03]" style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.3) 1px, transparent 0); background-size: 30px 30px;"></div>
+      </div>
+      <!-- Content -->
+      <div class="tw-relative tw-z-10 tw-flex tw-flex-col tw-justify-center tw-px-12 tw-text-white">
+        <div class="tw-max-w-lg">
+          <!-- Logo & Brand -->
+          <div class="tw-flex tw-items-center tw-mb-12">
+            <div class="tw-w-14 tw-h-14 tw-bg-gradient-to-br tw-from-blue-500 tw-to-purple-600 tw-rounded-2xl tw-flex tw-items-center tw-justify-center tw-shadow-lg tw-mr-4">
+              <svg class="tw-w-7 tw-h-7 tw-text-white" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+              </svg>
+            </div>
+            <div>
+              <h3 class="tw-text-2xl tw-font-bold tw-text-white">JobMeU</h3>
+              <p class="tw-text-sm tw-text-blue-200">Management Suite</p>
+            </div>
+          </div>
+          <!-- Main Title -->
+          <h1 class="tw-text-4xl tw-font-bold tw-mb-6 tw-leading-tight">
+            Welcome to the
+            <span class="tw-block tw-text-transparent tw-bg-clip-text tw-bg-gradient-to-r tw-from-blue-300 tw-to-purple-300">
+              Future of Work
+            </span>
+          </h1>
+          <!-- Description -->
+          <p class="tw-text-lg tw-text-slate-300 tw-mb-10 tw-leading-relaxed">
+            Streamline your workflow with our comprehensive job management platform. Built for teams that demand excellence.
+          </p>
+          <!-- Key Features -->
+          <div class="tw-space-y-4">
+            <div class="tw-flex tw-items-center tw-space-x-4">
+              <div class="tw-w-8 tw-h-8 tw-bg-blue-500/20 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
+                <svg class="tw-w-4 tw-h-4 tw-text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                </svg>
+              </div>
+              <span class="tw-text-slate-200 tw-font-medium">Lightning-fast performance</span>
+            </div>
+            <div class="tw-flex tw-items-center tw-space-x-4">
+              <div class="tw-w-8 tw-h-8 tw-bg-purple-500/20 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
+                <svg class="tw-w-4 tw-h-4 tw-text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+                </svg>
+              </div>
+              <span class="tw-text-slate-200 tw-font-medium">Enterprise-grade security</span>
+            </div>
+            <div class="tw-flex tw-items-center tw-space-x-4">
+              <div class="tw-w-8 tw-h-8 tw-bg-blue-500/20 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
+                <svg class="tw-w-4 tw-h-4 tw-text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+                </svg>
+              </div>
+              <span class="tw-text-slate-200 tw-font-medium">Seamless collaboration</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Right Panel - Login Form -->
+    <div class="tw-flex-1 tw-flex tw-items-center tw-justify-center tw-p-8">
+      <div class="tw-w-full tw-max-w-md">
+        <!-- Mobile Header -->
+        <div class="lg:tw-hidden tw-text-center tw-mb-8">
+          <div class="tw-w-12 tw-h-12 tw-bg-gradient-to-r tw-from-blue-600 tw-to-purple-600 tw-rounded-xl tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4">
+            <svg class="tw-w-6 tw-h-6 tw-text-white" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+            </svg>
+          </div>
+          <h1 class="tw-text-2xl tw-font-bold tw-text-gray-900">JobMeU</h1>
+        </div>
+        <!-- Clean Login Card -->
+        <div class="tw-bg-white tw-rounded-3xl tw-shadow-2xl tw-p-10 tw-border tw-border-gray-100 tw-backdrop-blur-sm">
+          <div class="tw-mb-10">
+            <h2 class="tw-text-3xl tw-font-bold tw-text-gray-900 tw-mb-3">Welcome Back</h2>
+            <p class="tw-text-gray-600 tw-text-lg">Sign in to access your JobMeU dashboard</p>
+          </div>
+          <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="tw-space-y-8">
+            <!-- Username Field -->
+            <div class="tw-relative">
+              <label for="username" class="tw-block tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3">
+                Username
+              </label>
+              <input
+                id="username"
+                type="text"
+                formControlName="username"
+                placeholder="Enter your username"
+                autocomplete="username"
+                class="tw-w-full tw-px-5 tw-py-4 tw-border-2 tw-border-gray-200 tw-rounded-xl tw-text-gray-900 tw-placeholder-gray-400 focus:tw-ring-4 focus:tw-ring-blue-500/20 focus:tw-border-blue-500 tw-transition-all tw-duration-200 tw-bg-gray-50/50 focus:tw-bg-white"
+                [class.tw-border-red-500]="username?.invalid && username?.touched"
+              />
+              <div class="tw-mt-3 tw-text-red-600 tw-text-sm tw-font-medium">
+                @if (username?.invalid && username?.touched) {
+                  <div class="tw-flex tw-items-center tw-space-x-2">
+                    <svg class="tw-w-4 tw-h-4" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+                    </svg>
+                    <span>Username is required</span>
+                  </div>
+                }
+              </div>
+            </div>
+            <!-- Password Field -->
+            <div class="tw-relative">
+              <label for="password" class="tw-block tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3">
+                Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                formControlName="password"
+                placeholder="Enter your password"
+                autocomplete="current-password"
+                class="tw-w-full tw-px-5 tw-py-4 tw-border-2 tw-border-gray-200 tw-rounded-xl tw-text-gray-900 tw-placeholder-gray-400 focus:tw-ring-4 focus:tw-ring-blue-500/20 focus:tw-border-blue-500 tw-transition-all tw-duration-200 tw-bg-gray-50/50 focus:tw-bg-white"
+                [class.tw-border-red-500]="password?.invalid && password?.touched"
+              />
+              <div class="tw-mt-3 tw-text-red-600 tw-text-sm tw-font-medium">
+                @if (password?.invalid && password?.touched) {
+                  <div class="tw-flex tw-items-center tw-space-x-2">
+                    <svg class="tw-w-4 tw-h-4" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+                    </svg>
+                    <div>
+                      @if (password?.errors?.['required']) { <div>Password is required</div> }
+                      @if (password?.errors?.['minlength']) { <div>Password must be at least 6 characters</div> }
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+            <!-- Error Message -->
+            @if (errorMessage) {
+              <div class="tw-bg-red-50 tw-border-l-4 tw-border-red-500 tw-rounded-lg tw-p-4">
+                <div class="tw-flex tw-items-center">
+                  <svg class="tw-w-6 tw-h-6 tw-text-red-600 tw-mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                  </svg>
+                  <span class="tw-text-red-700 tw-font-medium">{{ errorMessage }}</span>
+                </div>
+              </div>
+            }
+            <!-- Submit Button -->
+            <button
+              type="submit"
+              [disabled]="loginForm.invalid || isLoading"
+              class="tw-w-full tw-py-4 tw-px-6 tw-bg-gradient-to-r tw-from-blue-600 tw-via-blue-700 tw-to-purple-700 hover:tw-from-blue-700 hover:tw-via-blue-800 hover:tw-to-purple-800 tw-text-white tw-font-bold tw-text-lg tw-rounded-xl tw-shadow-lg hover:tw-shadow-xl disabled:tw-opacity-50 disabled:tw-cursor-not-allowed tw-transition-all tw-duration-300 tw-transform hover:tw-scale-[1.02] active:tw-scale-[0.98]"
+            >
+              @if (!isLoading) {
+                <span class="tw-flex tw-items-center tw-justify-center">
+                  <svg class="tw-w-5 tw-h-5 tw-mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
+                  </svg>
+                  Sign In to Dashboard
+                </span>
+              }
+              @if (isLoading) {
+                <div class="tw-flex tw-items-center tw-justify-center">
+                  <svg class="tw-animate-spin tw-h-6 tw-w-6 tw-text-white tw-mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle class="tw-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="tw-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Authenticating...
+                </div>
+              }
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
--- a/src/app/+login/feature/login.component.ts
+++ b/src/app/+login/feature/login.component.ts
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AuthService } from '../../shared/data-access/service/auth.service';
+import { LoginRequest } from '../../shared/data-access/interface/auth.interface';
 @Component({
  selector: 'meu-login',
  standalone: true,
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
-  imports: [CommonModule],
+  imports: [
+    CommonModule, 
+    ReactiveFormsModule
+  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginComponent implements OnInit {
-  constructor() {}
+  loginForm: FormGroup;
+  isLoading = false;
+  errorMessage = '';
+  constructor(
+    private fb: FormBuilder,
+    private authService: AuthService,
+    private router: Router,
+    private cdr: ChangeDetectorRef
+  ) {
+    this.loginForm = this.fb.group({
+      username: ['', [Validators.required]],
+      password: ['', [Validators.required, Validators.minLength(6)]]
+    });
+  }
+  ngOnInit() {
+    if (this.authService.isAuthenticated()) {
+      this.redirectBasedOnRole();
+    }
+  }
+  onSubmit(): void {
+    if (this.loginForm.invalid) {
+      this.markFormGroupTouched();
+      return;
+    }
+    this.isLoading = true;
+    this.errorMessage = '';
+    const credentials: LoginRequest = {
+      username: this.loginForm.value.username,
+      password: this.loginForm.value.password
+    };
+    this.authService.login(credentials).subscribe({
+      next: (response) => {
+        this.isLoading = false;
+        this.cdr.detectChanges();
+        this.redirectBasedOnRole();
+      },
+      error: (error) => {
+        this.errorMessage = error;
+        this.isLoading = false;
+        this.cdr.detectChanges();
+      }
+    });
+  }
+  private redirectBasedOnRole(): void {
+    if (this.authService.isAdmin()) {
+      this.router.navigate(['/admin']);
+    } else if (this.authService.isCustomer()) {
+      this.router.navigate(['/']);
+    } else {
+      this.router.navigate(['/']);
+    }
+  }
+  private markFormGroupTouched(): void {
+    Object.keys(this.loginForm.controls).forEach(key => {
+      this.loginForm.get(key)?.markAsTouched();
+    });
+  }
-  ngOnInit() {}
+  // Getter methods for template
+  get username() { return this.loginForm.get('username'); }
+  get password() { return this.loginForm.get('password'); }
 }
--- a/src/app/+shell/feature/shell.routes.ts
+++ b/src/app/+shell/feature/shell.routes.ts
 import { Routes } from '@angular/router';
 import { LayoutComponent } from '../ui/layout.component';
-import { LoginComponent } from '../../+login/feature/login.component';
-import { AuthGuard } from '../../+login/data-access/guard/auth.guard';
 import { AdminGuard } from '../../+login/data-access/guard/admin.guard';
 export const shellRoutes: Routes = [
@@ -33,7 +31,6 @@ export const shellRoutes: Routes = [
  },
  {
    path: 'login',
-    component: LoginComponent,
+    loadChildren: () => import('../../+login/login.routes'),
-    canActivate: [AuthGuard],
  },
 ];
--- a/src/app/+shell/ui/components/header/feature/header.component.html
+++ b/src/app/+shell/ui/components/header/feature/header.component.html
-<header>
+<header class="tw-bg-white tw-shadow-sm tw-border-b tw-border-gray-200">
-    <h1>
+  <div class="tw-max-w-7xl tw-mx-auto tw-px-4 sm:tw-px-6 lg:tw-px-8">
-        It is a header
+    <div class="tw-flex tw-justify-between tw-items-center tw-h-16">
-    </h1>
+      <!-- Logo/Brand -->
+      <div class="tw-flex tw-items-center">
+        <div class="tw-w-8 tw-h-8 tw-bg-gradient-to-r tw-from-blue-600 tw-to-indigo-600 tw-rounded-lg tw-flex tw-items-center tw-justify-center tw-mr-3">
+          <svg class="tw-w-5 tw-h-5 tw-text-white" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M20 6h-2V4c0-1.11-.89-2-2-2H8c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM8 4h8v2H8V4zm11 15H5V10h14v9zm-8-7.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5z"/>
+          </svg>
+        </div>
+        <h1 class="tw-text-xl tw-font-bold tw-text-gray-900">Job Management</h1>
+      </div>
+      <!-- User Menu -->
+      <div *ngIf="authState$ | async as authState" class="tw-flex tw-items-center tw-space-x-4">
+        <div *ngIf="authState.isAuthenticated" class="tw-flex tw-items-center tw-space-x-4">
+          <!-- User Info -->
+          <div class="tw-flex tw-items-center tw-space-x-2">
+            <div class="tw-w-8 tw-h-8 tw-bg-gradient-to-r tw-from-blue-500 tw-to-purple-500 tw-rounded-full tw-flex tw-items-center tw-justify-center">
+              <svg class="tw-w-4 tw-h-4 tw-text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
+              </svg>
+            </div>
+            <div class="tw-text-sm">
+              <div class="tw-font-medium tw-text-gray-900">{{ authState.user?.username || 'User' }}</div>
+              <div class="tw-text-gray-500 tw-capitalize">{{ authState.user?.role }}</div>
+            </div>
+          </div>
+          <!-- Logout Button -->
+          <button
+            (click)="onLogout()"
+            [disabled]="isLoggingOut"
+            class="tw-inline-flex tw-items-center tw-px-3 tw-py-2 tw-border tw-border-transparent tw-text-sm tw-leading-4 tw-font-medium tw-rounded-md tw-text-white tw-bg-red-600 hover:tw-bg-red-700 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-red-500 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed tw-transition-colors tw-duration-200"
+          >
+            <div *ngIf="!isLoggingOut" class="tw-flex tw-items-center">
+              <svg class="tw-w-4 tw-h-4 tw-mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
+              </svg>
+              <span>Logout</span>
+            </div>
+            <div *ngIf="isLoggingOut" class="tw-flex tw-items-center">
+              <svg class="tw-animate-spin tw-w-4 tw-h-4 tw-mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="tw-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="tw-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              <span>Logging out...</span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </header>
\ No newline at end of file
--- a/src/app/+shell/ui/components/header/feature/header.component.ts
+++ b/src/app/+shell/ui/components/header/feature/header.component.ts
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, inject, ChangeDetectorRef } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../../../../../shared/data-access/service/auth.service';
+import { Observable } from 'rxjs';
+import { AuthState } from '../../../../../shared/data-access/interface/auth.interface';
 @Component({
  selector: 'meu-header',
  standalone: true,
@@ -8,5 +13,33 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent implements OnInit {
+  private authService = inject(AuthService);
+  private router = inject(Router);
+  private cdr = inject(ChangeDetectorRef);
+  authState$: Observable<AuthState> = this.authService.authState$;
+  isLoggingOut = false;
  ngOnInit(): void {}
+  onLogout(): void {
+    if (this.isLoggingOut) return;
+    this.isLoggingOut = true;
+    this.cdr.markForCheck();
+    this.authService.logout().subscribe({
+      next: () => {
+        this.router.navigate(['/login']);
+      },
+      error: (error) => {
+        // Even if API fails, redirect to login
+        this.router.navigate(['/login']);
+      },
+      complete: () => {
+        this.isLoggingOut = false;
+        this.cdr.markForCheck();
+      }
+    });
+  }
 }
--- a/src/app/shared/data-access/interface/auth.interface.ts
+++ b/src/app/shared/data-access/interface/auth.interface.ts
+export interface LoginRequest {
+  username: string;  
+  password: string;
+}
+export interface LoginResponse {
+  message: string;
+  responseData: {
+    token: string;
+    expirationTime: number;
+    role: UserRole;
+  };
+  success: boolean;
+  status: number;
+  violations: any;
+  path: string;
+  timestamp: number;
+}
+export interface UserInfo {
+  id?: number;
+  username: string;  
+  name?: string;
+  role: UserRole;
+}
+export type UserRole = 'admin' | 'customer';
+export interface AuthState {
+  isAuthenticated: boolean;
+  user: UserInfo | null;
+  token: string | null;
+}
--- a/src/app/shared/data-access/service/auth.service.ts
+++ b/src/app/shared/data-access/service/auth.service.ts
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { BehaviorSubject, Observable, throwError, of } from 'rxjs';
+import { map, catchError, tap, delay } from 'rxjs/operators';
+import { LoginRequest, LoginResponse, AuthState, UserInfo } from '../interface/auth.interface';
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private readonly API_URL = 'http://localhost:3000'; // Replace with your actual API domain
+  private readonly TOKEN_KEY = 'auth_token';
+  private readonly USER_KEY = 'user_info';
+  // Reactive state management
+  private authStateSubject = new BehaviorSubject<AuthState>({
+    isAuthenticated: false,
+    user: null,
+    token: null
+  });
+  public authState$ = this.authStateSubject.asObservable();
+  constructor(private http: HttpClient) {
+    // Load saved auth state on service init
+    this.loadAuthState();
+  }
+  /**
+   * Login with username and password
+   */
+  login(credentials: LoginRequest): Observable<LoginResponse> {
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json'
+    });
+    return this.http.post<LoginResponse>(`${this.API_URL}/login`, credentials, { headers })
+      .pipe(
+        tap(response => this.handleLoginSuccess(response, credentials.username)),
+        catchError(error => this.handleError(error))
+      );
+  }
+  /**
+   * Logout user
+   */
+  logout(): Observable<any> {
+    // Clear local storage and auth state immediately
+    this.handleLogoutSuccess();
+    // Return success observable
+    return of({ success: true, message: 'Logged out successfully' }).pipe(
+      delay(500) // Small delay to show loading state
+    );
+  }
+  /**
+   * Refresh access token
+   */
+  refreshToken(): Observable<LoginResponse> {
+    const refreshToken = localStorage.getItem('refresh_token');
+    const currentUser = this.authStateSubject.value.user;
+    if (!refreshToken) {
+      this.logout();
+      return throwError('No refresh token available');
+    }
+    return this.http.post<LoginResponse>(`${this.API_URL}/refresh`, { 
+      refreshToken 
+    }).pipe(
+      tap(response => this.handleLoginSuccess(response, currentUser?.username || 'Unknown')),
+      catchError(error => {
+        this.logout();
+        return throwError(error);
+      })
+    );
+  }
+  /**
+   * Get current user info
+   */
+  getCurrentUser(): Observable<UserInfo> {
+    const headers = this.getAuthHeaders();
+    return this.http.get<UserInfo>(`${this.API_URL}/me`, { headers })
+      .pipe(
+        tap(user => this.updateUserInfo(user)),
+        catchError(error => this.handleError(error))
+      );
+  }
+  /**
+   * Check if user is authenticated
+   */
+  isAuthenticated(): boolean {
+    return this.authStateSubject.value.isAuthenticated;
+  }
+  /**
+   * Check if user has specific role
+   */
+  hasRole(role: string): boolean {
+    const currentUser = this.authStateSubject.value.user;
+    return currentUser?.role === role;
+  }
+  /**
+   * Check if user is admin
+   */
+  isAdmin(): boolean {
+    return this.hasRole('admin');
+  }
+  /**
+   * Check if user is customer
+   */
+  isCustomer(): boolean {
+    return this.hasRole('customer');
+  }
+  /**
+   * Get stored token
+   */
+  getToken(): string | null {
+    return localStorage.getItem(this.TOKEN_KEY);
+  }
+  /**
+   * Get current user info
+   */
+  getUser(): UserInfo | null {
+    return this.authStateSubject.value.user;
+  }
+  /**
+   * Get auth headers for API calls
+   */
+  private getAuthHeaders(): HttpHeaders {
+    const token = this.getToken();
+    return new HttpHeaders({
+      'Authorization': `Bearer ${token}`,
+      'Content-Type': 'application/json'
+    });
+  }
+  /**
+   * Handle successful login
+   */
+  private handleLoginSuccess(response: LoginResponse, username: string): void {
+    if (!response.success) {
+      throw new Error(response.message || 'Login failed');
+    }
+    const { token, role, expirationTime } = response.responseData;
+    // Store tokens
+    localStorage.setItem(this.TOKEN_KEY, token);
+    localStorage.setItem('token_expiration', expirationTime.toString());
+    // Create user info from response
+    const userInfo: UserInfo = {
+      username: username, // Use the username from login credentials
+      role: role
+    };
+    localStorage.setItem(this.USER_KEY, JSON.stringify(userInfo));
+    // Update auth state
+    this.authStateSubject.next({
+      isAuthenticated: true,
+      user: userInfo,
+      token: token
+    });
+  }
+  /**
+   * Handle logout
+   */
+  private handleLogoutSuccess(): void {
+    // Clear storage
+    localStorage.removeItem(this.TOKEN_KEY);
+    localStorage.removeItem('refresh_token');
+    localStorage.removeItem(this.USER_KEY);
+    // Reset auth state
+    this.authStateSubject.next({
+      isAuthenticated: false,
+      user: null,
+      token: null
+    });
+  }
+  /**
+   * Load auth state from storage
+   */
+  private loadAuthState(): void {
+    const token = localStorage.getItem(this.TOKEN_KEY);
+    const userInfo = localStorage.getItem(this.USER_KEY);
+    if (token && userInfo) {
+      try {
+        const user = JSON.parse(userInfo);
+        this.authStateSubject.next({
+          isAuthenticated: true,
+          user,
+          token
+        });
+      } catch (error) {
+        this.handleLogoutSuccess();
+      }
+    }
+  }
+  /**
+   * Update user info
+   */
+  private updateUserInfo(user: UserInfo): void {
+    localStorage.setItem(this.USER_KEY, JSON.stringify(user));
+    const currentState = this.authStateSubject.value;
+    this.authStateSubject.next({
+      ...currentState,
+      user
+    });
+  }
+  /**
+   * Handle API errors
+   */
+  private handleError(error: any): Observable<never> {
+    let errorMessage = 'An error occurred';
+    if (error.error?.message) {
+      errorMessage = error.error.message;
+    } else if (error.message) {
+      errorMessage = error.message;
+    }
+    switch (error.status) {
+      case 401:
+        errorMessage = 'Invalid credentials';
+        this.handleLogoutSuccess();
+        break;
+      case 403:
+        errorMessage = 'Access denied';
+        break;
+      case 500:
+        errorMessage = 'Server error. Please try again later.';
+        break;
+    }
+    return throwError(errorMessage);
+  }
+}
--- a/src/app/shared/utils/interceptor/auth.interceptor.ts
+++ b/src/app/shared/utils/interceptor/auth.interceptor.ts
+import { Injectable } from '@angular/core';
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError, BehaviorSubject } from 'rxjs';
+import { catchError, filter, take, switchMap } from 'rxjs/operators';
+import { AuthService } from '../../data-access/service/auth.service';
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+  private isRefreshing = false;
+  private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  constructor(private authService: AuthService) {}
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    // Add auth token to requests
+    const authToken = this.authService.getToken();
+    if (authToken) {
+      request = this.addToken(request, authToken);
+    }
+    return next.handle(request).pipe(
+      catchError(error => {
+        if (error instanceof HttpErrorResponse && error.status === 401) {
+          return this.handle401Error(request, next);
+        } else {
+          return throwError(error);
+        }
+      })
+    );
+  }
+  private addToken(request: HttpRequest<any>, token: string): HttpRequest<any> {
+    return request.clone({
+      setHeaders: {
+        Authorization: `Bearer ${token}`
+      }
+    });
+  }
+  private handle401Error(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (!this.isRefreshing) {
+      this.isRefreshing = true;
+      this.refreshTokenSubject.next(null);
+      return this.authService.refreshToken().pipe(
+        switchMap((response: any) => {
+          this.isRefreshing = false;
+          this.refreshTokenSubject.next(response.accessToken);
+          return next.handle(this.addToken(request, response.accessToken));
+        }),
+        catchError((error) => {
+          this.isRefreshing = false;
+          this.authService.logout();
+          return throwError(error);
+        })
+      );
+    } else {
+      return this.refreshTokenSubject.pipe(
+        filter(token => token != null),
+        take(1),
+        switchMap(jwt => {
+          return next.handle(this.addToken(request, jwt));
+        })
+      );
+    }
+  }
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,8 +26,102 @@ module.exports = {
      },
    },
    colors: {
-      white: "#ffffff",
+      inherit: 'inherit',
-      black: "#000000",
+      current: 'currentColor',
+      transparent: 'transparent',
+      black: '#000',
+      white: '#fff',
+      slate: {
+        50: '#f8fafc',
+        100: '#f1f5f9',
+        200: '#e2e8f0',
+        300: '#cbd5e1',
+        400: '#94a3b8',
+        500: '#64748b',
+        600: '#475569',
+        700: '#334155',
+        800: '#1e293b',
+        900: '#0f172a',
+        950: '#020617',
+      },
+      gray: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827',
+        950: '#030712',
+      },
+      red: {
+        50: '#fef2f2',
+        100: '#fee2e2',
+        200: '#fecaca',
+        300: '#fca5a5',
+        400: '#f87171',
+        500: '#ef4444',
+        600: '#dc2626',
+        700: '#b91c1c',
+        800: '#991b1b',
+        900: '#7f1d1d',
+        950: '#450a0a',
+      },
+      blue: {
+        50: '#eff6ff',
+        100: '#dbeafe',
+        200: '#bfdbfe',
+        300: '#93c5fd',
+        400: '#60a5fa',
+        500: '#3b82f6',
+        600: '#2563eb',
+        700: '#1d4ed8',
+        800: '#1e40af',
+        900: '#1e3a8a',
+        950: '#172554',
+      },
+      indigo: {
+        50: '#eef2ff',
+        100: '#e0e7ff',
+        200: '#c7d2fe',
+        300: '#a5b4fc',
+        400: '#818cf8',
+        500: '#6366f1',
+        600: '#4f46e5',
+        700: '#4338ca',
+        800: '#3730a3',
+        900: '#312e81',
+        950: '#1e1b4b',
+      },
+      purple: {
+        50: '#faf5ff',
+        100: '#f3e8ff',
+        200: '#e9d5ff',
+        300: '#d8b4fe',
+        400: '#c084fc',
+        500: '#a855f7',
+        600: '#9333ea',
+        700: '#7c3aed',
+        800: '#6b21a8',
+        900: '#581c87',
+        950: '#3b0764',
+      },
+      green: {
+        50: '#f0fdf4',
+        100: '#dcfce7',
+        200: '#bbf7d0',
+        300: '#86efac',
+        400: '#4ade80',
+        500: '#22c55e',
+        600: '#16a34a',
+        700: '#15803d',
+        800: '#166534',
+        900: '#14532d',
+        950: '#052e16',
+      },
    },
    fontFamily: {
      "roboto-black": ["Roboto-Black", "sans-serif"],

--- a/yarn.lock
+++ b/yarn.lock