Add filters to UI

web/src/pages/AllAccounts.vue

@@ -11,6 +11,7 @@ import Modal from "../components/Modal.vue";
 import Input from "../components/Input.vue";
 import Checkbox from "../components/Checkbox.vue";
 import { formatDate } from "../date";
+import Autocomplete from '../components/Autocomplete.vue'
 
 defineProps<{
     budgetid: string
@@ -28,6 +29,15 @@ const transactions = useTransactionsStore();
 onMounted(() => {
   transactions.GetProblematicTransactions();
 })
+
+const filters = ref({
+  Account: null,
+  AccountID: null,
+  Payee: null,
+  PayeeID: null,
+  Category: null,
+  CategoryID: null,
+});
 </script>
 
 <template>
@@ -39,6 +49,16 @@ onMounted(() => {
     </div>
   </div>
 
+  <div>
+    <h1>Filters</h1>
+    Account: 
+    <Autocomplete v-model:text="filters.Account" v-model:id="filters.AccountID" model="accounts" class="inline-block" /><br>
+    Payee:
+    <Autocomplete v-model:text="filters.Payee" v-model:id="filters.PayeeID" v-model:type="payeeType" model="payees" class="inline-block" /><br>
+    Category:
+    <Autocomplete v-model:text="filters.Category" v-model:id="filters.CategoryID" model="categories" class="inline-block" /><br>
+  </div>
+
   <table>
     <tr class="font-bold">
       <td class="hidden md:block" style="width: 90px;">Date</td>