Finished Overview for Basic Dashboard

package-lock.json

@@ -8,13 +8,16 @@
       "name": "router-ui-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "path": "^0.12.7",
         "vue": "^3.4.37",
         "vue-router": "^4.4.3"
       },
       "devDependencies": {
-        "@vitejs/plugin-vue": "^5.1.2",
+        "@types/node": "^22.5.1",
+        "@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"
       }
     },
@@ -642,16 +645,34 @@
         "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.2",
+      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz",
-      "integrity": "sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==",
+      "integrity": "sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==",
       "dev": true,
       "engines": {
         "node": "^18.0.0 || >=20.0.0"
@@ -823,6 +844,12 @@
       "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",
@@ -832,12 +859,95 @@
         "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",
@@ -849,6 +959,61 @@
       "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",
@@ -926,6 +1091,11 @@
         "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",
@@ -934,6 +1104,12 @@
         "@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",
@@ -972,6 +1148,27 @@
         "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",
@@ -1010,6 +1207,14 @@
         "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",
@@ -1065,6 +1270,31 @@
         "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",
@@ -1086,6 +1316,20 @@
         "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",
@@ -1145,6 +1389,18 @@
         }
       }
     },
+    "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,13 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "path": "^0.12.7",
     "vue": "^3.4.37",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@types/node": "^22.5.1",
+    "@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,9 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'App',
-  });
 </script>
 
 <template>

src/assets/overviewSvgs/Devices.svg

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,9 @@
+<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

@@ -0,0 +1,11 @@
+<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

@@ -0,0 +1,11 @@
+<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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,10 @@
+<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'
+import router from '@/routes/router.ts'
-import './styles/main.css'
+import '@/styles/main.css'
 
 
 createApp(App)

src/pages/AdvancedDashboard.vue

@@ -1,11 +1,5 @@
-<script lang="ts">
+<script setup 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 lang="ts">
+<script setup 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,21 +11,11 @@
     { 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>
@@ -39,8 +29,10 @@
         </RouterLink>
       </ul>
     </div>
-    <RouterView id="basicComponents"/>
+    <div 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,7 +1,90 @@
+<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>
+  <div id="overviewComponent">
     <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,6 +14,7 @@
   min-height: 100%;
   padding: var(--alt-padding);
   border-radius: var(--border-radius);
+  flex-shrink: 0;
 
   h2 {
     text-align: center;
@@ -54,3 +55,45 @@
   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,11 +7,16 @@
   --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;
 }
 
 * {
@@ -104,3 +109,15 @@ a {
   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;
+}

tsconfig.app.json

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

tsconfig.json

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

tsconfig.node.json

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

vite.config.ts

@@ -1,7 +1,14 @@
 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()],
+  plugins: [vue(), svgLoader()],
+  resolve : {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    }
+  }
 })