Use yarn for package management, clean up dependencies and analytics module.

.gitea/workflows/web-app.yaml

@@ -12,10 +12,12 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: '22.x'
-      - run: npm ci
+          cache: 'yarn'
+      - name: Install Dependencies
+        run: yarn install --immutable
         working-directory: ./web-app
       - name: Build
-        run: npm run build
+        run: yarn build
         working-directory: ./web-app
       - name: Install SSH Key
         uses: shimataro/ssh-key-action@v2

web-app/package.json

@@ -29,8 +29,8 @@
     "pinia": "^3.0.4",
     "vue": "^3.5.18",
     "vue-chartjs": "^5.3.3",
-    "vue-router": "^4.6.4",
-    "vue3-select-component": "^0.12.3"
+    "vue-router": "^5.0.4",
+    "vue3-select-component": "^0.16.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.5",
@@ -39,15 +39,15 @@
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/tsconfig": "^0.7.0",
-    "eslint": "^9.39.4",
-    "eslint-plugin-vue": "~10.3.0",
+    "eslint": "10.1.0",
+    "eslint-plugin-vue": "10.8.0",
     "husky": "^9.1.7",
     "jiti": "^2.6.1",
     "lint-staged": "^16.4.0",
     "npm-run-all2": "^8.0.4",
-    "prettier": "3.6.2",
+    "prettier": "3.8.1",
     "typescript": "~5.8.0",
-    "vite": "^7.3.1",
+    "vite": "8.0.3",
     "vite-plugin-vue-devtools": "^8.1.0",
     "vue-tsc": "^3.2.5"
   },

web-app/src/components/VendorSelect.vue

@@ -60,7 +60,6 @@ function onOptionDeselected() {
 </script>
 <template>
   <VueSelect
-    class="vendor-select"
     v-model="selectedVendorName"
     :options="options"
     placeholder="Select a vendor"

web-app/src/main.ts

@@ -8,6 +8,7 @@ import { far } from '@fortawesome/free-regular-svg-icons'
 import App from './App.vue'
 import router from './router'
 import './assets/main.css'
+import 'vue3-select-component/styles'
 
 library.add(fas, far)
 

web-app/src/pages/home/analytics/BalanceTimeSeriesChart.vue

@@ -58,7 +58,7 @@ onMounted(() => {
 
 watch(
   [() => props.currency, () => props.timeFrame],
-  () => {
+  async () => {
     buildChartData()
   },
   { immediate: true, deep: true },

web-app/src/pages/home/analytics/CategorySpendPieChart.vue

@@ -30,7 +30,7 @@ onMounted(() => {
 
 watch(
   [() => props.currency, () => props.timeFrame],
-  () => {
+  async () => {
     buildChartData()
   },
   { immediate: true, deep: true },

web-app/src/router/index.ts

@@ -105,7 +105,7 @@ const router = createRouter({
 })
 
 // Adds a webpage title to each route based on the "meta.title" attribute.
-router.beforeEach((to, _, next) => {
+router.beforeEach((to) => {
   if (to.meta.title !== undefined && typeof to.meta.title === 'string') {
     document.title = 'Finnow - ' + to.meta.title
   } else if (to.meta.title !== undefined && typeof to.meta.title === 'function') {
@@ -116,7 +116,6 @@ router.beforeEach((to, _, next) => {
   if (import.meta.env.DEV) {
     document.title = '[DEV]' + document.title
   }
-  next()
 })
 
 // After navigation, save the last used profile to keep track of what the user was last using.