Group transactions by date to simplify grouping in UI

web/src/pages/Account.vue

@@ -10,6 +10,7 @@ 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
@@ -144,12 +145,21 @@ function createReconcilationTransaction() {
       :budgetid="budgetid"
       :accountid="accountid"
     />
-    <TransactionRow
-      v-for="(transaction, index) in transactions.TransactionsList"
-      :key="transaction.ID"
-      :transactionid="transaction.ID"
-      :index="index"
-    />
+    <template v-for="(dayTransactions, index) in transactions.TransactionsByDate">
+      <tr class="table-row md:hidden">
+        <td class="py-2" colspan="5">
+          <span class="bg-gray-400 dark:bg-slate-600 rounded-lg p-1 px-2 w-full block">
+            {{ index }}
+          </span>
+        </td>
+      </tr>
+      <TransactionRow
+        v-for="(transaction, index) in dayTransactions"
+        :key="transaction.ID"
+        :transactionid="transaction.ID"
+        :index="index"
+      />
+    </template>
   </table>
   <div class="md:hidden">
     <Modal @submit="submitModal">