Merge branch 'feature/displayError' into 'develop'

Style web, add function

See merge request !1

README.md

-# hotel
+# test
 
 ## Project setup
 ```

package-lock.json

 {
-  "name": "hotel",
+  "name": "test",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "hotel",
+      "name": "test",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.4.0",
+        "bootstrap": "^5.2.3",
+        "bootstrap-icons": "^1.10.5",
+        "bootstrap-vue": "^2.23.1",
+        "chart.js": "^4.3.0",
         "core-js": "^3.8.3",
-        "vue": "^3.2.13"
+        "vue": "^3.2.47",
+        "vue-chartjs": "^5.2.0",
+        "vue-router": "^4.1.6",
+        "vuejs-paginate": "^2.1.0",
+        "vuex": "^4.0.2"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.12.16",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-eslint": "~5.0.0",
+        "@vue/cli-plugin-router": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3"
@@ -1861,7 +1871,8 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.18",
@@ -1879,6 +1890,11 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -1941,12 +1957,103 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@nuxt/opencollective": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.3.tgz",
+      "integrity": "sha512-6IKCd+gP0HliixqZT/p8nW3tucD6Sv/u/eR2A9X4rxT/6hXlMzA4GZQzq4d2qnBAwSwGpmKyzkyTjNjrhaA25A==",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "consola": "^2.15.0",
+        "node-fetch": "^2.6.7"
+      },
+      "bin": {
+        "opencollective": "bin/opencollective.js"
+      },
+      "engines": {
+        "node": ">=8.0.0",
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/@nuxt/opencollective/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@nuxt/opencollective/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@nuxt/opencollective/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@nuxt/opencollective/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/@nuxt/opencollective/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@nuxt/opencollective/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.21",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -2145,9 +2252,9 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.17.35",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.35.tgz",
-      "integrity": "sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==",
+      "version": "4.17.34",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.34.tgz",
+      "integrity": "sha512-fvr49XlCGoUj2Pp730AItckfjat4WNb0lb3kfrLWffd+RLeoGAMsq7UOy04PAPtoL01uKwcp6u8nhzpgpDYr3w==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -2190,9 +2297,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.1.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.1.4.tgz",
-      "integrity": "sha512-At4pvmIOki8yuwLtd7BNHl3CiWNbtclUbNtScGx4OHfBd4/oWoJC8KRCIxXwkdndzhxOsPXihrsOoydxBjlE9Q==",
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.0.0.tgz",
+      "integrity": "sha512-cD2uPTDnQQCVpmRefonO98/PPijuOnnEy5oytWJFPY1N9aJCz2wJ5kSGWO+zJoed2cY2JxQh6yBuUq4vIn61hw==",
       "dev": true
     },
     "node_modules/@types/normalize-package-data": {
@@ -2377,9 +2484,9 @@
       }
     },
     "node_modules/@vue/babel-preset-app/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+      "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -2779,9 +2886,9 @@
       }
     },
     "node_modules/@vue/cli-shared-utils/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+      "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -2812,49 +2919,49 @@
       "dev": true
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.2.tgz",
-      "integrity": "sha512-CKZWo1dzsQYTNTft7whzjL0HsrEpMfiK7pjZ2WFE3bC1NA7caUjWioHSK+49y/LK7Bsm4poJZzAMnvZMQ7OTeg==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
       "dependencies": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.2",
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
         "estree-walker": "^2.0.2",
-        "source-map-js": "^1.0.2"
+        "source-map": "^0.6.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.2.tgz",
-      "integrity": "sha512-6gS3auANuKXLw0XH6QxkWqyPYPunziS2xb6VRenM3JY7gVfZcJvkCBHkb5RuNY1FCbBO3lkIi0CdXUCW1c7SXw==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
       "dependencies": {
-        "@vue/compiler-core": "3.3.2",
-        "@vue/shared": "3.3.2"
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.2.tgz",
-      "integrity": "sha512-jG4jQy28H4BqzEKsQqqW65BZgmo3vzdLHTBjF+35RwtDdlFE+Fk1VWJYUnDMMqkFBo6Ye1ltSKVOMPgkzYj7SQ==",
-      "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.2",
-        "@vue/compiler-dom": "3.3.2",
-        "@vue/compiler-ssr": "3.3.2",
-        "@vue/reactivity-transform": "3.3.2",
-        "@vue/shared": "3.3.2",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
+        "magic-string": "^0.25.7",
         "postcss": "^8.1.10",
-        "source-map-js": "^1.0.2"
+        "source-map": "^0.6.1"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.2.tgz",
-      "integrity": "sha512-K8OfY5FQtZaSOJHHe8xhEfIfLrefL/Y9frv4k4NsyQL3+0lRKxr9QuJhfdBDjkl7Fhz8CzKh63mULvmOfx3l2w==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.2",
-        "@vue/shared": "3.3.2"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
       }
     },
     "node_modules/@vue/component-compiler-utils": {
@@ -2921,61 +3028,66 @@
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+    },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.2.tgz",
-      "integrity": "sha512-yX8C4uTgg2Tdj+512EEMnMKbLveoITl7YdQX35AYgx8vBvQGszKiiCN46g4RY6/deeo/5DLbeUUGxCq1qWMf5g==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
+      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
       "dependencies": {
-        "@vue/shared": "3.3.2"
+        "@vue/shared": "3.2.47"
       }
     },
     "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.2.tgz",
-      "integrity": "sha512-iu2WaQvlJHdnONrsyv4ibIEnSsuKF+aHFngGj/y1lwpHQtalpVhKg9wsKMoiKXS9zPNjG9mNKzJS9vudvjzvyg==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
       "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.2",
-        "@vue/shared": "3.3.2",
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
+        "magic-string": "^0.25.7"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.2.tgz",
-      "integrity": "sha512-qSl95qj0BvKfcsO+hICqFEoLhJn6++HtsPxmTkkadFbuhe3uQfJ8HmQwvEr7xbxBd2rcJB6XOJg7nWAn/ymC5A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
+      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
       "dependencies": {
-        "@vue/reactivity": "3.3.2",
-        "@vue/shared": "3.3.2"
+        "@vue/reactivity": "3.2.47",
+        "@vue/shared": "3.2.47"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.2.tgz",
-      "integrity": "sha512-+drStsJT+0mtgHdarT7cXZReCcTFfm6ptxMrz0kAW5hms6UNBd8Q1pi4JKlncAhu+Ld/TevsSp7pqAZxBBoGng==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
+      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
       "dependencies": {
-        "@vue/runtime-core": "3.3.2",
-        "@vue/shared": "3.3.2",
-        "csstype": "^3.1.1"
+        "@vue/runtime-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "csstype": "^2.6.8"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.2.tgz",
-      "integrity": "sha512-QCwh6OGwJg6GDLE0fbQhRTR6tnU+XDJ1iCsTYHXBiezCXAhqMygFRij7BiLF4ytvvHcg5kX9joX5R5vP85++wg==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
+      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.2",
-        "@vue/shared": "3.3.2"
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/shared": "3.2.47"
       },
       "peerDependencies": {
-        "vue": "3.3.2"
+        "vue": "3.2.47"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.2.tgz",
-      "integrity": "sha512-0rFu3h8JbclbnvvKrs7Fe5FNGV9/5X2rPD7KmOzhLSUAiQH5//Hq437Gv0fR5Mev3u/nbtvmLl8XgwCU20/ZfQ=="
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
     "node_modules/@vue/vue-loader-v15": {
       "name": "vue-loader",
@@ -3016,148 +3128,148 @@
       "dev": true
     },
     "node_modules/@webassemblyjs/ast": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
-      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.5.tgz",
+      "integrity": "sha512-LHY/GSAZZRpsNQH+/oHqhRQ5FT7eoULcBqgfyTB5nQHogFnK3/7QoN7dLnwSE/JkUAF0SrRuclT7ODqMFtWxxQ==",
       "dev": true,
       "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
+        "@webassemblyjs/helper-numbers": "1.11.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.5"
       }
     },
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
-      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.5.tgz",
+      "integrity": "sha512-1j1zTIC5EZOtCplMBG/IEwLtUojtwFVwdyVMbL/hwWqbzlQoJsWCOavrdnLkemwNoC/EOwtUFch3fuo+cbcXYQ==",
       "dev": true
     },
     "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
-      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.5.tgz",
+      "integrity": "sha512-L65bDPmfpY0+yFrsgz8b6LhXmbbs38OnwDCf6NpnMUYqa+ENfE5Dq9E42ny0qz/PdR0LJyq/T5YijPnU8AXEpA==",
       "dev": true
     },
     "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
-      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.5.tgz",
+      "integrity": "sha512-fDKo1gstwFFSfacIeH5KfwzjykIE6ldh1iH9Y/8YkAZrhmu4TctqYjSh7t0K2VyDSXOZJ1MLhht/k9IvYGcIxg==",
       "dev": true
     },
     "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
-      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.5.tgz",
+      "integrity": "sha512-DhykHXM0ZABqfIGYNv93A5KKDw/+ywBFnuWybZZWcuzWHfbp21wUfRkbtz7dMGwGgT4iXjWuhRMA2Mzod6W4WA==",
       "dev": true,
       "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
-        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/floating-point-hex-parser": "1.11.5",
+        "@webassemblyjs/helper-api-error": "1.11.5",
         "@xtuc/long": "4.2.2"
       }
     },
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
-      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.5.tgz",
+      "integrity": "sha512-oC4Qa0bNcqnjAowFn7MPCETQgDYytpsfvz4ujZz63Zu/a/v71HeCAAmZsgZ3YVKec3zSPYytG3/PrRCqbtcAvA==",
       "dev": true
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
-      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.5.tgz",
+      "integrity": "sha512-uEoThA1LN2NA+K3B9wDo3yKlBfVtC6rh0i4/6hvbz071E8gTNZD/pT0MsBf7MeD6KbApMSkaAK0XeKyOZC7CIA==",
       "dev": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.6"
+        "@webassemblyjs/ast": "1.11.5",
+        "@webassemblyjs/helper-buffer": "1.11.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+        "@webassemblyjs/wasm-gen": "1.11.5"
       }
     },
     "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
-      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.5.tgz",
+      "integrity": "sha512-37aGq6qVL8A8oPbPrSGMBcp38YZFXcHfiROflJn9jxSdSMMM5dS5P/9e2/TpaJuhE+wFrbukN2WI6Hw9MH5acg==",
       "dev": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "node_modules/@webassemblyjs/leb128": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
-      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.5.tgz",
+      "integrity": "sha512-ajqrRSXaTJoPW+xmkfYN6l8VIeNnR4vBOTQO9HzR7IygoCcKWkICbKFbVTNMjMgMREqXEr0+2M6zukzM47ZUfQ==",
       "dev": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
     },
     "node_modules/@webassemblyjs/utf8": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
-      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.5.tgz",
+      "integrity": "sha512-WiOhulHKTZU5UPlRl53gHR8OxdGsSOxqfpqWeA2FmcwBMaoEdz6b2x2si3IwC9/fSPLfe8pBMRTHVMk5nlwnFQ==",
       "dev": true
     },
     "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
-      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.5.tgz",
+      "integrity": "sha512-C0p9D2fAu3Twwqvygvf42iGCQ4av8MFBLiTb+08SZ4cEdwzWx9QeAHDo1E2k+9s/0w1DM40oflJOpkZ8jW4HCQ==",
       "dev": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/helper-wasm-section": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.6",
-        "@webassemblyjs/wasm-opt": "1.11.6",
-        "@webassemblyjs/wasm-parser": "1.11.6",
-        "@webassemblyjs/wast-printer": "1.11.6"
+        "@webassemblyjs/ast": "1.11.5",
+        "@webassemblyjs/helper-buffer": "1.11.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+        "@webassemblyjs/helper-wasm-section": "1.11.5",
+        "@webassemblyjs/wasm-gen": "1.11.5",
+        "@webassemblyjs/wasm-opt": "1.11.5",
+        "@webassemblyjs/wasm-parser": "1.11.5",
+        "@webassemblyjs/wast-printer": "1.11.5"
       }
     },
     "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
-      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.5.tgz",
+      "integrity": "sha512-14vteRlRjxLK9eSyYFvw1K8Vv+iPdZU0Aebk3j6oB8TQiQYuO6hj9s4d7qf6f2HJr2khzvNldAFG13CgdkAIfA==",
       "dev": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/ieee754": "1.11.6",
-        "@webassemblyjs/leb128": "1.11.6",
-        "@webassemblyjs/utf8": "1.11.6"
+        "@webassemblyjs/ast": "1.11.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+        "@webassemblyjs/ieee754": "1.11.5",
+        "@webassemblyjs/leb128": "1.11.5",
+        "@webassemblyjs/utf8": "1.11.5"
       }
     },
     "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
-      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.5.tgz",
+      "integrity": "sha512-tcKwlIXstBQgbKy1MlbDMlXaxpucn42eb17H29rawYLxm5+MsEmgPzeCP8B1Cl69hCice8LeKgZpRUAPtqYPgw==",
       "dev": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.6",
-        "@webassemblyjs/wasm-parser": "1.11.6"
+        "@webassemblyjs/ast": "1.11.5",
+        "@webassemblyjs/helper-buffer": "1.11.5",
+        "@webassemblyjs/wasm-gen": "1.11.5",
+        "@webassemblyjs/wasm-parser": "1.11.5"
       }
     },
     "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
-      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.5.tgz",
+      "integrity": "sha512-SVXUIwsLQlc8srSD7jejsfTU83g7pIGr2YYNb9oHdtldSxaOhvA5xwvIiWIfcX8PlSakgqMXsLpLfbbJ4cBYew==",
       "dev": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-api-error": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/ieee754": "1.11.6",
-        "@webassemblyjs/leb128": "1.11.6",
-        "@webassemblyjs/utf8": "1.11.6"
+        "@webassemblyjs/ast": "1.11.5",
+        "@webassemblyjs/helper-api-error": "1.11.5",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+        "@webassemblyjs/ieee754": "1.11.5",
+        "@webassemblyjs/leb128": "1.11.5",
+        "@webassemblyjs/utf8": "1.11.5"
       }
     },
     "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
-      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.5.tgz",
+      "integrity": "sha512-f7Pq3wvg3GSPUPzR0F6bmI89Hdb+u9WXrSKc4v+N0aV0q6r42WoF92Jp2jEorBEBRoRNXgjp53nBniDXcqZYPA==",
       "dev": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/ast": "1.11.5",
         "@xtuc/long": "4.2.2"
       }
     },
@@ -3199,9 +3311,9 @@
       }
     },
     "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
       "dev": true,
       "peerDependencies": {
         "acorn": "^8"
@@ -3430,6 +3542,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3472,6 +3589,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -3686,6 +3813,106 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
+    "node_modules/bootstrap-icons": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz",
+      "integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ]
+    },
+    "node_modules/bootstrap-vue": {
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz",
+      "integrity": "sha512-SEWkG4LzmMuWjQdSYmAQk1G/oOKm37dtNfjB5kxq0YafnL2W6qUAmeDTcIZVbPiQd2OQlIkWOMPBRGySk/zGsg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@nuxt/opencollective": "^0.3.2",
+        "bootstrap": "^4.6.1",
+        "popper.js": "^1.16.1",
+        "portal-vue": "^2.1.7",
+        "vue-functional-data-merge": "^3.1.0"
+      }
+    },
+    "node_modules/bootstrap-vue/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/bootstrap-vue/node_modules/bootstrap": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
+      }
+    },
+    "node_modules/bootstrap-vue/node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "peer": true
+    },
+    "node_modules/bootstrap-vue/node_modules/portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
+      "peerDependencies": {
+        "vue": "^2.5.18"
+      }
+    },
+    "node_modules/bootstrap-vue/node_modules/vue": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
+      "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.14",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3832,9 +4059,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001487",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001487.tgz",
-      "integrity": "sha512-83564Z3yWGqXsh2vaH/mhXfEM0wX+NlBCm1jYHOb97TrTWJEmPTccZgeLTPBUUb0PNVo+oomb7wkimZBIERClA==",
+      "version": "1.0.30001482",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001482.tgz",
+      "integrity": "sha512-F1ZInsg53cegyjroxLNW9DmrEQ1SuGRTO1QlpA0o2/6OpQ0gFeDRoq1yFmnr8Sakn9qwwt9DmbxHB6w167OSuQ==",
       "dev": true,
       "funding": [
         {
@@ -3874,6 +4101,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.0.tgz",
+      "integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -4130,6 +4368,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -4211,6 +4460,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/consola": {
+      "version": "2.15.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
+      "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw=="
+    },
     "node_modules/consolidate": {
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
@@ -4308,9 +4562,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.30.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
-      "integrity": "sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==",
+      "version": "3.30.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.1.tgz",
+      "integrity": "sha512-ZNS5nbiSwDTq4hFosEDqm65izl2CWmLz0hARJMyNQBgkUZMIF51cQiMvIQKA6hvuaeWxQDP3hEedM1JZIgTldQ==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -4318,9 +4572,9 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.30.2",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.30.2.tgz",
-      "integrity": "sha512-nriW1nuJjUgvkEjIot1Spwakz52V9YkYHZAQG6A1eCgC8AA1p0zngrQEP9R0+V6hji5XilWKG1Bd0YRppmGimA==",
+      "version": "3.30.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.30.1.tgz",
+      "integrity": "sha512-d690npR7MC6P0gq4npTl5n2VQeNAmUrJ90n+MHiKS7W2+xno4o3F5GDEuylSdi6EJ3VssibSGXOa1r3YXD3Mhw==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.21.5"
@@ -4428,9 +4682,9 @@
       }
     },
     "node_modules/css-loader/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+      "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -4681,9 +4935,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "2.6.21",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -4884,6 +5138,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -5062,9 +5324,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.394",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.394.tgz",
-      "integrity": "sha512-0IbC2cfr8w5LxTz+nmn2cJTGafsK9iauV2r5A5scfzyovqLrxuLoxOHE5OBobP3oVIggJT+0JfKnw9sm87c8Hw==",
+      "version": "1.4.384",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.384.tgz",
+      "integrity": "sha512-I97q0MmRAAqj53+a8vZsDkEXBZki+ehYAOPzwtQzALip52aEp2+BJqHFtTlsfjoqVZYwPpHC8wM6MbsSZQ/Eqw==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -5101,9 +5363,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.0.tgz",
-      "integrity": "sha512-+DCows0XNwLDcUhbFJPdlQEVnT2zXlCv7hPxemTz86/O+B/hCQ+mb7ydkPKiflpVraqLPCAfu7lDy+hBXueojw==",
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.13.0.tgz",
+      "integrity": "sha512-eyV8f0y1+bzyfh8xAwW/WTSZpLbjhqc4ne9eGSH4Zo2ejdyiNG9pU6mf9DG8a7+Auk6MFTlNOT4Y2y/9k8GKVg==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -5290,9 +5552,9 @@
       }
     },
     "node_modules/eslint-plugin-vue/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+      "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -5622,9 +5884,9 @@
       }
     },
     "node_modules/eslint/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+      "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -6118,7 +6380,6 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -6134,6 +6395,19 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -6237,14 +6511,13 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
       "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
-        "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3"
       },
       "funding": {
@@ -6390,18 +6663,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -6994,6 +7255,12 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.4.tgz",
+      "integrity": "sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==",
+      "peer": true
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -7469,14 +7736,11 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
-      "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.13"
-      },
-      "engines": {
-        "node": ">=12"
+        "sourcemap-codec": "^1.4.8"
       }
     },
     "node_modules/make-dir": {
@@ -7589,7 +7853,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"
       }
@@ -7598,7 +7861,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"
       },
@@ -7844,10 +8106,9 @@
       }
     },
     "node_modules/node-fetch": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
-      "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
-      "dev": true,
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.9.tgz",
+      "integrity": "sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==",
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -8400,6 +8661,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -8580,9 +8851,9 @@
       }
     },
     "node_modules/postcss-loader/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+      "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -9077,6 +9348,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -9845,7 +10121,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9868,6 +10143,12 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
+    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -10168,9 +10449,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.17.3",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.3.tgz",
-      "integrity": "sha512-AudpAZKmZHkG9jueayypz4duuCFJMMNGRMwaPvQKWfxKedh8Z2x3OCoDqIIi1xx5+iwx1u6Au8XQcc9Lke65Yg==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.1.tgz",
+      "integrity": "sha512-hVl35zClmpisy6oaoKALOpS0rDYLxRFLHhRuDlEGTKey9qHjS1w9GMORjuwIMt70Wan4lwsLYyWDVnWgF+KUEw==",
       "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
@@ -10186,16 +10467,16 @@
       }
     },
     "node_modules/terser-webpack-plugin": {
-      "version": "5.3.8",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.8.tgz",
-      "integrity": "sha512-WiHL3ElchZMsK27P8uIUh4604IgJyAW47LVXGbEoB21DbQcZ+OuMpGjVYnEUaqcWM6dO8uS2qUbA7LSCWqvsbg==",
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz",
+      "integrity": "sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==",
       "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.17",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.1",
-        "terser": "^5.16.8"
+        "terser": "^5.16.5"
       },
       "engines": {
         "node": ">= 10.13.0"
@@ -10373,8 +10654,7 @@
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/tslib": {
       "version": "2.5.0",
@@ -10569,15 +10849,24 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.2.tgz",
-      "integrity": "sha512-98hJcAhyDwZoOo2flAQBSPVYG/o0HA9ivIy2ktHshjE+6/q8IMQ+kvDKQzOZTFPxvnNMcGM+zS2A00xeZMA7tA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
+      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.2",
-        "@vue/compiler-sfc": "3.3.2",
-        "@vue/runtime-dom": "3.3.2",
-        "@vue/server-renderer": "3.3.2",
-        "@vue/shared": "3.3.2"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-sfc": "3.2.47",
+        "@vue/runtime-dom": "3.2.47",
+        "@vue/server-renderer": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/vue-chartjs": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.2.0.tgz",
+      "integrity": "sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
       }
     },
     "node_modules/vue-eslint-parser": {
@@ -10621,9 +10910,9 @@
       }
     },
     "node_modules/vue-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
+      "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -10633,14 +10922,14 @@
       }
     },
     "node_modules/vue-eslint-parser/node_modules/espree": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-      "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.1.tgz",
+      "integrity": "sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.8.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
+        "eslint-visitor-keys": "^3.4.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -10671,9 +10960,9 @@
       }
     },
     "node_modules/vue-eslint-parser/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+      "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -10691,6 +10980,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vue-functional-data-merge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
+      "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -10698,9 +10992,9 @@
       "dev": true
     },
     "node_modules/vue-loader": {
-      "version": "17.1.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.1.1.tgz",
-      "integrity": "sha512-qpqEVkKdrAsgyIBMHaiXurDeCuBWqRyKqg2GI4aG3NbggEls+BLqTZdqahbJJh7fm83sz+iz3gg6eDWdbNlG7Q==",
+      "version": "17.1.0",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.1.0.tgz",
+      "integrity": "sha512-zAjrT+TNWTpgRODxqDfzbDyvuTf5kCP9xmMk8aspQKuYNnTY2r0XK/bHu1DKLpSpk0I6fkQph5OLKB7HcRIPZw==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.1.0",
@@ -10789,6 +11083,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
+      "integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -10811,6 +11119,22 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuejs-paginate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vuejs-paginate/-/vuejs-paginate-2.1.0.tgz",
+      "integrity": "sha512-gnwyXlmCiDOu9MLWxN5UJ4PGijKGNOMpHG8ujsrynCzTJljn/rp7Jq0WiDGDAMi5/u0AHuYIHhced+tUW4jblA=="
+    },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -10845,13 +11169,12 @@
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/webpack": {
-      "version": "5.82.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.82.1.tgz",
-      "integrity": "sha512-C6uiGQJ+Gt4RyHXXYt+v9f+SN1v83x68URwgxNQ98cvH8kxiuywWGP4XeNZ1paOzZ63aY3cTciCEQJNFUljlLw==",
+      "version": "5.82.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.82.0.tgz",
+      "integrity": "sha512-iGNA2fHhnDcV1bONdUu554eZx+XeldsaeQ8T67H6KKHl2nUSwX8Zm7cmzOA46ox/X1ARxf7Bjv8wQ/HsB5fxBg==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -10863,7 +11186,7 @@
         "acorn-import-assertions": "^1.7.6",
         "browserslist": "^4.14.5",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.14.0",
+        "enhanced-resolve": "^5.13.0",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -11088,9 +11411,9 @@
       }
     },
     "node_modules/webpack-dev-server": {
-      "version": "4.15.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.0.tgz",
-      "integrity": "sha512-HmNB5QeSl1KpulTBQ8UT4FPrByYyaLxpJoQ0+s7EvUrMc16m0ZS1sgb1XGqzmgCPk0c9y+aaXxn11tbLzuM7NQ==",
+      "version": "4.13.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.13.3.tgz",
+      "integrity": "sha512-KqqzrzMRSRy5ePz10VhjyL27K2dxqwXQLP5rAKwRJBPUahe7Z2bBWzHw37jeb8GCPKxZRO79ZdQUAPesMh/Nug==",
       "dev": true,
       "dependencies": {
         "@types/bonjour": "^3.5.9",
@@ -11299,7 +11622,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"

package.json

 {
-  "name": "hotel",
+  "name": "test",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -8,14 +8,24 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.4.0",
+    "bootstrap": "^5.2.3",
+    "bootstrap-icons": "^1.10.5",
+    "bootstrap-vue": "^2.23.1",
+    "chart.js": "^4.3.0",
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "vue": "^3.2.47",
+    "vue-chartjs": "^5.2.0",
+    "vue-router": "^4.1.6",
+    "vuejs-paginate": "^2.1.0",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3"

src/App.vue

 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="layout">
+    <div class="header">
+      <HotelHeader />
+    </div>
+    <div class="body">
+      <div v-if="shouldDisplaySidebar !== '/login' && !shouldDisplaySidebar.includes('/reset-password/')  && shouldDisplaySidebar !== '/register' && shouldDisplaySidebar !== '/verify-email' && width > 769"
+       >
+        <div class="sidebar">
+          <NavbarHotel />
+        </div>
+      </div>
+      <div class="view">
+        <router-view />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import NavbarHotel from './components/NavbarHotel.vue'
+import HotelHeader from './components/HotelHeader.vue'
+import { ref } from 'vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    HotelHeader,
+    NavbarHotel
+  },
+
+  setup() {
+    const width = ref(window.innerWidth)
+
+    return {
+      width,
     }
+  },
+  computed: {
+    shouldDisplaySidebar() {
+      const currentView = this.$route.path;
+      return currentView;
+    },
+  },
+
 }
 </script>
+<style scoped>
+@media (min-width: 769px) {
+
+  .header {}
+
+  .layout {
+    width:99vw;
+    min-height: 100vh;
+  }
+  .body {
+    display: flex;
+    width:100%;
+  }
+
+  .layout {
+    display: flex;
+    flex-direction: column;
+
+  }
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  .footer {
+    margin-top: auto
+  }
+
+  .sidebar {
+    position: sticky;
+    top: 0;
+  }
+
+  .view {
+    width: 100%;
+  }
+}
+
+@media (max-width:768px) {
+  .layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    width: 100%;
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+  }
 }
 </style>

src/components/DataTable.vue

+<template>
+	<div class="table-box">
+		<table class="table">
+			<tr>
+				<th v-for="title in tableTitles" :key="title">{{ title }}</th>
+			</tr>
+			<tr v-for="datas, i in tableDatas" :key="i">
+				<td v-for="data, i in datas" :key="i">{{ data }}</td>
+				<td class="action-column">
+					<div v-if="actionSubmitInput != null">
+						<div>
+							<input type="text" :id="datas.id" name="fee" placeholder="Fee" class="fee">
+							<button type="submit" class="submit-button" @click="callParentSubmitInputFunction(datas.id)">
+								<i class="bi bi-currency-dollar"></i> {{ actionSubmitInput }}
+							</button>
+						</div>
+					</div>
+					<div v-if="actionModify != null">
+						<div>
+							<button class="modify-button" @click="callParentModifyFunction(datas.id, datas.booking_id)">
+								<i class="bi bi-pencil-square"></i> {{ actionModify }}
+							</button>
+						</div>
+					</div>
+					<div v-if="actionDetail != null">
+						<div>
+							<button class="detail-button"
+								@click="callParentDetailFunction(datas.id, datas.booking_id)">
+								<i class="bi bi-ticket-detailed"></i> {{ actionDetail }}
+							</button>
+						</div>
+					</div>
+					<div v-if="actionSubmit != null">
+						<div>
+							<button type="submit" class="submit-button" @click="callParentSubmitFunction(datas.id)">
+								<i class="bi bi-check-circle"></i> {{ actionSubmit }}
+							</button>
+						</div>
+					</div>
+					<div v-if="actionDanger != null">
+						<div>
+							<button class="danger-button" @click="callParentDangerFunction(datas.id)">
+								<i class="bi bi-trash"></i> {{ actionDanger }}
+							</button>
+						</div>
+					</div>
+				</td>
+			</tr>
+		</table>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'DataTable',
+	props: {
+
+		tableDatas: {
+			type: Object,
+			required: true
+		},
+		tableTitles: {
+			type: Object,
+			required: true
+		},
+		actionDanger: {
+			type: String,
+			required: false,
+			default: null
+		},
+		actionModify: {
+			type: String,
+			required: false,
+			default: null
+		},
+		actionDetail: {
+			type: String,
+			required: false,
+			default: null
+		},
+		actionSubmit: {
+			type: String,
+			required: false,
+			default: null
+		},
+		actionSubmitInput: {
+			type: String,
+			required: false,
+			default: null
+		},
+		functionDetail: {
+			type: Function,
+			required: false,
+		},
+		functionModify: {
+			type: Function,
+			required: false,
+		},
+		functionDanger: {
+			type: Function,
+			required: false,
+		},
+		functionSubmit: {
+			type: Function,
+			required: false,
+		},
+		functionSubmitInput: {
+			type: Function,
+			required: false,
+		}
+	},
+
+	setup(props) {
+		const callParentDetailFunction = (param1, param2, param3) => {
+			props.functionDetail(param1, param2, param3);
+		}
+
+		const callParentModifyFunction = (param1, param2) => {
+			props.functionModify(param1, param2);
+		}
+
+		const callParentDangerFunction = (param1) => {
+			props.functionDanger(param1);
+		}
+
+		const callParentSubmitFunction = (param1) => {
+			props.functionSubmit(param1);
+		}
+
+		const callParentSubmitInputFunction = (param1) => {
+			const param2 = document.getElementById(param1).value;
+			console.log(param2)
+			props.functionSubmitInput(param1, param2);
+		}
+		return {
+			callParentDetailFunction,
+			callParentModifyFunction,
+			callParentDangerFunction,
+			callParentSubmitFunction,
+			callParentSubmitInputFunction
+		}
+	}
+}
+</script>
+
+<style scoped>
+.action-column {
+	display: flex;
+}
+</style>

src/components/DetailInfo.vue

+<template>
+    <div class="detail-modal" id="detail-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <span>Detail</span>
+                <span class="close" @click="closeModal()">&times;</span>
+            </div>
+            <div class="modal-body">
+                <div class="modal-icon">
+                    <i class="bi bi-info-circle-fill"></i>
+                </div>
+                <div>
+                    <div v-for="data, key in datas" :key="data.id"><span class="modal-title">{{ key }}: </span>{{ data }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DetailInfo',
+    props: {
+       datas: {
+            type: Object,
+        }
+    },
+    methods: {
+        closeModal() {
+            document.getElementById('detail-modal').style.display = 'none'
+        }
+    }
+}
+</script>

src/components/HotelFooter.vue

+<template>
+  <div class="bg-dark text-white py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-md-6">
+          <h3>Contact Us</h3>
+          <ul class="list-unstyled">
+            <li>123 Main St</li>
+            <li>Anytown, USA 12345</li>
+            <li>Phone: (123) 456-7890</li>
+            <li>Email: info@example.com</li>
+          </ul>
+        </div>
+        <div class="col-12 col-md-6">
+          <h3>Connect With Us</h3>
+          <ul class="list-unstyled">
+            <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
+            <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
+            <li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HotelFooter',
+}
+</script>

src/components/HotelHeader.vue

+<template>
+  <div class="header">
+    <h1 class="hotel-name"><a href="/">ABC Hotel</a></h1>
+    <div v-if="width < 768 & currentView != '/login'">
+      <i class="bi bi-list" @click="showMenu()"></i>
+      <div class="side" id="side">
+        <NavbarHotel />
+      </div>
+    </div>
+    <router-link to="/register" class="register-box" v-show="currentView == '/login'">
+      Register
+    </router-link>
+  </div>
+</template>
+
+<script>
+import NavbarHotel from './NavbarHotel.vue'
+
+export default {
+  name: 'HotelHeader',
+  components: {
+    NavbarHotel
+  },
+
+  setup() {
+    const showMenu = () => {
+      const sidebar = document.getElementById('side')
+      console.log(sidebar.style.display)
+      if (sidebar.style.display === '') {
+        sidebar.style.display = 'block'
+      } else {
+        sidebar.style.display = ''
+      }
+      console.log(sidebar)
+    }
+
+    return {
+      showMenu,
+    }
+  },
+
+  computed: {
+    currentView() {
+      return this.$route.path
+    },
+    width() {
+      return window.innerWidth
+    }
+  },
+}
+</script>
+
+<style scoped>
+a {
+  text-decoration: none;
+  color: rgb(0, 0, 0);
+}
+
+@media (min-width: 769px) {
+  .header {
+    width: 100%;
+    background-color: rgb(255, 255, 255);
+    padding: 10px;
+    justify-content: space-between;
+    display: flex;
+  }
+
+  .hotel-name {
+    font-size: 30px;
+  }
+
+  .register-box {
+    background-color: rgb(255, 255, 255);
+    border: 1px solid rgb(0, 0, 0);
+    border-radius: 5px;
+    padding: 5px;
+    font-size: 15px;
+    cursor: pointer;
+  }
+
+  .register-box:hover {
+    background-color: rgb(215, 215, 215);
+  }
+}
+
+@media (max-width: 768px) {
+  .header {
+    width: 100%;
+    background-color: rgb(255, 255, 255);
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .hotel-name {
+    font-size: 20px;
+  }
+
+  .side {
+    display: none;
+    position: absolute;
+    right: 0;
+  }
+
+  .register-box {
+    background-color: rgb(255, 255, 255);
+    border: 1px solid rgb(0, 0, 0);
+    border-radius: 5px;
+    padding: 5px;
+    font-size: 15px;
+    cursor: pointer;
+  }
+}
+</style>

src/components/LineChart.vue

+<template>
+    <div>
+        <div>
+            <Line :data="chartData" :options="chartOptions" />
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend,
+    BarController,
+    BarElement,
+    PieController,
+    ArcElement
+} from 'chart.js'
+
+import { Line } from 'vue-chartjs'
+
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarController,
+    BarElement,
+    PieController,
+    ArcElement,
+    Title,
+    Tooltip,
+    Legend
+)
+
+export default {
+    name: 'LineChart',
+    components: { Line },
+    props: {
+        chartData: {
+            type: Object,
+            required: true
+        },
+        chartOptions: {
+            type: Object,
+            required: true
+        }
+    },
+}
+</script>
+  
\ No newline at end of file

src/components/NavbarHotel.vue

+<template>
+    <div class="sidebar" id="sidebar">
+        <div class="nav">
+            <router-link to="/" class="router-link" v-if="userRole == 'admin'">
+                <div class="nav-content" :class="{ 'active-route': currentView == '/' }">
+                    <i class="bi bi-clipboard-fill icon"></i>
+                    Dashboard
+                </div>
+            </router-link>
+            <router-link to="/booking" class="router-link">
+                <div class="nav-content" :class="{ 'active-route': currentView == '/booking' }">
+                    <i class="bi bi-book-fill icon"> </i>
+                    View booking
+                </div>
+            </router-link>
+            <router-link to="/checkin" class="router-link">
+                <div class="nav-content" :class="{ 'active-route': currentView == '/checkin' }">
+                    <i class="bi bi-bookmark-check-fill icon"></i>
+                    View checkin
+                </div>
+            </router-link>
+            <router-link to="/employee" class="router-link" v-if="userRole == 'admin'">
+                <div class="nav-content" :class="{ 'active-route': currentView == '/employee' }">
+                    <i class="bi bi-people-fill icon"></i>
+                    View employee
+                </div>
+            </router-link>
+            <router-link to="/room" class="router-link">
+                <div class="nav-content" :class="{ 'active-route': currentView == '/room' }">
+                    <i class="bi bi-bank2 icon"></i>
+                    View room
+                </div>
+            </router-link>
+            <router-link to="/user-list" class="router-link" v-if="userRole == 'admin'">
+                <div class="nav-content" :class="{ 'active-route': currentView == '/user-list' }">
+                    <i class="bi bi-person-badge-fill icon"></i>
+                    User list
+                </div>
+            </router-link>
+            <router-link to="/guest" class="router-link" v-if="userRole == 'admin'">
+                <div class="nav-content" :class="{ 'active-route': currentView == '/guest' }">
+                    <i class="bi bi-person-fill-check icon"></i>
+                    Guest
+                </div>
+            </router-link>
+        </div>
+        <div class="logout" @click="logout">
+            <i class="bi bi-box-arrow-right icon"> </i>Logout
+        </div>
+    </div>
+</template>
+
+<script>
+import store from '../store'
+
+export default {
+    name: 'NavbarHotel',
+    props: {
+        closeMenu: {
+            type: Function,
+            required: false,
+        }
+    },
+    methods: {
+        logout() {
+            localStorage.removeItem('token');
+            localStorage.removeItem('isLoggedIn');
+            localStorage.removeItem('role');
+            this.$router.push('/login');
+        },
+    },
+    //get current route
+    computed: {
+        currentView() {
+            return this.$route.path;
+        },
+        userRole() {
+            console.log(store.state.role);
+            return store.state.role;
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+.active-route {
+    background-color: #c0bfbf;
+    color: #000;
+    font-size: 15px;
+}
+
+.icon {
+    color: rgb(74, 74, 74);
+    font-size: 25px;
+}
+
+.nav {
+    background-color: rgb(248, 248, 248);
+    color: #f0f0f0;
+    min-height: 80vh;
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+}
+
+.nav-content {
+    padding-left: 20px;
+    font-size: 15px;
+    display: flex;
+    gap: 15px;
+    padding: 15px;
+    min-height: 100px;
+    align-items: center;
+}
+
+.nav-content:not(.active-route):hover {
+    background-color: #eaeaea;
+    color: #000;
+    font-size: 15px;
+}
+
+.sidebar {
+    height: 100%;
+    width: 2;
+    display: flex;
+    flex-direction: column;
+}
+
+.router-link {
+    text-decoration: none;
+    color: rgb(35, 35, 35);
+    font-size: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+}
+
+.logout {
+    cursor: pointer;
+    padding-left: 20px;
+    font-size: 15px;
+    display: flex;
+    gap: 15px;
+    padding: 15px;
+    min-height: 100px;
+    align-items: center;
+}
+
+.logout:hover {
+    background-color: rgb(247, 108, 105);
+    color: #fff;
+}
+
+@media (max-width:425px) {
+    .logout {
+        cursor: pointer;
+        padding-left: 20px;
+        font-size: 15px;
+        display: flex;
+        gap: 15px;
+        padding: 15px;
+        min-height: 100px;
+        align-items: center;
+        background-color: rgb(247, 108, 105);
+    }
+}
+</style>

src/config/index.js

+import axios from 'axios'
+
+axios.interceptors.request.use(
+  (config) => {
+    config.baseURL = 'http://localhost:8000/api'
+    config.headers.Accept = 'application/json'
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+axios.interceptors.response.use(
+  (response) => {
+    const newToken = response.data.access_token
+    if (newToken) {
+      localStorage.setItem('token', newToken)
+    }
+    return response
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+export default axios

src/main.js

-import { createApp } from 'vue'
+import { createApp} from 'vue'
 import App from './App.vue'
+import router from './router'
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-icons/font/bootstrap-icons.css'
+import axios from 'axios'
+import storeConfig from './store';
+import { createStore } from 'vuex';
+import './style/CommonStyle.css'
 
-createApp(App).mount('#app')
+
+const app = createApp(App)
+const store = createStore(storeConfig)
+app.config.globalProperties.$axios = axios.create({
+    baseURL: 'http://localhost:8000/api'
+})
+
+app.use(store)
+
+app.use(router).mount('#app')

src/router/index.js

+import { createRouter, createWebHistory } from 'vue-router'
+import DashboardView from '../views/DashboardView.vue'
+import BookingView from '../views/BookingView.vue'
+import RoomView from '../views/RoomView.vue'
+import EmployeeView from '../views/EmployeeView.vue'
+import CheckinView from '../views/CheckinView.vue'
+import CreateBookingView from '../views/CreateBookingView.vue'
+import ModifyView from '../views/ModifyView.vue'
+import LoginView from '../views/LoginView.vue'
+import register from '../views/RegisterView.vue'
+import userList from '../views/UserListView.vue'
+import verifyEmail from '../views/VerifyEmail.vue'
+import resetPassword from '../views/ResetPasswordView.vue'
+import guestView from '../views/GuestView.vue'
+
+const routes = [
+ 
+  {
+    path: '/',
+    name: 'Dashboard',
+    component: DashboardView
+  },
+  {
+    path: '/booking',
+    name: 'Booking',
+    component: BookingView
+  },
+  {
+    path: '/room',
+    name: 'Room',
+    component: RoomView
+  },
+  {
+    path: '/employee',
+    name: 'Employee',
+    component: EmployeeView
+  },
+  {
+    path: '/checkin',
+    name: 'Checkin',
+    component: CheckinView
+  },
+  {
+    path: '/create-booking',
+    name: 'CreateBooking',
+    component: CreateBookingView
+  },
+  {
+    path: '/modify/:id',
+    name: 'Modify',
+    component: ModifyView
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: LoginView
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: register
+  },
+  {
+    path: '/user-list',
+    name: 'UserList',
+    component: userList
+  },
+  {
+    path: '/verify-email',
+    name: 'VerifyEmail',
+    component: verifyEmail
+  },
+  {
+    path: '/reset-password/:token',
+    name: 'ResetPassword',
+    component: resetPassword
+  },
+  {
+    path: '/guest',
+    name: 'Guest',
+    component: guestView
+  },
+]
+
+routes.forEach(route => {
+  route.beforeEnter = (to, from, next) => {
+    const isAuthenticated = localStorage.getItem('isLoggedIn');
+    const role = localStorage.getItem('role');
+
+    if (to.path !== '/login' && to.path !== '/register' && to.path !=='/verify-email'  && !to.path.includes('/reset-password/')  && !isAuthenticated) {
+      next('/login');
+    } else if (role !== 'admin' && to.path == '/' && to.path == '/user-list' && to.path == '/employee' && to.path == '/guest' ) {
+      next('/booking');
+    } else {
+      next();
+    }
+  }
+})
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

src/store/index.js

+import { createStore } from 'vuex';
+
+const storeConfig = {
+  state: {
+    role: localStorage.getItem('role'),
+  },
+
+  mutations: {
+    setRole(state) {
+      state.role = localStorage.getItem('role');
+    },
+    removeRole(state) {
+      state.role = null;
+    },
+  },
+};
+
+const store = createStore(storeConfig)
+
+
+export default store;

src/style/CommonStyle.css

+.login-form-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.login-button {
+    border: none;
+    background-color: #93e4c1;
+    color: white;
+    border-radius: 3px;
+    width: 250px;
+    height: 50px;
+    margin-top: 10px;
+}
+
+.error {
+    color: red;
+    font-weight: bold;
+}
+
+.detail-button {
+    border: none;
+    color: white;
+    border-radius: 3px;
+    background-color: #f5d442;
+    padding: 5px;
+}
+
+.detail-button:hover {
+    background-color: #caa811;
+}
+
+.input-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background-color: rgb(255, 255, 255);
+    padding: 20px;
+    border-radius: 3px;
+    min-width: 350px;
+    min-height: 400px;
+    border: none;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px 5px #d5d5d5;
+}
+
+.input-title {
+    font-size: 30px;
+    font-weight: bold;
+}
+
+.input-label {
+    font-size: 15px;
+    color: rgb(164, 164, 164);
+}
+
+.input {
+    border: none;
+    background-color: rgb(240, 240, 240);
+    border-radius: 3px;
+    width: 250px;
+    height: 50px;
+}
+
+.table-box {
+    border: 2px rgb(222, 222, 222) solid;
+    border-radius: 13px;
+    padding: 5px;
+    white-space: nowrap;
+    overflow-x: scroll;
+    width: 100%;
+}
+
+th {
+    padding: 10px
+}
+
+td {
+    padding: 10px
+}
+
+.fee {
+    width: 100px;
+    border: none;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    height: 33px;
+}
+
+tr:nth-child(even) {
+    background-color: rgb(224, 224, 224);
+}
+
+td:first-child {
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+
+td:last-child {
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+}
+
+.submit-button {
+    border: none;
+    background-color: #93e4c1;
+    color: white;
+    padding: 5px;
+    border-radius: 3px;
+}
+
+.success {
+    color: rgb(79, 236, 55);
+    font-weight: bold;
+}
+
+.submit-button:hover {
+    background-color: #3baea0;
+}
+
+.w-100 {
+    width: 100%;
+}
+
+.danger-button {
+    border: none;
+    color: white;
+    border-radius: 3px;
+    background-color: #ff8585;
+    padding: 5px;
+}
+
+.danger-button:hover {
+    background-color: #ff5757;
+}
+
+.modify-button {
+    border: none;
+    padding: 5px;
+    color: white;
+    border-radius: 3px;
+    background: #18d6dc;
+}
+
+.modify-button:hover {
+    background: #3b77ef;
+}
+
+.modal-title {
+    font-weight: bold;
+}
+
+.modal-body {
+    padding: 15px;
+    display: flex;
+}
+
+.modal-icon {
+    font-size: 80px;
+    padding: 20px;
+    color: #f5d442;
+}
+
+.modal-header {
+    display: flex;
+    color: white;
+    font-size: 25px;
+    font-weight: bold;
+    width: 100%;
+    padding: 15px;
+    background-color: #f5d442;
+}
+
+.detail-modal {
+    display: none;
+    position: fixed;
+    /* Stay in place */
+    z-index: 1;
+    /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%;
+    /* Full width */
+    height: 100%;
+    background-color: rgb(0, 0, 0);
+    /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.4);
+    /* Black w/ opacity */
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    /* 15% from the top and centered */
+    border: 1px solid #888;
+    max-width: 800px;
+    min-height: 300px;
+
+    /* Could be more or less, depending on screen size */
+}
+
+.close {
+    color: #ffffff;
+    font-size: 20px;
+    display: flex;
+    flex-direction: column-reverse;
+    font-weight: bold;
+    height: 100%
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.title-box {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 40px;
+}
+
+.title {
+    order: 0;
+    font-weight: bold;
+}
+
+/* loading effect */
+
+.lds-ring {
+
+    width: 35px;
+    height: 35px;
+}
+
+.lds-ring div {
+    box-sizing: border-box;
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    margin: 5px;
+    border: 5px solid #fff;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #fff transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+

src/views/AboutView.vue

+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

src/views/BookingView.vue

+<template>
+  <div class="body">
+    <div class="title-box">
+      <h1 class="title">Booking</h1>
+      <div class="create-button-box">
+        <router-link to="/create-booking">
+          <button class="modify-button">Create booking</button>
+        </router-link>
+      </div>
+      <br />
+    </div>
+    <DataTable :tableDatas="bookings" :tableTitles="tableTitles" :actionSubmit="'Checkin'" :actionDanger="'Delete'" :functionSubmit="checkin" :functionDanger="destroy"/>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+import axios from '../config';
+import DataTable from '../components/DataTable.vue'
+
+export default defineComponent({
+  name: "BookingView",
+  components: {
+    DataTable,
+  },
+
+  setup() {
+    const bookings = ref([]);
+    const tableTitles = ref(['Booking id', 'Guest name', 'Guest number', 'Arrive date','Leave date', 'Room id', 'Checked'])
+    /**
+     * Get all bookings
+     *
+     * @return {void}
+     */
+    const getBooking = async () => {
+      const response = await axios.get("booking");
+      bookings.value = response.data;
+    };
+
+    /**
+     * Checkin booking
+     *
+     * @param {int} id
+     *
+     * @return {void}
+     */
+    const checkin = async (id) => {
+      console.log(id);
+      try {
+        const response = await axios.post("checked", {
+          id: id,
+        });
+        console.log(response.data);
+      } catch (error) {
+        console.error(error.response.data);
+      }
+      getBooking();
+    };
+
+    /**
+     * destroy a booking
+     *
+     * @param {*} id
+     *
+     * @return {void}
+     */
+    const destroy = async (id) => {
+      console.log(id);
+      try {
+        const response = await axios.delete(
+          "checked/delBook",
+          {
+            data: {
+              id: id,
+            },
+          }
+        );
+        console.log(response.data);
+      } catch (error) {
+        console.error(error.response);
+      }
+      getBooking();
+    };
+
+    getBooking();
+
+    return {
+      checkin,
+      destroy,
+      bookings,
+      tableTitles
+    };
+  },
+});
+</script>
+
+<style scoped>
+@media (min-width: 769px) {
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 3px;
+    height: 100%;
+  }
+
+  .table-box {
+    border: 2px rgb(222, 222, 222) solid;
+    border-radius: 15px;
+    padding: 5px;
+  }
+
+  tr:nth-child(even) {
+    background: rgb(224, 224, 224);
+  }
+
+  td:first-child {
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+  }
+
+  td:last-child {
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+  }
+
+  .create-button-box {
+    order: 2;
+  }
+
+  .create-button {
+    border: none;
+    border-radius: 30px;
+    padding: 10px;
+    background: #ff347f;
+    color: white
+  }
+
+  .create-button:hover {
+    background: #c9356c;
+    color: white;
+  }
+}
+
+@media (max-width:768px) {
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .table-box {
+    overflow: scroll;
+  }
+
+  th {
+    padding: 10px
+  }
+
+
+  .create-button {
+    border: none;
+    border-radius: 30px;
+    padding: 10px;
+    background: #ff347f;
+    color: white
+  }
+  .create-button-box {
+    order: 1
+  }
+
+  tr:nth-child(even) {
+    background-color: rgb(224, 224, 224);
+  }
+
+  td:first-child {
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+  }
+
+  td:last-child {
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+  }
+}
+</style>

src/views/CheckinView.vue

+<template>
+  <div class="body">
+    <div class="title-box">
+      <h1 class="title">Checkin</h1><br>
+      <div class="">
+        <button class="modify-button" @click="exportData()">Export data</button>
+      </div>
+    </div>
+    <DataTable :tableDatas="checkins" :tableTitles="tableTitles" :actionModify="'Checkout'" :actionDetail="'View detail'"
+      :actionDanger="'Delete'" :actionSubmitInput="'Add fee'" :functionModify="checkout" :functionDetail="viewDetail"
+      :functionDanger="destroy" :functionSubmitInput="addFee"></DataTable>
+    <DetailInfo :datas="CheckinDetail"></DetailInfo>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, } from 'vue'
+import axios from '../config'
+import DetailInfo from '../components/DetailInfo.vue'
+import DataTable from '../components/DataTable.vue'
+
+export default defineComponent({
+  name: 'CheckinView',
+  components: {
+    DetailInfo,
+    DataTable
+  },
+  data() {
+    return {
+      fee: {}
+    }
+  },
+
+  setup() {
+
+    const tableTitles = ref([
+      'Checkin ID',
+      'Booking ID',
+      'Guest name',
+      'Checkin Time',
+      'Checkout Time',
+      'Fee',
+      'Total Price'
+    ])
+    const checkins = ref();
+    /**
+     * Get all checkins
+     * 
+     * @return {void}
+     */
+    const getCheckin = async () => {
+      const response = await axios.get('checkin')
+      checkins.value = response.data
+    }
+
+    /**
+     * Checkin a booking
+     * 
+     * @param {number} id
+     * @param {number} bookingId
+     * 
+     * @return {void}
+     */
+    const checkout = async (id, bookingId) => {
+      console.log(id, bookingId)
+      try {
+        const response = await axios.post('checked/checkout', {
+          id: id,
+          bookingId: bookingId
+        })
+        console.log(response.data);
+      } catch (error) {
+        console.error(error.response.data)
+      }
+      getCheckin()
+    }
+
+    /**
+     * Delete a checkin
+     * 
+     * @param {number} id
+     * 
+     * @return {void}
+     */
+    const destroy = async (id) => {
+      try {
+        const response = await axios.delete('checked/delCheck', {
+          data: {
+            id: id
+          }
+        })
+        console.log(response.data);
+      } catch (error) {
+        console.error(error.response.data)
+      }
+      getCheckin()
+    }
+
+    /**
+     * View detail of a checkin
+     * 
+     * @param {number} employeeId
+     * @param {number} bookingId
+     * 
+     * @return {void}
+     */
+    const CheckinDetail = ref([]);
+
+    const viewDetail = async (checkinId, bookingId) => {
+      try {
+        const response = await axios.post('checkin/checkin-detail', {
+          checkinId: checkinId,
+          bookingId: bookingId
+        })
+        CheckinDetail.value = {
+          'Guest name': response.data[0].guest_name,
+          'Guest number': response.data[0].guest_number,
+          'Booked time': response.data[0].created_at,
+          'Employee id': response.data[1].id,
+          'Employee name': response.data[1].name,
+          'Employee role': response.data[1].role,
+        }
+        console.log(response.data[1])
+        document.getElementById('detail-modal').style.display = 'block'
+      } catch (error) {
+        console.error(error.response.data)
+      }
+    }
+
+    const closeModal = () => {
+      document.getElementById('detail-modal').style.display = 'none'
+    }
+
+    /**   
+    * Add fee to a checkin
+    * 
+    * @param {number} id
+    * 
+    * @return {void}
+    */
+
+    const addFee = async (id, fee) => {
+      try {
+        console.log(id, fee)
+        const response = await axios.post('checked/addFee', {
+          id: id,
+          fee: fee
+        })
+        console.log(response.data)
+        getCheckin()
+      } catch (error) {
+        console.error(error.response.data)
+      }
+    }
+
+    const exportData = async () => {
+
+      try {
+        axios({
+          method: 'GET',
+          url: 'checkin/export',
+          responseType: 'blob',
+        }).then(response => {
+          const url = window.URL.createObjectURL(new Blob([response.data]));
+          const link = document.createElement('a');
+          link.href = url;
+          link.setAttribute('download', 'data.csv'); // Specify the filename
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        });
+      } catch (error) {
+        console.error(error.response.data)
+      }
+    }
+
+    getCheckin()
+
+    return {
+      checkins,
+      exportData,
+      checkout,
+      destroy,
+      getCheckin,
+      viewDetail,
+      closeModal,
+      addFee,
+      tableTitles,
+      CheckinDetail
+    }
+  },
+})
+</script>
+
+<style scoped>
+.test {
+  max-width: 90%;
+}
+
+@media (min-width: 426px) {
+  .fee {
+    padding: 5px;
+  }
+
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 3px;
+    height: 100%;
+    width: 86vw;
+  }
+}
+
+@media (max-width:768px) {
+
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .submit-button {
+    border: none;
+    background: #93e4c1;
+    color: white;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+
+  .fee {
+    width: 100px;
+    border: none;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    padding: 5px;
+  }
+}
+</style>

src/views/CreateBookingView.vue

+<template>
+  <div class="body">
+    <div class="title-box">
+      <h1 class="title">Create Booking</h1>
+    </div>
+    <div class="input-box">
+      <div class="input-box-content">
+        <form @submit.prevent="checkAvailability()" class="">
+          <div class="input-title-box">
+            Enter information
+          </div>
+          <div class="error">
+            {{ errorValue }}
+          </div>
+          <div class="detail-modal" id="modal">
+            <div class="modal-content h-400px">
+              <div class="modal-header">
+                <span>Create booking</span>
+                <span class="close" @click="closeModal">&times;</span>
+              </div>
+              <div class="file-box mt-4">
+                <form class="booking-form" @submit.prevent="addBooking">
+                  <div class="">
+                    <label for="guest_name" class="">Guest Name</label>
+                    <div class="">
+                      <input type="text" id="guest_name" v-model="guest_name" name="guest_name" class="input">
+                    </div>
+                  </div>
+                  <div class="">
+                    <label for="guest_number" class="">Guest Number</label>
+                    <div class="">
+                      <input type="text" id="guest_number" v-model="guest_number" name="guest_number" class="input">
+                    </div>
+                  </div>
+                  <div>
+                    <label for="room" class="">Room</label>
+                    <div>
+                      <select class="input" name="room" id="room" v-model="room_id">
+                        <option v-for="room in availableRoom" :key="room.id" :value="room.id" >
+                          {{ room.name }} 
+                        </option>
+                      </select>
+                    </div>
+                    <button type="submit" class="submit-button h-50px mt-3 w-100">
+                    <i class="bi bi-check-circle"></i> Submit
+                  </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="">
+            <label for="arrive_date" class="">Arrive date</label>
+            <div class="">
+              <input type="date" id="arrive_date" v-model="arrive_date" name="arrive_date" class="input">
+            </div>
+          </div>
+          <div class="">
+            <label for="leave_date" class="">Leave date</label>
+            <div class="">
+              <input type="date" id="leave_date" v-model="leave_date" name="leave_date" class="input">
+            </div>
+          </div>
+          <button type="submit" class="submit-button w-100 h-50px mt-3">
+            <i class="bi bi-check-circle"></i> Check
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, defineComponent } from 'vue'
+import axios from '../config'
+import router from '@/router'
+
+export default defineComponent({
+  name: "CreateBookingView",
+  setup() {
+    const guest_name = ref('')
+    const guest_number = ref('')
+    const arrive_date = ref('')
+    const leave_date = ref('')
+    const room_id = ref('')
+    const deviceWidth = ref(window.innerWidth)
+    const availableRoom = ref('')
+    const err = ref('')
+    /**
+     * Add booking
+     * 
+     * @return {void}
+     */
+    const addBooking = async () => {
+      try {
+        const userId = (await axios.post('auth/me')).data.id
+        await axios.post('booking/create-booking', {
+          guest_name: guest_name.value,
+          guest_number: guest_number.value,
+          arrive_date: arrive_date.value,
+          room_id: room_id.value,
+          leave_date: leave_date.value,
+          guest_id: userId
+        })
+        router.push({ name: 'Booking' })
+      } catch (error) {
+        err.value = error.response.data.message
+        console.log(err.value)
+      }
+    }
+
+    const showAvailableRoom = async (id) => {
+      try {
+        let response = await axios.post('booking/show-available-room', {
+          id
+        })
+        availableRoom.value = response.data
+      } catch (error) {
+        err.value = error.response.data.message
+        console.log(err.value)
+      }
+    }
+
+    const openModal = () => {
+      document.getElementById('modal').style.display = 'block'
+    }
+
+    const closeModal = () => {
+      document.getElementById('modal').style.display = 'none'
+    }
+
+
+    const checkAvailability = async () => {
+      try {
+        let response = await axios.post('booking/check-availability', {
+          arrive_date: arrive_date.value,
+          leave_date: leave_date.value
+        })
+        showAvailableRoom(response.data)
+        openModal()
+      } catch (error) {
+        err.value = error.response.data.message
+        console.log(err.value)
+      }
+    }
+
+    return {
+      guest_name,
+      guest_number,
+      arrive_date,
+      room_id,
+      leave_date,
+      addBooking,
+      deviceWidth,
+      openModal,
+      closeModal,
+      err,
+      checkAvailability,
+      availableRoom
+    }
+  },
+
+  computed: {
+    errorValue() {
+      return this.err;
+    }
+  }
+})
+</script>
+
+<style scoped>
+.h-50px {
+  height: 50px;
+}
+
+.h-400px {
+  height: 400px;
+}
+
+.booking-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.modal-header {
+  display: flex;
+  color: white;
+  font-size: 25px;
+  font-weight: bold;
+  width: 100%;
+  padding: 15px;
+  background-color: #18d6dc;
+}
+
+@media (min-width: 769px) {
+  .input-title-box {
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 40px;
+  }
+
+  .error {
+    color: red;
+    font-weight: bold;
+  }
+
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 3px;
+    height: 100%;
+  }
+
+
+  .input-box-content {
+    display: flex;
+    background-color: white;
+    justify-content: space-between;
+    height: 100%;
+    justify-content: center;
+    padding: 50px;
+    padding-left: 100px;
+    padding-right: 100px;
+    border: none;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px 5px #d5d5d5;
+  }
+
+  .input-box {
+    margin-top: 40px;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .input {
+    border: none;
+    background-color: rgb(240, 240, 240);
+    border-radius: 3px;
+    width: 300px;
+    height: 50px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    /* 15% from the top and centered */
+    border: 1px solid #888;
+    max-width: 800px;
+    min-height: 500px;
+
+    /* Could be more or less, depending on screen size */
+}
+  .input-title-box {
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 40px;
+  }
+
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .input-box {
+    margin-top: 40px;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .input-box-content {
+    display: flex;
+    background-color: white;
+    justify-content: space-between;
+    height: 100%;
+    min-width: 100%;
+    justify-content: center;
+    border: none;
+    border-radius: 3px;
+    padding: 50px;
+    box-shadow: 5px 5px 5px 5px #d5d5d5;
+  }
+
+  .error {
+    color: red;
+    font-weight: bold;
+  }
+
+  .input {
+    border: none;
+    background-color: rgb(240, 240, 240);
+    border-radius: 3px;
+    width: 250px;
+    height: 50px;
+    margin-bottom: 20px;
+  }
+
+  .submit-button {
+    border: none;
+    background: #93e4c1;
+    color: white;
+    border-radius: 3px;
+    width: 250px;
+    height: 50px;
+    margin-top: 20px;
+  }
+
+}
+</style>

src/views/DashboardView.vue

+<template>
+  <div class="body">
+    <div class="title-box">
+      <h1 class="title">Dashboard</h1>
+    </div>
+    <div class="summary-box">
+      <div class="summary">
+        <div class="icon-box">
+          <i class="bi bi-cash-stack money-icon"></i>
+        </div>
+        <div class="summary-title">
+          Today's interest
+        </div>
+        <div class="summary-value">
+          {{ bookingInfos.total }}
+        </div>
+      </div>
+      <div class="summary">
+        <div class="icon-box">
+          <i class="bi bi-bag-check checkin-icon"></i>
+        </div>
+        <div class="summary-title">
+          This month checkin
+        </div>
+        <div class="summary-value">
+          {{ bookingInfos.lastMonth }}
+        </div>
+      </div>
+      <div class="summary">
+        <div class="icon-box">
+          <i class="bi bi-safe2 safe-icon"></i>
+        </div>
+        <div class="summary-title">
+          This month interest
+        </div>
+        <div class="summary-value">
+          {{ bookingInfos.lastMonthTotal }}
+        </div>
+      </div>
+    </div>
+    <div class="chart">
+      <h2>Total booking of each month this year</h2>
+      <div>
+        <LineChart v-if="loaded" :chartData="LineChartData" :chartOptions="LineChartOptions" />
+      </div>
+      <h2>Interest of each month this year</h2>
+      <div>
+        <LineChart v-if="loaded" :chartData="BarChartData" :chartOptions="BarChartOptions" />
+      </div>
+    </div>
+    <div>
+      <h2>Income after expense</h2>
+      <div>
+        <LineChart v-if="loaded" :chartData="PieChartData" :chartOptions="PieChartOptions" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import axios from '../config'
+import LineChart from '../components/LineChart.vue'
+
+export default defineComponent({
+  name: 'DashboardView',
+  components: {
+    LineChart
+  },
+  data() {
+    return {
+      loaded: false,
+      LineChartData: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        datasets: [
+          {
+            label: 'Booking',
+            data: [],
+            borderColor: 'rgba(54, 162, 235, 1)',
+            borderWidth: 1,
+          },
+        ],
+      },
+      LineChartOptions: {
+        responsive: true,
+        maintainAspectRatio: true,
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: 'Booking'
+            },
+            ticks: {
+              beginAtZero: true
+            }
+          },
+          y: {
+            min: 0,
+            ticks: {
+              stepSize: 1
+            },
+            title: {
+              display: true,
+              text: 'Month'
+            }
+          },
+        },
+        elements: {
+          point: {
+            backgroundColor: 'red'
+          }
+        }
+      },
+      BarChartData: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        datasets: [{
+          label: 'Income',
+          data: [],
+          backgroundColor: 'rgba(54, 162, 235, 0.2)',
+          borderColor: 'rgba(54, 162, 235, 1)',
+          borderWidth: 1,
+          type: 'bar'
+        }]
+      },
+      BarChartOptions: {
+        scales: {
+          x: {
+            title: {
+              display: true,
+            },
+            ticks: {
+              beginAtZero: true
+            }
+          },
+          y: {
+            title: {
+              display: true,
+              text: 'Month'
+            }
+          }
+        }
+      },
+      PieChartData: {
+        labels: ['Income', 'Employee salary', 'expense', 'tax'],
+        datasets: [{
+          backgroundColor: ['#41B883', '#E46651', '#00D8FF', 'rgb(114,64,109)'],
+          data: [],
+          type: 'pie',
+          labels: ['Income', 'Employee salary', 'expense', 'tax'],
+        }]
+      },
+      //make legend show all 4 labels
+      PieChartOptions: {
+        responsive: true,
+        maintainAspectRatio: true,
+      }
+    }
+  },
+
+
+  setup() {
+    const tableTitles = ref(['ID', 'Guest Name', 'Guest Number', 'Room ID', 'Checkin time'])
+    const guestInfos = ref([])
+    const checkinToday = ref()
+    const bookingInfos = ref([])
+    const incomeAndSalary = ref([])
+    const getData = async () => {
+      try {
+        let results = await axios.get('dashboard')
+        guestInfos.value = results.data.guestInfos
+        bookingInfos.value = results.data.bookingInfos
+      } catch (error) {
+        console.log(error)
+      }
+    }
+
+    getData()
+
+    return {
+      guestInfos,
+      bookingInfos,
+      incomeAndSalary,
+      tableTitles,
+      checkinToday
+    }
+  },
+
+  async mounted() {
+    this.loaded = false
+    try {
+      const bookingThisYear = await axios.get('dashboard/booking-this-year')
+      this.LineChartData.datasets[0].data = bookingThisYear.data
+      const interestThisYear = await axios.get('dashboard/interest-this-year')
+      this.BarChartData.datasets[0].data = interestThisYear.data
+      const IncomeAndSalary = await axios.get('dashboard/income-this-month')
+      this.PieChartData.datasets[0].data = IncomeAndSalary.data
+      this.loaded = true
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+})
+
+</script>
+
+<style scoped>
+@media (min-width: 426px) {
+   .body {
+     background-color: rgb(240, 240, 240);
+     display: flex;
+     flex-direction: column;
+     padding: 20px;
+     border-radius: 3px;
+     min-height: 100%;
+   }
+
+   .summary-box {
+     display: flex;
+     justify-content: space-evenly;
+     margin-top: 10px;
+   }
+
+   .summary {
+     background-color: rgb(255, 255, 255);
+     box-shadow: 5px 5px 5px 5px rgb(235, 234, 234);
+     border-radius: 10px;
+     width: 250px;
+     padding: 15px
+   }
+
+   .summary-title {
+     font-size: 10px;
+     color: rgb(181, 181, 181);
+      text-align: center;
+   }
+
+   .icon-box {
+     font-size: 80px;
+     text-align: center;
+   }
+
+   .money-icon {
+     color: rgb(0, 255, 0);
+   }
+
+   .checkin-icon {
+     color: rgb(255, 0, 0);
+   }
+
+   .chart {
+     display: flex;
+     flex-direction: column;
+     gap: 20px;
+     margin-top: 50px;
+   }
+
+   .safe-icon {
+     color: rgb(252, 255, 64);
+   }
+
+   .summary-value {
+     font-size: 30px;
+     font-weight: bold;
+      text-align: center;
+   }
+ }
+
+ @media (max-width: 425px) {
+   .body {
+     background-color: rgb(240, 240, 240);
+     display: flex;
+     flex-direction: column;
+     min-height: 100vh;
+   }
+
+   .summary-box {
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     padding: 10px;
+   }
+
+   .summary {
+     background-color: rgb(255, 255, 255);
+     box-shadow: 5px 5px 5px 5px rgb(235, 234, 234);
+     border-radius: 10px;
+     width: 250px;
+     padding: 15px;
+     margin: 10px;
+     align-self: center;
+     width: 100%;
+   }
+
+   .icon-box {
+     font-size: 50px;
+     text-align: center;
+   }
+
+   .money-icon {
+     color: rgb(0, 255, 0);
+   }
+
+   .checkin-icon {
+     color: rgb(255, 0, 0);
+   }
+
+   .safe-icon {
+     color: rgb(252, 255, 64);
+   }
+
+   .summary-value {
+     font-size: 30px;
+     font-weight: bold;
+   }
+
+   .summary-title {
+     font-size: 10px;
+     color: rgb(181, 181, 181);
+   }
+ }
+</style>

src/views/EmployeeView.vue

+<template>
+  <div class="body">
+    <div class="title-box">
+      <h1 class="title">Employee</h1>
+    </div>
+    <DataTable :tableDatas="employees" :tableTitles="tableTitles" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import DataTable from '@/components/DataTable.vue'
+
+export default defineComponent({
+  name: 'EmployeeView',
+  components: {
+    DataTable
+  },
+  data() {
+    return {
+      employees: [],
+      tableTitles: [
+        'ID',
+        'Name',
+        'Role',
+        'Shift',
+        'Day off',
+        'Salary',
+        'Status'
+      ]
+    }
+  },
+
+  async mounted() {
+    let results = await this.$axios.get('employee')
+    this.employees = results.data
+  }
+})
+</script>
+
+<style scoped>
+@media (min-width: 768px) {
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 3px;
+    height: 100%;
+  }
+
+}
+
+@media (max-width: 768px) {
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+}
+</style>

src/views/GuestView.vue

+<template>
+    <div class="body">
+        <div class="title-box">
+            <h1 class="title">Guest</h1>
+        </div>
+        <div>
+            <DataTable :tableDatas="checkinToday" :tableTitles="tableTitles"></DataTable>
+        </div>
+    </div>
+</template>
+
+<script>
+import DataTable from '../components/DataTable.vue'
+import { ref } from 'vue'
+import axios from '../config'
+
+export default {
+    name: 'GuestView',
+    components: {
+        DataTable
+    },
+    setup() {
+        const checkinToday = ref([]);
+        const tableTitles = ['Guest id', 'Guest name', 'Total booking', 'Email address', 'Booking this month', 'Joined date']
+
+        /**
+         * Get all bookings
+         *
+         * @return {void}
+         */
+        const getGuestStatistic = async () => {
+            const response = await axios.get('guest-statistic')
+            checkinToday.value = response.data
+
+            console.log(response.data)
+        }
+        getGuestStatistic()
+
+        return {
+            checkinToday,
+            tableTitles
+        }
+    }
+}
+</script>
+
+<style scoped>
+@media (min-width: 769px) {
+    .body {
+        background-color: rgb(240, 240, 240);
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        border-radius: 3px;
+        height: 100%;
+    }
+}
+</style>
\ No newline at end of file

src/views/LoginView.vue

+<template>
+  <div class="body">
+    <form @submit.prevent="submitForm" class="login-form-box">
+      <div class="input-form">
+        <div class="input-title">Login</div>
+        <div class="error">
+          {{ errors }}
+        </div>
+        <div class="input-box">
+          <div for="username" class="input-label">Username</div>
+          <input type="text" id="username" name="username" v-model="username" class="input">
+        </div>
+        <div class="input-box">
+          <div for="password" class="input-label">Password</div>
+          <input type="password" id="password" name="password" v-model="password" class="input">
+        </div>
+        <button type="submit" class="login-button">Login</button>
+        <div class="forgot-password" @click="openImportModal">Forgot password?</div>
+      </div>
+    </form>
+    <div>
+    </div>
+    <div class="detail-modal" id="import-modal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <span>Forgot password</span>
+          <span class="close" @click="closeImportModal">&times;</span>
+        </div>
+        <div class="file-box">
+          <div class="success" :class="{'hidden': success}">Please check your email</div>
+          <form @submit.prevent="forgotPassword()">
+            <input type="email" class="form-control form-control-xlg" placeholder="Enter your email" v-model="email">
+            <button type="submit" class="submit-button w-100 mt-5">
+              <div class="flex">
+                <div class="lds-ring loading" :class="{ 'active': isPending }">
+                  <!-- :class="{ 'active': isPending }" -->
+                  <div></div>
+                  <div></div>
+                  <div></div>
+                  <div></div>
+                </div>
+                <div class="d-flex align-items-center">
+                  Submit
+                </div>
+              </div>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import store from '../store';
+// import { createStore } from 'vuex';
+import axios from '../config'
+import router from '../router'
+
+export default defineComponent({
+  name: 'LoginView',
+
+  setup() {
+    // const store = createStore(storeConfig)
+    const username = ref('');
+    const password = ref('');
+    const errors = ref('');
+    /** 
+     * Submit form
+     * 
+     * @return {void}
+     */
+    const submitForm = async () => {
+      try {
+        let response = await axios.post('auth/login', {
+          username: username.value,
+          password: password.value
+        })
+        localStorage.setItem('token', response.data.access_token)
+        localStorage.setItem('isLoggedIn', true)
+        router.push('/')
+        let response2 = await axios.post('auth/me')
+        const role = response2.data.role
+        localStorage.setItem('role', role)
+        store.commit('setRole')
+      } catch (error) {
+        errors.value = error.response.data.error
+      }
+    }
+
+    const email = ref('');
+    const isPending = ref(true);
+    const success = ref(true)
+    const forgotPassword = async () => {
+      try {
+        isPending.value = false
+        let response = await axios.post('/forgot-password', {
+          email: email.value,
+        })
+        console.log(response.data);
+      } catch (error) {
+        errors.value = error.response.data.error
+      } finally {
+        isPending.value = true
+        success.value = false
+      }
+    }
+
+    const openImportModal = () => {
+      document.getElementById('import-modal').style.display = 'block'
+    }
+
+    const closeImportModal = () => {
+      document.getElementById('import-modal').style.display = 'none'
+    }
+
+    return {
+      username,
+      password,
+      errors,
+      submitForm,
+      openImportModal,
+      closeImportModal,
+      email,
+      forgotPassword,
+      isPending,
+      success
+    };
+  },
+})
+</script>
+
+<style scoped>
+.active {
+  visibility: hidden;
+}
+
+.flex {
+  display: flex;
+  gap: 60px;
+  flex-direction: row-reverse;
+
+}
+
+.forgot-password:hover {
+  cursor: pointer;
+  text-decoration: underline blue;
+  color: blue;
+}
+
+.forgot-password {
+  font-size: 12px;
+  margin-top: 10px;
+  color: rgb(156, 156, 156);
+}
+
+.hidden {
+  display: none;
+}
+
+.file-box {
+  width: 50%;
+  padding: 30px;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  /* 15% from the top and centered */
+  border: 1px solid #888;
+  max-width: 600px;
+  min-height: 300px;
+  /* Could be more or less, depending on screen size */
+}
+
+.modal-header {
+  display: flex;
+  color: white;
+  font-size: 25px;
+  font-weight: bold;
+  width: 100%;
+  padding: 15px;
+  background-color: #18d6dc;
+}
+
+.body {
+  background-color: rgb(240, 240, 240);
+  display: flex;
+  flex-direction: column;
+  padding: 100px;
+  border-radius: 3px;
+  min-height: 100vh;
+}
+</style>

src/views/ModifyView.vue

+<template>
+	<div class="body">
+		<div class="title-box">
+			<h1 class="title">Modify</h1>
+		</div>
+		<form @submit.prevent="update" class="form-box">
+			<div class="form">
+				<div class="column">
+					<div class="input-box">
+						<label for="name" class="label">
+							<span>
+								Room Name
+							</span>
+							<button type="button" @click="showInput('name')" class="modify-button">Modify</button>
+						</label>
+						<input type="text" id="name" name="name" v-model="name" class="input">
+					</div>
+					<div class="input-box">
+						<label for="image_first" class="label">
+							<span>
+								First Image
+							</span>
+							<button type="button" @click="showInput('image_first')" class="modify-button">Modify</button>
+						</label>
+						<input type="file" ref="fileInput" @change="imageFirst" id="image_first" name="image_first"
+							class="input">
+					</div>
+					<div class="input-box">
+						<label for="image_second" class="label">
+							<span>
+								Second Image
+							</span>
+							<button type="button" @click="showInput('image_second')" class="modify-button">Modify</button>
+						</label>
+						<input type="file" ref="fileInput" @change="imageSecond" id="image_second" name="image_second"
+							class="input">
+					</div>
+					<div class="input-box">
+						<label for="image_third" class="label">
+							<span>
+								Third Image
+							</span>
+							<button type="button" @click="showInput('image_third')" class="modify-button">Modify</button>
+						</label>
+						<input type="file" ref="fileInput" @change="imageThird" id="image_third" name="image_third"
+							class="input">
+					</div>
+					<div class="input-box">
+						<label for="type" class="label">
+							<span>
+								Type
+							</span>
+							<button type="button" @click="showInput('type')" class="modify-button">Modify</button>
+						</label>
+						<input type="text" id="type" name="type" v-model="type" class="input">
+					</div>
+					<div class="input-box">
+						<label for="hour_price" class="label">
+							<span>
+								Hour Price
+							</span>
+							<button type="button" @click="showInput('hour_price')" class="modify-button">Modify</button>
+						</label>
+						<input type="text" id="hour_price" name="hour_price" v-model="hour_price" class="input">
+					</div>
+					<div class="input-box">
+						<label for="day_price" class="label">
+							<span>
+								Day Price
+							</span>
+							<button type="button" @click="showInput('day_price')" class="modify-button">Modify</button>
+						</label>
+						<input type="text" id="day_price" name="day_price" v-model="day_price" class="input">
+					</div>
+				</div>
+				<div class="column">
+					<div class="input-box">
+						<label for="size" class="label">
+							<span>
+								Size
+							</span>
+							<button type="button" @click="showInput('size')" class="modify-button">Modify</button>
+						</label>
+						<input type="number" id="size" name="size" v-model="size" class="input">
+					</div>
+					<div class="input-box">
+						<label class="label">
+							<span>
+								Balcony
+							</span>
+							<button type="button" @click="showInput('balcony')" class="modify-button">Modify</button>
+						</label>
+						<div>
+							<div class="">
+								<select name="balcony" id="balcony" v-model="balcony" class="input">
+									<option value="1">True</option>
+									<option value="0">False</option>
+								</select>
+							</div>
+						</div>
+					</div>
+					<div class="input-box">
+						<label for="view" class="label">
+							<span>
+								View
+							</span>
+							<button type="button" @click="showInput('view')" class="modify-button">Modify</button>
+						</label>
+						<input type="text" id="view" name="view" v-model="view" class="input">
+					</div>
+					<div class="input-box">
+						<label for="description" class="label">
+							<span>
+								Description
+							</span>
+							<button type="button" @click="showInput('description')" class="modify-button">Modify</button>
+						</label>
+						<input type="text" id="description" name="description" v-model="description" class="input">
+					</div>
+					<div class="input-box">
+						<label class="label">
+							<span>
+								Smoking
+							</span>
+							<button type="button" @click="showInput('smoking')" class="modify-button">Modify</button>
+						</label>
+						<div>
+							<div class="">
+								<select name="smoking" id="smoking" v-model="smoking" class="input">
+									<option value="1">True</option>
+									<option value="0">False</option>
+								</select>
+							</div>
+						</div>
+					</div>
+					<div class="input-box">
+						<label for="floor" class="label">
+							<span>
+								Floor
+							</span>
+							<button type="button" @click="showInput('floor')" class="modify-button">Modify</button>
+						</label>
+						<input type="number" id="floor" name="floor" v-model="floor" class="input">
+					</div>
+					<div class="input-box">
+						<label class="label">
+							<span>
+								Bathtub
+							</span>
+							<button type="button" @click="showInput('bathtub')" class="modify-button">Modify</button>
+						</label>
+						<div>
+							<div class="">
+								<select name="bathtub" id="bathtub" v-model="bathtub" class="input">
+									<option value="1">True</option>
+									<option value="0">False</option>
+								</select>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="">
+					<button type="submit" class="submit-button w-100" :class="{ 'mt-3': width <= 425 }">
+						<i class="bi bi-send">submit</i>
+					</button>
+				</div>
+			</div>
+		</form>
+	</div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import axios from '../config'
+import { useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+	name: 'ModifyView',
+
+	setup() {
+		const width = ref(window.innerWidth)
+		const router = useRouter()
+		const route = useRoute()
+		const id = route.params.id
+		const imageFirstFile = ref(null)
+		const imageSecondFile = ref(null)
+		const imageThirdFile = ref(null)
+
+		const imageFirst = (event) => {
+			imageFirstFile.value = event.target.files[0]
+		}
+
+		const imageSecond = (event) => {
+			imageSecondFile.value = event.target.files[0]
+		}
+
+		const imageThird = (event) => {
+			imageThirdFile.value = event.target.files[0]
+		}
+
+
+		/**
+		 * Get room data
+		 *
+		 * @return void
+		 */
+
+		const update = async () => {
+			const formData = new FormData()
+			const form = document.querySelector('form')
+			formData.append('id', id)
+			for (let input of form) {
+				if (input.value !== '') {
+					if (input.name == 'image_first') {
+						formData.append('image_first', imageFirstFile.value)
+					}
+					if (input.name == 'image_second') {
+						formData.append('image_second', imageSecondFile.value)
+					}
+					if (input.name == 'image_third') {
+						formData.append('image_third', imageThirdFile.value)
+					}
+					else if (input.name !== 'image_first' && input.name !== 'image_second' && input.name !== 'image_third') {
+						formData.append(input.name, input.value)
+					}
+				}
+
+			}
+			// for (const value of formData.values()) {
+			//   conse.log(value);
+			// }
+			await axios.post('modify', formData, {
+				headers: {
+					'Content-Type': 'multipart/form-data'
+				}
+			})
+			router.push({ name: 'Room' })
+
+		}
+		return {
+			update,
+			id,
+			router,
+			imageFirst,
+			imageSecond,
+			imageThird,
+			width
+		}
+	},
+
+	methods: {
+		//display input field on click
+		showInput(input) {
+			console.log(input)
+			const id = ref(document.getElementById(input));
+			console.log(id.value.style)
+			if (id.value.style.display === "") {
+				id.value.style.display = "block";
+			} else {
+				id.value.style.display = "";
+			}
+		}
+	}
+})
+</script>    
+
+<style scoped>
+.form-box {
+	border: 2px rgb(222, 222, 222) solid;
+	border-radius: 15px;
+	padding: 5px;
+}
+
+.input-box {
+	border-bottom: 1px solid rgb(178, 178, 178);
+}
+
+@media (min-width: 769px) {
+	.body {
+		background-color: rgb(240, 240, 240);
+		display: flex;
+		flex-direction: column;
+		padding: 20px;
+		border-radius: 3px;
+		min-height: 100%;
+	}
+
+	.input {
+		display: none;
+		border: none;
+		border-radius: 5px;
+	}
+
+	.form {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.column {
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+	}
+
+	.label {
+		padding: 10px;
+		border-radius: 5px;
+		font-size: 13px;
+		width: 300px;
+		display: flex;
+		justify-content: space-between;
+		color: rgb(178, 178, 178);
+	}
+
+
+}
+
+@media (max-width:768px) {
+	.body {
+		background-color: rgb(240, 240, 240);
+		display: flex;
+		flex-direction: column;
+		padding: 20px;
+		border-radius: 3px;
+		min-height: 100%;
+	}
+
+	.input {
+		display: none;
+		border: none;
+		border-radius: 5px;
+		width: 100%;
+	}
+	.label {
+		padding: 10px;
+		border-radius: 5px;
+		font-size: 13px;
+		width: 300px;
+		display: flex;
+		justify-content: space-between;
+		color: rgb(178, 178, 178);
+	}
+
+}
+</style>

src/views/RegisterView.vue

+<template>
+  <div class="body">
+    <form @submit.prevent="register" class="login-form-box">
+      <div class="input-form">
+        <div class="input-title">Register</div>
+        <div class="success" :class="{'hidden': success}">Registered successfully, please verify your email</div>
+        <div class="input-box">
+          <div for="username" class="input-label">Username</div>
+          <input type="text" id="username" name="username" v-model="username" class="input">
+        </div>
+        <div class="input-box">
+          <div for="email" class="input-label">Email</div>
+          <input type="email" class="input" id="email" name="email" v-model="email">
+        </div>
+        <div class="input-box-radio">
+          <div for="role" class="input-label">Role</div>
+          <div class="radio">
+            <div>
+              <input type="radio" id="admin" name="role" value="admin" v-model="role">
+              <label for="admin" class="input-label">Admin</label>
+            </div>
+            <div>
+              <input type="radio" id="employee" name="role" value="employee" v-model="role">
+              <label for="employee" class="input-label">Employee</label>
+            </div>
+          </div>
+        </div>
+        <div class="input-box">
+          <div for="password" class="input-label">Password</div>
+          <input type="password" id="password" name="password" v-model="password" class="input">
+        </div>
+        <div class="input-box">
+          <div for="confirm-password" class="input-label">Confirm password</div>
+          <input type="password" class="input" id="confirm_password" name="confirm_password" v-model="confirm_password">
+        </div>
+        <button type="submit" class="login-button">
+          <div class="flex">
+            <div class="lds-ring loading" :class="{ 'active': isPending }" >
+              <!-- :class="{ 'active': isPending }" -->
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+            <div class="d-flex align-items-center">
+              Register
+            </div>
+          </div>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import axios from '../config'
+import { ref, defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'RegisterView',
+
+  setup() {
+    const username = ref('')
+    const password = ref('')
+    const confirm_password = ref('')
+    const email = ref('')
+    const errors = ref('')
+    const role = ref('')
+    const isPending = ref(true)
+    const success = ref(true)
+    /**
+     * Register
+     * 
+     * @return {void}
+     */
+    const register = async () => {
+      try {
+        isPending.value = false
+        const response = await axios.post('register', {
+          username: username.value,
+          password: password.value,
+          confirm_password: confirm_password.value,
+          email: email.value,
+          role: role.value,
+        })
+
+        console.log(response.data);
+        success.value = false
+      }
+      catch (error) {
+        errors.value = error.response.data.message
+        alert(errors.value);
+      } finally {
+        isPending.value = true
+      }
+    }
+
+    return {
+      username,
+      password,
+      confirm_password,
+      email,
+      errors,
+      role,
+      isPending,
+      success,
+      register,
+    };
+  }
+})
+</script>
+
+<style scoped>
+
+.hidden {
+  display: none;
+}
+.active {
+  visibility: hidden;
+}
+
+.loading {
+  font-size: 1px;
+}
+
+.body {
+  background-color: rgb(240, 240, 240);
+  display: flex;
+  flex-direction: column;
+  padding: 100px;
+  border-radius: 3px;
+  min-height: 100vh;
+}
+
+.input-box-radio {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  width: 250px;
+}
+
+.flex {
+  display: flex;
+  gap: 60px;
+  flex-direction: row-reverse;
+
+}
+
+.radio {
+  display: flex;
+  gap: 50px;
+}
+</style>

src/views/ResetPasswordView.vue

+<template>
+    <form @submit.prevent="resetPassword()">
+        <h2>Reset Password</h2>
+        <div class="success">
+            {{ noti }}
+        </div>
+        <div>
+            <label for="email">Email</label>
+            <input type="email" id="email" name="email" v-model="email" required>
+        </div>
+        <div>
+            <label for="password">New Password</label>
+            <input type="password" id="password" name="password" v-model="password" required>
+        </div>
+        <div>
+            <label for="confirm-password">Confirm Password</label>
+            <input type="password" id="confirm-password" name="confirm-password" v-model="confirmPassword" required>
+        </div>
+        <div>
+            <input type="hidden" name="token" :value="token">
+        </div>
+        <button type="submit">Reset Password</button>
+    </form>
+</template>
+
+<script>
+import router from "@/router";
+import axios from "../config";
+import { ref } from "vue";
+
+export default {
+    name: "ResetPasswordView",
+
+    setup() {
+        //get token from url
+        const token = window.location.href.split("/").pop();
+        console.log(token);
+
+        const email = ref("");
+        const password = ref("");
+        const confirmPassword = ref("");
+        const timer = ref(6)
+        const noti = ref('')
+        const resetPassword = async () => {
+            try {
+                const response = await axios.post("reset-password", {
+                    token: token,
+                    email: email.value,
+                    password: password.value,
+                    password_confirmation: confirmPassword.value,
+                });
+                console.log(response.data);
+            } catch (error) {
+                console.log(error.response.data.message);
+            } finally {
+                const interval = setInterval(() => {
+                    timer.value -= 1; // Decrease countdown by 1 every second
+                    noti.value = "Change password successfully, redirect to login page in " + timer.value + " seconds";
+                    if (timer.value === 0) {
+                        clearInterval(interval); // Stop the interval when countdown reaches 0
+                        router.push('/'); // Redirect after countdown reaches 0
+                    }
+                }, 1000);
+            }
+        }
+
+        return {
+            token,
+            email,
+            password,
+            confirmPassword,
+            resetPassword,
+            timer,
+            noti
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+form {
+    width: 700px;
+    margin: auto;
+    padding: 20px;
+    border: 0.5px solid black;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+}
+
+h2 {
+    text-align: center;
+    font-weight: bold;
+}
+
+div {
+    margin-bottom: 10px;
+}
+
+label {
+    display: block;
+}
+
+input[type="email"],
+input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+}
+
+button[type="submit"] {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: rgb(258, 187, 0);
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+</style>
\ No newline at end of file

src/views/RoomView.vue

+<template>
+  <div class="body">
+    <div class="title-box">
+      <h1 class="title">Room</h1>
+      <div class="">
+        <button class="modify-button" @click="openImportModal">Import room</button>
+        <div class="detail-modal" id="import-modal">
+          <div class="modal-content">
+            <div class="modal-header">
+              <span>Detail</span>
+              <span class="close" @click="closeImportModal">&times;</span>
+            </div>
+            <div class="file-box">
+              <input class="form-control form-control-lg" type="file" :v-model="fileInput" @change="handleFileUpload" />
+              <button @click="uploadFile" class="submit-button">Upload</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <DataTable :tableDatas="tableData" :tableTitles="tableTitles" :actionModify="'Modify'" :actionDetail="'View detail'"
+        :functionDetail="viewRoomDetail" :functionModify="modifyRoom" :key="key"></DataTable>
+      <div>
+        <DetailInfo :datas="roomInfo"></DetailInfo>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DataTable from '../components/DataTable.vue'
+import { ref} from 'vue'
+import axios from '../config'
+import DetailInfo from '../components/DetailInfo.vue'
+import router from '../router'
+
+export default {
+  name: 'TestingView',
+  components: {
+    DataTable,
+    DetailInfo
+  },
+
+  setup() {
+    const tableData = ref({})
+    const roomInfo = ref({})
+    const modalStatus = ref(false)
+    // const fileInput = ref(null)
+    const file = ref(null)
+    const tableTitles = ref([
+      'Room ID',
+      'Room Name',
+      'Type',
+      'Hour price',
+      'Day price',
+      'Size',
+    ])
+    const getRooms = async () => {
+      let results = await axios.get('room')
+      tableData.value = results.data
+    }
+
+    const modifyRoom = (id) => {
+      //router push to modify room
+      router.push('room/modify/' + id)
+    }
+
+    const handleFileUpload = (event) => {
+      file.value = event.target.files[0];
+    }
+
+    const viewRoomDetail = async (id) => {
+      let response = await axios.post('room/room-detail', {
+        id: id
+      })
+      roomInfo.value = {
+        'Id': response.data.id,
+        'Name': response.data.name,
+        'Type': response.data.type,
+        'Hour price': response.data.hour_price,
+        'Day price': response.data.day_price,
+        'Status': response.data.status,
+        'Size': response.data.size,
+        'Balcony': response.data.balcony,
+        'View': response.data.view,
+        'Smoking': response.data.smoking,
+        'Floor': response.data.floor,
+        'Bathtub': response.data.bathtub,
+      }
+      document.getElementById('detail-modal').style.display = 'block'
+    }
+
+    const openImportModal = () => {
+      document.getElementById('import-modal').style.display = 'block'
+    }
+
+    const closeImportModal = () => {
+      document.getElementById('import-modal').style.display = 'none'
+    }
+
+    const uploadFile = async () => {
+      let formData = new FormData();
+      formData.append('file', file.value);
+
+      await axios.post('/room/storeRoomFile', formData)
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.log(error);
+        }).finally(() => {
+          closeImportModal()
+        });
+        getRooms()
+    }
+
+    getRooms()
+    return {
+      tableData,
+      tableTitles,
+      viewRoomDetail,
+      handleFileUpload,
+      roomInfo,
+      modalStatus,
+      closeImportModal,
+      modifyRoom,
+      openImportModal,
+      uploadFile,
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+.file-box {
+  width:50%;
+  padding:30px;
+  align-self: center;
+  display:flex;
+  flex-direction: column;
+  gap:50px;
+}
+.modal-header {
+  display: flex;
+  color: white;
+  font-size: 25px;
+  font-weight: bold;
+  width: 100%;
+  padding: 15px;
+  background-color: #18d6dc;
+}
+
+@media (min-width: 769px) {
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 3px;
+    min-height: 100%;
+  }
+
+}
+
+@media (max-width:768px) {
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+}
+</style>

src/views/UserListView.vue

+<template>
+  <div class="body">
+    <div class="title-box">
+      <h1 class=title>List of user</h1>
+    </div>
+    <div>
+      <DataTable :tableDatas="users" :tableTitles="tableTitles" :actionDanger="'Delete'" :functionDanger="deleteUser"></DataTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import axios from '../config'
+import DataTable from '../components/DataTable.vue'
+
+export default defineComponent({
+  name: 'UserListView',
+  components: {
+    DataTable
+  },
+
+  setup() {
+    const users = ref([]);
+    const tableTitles = ref(['User id', 'Username', 'email', 'User role'])
+
+    /**
+     * Get all users
+     * 
+     * @return {void}
+     */
+    const getUser = async () => {
+      const response = await axios.get('userlist')
+      users.value = response.data
+    }
+
+    /**
+     * Delete a user
+     * 
+     * @param {int} id 
+     * 
+     * @return {void}
+     */
+    const deleteUser = async (id) => {
+      console.log(id)
+      try {
+        const response = await axios.delete('userlist/del', {
+          data: {
+            id: id,
+          },
+        })
+        console.log(response.data)
+        getUser()
+      } catch (error) {
+        console.error(error.response.data)
+      }
+    }
+    getUser()
+
+    return {
+      users,
+      deleteUser,
+      tableTitles
+    }
+  },
+})
+</script>
+<style scoped>
+@media (min-width: 769px) {
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 3px;
+    height: 100%;
+  }
+
+  .fee-box {
+    display: flex;
+  }
+
+  .fee {
+    width: 100px;
+    border: none;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+}
+
+@media (max-width: 768px) {
+  .body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .danger-button {
+    border: none;
+    border-radius: 20px;
+    background: #ff8585;
+    color: white;
+  }
+
+}
+</style>

src/views/VerifyEmail.vue

+<template>
+    <div class="body">
+        <div class="content">
+            <div class="text">
+                <div class="icon">
+                    <i class="bi bi-envelope-check-fill"></i>
+                </div>
+                <h1>Email verification</h1>
+                <div>{{noti}} </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import router from '@/router'
+
+export default {
+    name: 'VerifyEmail',
+
+    setup() {
+        const timer = ref(6); // Countdown timer
+        const noti = ref()
+
+        const interval = setInterval(() => {
+          timer.value -= 1; // Decrease countdown by 1 every second
+          noti.value = "You have been verified, redirect to login page in " + timer.value + " seconds";
+          if (timer.value === 0) {
+            clearInterval(interval); // Stop the interval when countdown reaches 0
+            router.push('/'); // Redirect after countdown reaches 0
+          }
+        }, 1000);
+
+        return {
+            noti, 
+            timer
+        }
+    }
+}
+</script>
+
+<style scoped>
+.body {
+    background-color: rgb(240, 240, 240);
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 3px;
+    height: 100vh;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+}
+
+.icon {
+    font-size: 100px;
+    color: #93e4c1;
+}
+
+h1 {
+    font-size: 50px;
+    font-weight: bold;
+}
+
+.text {
+    margin-top: 100px;
+    padding: 100px;
+    text-align: center;
+    background-color: white;
+
+}
+</style>
\ No newline at end of file