Add front

frontend/package-lock.json

@@ -8,9 +8,11 @@
       "name": "project",
       "version": "0.1.0",
       "dependencies": {
-        "axios": "^1.3.0",
+        "axios": "^1.4.0",
+        "bootstrap": "^5.2.3",
+        "bootstrap-vue": "^2.23.1",
         "core-js": "^3.8.3",
-        "vue": "^3.2.13",
+        "vue": "^3.3.4",
         "vue-router": "^4.0.3"
       },
       "devDependencies": {
@@ -1946,12 +1948,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",
@@ -2817,36 +2910,36 @@
       "dev": true
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-5le1qYSBgLWg2jdLrbydlhnPJkkzMw46UrRUvTnOKlfg6pThtm9ohhqBhNPHbr0RcM1MCbK5WZe/3Ghz0SZjpQ==",
+      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
       "dependencies": {
         "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.1",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-VmgIsoLivCft3+oNc5KM7b9wd0nZxP/g2qilMwi1hJyGA624KWnNKHn4hzBQs4FpzydUVpNy+TWVT8KiRCh3MQ==",
+      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
       "dependencies": {
-        "@vue/compiler-core": "3.3.1",
+        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.1"
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-G+FPwBbXSLaA4+Ry5/bdD9Oda+sRslQcE9o6JSZaougRiT4OjVL0vtkbQHPrGRTULZV28OcrAjRfSZOSB0OTXQ==",
+      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
       "dependencies": {
         "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.1",
+        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.1",
+        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.1",
+        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.1",
+        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.1",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.0",
         "postcss": "^8.1.10",
@@ -2854,12 +2947,12 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-QOQWGNCWuSeyKx4KvWSJlnIMGg+/2oCHgkFUYo7aJ+9Uaaz45yRgKQ+FNigy50NYBQIhpXn2e4OSR8GXh4knrQ==",
+      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.1",
+        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.1"
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/component-compiler-utils": {
@@ -2932,60 +3025,60 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-zCfmazOtyUdC1NS/EPiSYJ4RqojqmTAviJyBbyVvY8zAv5NhK44Yfw0E1tt+m5vz0ZO1ptI9jDKBr3MWIEkpgw==",
+      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
       "dependencies": {
-        "@vue/shared": "3.3.1"
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-MkOrJauAGH4MNdxGW/PmrDegMyOGX0wGIdKUZJRBXOTpotDONg7/TPJe2QeGeBCow/5v9iOqZOWCfvmOWIaDMg==",
+      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
       "dependencies": {
         "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.1",
+        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.1",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.0"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-Ljb37LYafhQqKIasc0r32Cva8gIh6VeSMjlwO6V03tCjHd18gmjP0F4UD+8/a59sGTysAgA8Rb9lIC2DVxRz2Q==",
+      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
       "dependencies": {
-        "@vue/reactivity": "3.3.1",
+        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.1"
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-NBjYbQPtMklb7lsJsM2Juv5Ygry6mvZP7PdH1GZqrzfLkvlplQT3qCtQMd/sib6yiy8t9m/Y4hVU7X9nzb9Oeg==",
+      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
       "dependencies": {
-        "@vue/runtime-core": "3.3.1",
+        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.1",
+        "@vue/shared": "3.3.4",
         "csstype": "^3.1.1"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-sod8ggOwbkQXw3lBjfzrbdxRS9lw/lNHoMaXghHawNYowf+4WoaLWD5ouz6fPZadUqNKAsqK95p8DYb1vcVfPA==",
+      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.1",
+        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.1"
+        "@vue/shared": "3.3.4"
       },
       "peerDependencies": {
-        "vue": "3.3.1"
+        "vue": "3.3.4"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-ybDBtQ+479HL/bkeIOIAwgpeAEACzztkvulJLbK3JMFuTOv4qDivmV3AIsR8RHYJ+RD9tQxcHWBsX4GqEcYrfw=="
+      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
     "node_modules/@vue/vue-loader-v15": {
       "name": "vue-loader",
@@ -3711,6 +3804,85 @@
       "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-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/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",
@@ -4247,6 +4419,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",
@@ -7043,6 +7220,12 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
+      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==",
+      "peer": true
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -7894,7 +8077,6 @@
       "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,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -8447,6 +8629,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",
@@ -9952,7 +10144,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"
       }
@@ -10480,8 +10671,7 @@
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
-      "dev": true
     },
     "node_modules/tslib": {
       "version": "2.5.0",
@@ -10676,15 +10866,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.3.1",
+      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-3Rwy4I5idbPVSDZu6I+fFh6tdDSZbauImCTqLxE7y0LpHtiDvPeY01OI7RkFPbva1nk4hoO0sv/NzosH2h60sg==",
+      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.1",
+        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.1",
+        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.1",
+        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.1",
+        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.1"
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/vue-eslint-parser": {
@@ -10798,6 +10988,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",
@@ -10966,8 +11161,7 @@
     "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==",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
-      "dev": true
     },
     "node_modules/webpack": {
       "version": "5.82.1",
@@ -11420,7 +11614,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"

frontend/package.json

@@ -9,8 +9,10 @@
   },
   "dependencies": {
     "axios": "^1.4.0",
+    "bootstrap": "^5.2.3",
+    "bootstrap-vue": "^2.23.1",
     "core-js": "^3.8.3",
-    "vue": "^3.2.13",
+    "vue": "^3.3.4",
     "vue-router": "^4.0.3"
   },
   "devDependencies": {

frontend/public/index.html

@@ -5,6 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+      <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+      <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+      <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

frontend/src/App.vue

@@ -1,7 +1,11 @@
 <template>
   <nav>
     <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+    <router-link to="/employee">employee</router-link> |
+    <router-link to="/appointment">appointment</router-link> |
+    <router-link to="/company">company</router-link> |
+    <!--<router-link to="/requests">requests</router-link> |-->
+    <router-link to="/report">report</router-link>
   </nav>
   <router-view/>
 </template>

frontend/src/api/api.js

@@ -10,17 +10,21 @@ const config = {
 
 const appointmentCRUD = {
   async createAppointment(appointmentName) {
-    console.log({ name: appointmentName })
+    console.log(baseUrl + "appointment/add?name=",
+        appointmentName )
     return await axios.post(
-      baseUrl + "appointment/add",
+    baseUrl + "appointment/add?name="+appointmentName
-      { name: appointmentName },
-      config
     );
+
   },
   async getAppointmentList() {
     console.log(baseUrl + "appointment/list")
     return await axios.get(baseUrl + "appointment/list");
   },
+  async getAppointmentListSort(id) {
+    console.log(baseUrl + "appointment/postId=")
+    return await axios.get(baseUrl + "appointment/postId="+id);
+  },
   async editAppointment(id, data) {
     return await axios.put(baseUrl + `appointment/${id}`, data, config);
   },
@@ -35,14 +39,18 @@ const companyCRUD = {
     adressCompany,
     contactEmail
   ) {
+    console.log(baseUrl + "company/add",
+        {
+          id:77777,
+          nameCompany: nameCompany,
+          legalAdressCompany: legalAdressCompany,
+          adressCompany: adressCompany,
+          contactEmail: contactEmail,
+        })
     return await axios.post(
-      baseUrl + "company",
+
-      {
+      baseUrl + "company/add?name="+nameCompany+"&legalAdressCompany="+legalAdressCompany
-        nameCompany: nameCompany,
+        +"&adressCompany="+adressCompany+"&contactEmail="+contactEmail,
-        legalAdressCompany: legalAdressCompany,
-        adressCompany: adressCompany,
-        contactEmail: contactEmail,
-      },
       config
     );
   },
@@ -50,7 +58,7 @@ const companyCRUD = {
     return await axios.get(baseUrl + "company/list");
   },
   async editCompany(id, data) {
-    return await axios.put(baseUrl + `company/${id}`, data, config);
+    return await axios.put(baseUrl + `company/update?id=${id}?name=${data.companyName}`, data, config);
   },
   async deleteCompany(id) {
     return await axios.delete(baseUrl + `company/${id}`, config);
@@ -70,22 +78,26 @@ const requestCRUD = {
     sort,
     type
   ) {
+    console.log( baseUrl + "requests/add?nameCompany="+nameCompany.id+"&comment="+comment +
+        +"&sort="+
+        +sort.id+"&type="+type.id
+    )
     return await axios.post(
-      baseUrl + "requests",
+      baseUrl + "requests/add?nameCompany="+nameCompany.id+"&comment="+comment,
-      {
+      // {
-        nameCompany: nameCompany,
+      //   nameCompany: nameCompany,
-        comment: comment,
+      //   comment: comment,
-        createDate: createDate,
+      //   createDate: createDate,
-        approveDate: approveDate,
+      //   approveDate: approveDate,
-        isActive: isActive,
+      //   isActive: isActive,
-        sort: sort,
+      //   sort: sort,
-        type: type,
+      //   type: type,
-      },
+      // },
       config
     );
   },
   async getRequestList() {
-    return await axios.get(baseUrl + "request/all");
+    return await axios.get(baseUrl + "requests/all");
   },
   async getRequestByCompanyId() {
     return await axios.get(baseUrl + "requests/Company={id}");
@@ -100,11 +112,11 @@ const requestCRUD = {
 const employeeCRUD = {
   async createEmployee(fio, appointment) {
     return await axios.post(
-      baseUrl + "employee",
+      baseUrl + "employee/add?name="+fio+"&appointmentId="+appointment,
       {
         fio: fio,
-        appointment: appointment,
+       appointment: appointment,
-      },
+     },
       config
     );
   },
@@ -118,10 +130,12 @@ const employeeCRUD = {
     return await axios.get(baseUrl + "employee/id=" + id);
   },
   async getEmployeeByPostId(postId) {
-    return await axios.get(baseUrl + "employee/postId=" + postId);
+    console.log("postId="+postId)
+    return await axios.get(baseUrl + "employee/postid=" + postId);
   },
   async editEmployee(id, data) {
-    return await axios.put(baseUrl + `employee/${id}`, data, config);
+    console.log(data)
+    return await axios.put(baseUrl + `employee/update?id=${id}&name=`+data.fio, config);
   },
   async deleteEmployee(id) {
     return await axios.delete(baseUrl + `employee/${id}`, config);

frontend/src/components/AppointmentsSheet.vue

@@ -2,19 +2,25 @@
   <div class="base">
     <div class="create-apponiment">
       <input type="text" v-model="appointmentName">
-      <button @click="createApponiment()">Создать</button>
+      <button @click="createApponiment()" class="btn btn-primary mr-2">Создать</button>
     </div>
     <table>
       <thead>
         <tr>
           <th>id</th>
           <th>Название должности</th>
+          <th></th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="item in data" :key="item.id">
           <td>{{ item.id }}</td>
-          <td>{{ item.name }}</td>
+          <td><input :id="'row_'+item.id" :value="item.name" :disabled="isEdditable!==item.id"/></td>
+          <td>
+            <button @click="(isEdditable  = item.id)" v-if="isEdditable!=item.id" class="btn btn-info">edit</button>
+            <button class="btn btn-info" @click="editAppoint(item.id)" v-else >save</button>
+            <button class="btn btn-info" @click="deleteAppoint(item.id)">del</button>
+          </td>
         </tr>
       </tbody>
     </table>
@@ -22,7 +28,6 @@
 </template>
 <script>
 import API from '@/api/api';
-
 // @ is an alias to /src
 
 export default {
@@ -30,13 +35,28 @@ export default {
   data() {
     return {
       data: [],
-      appointmentName: ''
+      appointmentName: '',
+      isEdditable:-1,
     }
   },
   mounted() {
     this.getApponiments()
   },
   methods: {
+    editAppoint(id){
+      console.log(id)
+      const $input = document.querySelector(`#row_${id}`)
+      const data = {
+        'id':id,
+        'name':$input.value
+      }
+      this.isEdditable = -1;
+      API.editAppointment(id, data)
+    },
+    deleteAppoint(id){
+      API.deleteAppointment(id)
+      this.getApponiments()
+    },
     getApponiments() {
       API.getAppointmentList().then(response => this.data = response.data)
     },

frontend/src/components/CompanySheet.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="base">
+    <div class="create-company">
+      <input type="text" v-model="companyName" placeholder="compName">
+      <input type="text" v-model="legalAdressCompany" placeholder="legalAdressCompany">
+      <input type="text" v-model="address" placeholder="address">
+      <input type="email" v-model="email" placeholder="email">
+      <button @click="createCompany()">Создать</button>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th>id</th>
+          <th>Название Компании</th>
+          <th>Юридический адрес</th>
+          <th>Адрес</th>
+          <th>Email</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in data" :key="item.id">
+          <td>{{ item.id }}</td>
+          <td><input :id="'arow_'+item.id" :value="item.nameCompany" :disabled="isEdditable!==item.id"/></td>
+          <td><input :id="'brow_'+item.id" :value="item.legalAdressCompany" :disabled="isEdditable!==item.id"/></td>
+          <td><input :id="'crow_'+item.id" :value="item.adressCompany" :disabled="isEdditable!==item.id"/></td>
+          <td><input :id="'drow_'+item.id" :value="item.contactEmail" :disabled="isEdditable!==item.id"/></td>
+          <td>
+            <button class="btn btn-info" @click="(isEdditable  = item.id)" v-if="isEdditable!=item.id">edit</button>
+            <button class="btn btn-info" @click="editCompany(item.id)" v-else>save</button>
+            <button class="btn btn-info" @click="deleteCompany(item.id)">del</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+import API from '@/api/api';
+
+// @ is an alias to /src
+
+export default {
+  name: 'CompanySheet',
+  data() {
+    return {
+      data: [],
+      companyName: '',
+      legalAdressCompany:'',
+      address: '',
+      email: '',
+      isEdditable:-1,
+    }
+  },
+  mounted() {
+    this.getCompanies()
+  },
+  methods: {
+    editCompany(id){
+      console.log(id)
+      const $input1 = document.querySelector(`#arow_${id}`)
+      const $input2 = document.querySelector(`#brow_${id}`)
+      const $input3 = document.querySelector(`#crow_${id}`)
+      const $input4 = document.querySelector(`#drow_${id}`)
+      const data = {
+        'id':id,
+        'companyName': $input1.value,
+        'legalAdressCompany': $input2.value,
+        'address': $input3.value,
+        'email': $input4.value,
+
+      }
+      this.isEdditable = -1;
+      API.editCompany(id, data)
+    },
+    deleteCompany(id){
+      API.deleteCompany(id)
+      this.getCompanies()
+    },
+    getCompanies() {
+      API.getCompanyList().then(response => {
+        this.data = response.data
+        console.log(response.data)
+      })
+    },
+    createCompany() {
+      API.createCompany(this.companyName, this.legalAdressCompany, this.address, this.email).then(() => this.getCompanies())
+    }
+  }
+}
+</script>

frontend/src/components/EmployeeSheet.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="base">
+    <div class="create-employee">
+      <input type="text" v-model="name">
+      <select>
+        <option v-for="item in appointments" :key="item.id" :value="item.id" ref="optionAppoint" :id="item.id">{{item?.name}}</option>
+      </select>
+      <button class="btn btn-info" @click="createEmployee()">Создать</button>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th>id</th>
+          <th>ФИО</th>
+          <th>Должность</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in data" :key="item.id">
+          <td>{{ item.id }}</td>
+          <td><input :id="'arow_'+item.id" :value="item.fio" :disabled="isEdditable!==item.id"/></td>
+          <td>
+            <select>
+              <option v-for="appoint in appointments" :key="appoint.id" :value="appoint.id" ref="optionAppoint" :id="appoint.id" :selected="appoint.id==item.post.id">{{appoint?.name}}</option>
+            </select>
+          </td>
+          <td>
+            <button class="btn btn-info" @click="(isEdditable  = item.id)" v-if="isEdditable!=item.id">edit</button>
+            <button class="btn btn-info" @click="editEmployee(item.id)" v-else>save</button>
+            <button class="btn btn-info" @click="deleteEmployee(item.id)">del</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+import API from '@/api/api';
+import appointmentsSheet from "@/components/AppointmentsSheet.vue";
+
+// @ is an alias to /src
+
+export default {
+  name: 'EmployeeSheet',
+  data() {
+    return {
+      data: [],
+      name: '',
+      appointments:[],
+      isEdditable:-1,
+    }
+  },
+
+  mounted() {
+    this.getEmployees()
+    this.getAppoint()
+  },
+  methods: {
+    editEmployee(id){
+      console.log(id)
+      const $input1 = document.querySelector(`#arow_${id}`)
+      const data = {
+        'id':id,
+        'fio': $input1.value
+      }
+      this.isEdditable = -1;
+      API.editEmployee(id, data)
+    },
+    deleteEmployee(id){
+      API.deleteEmployee(id)
+      this.getEmployees()
+    },
+    getEmployees() {
+      API.getEmployeeList().then(response => {
+        this.data = response.data
+        console.log(response)
+      })
+    },
+    getAppoint(){
+      console.log(this.data)
+      API.getAppointmentList().then((res)=> {
+        this.appointments = res.data
+        console.log(res.data)
+      })
+    },
+
+    createEmployee() {
+      const $selector = this.$refs.optionAppoint
+      const $selected = $selector.find(el=>el.selected)
+      API.createEmployee(this.name, $selected.id).then(() => this.getEmployees())
+    }
+  },
+  computed: {
+    appointmentsSheet() {
+      return appointmentsSheet
+    }
+  },
+
+}
+</script>

frontend/src/components/Report.vue

@@ -0,0 +1,62 @@
+<template>
+  <select>
+    <option v-for="appoint in appointments" :key="appoint.id" :value="appoint.id" ref="optionAppoint" :id="appoint.id" >{{appoint?.name}}</option>
+  </select>
+  <button @click=getEmployees()>Select</button>
+  <table>
+    <thead>
+    <tr>
+      <th>id</th>
+      <th>ФИО</th>
+      <th>Должность</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr v-for="item in data" :key="item.id">
+      <td>{{ item.id }}</td>
+      <td><input :value="item.fio"/></td>
+
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import API from "@/api/api";
+
+export default {
+  name: "ReportSheet",
+  data() {
+    return {
+      data: [],
+      appointments: [],
+      id: 1
+    }
+  },
+  mounted() {
+    //this.getEmployees()
+    this.getAppoint()
+  },
+  methods: {
+    getEmployees() {
+      const $selector = this.$refs.optionAppoint
+      const $selected = $selector.find(el=>el.selected).id
+      API.getEmployeeByPostId($selected).then(response => {
+        this.data = response.data
+        console.log(response)
+      })
+    },
+    getAppoint() {
+      console.log(this.data)
+      API.getAppointmentList().then((res) => {
+        this.appointments = res.data
+        console.log(res.data)
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/RequestSheet.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="base">
+    <div class="create-request">
+      <select>
+        <option v-for="item in companies" :key="item.id" :value="item.id" ref="optionCompany" :id="item.id">{{item?.nameCompany}}</option>
+      </select>
+      <input type="text" v-model="comment">
+      <select>
+        <option v-for="item in types" :key="item" :value="item" ref="optionType" :id="item">{{item == 0 ? 'DEVELOP':'TRACKING'}}</option>
+      </select>
+      <select>
+        <option v-for="item in employes" :key="item.id" :value="item.id" ref="optionEmployee" :id="item.id">{{item?.fio}}</option>
+      </select>
+      <button @click="createRequest()">Создать</button>
+    </div>
+    <table>
+      <thead>
+      <tr>
+        <th>id</th>
+        <th>Компания</th>
+        <th>Ответственный</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="item in data" :key="item.id">
+        <td>
+          <select>
+            <option v-for="company in companies" :key="company.id" :value="company.nameCompany" ref="optionCompany" :id="company.id" :selected="company.id==item.nameCompany">{{company?.name}}</option>
+          </select>
+        </td>
+<!--        <td>{{ item.createDate }}</td>-->
+<!--        <td>{{ item.approveDate }}</td>-->
+<!--        <td>{{ item.isActive }}</td>-->
+        <select>
+          <option v-for="emp in employes" :key="emp.id" :value="emp.fio" ref="optionEmployee" :id="emp.id" :selected="emp.id==item.sort.id">{{emp?.name}}</option>
+        </select>
+        <td>{{ item.type }}</td>
+        <td>
+          <button @click="(isEdditable  = item.id)" v-if="isEdditable!=item.id">edit</button>
+          <button @click="editRequest(item.id)" v-else>save</button>
+          <button @click="deleteRequest(item.id)">del</button>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+import API from '@/api/api';
+
+// @ is an alias to /src
+
+export default {
+  name: 'RequestSheet',
+  data() {
+    return {
+      data: [],
+      name: '',
+      companies:[],
+      employes:[],
+      isEdditable:-1,
+      types:{
+        DEVELOP: 0,
+        TRACKING: 1
+      }
+    }
+  },
+
+  mounted() {
+    this.getEmployees()
+    this.getCompany()
+    this.getRequest()
+  },
+  methods: {
+    editRequest(id){
+      console.log(id)
+      const $input1 = document.querySelector(`#arow_${id}`)
+      const data = {
+        'id':id,
+        'fio': $input1.value
+      }
+      this.isEdditable = -1;
+      API.editRequest(id, data)
+    },
+    deleteRequest(id){
+      API.deleteRequest(id)
+      this.getRequest()
+    },
+    getEmployees() {
+      API.getEmployeeList().then(response => {
+        this.employes = response.data
+        console.log(response)
+      })
+    },
+    getCompany(){
+      console.log(this.data)
+      API.getCompanyList().then((res)=> {
+        this.companies = res.data
+        console.log(res.data)
+      })
+    },
+    getRequest(){
+      console.log(this.data)
+      API.getRequestList().then((res)=> {
+        this.data = res.data
+        console.log(res.data)
+      })
+    },
+    createRequest() {
+      const $selector = this.$refs.optionCompany
+      const $selected = $selector.find(el=>el.selected)
+      const $selector1 = this.$refs.optionEmployee
+      const $selected1 = $selector1.find(el=>el.selected)
+      const $selector2 = this.$refs.optionType
+      const $selected2 = $selector2.find(el=>el.selected)
+      API.createRequeset($selected, this.comment, new Date(), new Date(), true, $selected1, $selected2).then(() => this.getEmployees())
+    }
+  },
+  computed: {
+    requestsSheet() {
+      return this.requestsSheet()
+    }
+  },
+
+}
+</script>

frontend/src/router/index.js

@@ -1,5 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import EmployeeSheet from "@/components/EmployeeSheet.vue";
+import RequestSheet from "@/components/RequestSheet.vue";
+import appointmentsSheet from "@/components/AppointmentsSheet.vue";
+import CompanySheet from "@/components/CompanySheet.vue";
+import Report from "@/components/Report.vue";
 
 const routes = [
   {
@@ -7,6 +12,31 @@ const routes = [
     name: 'home',
     component: HomeView
   },
+  {
+    path: '/employee',
+    name: 'employee',
+    component: EmployeeSheet
+  },
+  {
+    path: '/report',
+    name: 'report',
+    component: Report
+  },
+  {
+    path: '/company',
+    name: 'company',
+    component: CompanySheet
+  },
+  {
+    path: '/appointment',
+    name: 'appointment',
+    component: appointmentsSheet
+  },
+  {
+    path: '/requests',
+    name: 'requests',
+    component: RequestSheet
+  },
   // {
   //   path: '/about',
   //   name: 'about',

frontend/src/views/HomeView.vue

@@ -1,19 +1,17 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+    Hello
-    <appointments-sheet></appointments-sheet>
   </div>
 </template>
 
 <script>
-import AppointmentsSheet from '@/components/AppointmentsSheet.vue';
+
 
 // @ is an alias to /src
 
 export default {
   name: 'HomeView',
   components: {
-    AppointmentsSheet
   }
 }
 </script>