Add page for all accounts

web/src/pages/Account.vue

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

web/src/router/index.ts

@@ -3,7 +3,8 @@ import {
     createWebHistory,
     RouteLocationNormalized,
 } from "vue-router";
-import Account from "@/pages/Account.vue";
+import Account from "../pages/Account.vue";
+import AllAccounts from "../pages/AllAccounts.vue";
 import Budgeting from "../pages/Budgeting.vue";
 import BudgetSidebar from "../pages/BudgetSidebar.vue";
 import Dashboard from "../pages/Dashboard.vue";
@@ -58,6 +59,13 @@ const routes = [
         props: true,
         meta: { requiresAuth: true },
     },
+    {
+        path: "/budget/:budgetid/all-accounts",
+        name: "All Accounts",
+        components: { default: AllAccounts, sidebar: BudgetSidebar },
+        props: true,
+        meta: { requiresAuth: true },
+    },
     {
         path: "/budget/:budgetid/account/:accountid",
         name: "Account",

web/src/stores/transactions.ts

@@ -1,11 +1,13 @@
 import { defineStore } from "pinia";
-import { POST } from "../api";
+import { GET, POST } from "../api";
 import { formatDate, groupBy } from "../date";
+import { useBudgetsStore } from "./budget";
 import { useAccountStore } from "./budget-account";
 
 interface State {
     Transactions: Map<string, Transaction>;
     Reconciling: boolean;
+    ProblematicTransactions: Array<string>;
 }
 
 export interface Transaction {
@@ -29,6 +31,7 @@ export const useTransactionsStore = defineStore("budget/transactions", {
     state: (): State => ({
         Transactions: new Map<string, Transaction>(),
         Reconciling: false,
+        ProblematicTransactions: new Array<string>(),
     }),
     getters: {
         ReconcilingBalance(state): number {
@@ -43,9 +46,8 @@ export const useTransactionsStore = defineStore("budget/transactions", {
         },
         TransactionsByDate(state) : Record<string, Transaction[]> {
             const accountsStore = useAccountStore();
-            const accountID = accountsStore.CurrentAccountID;
             const allTransactions = [...this.Transactions.values()];
-            return groupBy(allTransactions.filter(x => x.AccountID == accountID), x => formatDate(x.Date));
+            return groupBy(allTransactions, x => formatDate(x.Date));
         },
         TransactionsList(state) : Transaction[] {
             const accountsStore = useAccountStore();
@@ -53,6 +55,9 @@ export const useTransactionsStore = defineStore("budget/transactions", {
             const allTransactions = [...this.Transactions.values()];
             return allTransactions.filter(x => x.AccountID == accountID);
         },
+        ProblematicTransactionsList(state) : Transaction[] {
+            return [...state.ProblematicTransactions.map(x => state.Transactions!.get(x)!)];
+        }
     },
     actions: {
         AddTransactions(transactions: Array<Transaction>) {
@@ -70,6 +75,13 @@ export const useTransactionsStore = defineStore("budget/transactions", {
                 transaction.Reconciled = value;
             }
         },
+        async GetProblematicTransactions() {
+            const budgetStore = useBudgetsStore();
+            const result = await GET("/budget/" + budgetStore.CurrentBudgetID + "/problematic-transactions");
+            const response = await result.json();
+            this.AddTransactions(response.Transactions);
+            this.ProblematicTransactions = [...response.Transactions.map((x : Transaction) => x.ID)];
+        },
         async SubmitReconcilation(reconciliationTransactionAmount: number) {
             const accountsStore = useAccountStore();
             const account = accountsStore.CurrentAccount!;