Add page for all accounts

web/src/pages/Account.vue

@@ -117,27 +117,13 @@ function createReconcilationTransaction() {
 
   <table>
     <tr class="font-bold">
-      <td
-        class="hidden md:block"
-        style="width: 90px;"
-      >
-        Date
-      </td>
-      <td style="max-width: 150px;">
-        Payee
-      </td>
-      <td style="max-width: 200px;">
-        Category
-      </td>
+      <td class="hidden md:block" style="width: 90px;">Date</td>
+      <td style="max-width: 150px;">Payee</td>
+      <td style="max-width: 200px;">Category</td>
       <td>Memo</td>
-      <td class="text-right">
-        Amount
-      </td>
+      <td class="text-right">Amount</td>
       <td style="width: 80px;">
-        <Checkbox
-          v-if="transactions.Reconciling"
-          @input="setReconciled"
-        />
+        <Checkbox v-if="transactions.Reconciling" @input="setReconciled" />
       </td>
     </tr>
     <TransactionInputRow

web/src/pages/AllAccounts.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { computed, ref, onMounted } from "vue"
+import Currency from "../components/Currency.vue";
+import TransactionRow from "../components/TransactionRow.vue";
+import TransactionInputRow from "../components/TransactionInputRow.vue";
+import { useAccountStore } from "../stores/budget-account";
+import EditAccount from "../dialogs/EditAccount.vue";
+import Button from "../components/SimpleButton.vue";
+import { useTransactionsStore } from "../stores/transactions";
+import Modal from "../components/Modal.vue";
+import Input from "../components/Input.vue";
+import Checkbox from "../components/Checkbox.vue";
+import { formatDate } from "../date";
+
+defineProps<{
+    budgetid: string
+}>()
+
+const modalInputRow = ref<typeof TransactionInputRow | null>(null);
+
+function submitModal() {
+  modalInputRow.value!.Save();
+}
+
+const accounts = useAccountStore();
+const transactions = useTransactionsStore();
+
+onMounted(() => {
+  transactions.GetProblematicTransactions();
+})
+</script>
+
+<template>
+  <div class="grid grid-cols-[1fr_auto]">
+    <div>
+      <h1 class="inline">
+        All Accounts
+      </h1>
+    </div>
+  </div>
+
+  <table>
+    <tr class="font-bold">
+      <td class="hidden md:block" style="width: 90px;">Date</td>
+      <td style="max-width: 200px;">Account</td>
+      <td style="max-width: 150px;">Payee</td>
+      <td style="max-width: 200px;">Category</td>
+      <td>Memo</td>
+      <td class="text-right">Amount</td>
+    </tr>
+    <TransactionRow
+      v-for="(transaction, index) in transactions.ProblematicTransactionsList"
+      :withAccount="true"
+      :key="transaction.ID"
+      :transactionid="transaction.ID"
+      :index="index"
+    />
+  </table>
+  <div class="md:hidden">
+    <Modal @submit="submitModal">
+      <template #placeholder>
+        <Button
+          class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2"
+        >
+          +
+        </Button>
+      </template>
+      <TransactionInputRow
+        ref="modalInputRow"
+        class="flex flex-col w-full h-full top-0"
+        :budgetid="budgetid"
+        :accountid="accountid"
+      />
+    </Modal>
+  </div>
+</template>
+
+<style>
+table {
+    width: 100%;
+    table-layout: fixed;
+}
+.negative {
+    color: red;
+}
+</style>

web/src/pages/BudgetSidebar.vue

@@ -40,7 +40,7 @@ function toggleMenu() {
         <router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'">Budget</router-link>
         <br>
         <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
-        <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
+        <router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>
       </span>
       <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
         <div class="flex flex-row justify-between font-bold">