package-lock.json

@@ -8,16 +8,13 @@
       "name": "router-ui-frontend",
       "version": "0.0.0",
       "dependencies": {
-        "path": "^0.12.7",
         "vue": "^3.4.37",
         "vue-router": "^4.4.3"
       },
       "devDependencies": {
-        "@types/node": "^22.5.1",
+        "@vitejs/plugin-vue": "^5.1.2",
-        "@vitejs/plugin-vue": "^5.1.3",
         "typescript": "^5.5.3",
         "vite": "^5.4.1",
-        "vite-svg-loader": "^5.1.0",
         "vue-tsc": "^2.0.29"
       }
     },
@@ -645,34 +642,16 @@
         "win32"
       ]
     },
-    "node_modules/@trysound/sax": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
-    "node_modules/@types/node": {
-      "version": "22.5.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
-      "integrity": "sha512-KkHsxej0j9IW1KKOOAA/XBA0z08UFSrRQHErzEfA3Vgq57eXIMYboIlHJuYIfd+lwCQjtKqUu3UnmKbtUc9yRw==",
-      "dev": true,
-      "dependencies": {
-        "undici-types": "~6.19.2"
-      }
-    },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "5.1.3",
+      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz",
-      "integrity": "sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==",
+      "integrity": "sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==",
       "dev": true,
       "engines": {
         "node": "^18.0.0 || >=20.0.0"
@@ -844,12 +823,6 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
-    "node_modules/boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true
-    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -859,95 +832,12 @@
         "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/computeds": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
       "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
       "dev": true
     },
-    "node_modules/css-select": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
-      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.1.0",
-        "domhandler": "^5.0.2",
-        "domutils": "^3.0.1",
-        "nth-check": "^2.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/css-tree": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-      "dev": true,
-      "dependencies": {
-        "mdn-data": "2.0.30",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-      }
-    },
-    "node_modules/css-what": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/csso": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
-      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
-      "dev": true,
-      "dependencies": {
-        "css-tree": "~2.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
-        "npm": ">=7.0.0"
-      }
-    },
-    "node_modules/csso/node_modules/css-tree": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
-      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
-      "dev": true,
-      "dependencies": {
-        "mdn-data": "2.0.28",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
-        "npm": ">=7.0.0"
-      }
-    },
-    "node_modules/csso/node_modules/mdn-data": {
-      "version": "2.0.28",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
-      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
-      "dev": true
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -959,61 +849,6 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
-    "node_modules/dom-serializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "entities": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
-    "node_modules/domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.3.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-      "dev": true,
-      "dependencies": {
-        "dom-serializer": "^2.0.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -1091,11 +926,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
-    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
@@ -1104,12 +934,6 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
-    "node_modules/mdn-data": {
-      "version": "2.0.30",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-      "dev": true
-    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -1148,27 +972,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/nth-check": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/nth-check?sponsor=1"
-      }
-    },
-    "node_modules/path": {
-      "version": "0.12.7",
-      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
-      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
-      "dependencies": {
-        "process": "^0.11.1",
-        "util": "^0.10.3"
-      }
-    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -1207,14 +1010,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/rollup": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.0.tgz",
@@ -1270,31 +1065,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/svgo": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
-      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
-      "dev": true,
-      "dependencies": {
-        "@trysound/sax": "0.2.0",
-        "commander": "^7.2.0",
-        "css-select": "^5.1.0",
-        "css-tree": "^2.3.1",
-        "css-what": "^6.1.0",
-        "csso": "^5.0.5",
-        "picocolors": "^1.0.0"
-      },
-      "bin": {
-        "svgo": "bin/svgo"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/svgo"
-      }
-    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -1316,20 +1086,6 @@
         "node": ">=14.17"
       }
     },
-    "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true
-    },
-    "node_modules/util": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
-      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
-      "dependencies": {
-        "inherits": "2.0.3"
-      }
-    },
     "node_modules/vite": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.1.tgz",
@@ -1389,18 +1145,6 @@
         }
       }
     },
-    "node_modules/vite-svg-loader": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",
-      "integrity": "sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==",
-      "dev": true,
-      "dependencies": {
-        "svgo": "^3.0.2"
-      },
-      "peerDependencies": {
-        "vue": ">=3.2.13"
-      }
-    },
     "node_modules/vscode-uri": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",

package.json

@@ -9,16 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "path": "^0.12.7",
     "vue": "^3.4.37",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "@types/node": "^22.5.1",
+    "@vitejs/plugin-vue": "^5.1.2",
-    "@vitejs/plugin-vue": "^5.1.3",
     "typescript": "^5.5.3",
     "vite": "^5.4.1",
-    "vite-svg-loader": "^5.1.0",
     "vue-tsc": "^2.0.29"
   }
 }

src/App.vue

@@ -1,4 +1,9 @@
-<script setup lang="ts">
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'App',
+  });
 </script>
 
 <template>

src/assets/overviewSvgs/Devices.svg

@@ -1,12 +0,0 @@
-<svg version="1.1" viewBox="0 -14 105.42 120" xmlns="http://www.w3.org/2000/svg">
-  <g transform="translate(-7.2896 -15.784)">
-    <g transform="matrix(1.4408 0 0 1.4116 -26.451 -12.591)">
-    <rect x="26.334" y="23.019" width="67.332" height="42.58" ry="4.3365" fill="none" stroke="#fff" stroke-width="5.834"/>
-    <g fill="#fff" stroke-width="0">
-      <rect x="57.113" y="65.717" width="5.7745" height="14.83" ry="0"/>
-      <rect x="58.961" y="67.719" width="1.5653" height="3.0535"/>
-      <rect x="41.291" y="78.287" width="37.419" height="5.8942" ry="2.5257"/>
-    </g>
-    </g>
-  </g>
-</svg>

src/assets/overviewSvgs/FileSharing.svg

@@ -1,9 +0,0 @@
-<svg version="1.1" viewBox="0 0 101.73 101.73" xmlns="http://www.w3.org/2000/svg">
-  <g transform="translate(-6.5281 -12.557)">
-    <g transform="matrix(.89724 -.89724 .73751 .73751 -43.308 62.468)">
-      <rect x="17.713" y="51.062" width="60.612" height="35.705" ry="1.493" fill="none" stroke="#fff" stroke-width="7.6729"/>
-      <rect x="78.329" y="58.538" width="21.201" height="20.755" ry="1.3525" fill="none" stroke="#fff" stroke-width="7.6729"/>
-      <rect x="29.763" y="52.955" width="6.9565" height="31.921" ry=".027657" fill="#fff" stroke-width="0"/>
-    </g>
-  </g>
-</svg>

src/assets/overviewSvgs/GuestNetwork.svg

@@ -1,11 +0,0 @@
-<svg version="1.1" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-  <rect x="27.041" y="8.3281" width="65.918" height="103.34" ry="1.5063" fill="none" stroke="#fff" stroke-width="8.32"/>
-    <g transform="translate(1.903 -11.525)">
-      <circle cx="51.094" cy="81.91" r="6.3641" fill="#fff"/>
-      <path transform="rotate(225)" d="m-81.44-18.393a13.101 13.101 0 0 1-10.945 9.5983 13.101 13.101 0 0 1-13.056-6.4385" fill="none" stroke="#fff" stroke-width="8.32"/>
-      <path transform="rotate(225)" d="m-71.49-15.693a23.184 23.184 0 0 1-19.427 17.565 23.184 23.184 0 0 1-23.405-11.754" fill="none" stroke="#fff" stroke-width="8.32"/>
-    </g>
-  <rect x="52.402" y="11.847" width="15.195" height="4.8374" ry=".92591" fill="none" stroke="#fff" stroke-width="2.5323"/>
-  <rect x="66.448" y="12" width="25.935" height="5.9475" rx="0" ry="0" fill="#fff"/>
-  <rect x="29.744" y="12.003" width="23.803" height="5.9269" rx="0" ry="0" fill="#fff"/>
-</svg>

src/assets/overviewSvgs/Internet.svg

@@ -1,11 +0,0 @@
-<svg version="1.1" viewBox="0 -4 115.92 120" xmlns="http://www.w3.org/2000/svg">
-  <g transform="translate(-2.1685 -3.7025)">
-    <g fill="none" stroke="#fff">
-      <ellipse transform="matrix(1.1232 0 0 1.1232 -7.2654 -7.4582)" cx="60" cy="59.554" rx="47.684" ry="45.701" stroke-width="7.833"/>
-      <ellipse transform="rotate(90)" cx="58.967" cy="-60.126" rx="51.358" ry="28.519" stroke-width="7.198"/>
-      <ellipse cx="60.126" cy="28.382" rx="36.141" ry="18.7" stroke-width="7.2368"/>
-      <ellipse cx="60.126" cy="90.237" rx="36.119" ry="18.927" stroke-width="7.2342"/>
-    </g>
-    <rect x="56.527" y="8.3201" width="7.198" height="102.86" ry="0" fill="#fff" stroke-width="0"/>
-  </g>
-</svg>

src/assets/overviewSvgs/QoS.svg

@@ -1,15 +0,0 @@
-<svg version="1.1" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-  <g transform="matrix(1.2433 0 0 1.2433 -14.308 -13.81)">
-    <circle cx="60" cy="60" r="34.221" fill="none" stroke="#fff" stroke-width="8.32"/>
-    <g fill="#fff">
-      <rect x="49.221" y="14.964" width="21.558" height="13.375"/>
-      <rect transform="rotate(135)" x="-10.773" y="-129.85" width="21.558" height="13.8"/>
-      <rect transform="rotate(225)" x="-95.638" y="-45" width="21.558" height="14.5"/>
-      <rect transform="rotate(45)" x="74.074" y="-44.999" width="21.558" height="14"/>
-      <rect transform="rotate(-45)" x="-10.782" y="39.851" width="21.558" height="14.4"/>
-      <rect transform="rotate(-90)" x="-70.211" y="15.034" width="21.558" height="14.243"/>
-      <rect transform="rotate(90)" x="48.769" y="-105.17" width="21.558" height="14.423"/>
-      <rect x="49.233" y="90.573" width="21.558" height="14.405"/>
-    </g>
-  </g>
-</svg>

src/assets/overviewSvgs/Wifi.svg

@@ -1,10 +0,0 @@
-<svg version="1.1" viewBox="0 -20 116 120" xmlns="http://www.w3.org/2000/svg">
-  <g transform="translate(-2.0001 -17.685)">
-    <circle cx="60" cy="84.574" r="11.505" fill="#f9f9f9" stroke-width="1.099"/>
-    <g fill="none" stroke="#fff" stroke-width="8.7977">
-      <path transform="scale(1,-1)" d="m84.282-73.026a28.038 28.038 0 0 1-24.282 14.019 28.038 28.038 0 0 1-24.282-14.019" style="paint-order:normal"/>
-      <path transform="scale(1,-1)" d="m100.02-63.652a46.214 46.214 0 0 1-40.023 23.107 46.214 46.214 0 0 1-40.023-23.107" style="paint-order:normal"/>
-      <path transform="scale(1,-1)" d="m114.19-53.37a62.574 62.574 0 0 1-54.19 31.287 62.574 62.574 0 0 1-54.19-31.287" style="paint-order:normal"/>
-    </g>
-  </g>
-</svg>

src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from "vue";
-import App from "@/App.vue";
+import App from "./App.vue";
-import router from '@/routes/router.ts'
+import router from './routes/router'
-import '@/styles/main.css'
+import './styles/main.css'
 
 
 createApp(App)

src/pages/AdvancedDashboard.vue

@@ -1,5 +1,11 @@
-<script setup lang="ts">
+<script lang="ts">
-  import Navbar from '@/components/Navbar.vue';
+  import Navbar from '../components/Navbar.vue';
+
+  export default {
+    components: {
+      Navbar,
+    }
+  }
 </script>
 
 <template>

src/pages/BasicDashboard.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts">
+<script lang="ts">
-  import Navbar from '@/components/Navbar.vue';
+  import Navbar from '../components/Navbar.vue';
 
   interface NavbarItem {
     name: string;
-    link: string;
+    link: string
   }
 
   const navbarItems: NavbarItem[] = [
@@ -11,11 +11,21 @@
     { name: "Internet Setup", link: "/basic/internet" },
     { name: "Wireless Settings", link:"/basic/wireless" },
     { name: "Device List", link: "/basic/devices" },
-    { name: "QoS", link: "/basic/qos" },
+    { name: "QoS", link: "/basic/QoS" },
     { name: "File Sharing", link: "/basic/fileshare" },
     { name: "Guest Network", link: "/basic/guestnetwork" }
   ];
 
+  export default {
+    data() {
+      return {
+        navbarItems
+      };
+    },
+    components: {
+      Navbar,
+    }
+  }
 </script>
 
 <template>
@@ -29,10 +39,8 @@
         </RouterLink>
       </ul>
     </div>
-    <div id="basicComponents">
+    <RouterView id="basicComponents"/>
-      <RouterView/>
-    </div>
   </div>
 </template>
 
-<style src="@/styles/basicDashboard.css" scoped></style>
+<style src="../styles/basicDashboard.css" scoped></style>

src/pages/LoginPage.vue

@@ -13,4 +13,4 @@
   </div>
 </template>
 
-<style src="@/styles/login.css" scoped></style>
+<style src="../styles/login.css" scoped></style>

src/pages/basicDashboard/DeviceList.vue

@@ -4,4 +4,4 @@
   </div>
 </template>
 
-<style src="@/styles/basicDashboard.css" scoped></style>
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/FileShare.vue

@@ -4,4 +4,4 @@
   </div>
 </template>
 
-<style src="@/styles/basicDashboard.css" scoped></style>
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/GuestNetwork.vue

@@ -4,4 +4,4 @@
   </div>
 </template>
 
-<style src="@/styles/basicDashboard.css" scoped></style>
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/InternetSetup.vue

@@ -4,4 +4,4 @@
   </div>
 </template>
 
-<style src="@/styles/basicDashboard.css" scoped></style>
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/Overview.vue

@@ -1,90 +1,7 @@
-<script setup lang="ts">
-  import internetIcon from '@/assets/overviewSvgs/Internet.svg'
-  import wifiIcon from '@/assets/overviewSvgs/Wifi.svg'
-  import devicesIcon from '@/assets/overviewSvgs/Devices.svg'
-  import fileSharingIcon from '@/assets/overviewSvgs/FileSharing.svg'
-  import qosIcon from '@/assets/overviewSvgs/QoS.svg'
-  import guestNetworkIcon from '@/assets/overviewSvgs/GuestNetwork.svg'
-
-  interface statusColorsType {
-    goodStatus: string;
-    warningStatus: string;
-    badStatus: string;
-  }
-
-  const statusColors: statusColorsType = {
-    goodStatus: "good-indicator",
-    warningStatus: "warning-indicator",
-    badStatus: "bad-indicator",
-  }
-
-  interface overviewItemsType {
-    name: string;
-    link: string;
-    icon: string;
-    statusColor: string | null;
-    statusMessage: string;
-  }
-
-  const overviewItems: overviewItemsType[] = [
-    { 
-      name: "Internet", 
-      link: "/basic/internet", 
-      icon: internetIcon, 
-      statusColor: statusColors.goodStatus, 
-      statusMessage: "Online: LAN4",
-    },
-    {
-      name: "Wifi",
-      link: "/basic/wireless",
-      icon: wifiIcon,
-      statusColor: statusColors.warningStatus,
-      statusMessage: "5Ghz: On | 2.4Ghz: Off",
-    }, 
-    {
-      name: "Devices",
-      link: "/basic/devices",
-      icon: devicesIcon,
-      statusColor: null,
-      statusMessage: "Online: 0",
-    }, 
-    {
-      name: "File Sharing",
-      link: "/basic/fileshare",
-      icon: fileSharingIcon,
-      statusColor: statusColors.badStatus,
-      statusMessage: "Offline",
-    },
-    {
-      name: "QoS",
-      link: "/basic/qos",
-      icon: qosIcon,
-      statusColor: statusColors.goodStatus,
-      statusMessage: "Online",
-    },
-    {
-      name: "Guest Network",
-      link: "/basic/guestnetwork",
-      icon: guestNetworkIcon,
-      statusColor: statusColors.badStatus,
-      statusMessage: "Offline",
-    }
-  ]
-</script>
-
 <template>
-  <div id="overviewComponent">
+  <div>
     <h2 class="title">Overview</h2>
-    <ul>
-      <RouterLink :to="overviewItem.link" v-for="overviewItem in overviewItems">
-        <li>
-          <component :is="overviewItem.icon"/>
-          <h3>{{ overviewItem.name }}</h3>
-          <span :class="overviewItem.statusColor">{{ overviewItem.statusMessage }}</span>
-        </li>
-      </RouterLink>
-    </ul>
   </div>
 </template>
 
-<style src="@/styles/basicDashboard.css" scoped></style>
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/QoS.vue

@@ -4,4 +4,4 @@
   </div>
 </template>
 
-<style src="@/styles/basicDashboard.css" scoped></style>
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/Wireless.vue

@@ -4,4 +4,4 @@
   </div>
 </template>
 
-<style src="@/styles/basicDashboard.css" scoped></style>
+<style src="../../styles/basicDashboard.css" scoped></style>

src/routes/router.ts

@@ -42,7 +42,7 @@ const routes = [
         component: BasicDevicesList,
       },
       {
-        path: 'qos',
+        path: 'QoS',
         component: BasicQoS,
       },
       {

src/styles/basicDashboard.css

@@ -14,7 +14,6 @@
   min-height: 100%;
   padding: var(--alt-padding);
   border-radius: var(--border-radius);
-  flex-shrink: 0;
 
   h2 {
     text-align: center;
@@ -54,46 +53,4 @@
   padding: var(--alt-padding);
   border-radius: var(--border-radius);
   background-color: var(--dark-bg-alt-color);
-}
-
-#overviewComponent {
-  ul {
-    margin: 20px auto;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    list-style: none;
-    justify-content: center;
-    max-width: 730px;
-
-    li {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--dark-bg-alt-2-color);
-      height: 200px;
-      padding: var(--alt-padding);
-      width: 230px;
-      border-radius: 20px;
-      cursor: pointer;
-    }
-    img {
-      width: 80px;
-    }
-    svg {
-      height: 100px;
-      padding: 5px;
-      box-sizing: content-box;
-    }
-    span {
-      width: 100%;
-      height: 30px;
-      margin-top: 5px;
-      background-color: var(--neutral-indicator);
-      border-radius: var(--alt-border-radius);
-      text-align: center;
-      line-height: 30px;
-    }
-  }
 }

src/styles/main.css

@@ -7,16 +7,11 @@
   --padding: 20px;
   --alt-padding: 10px;
   --border-radius: 20px;
-  --alt-border-radius: 5px;
   --dark-bg-color: #161616;
   --dark-bg-alt-color: #0f0f0f;
   --dark-bg-alt-2-color: #000;
   --dark-highlight-color: #0084ff;
   --dark-alt-highlight-color: #006bcf;
-  --neutral-indicator: #808080;
-  --good-indicator: #44c71c;
-  --warning-indicator: #b6b614;  
-  --bad-indicator: #ad1c1c;
 }
 
 * {
@@ -108,16 +103,4 @@ a {
   align-items: center;
   justify-content: center;
   flex-grow: 1;
-}
-
-.good-indicator {
-  background-color: var(--good-indicator) !important;
-}
-
-.warning-indicator {
-  background-color: var(--warning-indicator) !important;
-}
-
-.bad-indicator {
-  background-color: var(--bad-indicator) !important;
 }

src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

tsconfig.app.json

@@ -18,13 +18,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
+    "noFallthroughCasesInSwitch": true
-    "esModuleInterop": true,
+  },
-    "allowSyntheticDefaultImports": true,
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
-    "resolveJsonModule": true,
-    "baseUrl": "./",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  }
 }

tsconfig.json

@@ -3,5 +3,5 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ],
+  ]
 }

tsconfig.node.json

@@ -16,18 +16,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
+    "noFallthroughCasesInSwitch": true
-    "baseUrl": "./",
-     "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
   },
-  "include": [
+  "include": ["vite.config.ts"]
-    "vite.config.ts",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-  ]
 }

vite.config.ts

@@ -1,14 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import path from 'path';
-import svgLoader from 'vite-svg-loader';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), svgLoader()],
+  plugins: [vue()],
-  resolve : {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    }
-  }
 })