Added prettier to pre-commit hook.

web-app/.husky/pre-commit

@@ -0,0 +1,2 @@
+npm test
+npx lint-staged

web-app/package.json

@@ -13,39 +13,43 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
-    "format": "prettier --write src/"
+    "lint-staged": "prettier --write --ignore-unknown",
+    "format": "prettier --write src/",
+    "prepare": "husky"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.0.1",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-regular-svg-icons": "^7.0.1",
+    "@fortawesome/free-regular-svg-icons": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.0.1",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/vue-fontawesome": "^3.1.2",
+    "@fortawesome/vue-fontawesome": "^3.1.3",
     "@idle-observer/vue3": "^0.2.0",
     "chart.js": "^4.5.1",
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
-    "pinia": "^3.0.3",
+    "pinia": "^3.0.4",
     "vue": "^3.5.18",
-    "vue-chartjs": "^5.3.2",
+    "vue-chartjs": "^5.3.3",
-    "vue-router": "^4.5.1",
+    "vue-router": "^4.6.4",
     "vue3-select-component": "^0.12.3"
   },
   "devDependencies": {
-    "@tsconfig/node22": "^22.0.2",
+    "@tsconfig/node22": "^22.0.5",
-    "@types/node": "^22.18.6",
+    "@types/node": "^22.19.15",
-    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue": "^6.0.5",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/tsconfig": "^0.7.0",
-    "eslint": "^9.36.0",
+    "eslint": "^9.39.4",
     "eslint-plugin-vue": "~10.3.0",
-    "jiti": "^2.5.1",
+    "husky": "^9.1.7",
+    "jiti": "^2.6.1",
+    "lint-staged": "^16.4.0",
     "npm-run-all2": "^8.0.4",
     "prettier": "3.6.2",
     "typescript": "~5.8.0",
-    "vite": "^7.1.6",
+    "vite": "^7.3.1",
-    "vite-plugin-vue-devtools": "^8.0.2",
+    "vite-plugin-vue-devtools": "^8.1.0",
-    "vue-tsc": "^3.0.7"
+    "vue-tsc": "^3.2.5"
   }
 }

web-app/src/pages/TransactionSearchPage.vue

@@ -233,83 +233,42 @@ function loadAllParamValues(key: string): string[] {
   <AppPage title="Transactions">
     <AppForm>
       <FormGroup>
-        <FormControl
+        <FormControl label="Search" hint="Free-form text search against description, tags, vendor, category, account.">
-          label="Search"
+          <input v-model="searchQuery" type="text" placeholder="Search for transactions..." />
-          hint="Free-form text search against description, tags, vendor, category, account."
-        >
-          <input
-            v-model="searchQuery"
-            type="text"
-            placeholder="Search for transactions..."
-          />
         </FormControl>
       </FormGroup>
       <FormGroup>
         <div class="vueselect-control">
           <h5>Tag</h5>
-          <VueSelect
+          <VueSelect v-model="tagFilters" :options="tagOptions" placeholder="Select tags" is-multi />
-            v-model="tagFilters"
-            :options="tagOptions"
-            placeholder="Select tags"
-            is-multi
-          />
         </div>
         <div class="vueselect-control">
           <h5>Vendor</h5>
-          <VueSelect
+          <VueSelect v-model="vendorFilters" :options="vendorOptions" placeholder="Select vendors" is-multi />
-            v-model="vendorFilters"
-            :options="vendorOptions"
-            placeholder="Select vendors"
-            is-multi
-          />
         </div>
         <div class="vueselect-control">
           <h5>Category</h5>
-          <VueSelect
+          <VueSelect v-model="categoryFilters" :options="categoryOptions" placeholder="Select categories" is-multi />
-            v-model="categoryFilters"
-            :options="categoryOptions"
-            placeholder="Select categories"
-            is-multi
-          />
         </div>
         <div class="vueselect-control">
           <h5>Account</h5>
-          <VueSelect
+          <VueSelect v-model="accountFilters" :options="accountOptions" placeholder="Select accounts" is-multi />
-            v-model="accountFilters"
-            :options="accountOptions"
-            placeholder="Select accounts"
-            is-multi
-          />
         </div>
       </FormGroup>
 
       <FormGroup>
         <FormControl label="Max Amount">
-          <input
+          <input v-model="maxAmountFilter" type="number" min="0" step="1" />
-            v-model="maxAmountFilter"
-            type="number"
-            min="0"
-            step="1"
-          />
         </FormControl>
         <FormControl label="Min Amount">
-          <input
+          <input v-model="minAmountFilter" type="number" min="0" step="1" />
-            v-model="minAmountFilter"
-            type="number"
-            min="0"
-            step="1"
-          />
         </FormControl>
       </FormGroup>
 
       <FormGroup>
         <FormControl label="Sort By">
           <select v-model="selectedSort">
-            <option
+            <option v-for="sortOpt in SORT_PROPERTIES" :key="sortOpt.property" :value="sortOpt.property">
-              v-for="sortOpt in SORT_PROPERTIES"
-              :key="sortOpt.property"
-              :value="sortOpt.property"
-            >
               {{ sortOpt.label }}
             </option>
           </select>
@@ -322,42 +281,19 @@ function loadAllParamValues(key: string): string[] {
         </FormControl>
       </FormGroup>
       <ButtonBar>
-        <AppButton
+        <AppButton size="sm" icon="home" @click="goToHome()">Back to Homepage</AppButton>
-          size="sm"
+        <AppButton size="sm" icon="trash" @click="clearFilters()">Clear Filters</AppButton>
-          icon="home"
+        <AppButton size="sm" icon="file-export" @click="exportToFile()">Export to CSV</AppButton>
-          @click="goToHome()"
-          >Back to Homepage</AppButton
-        >
-        <AppButton
-          size="sm"
-          icon="trash"
-          @click="clearFilters()"
-          >Clear Filters</AppButton
-        >
-        <AppButton
-          size="sm"
-          icon="file-export"
-          @click="exportToFile()"
-          >Export to CSV</AppButton
-        >
       </ButtonBar>
     </AppForm>
 
-    <PaginationControls
+    <PaginationControls :page="page" @update="(pr) => fetchPage(pr.page, pr.size)" class="align-right" />
-      :page="page"
-      @update="(pr) => fetchPage(pr.page, pr.size)"
-      class="align-right"
-    />
     <AppBadge size="sm">
       {{ page.totalElements }} search
       {{ page.totalElements == 1 ? 'result' : 'results' }}
       in {{ lastFetchTime }} milliseconds
     </AppBadge>
-    <TransactionCard
+    <TransactionCard v-for="txn in page.items" :key="txn.id" :tx="txn" />
-      v-for="txn in page.items"
-      :key="txn.id"
-      :tx="txn"
-    />
   </AppPage>
 </template>
 <style lang="css" scoped>
@@ -366,7 +302,7 @@ function loadAllParamValues(key: string): string[] {
   margin: 0.5rem;
 }
 
-.vueselect-control > h5 {
+.vueselect-control>h5 {
   font-size: 0.9rem;
   font-weight: 700;
   margin: 0;