Improved transaction page.

web-app/src/pages/TransactionPage.vue

@@ -13,6 +13,8 @@ import { onMounted, ref, type Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AttachmentRow from '@/components/common/AttachmentRow.vue'
 import LineItemCard from '@/components/LineItemCard.vue'
+import AppBadge from '@/components/common/AppBadge.vue'
+import ButtonBar from '@/components/common/ButtonBar.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -48,101 +50,66 @@ async function deleteTransaction() {
 }
 </script>
 <template>
-  <AppPage
-    :title="'Transaction ' + transaction.id"
-    v-if="transaction"
-  >
+  <AppPage :title="'Transaction ' + transaction.id" v-if="transaction">
+    <!-- Top-row with some badges for amount, vendor, and category. -->
+    <div>
+      <AppBadge size="lg" class="font-mono">
+        {{ transaction.currency.code }} {{ formatMoney(transaction.amount, transaction.currency) }}
+      </AppBadge>
+      <AppBadge size="md" v-if="transaction.vendor">
+        {{ transaction.vendor.name }}
+      </AppBadge>
+      <CategoryLabel v-if="transaction.category" :category="transaction.category" :clickable="true" />
+    </div>
+    <!-- Second row that lists all tags. -->
+    <div v-if="transaction.tags.length > 0" class="mt-1">
+      <TagLabel v-for="t in transaction.tags" :key="t" :tag="t" />
+    </div>
+
+    <p>{{ transaction.description }}</p>
+
+    <p v-if="transaction.creditedAccount">
+      <strong class="text-negative">Credited</strong> from
+      <RouterLink :to="`/profiles/${getSelectedProfile(route)}/accounts/${transaction.creditedAccount.id}`">
+        {{ transaction.creditedAccount.name }} (#{{ transaction.creditedAccount.numberSuffix }})
+      </RouterLink>
+    </p>
+    <p v-if="transaction.debitedAccount">
+      <strong class="text-positive">Debited</strong> to
+      <RouterLink :to="`/profiles/${getSelectedProfile(route)}/accounts/${transaction.debitedAccount.id}`">
+        {{ transaction.debitedAccount.name }} (#{{ transaction.debitedAccount.numberSuffix }})
+      </RouterLink>
+    </p>
+
+    <!-- All remaining properties are put in this table. -->
     <PropertiesTable>
       <tr>
         <th>Timestamp</th>
         <td>{{ new Date(transaction.timestamp).toLocaleString() }}</td>
       </tr>
       <tr>
-        <th>Added at</th>
+        <th>Added to Finnow</th>
         <td>{{ new Date(transaction.addedAt).toLocaleString() }}</td>
       </tr>
-      <tr>
-        <th>Amount</th>
-        <td>{{ formatMoney(transaction.amount, transaction.currency) }}</td>
-      </tr>
-      <tr>
-        <th>Description</th>
-        <td>{{ transaction.description }}</td>
-      </tr>
-      <tr v-if="transaction.vendor">
-        <th>Vendor</th>
-        <td>
-          {{ transaction.vendor.name }}
-        </td>
-      </tr>
-      <tr v-if="transaction.category">
-        <th>Category</th>
-        <td>
-          <CategoryLabel
-            :category="transaction.category"
-            :clickable="true"
-          />
-        </td>
-      </tr>
-      <tr v-if="transaction.creditedAccount">
-        <th>Credited Account</th>
-        <td>
-          {{ transaction.creditedAccount.name }}
-        </td>
-      </tr>
-      <tr v-if="transaction.debitedAccount">
-        <th>Debited Account</th>
-        <td>
-          {{ transaction.debitedAccount.name }}
-        </td>
-      </tr>
-      <tr>
-        <th>Tags</th>
-        <td>
-          <TagLabel
-            v-for="t in transaction.tags"
-            :key="t"
-            :tag="t"
-          />
-        </td>
-      </tr>
     </PropertiesTable>
 
     <div v-if="transaction.lineItems.length > 0">
       <h3>Line Items</h3>
-      <LineItemCard
-        v-for="item of transaction.lineItems"
-        :key="item.idx"
-        :line-item="item"
-        :currency="transaction.currency"
-        :total-count="transaction.lineItems.length"
-        :editable="false"
-      />
+      <LineItemCard v-for="item of transaction.lineItems" :key="item.idx" :line-item="item"
+        :currency="transaction.currency" :total-count="transaction.lineItems.length" :editable="false" />
     </div>
 
     <div v-if="transaction.attachments.length > 0">
       <h3>Attachments</h3>
-      <AttachmentRow
-        v-for="a in transaction.attachments"
-        :attachment="a"
-        :key="a.id"
-        disabled
-      />
+      <AttachmentRow v-for="a in transaction.attachments" :attachment="a" :key="a.id" disabled />
     </div>
-    <div>
-      <AppButton
-        icon="wrench"
-        @click="
-          router.push(`/profiles/${getSelectedProfile(route)}/transactions/${transaction.id}/edit`)
-        "
-      >
+    <ButtonBar>
+      <AppButton icon="wrench" @click="
+        router.push(`/profiles/${getSelectedProfile(route)}/transactions/${transaction.id}/edit`)
+        ">
         Edit
       </AppButton>
-      <AppButton
-        icon="trash"
-        @click="deleteTransaction()"
-        >Delete</AppButton
-      >
-    </div>
+      <AppButton icon="trash" @click="deleteTransaction()">Delete</AppButton>
+    </ButtonBar>
   </AppPage>
 </template>