Improve appearance of transactions table

web/src/pages/PrepareTransactionsPage/TransactionTable.module.css

@@ -1,7 +0,0 @@
-.transactionTable tbody tr {
-  cursor: pointer;
-}
-
-.disabled td {
-  color: var(--bulma-text-light);
-}

web/src/pages/PrepareTransactionsPage/TransactionsTable.module.css

@@ -0,0 +1,19 @@
+.transactionTable {
+  tbody tr {
+    cursor: pointer;
+  }
+
+  td {
+    .date {
+      white-space: nowrap;
+    }
+
+    .amount {
+      font-family: monospace;
+    }
+  }
+
+  .disabled td {
+    color: var(--bulma-text-light);  
+  }
+}

web/src/pages/PrepareTransactionsPage/TransactionsTable.tsx

@@ -1,6 +1,6 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import type { Transaction } from "../../types/api";
-import styles from "./TransactionTable.module.css";
+import styles from "./TransactionsTable.module.css";
 
 export type TransactionsTableProps = {
   transactions: Transaction[];
@@ -10,6 +10,22 @@ export type TransactionsTableProps = {
   readonly?: boolean;
 }
 
+const transactionEmoji = (transaction: Transaction): string => {
+  if (transaction.kind === 'transfer') {
+    return '➡️'
+  };
+
+  return transaction.amount > 0 ? '⬇️' : '⬆️';
+};
+
+const transactionType = (transaction: Transaction): string => {
+  if (transaction.kind === 'transfer') {
+    return 'Transfer'
+  };
+
+  return transaction.amount > 0 ? 'Inflow' : 'Outflow';
+};
+
 export default function TransactionsTable({ transactions, deselected, deselect, select, readonly }: TransactionsTableProps) {
 
   const changeSelection = useCallback((index: number) => {
@@ -26,16 +42,16 @@ export default function TransactionsTable({ transactions, deselected, deselect,
     }
   }, [deselected, deselect, select]);
 
+  const reversedTransactions = useMemo(() => transactions.slice().reverse(), [transactions]);
 
   const renderRow = useCallback((transaction: Transaction, index: number) => (
     <tr key={index} onClick={() => changeSelection(index)} className={`${!readonly && deselected.includes(index) ? styles.disabled : ""}`}>   
-      <td>{transaction.kind}</td>
-      <td>{transaction.date}</td>
+      <td><span title={transactionType(transaction)}>{transactionEmoji(transaction)}</span></td>
+      <td className={styles.date}>{transaction.date}</td>
+      <td className={styles.amount}>{transaction.amount}</td>
+      <td>{transaction.id ? <abbr title={`ID: ${transaction.id}`}>{transaction.title}</abbr> : transaction.title}</td>
       <td>{transaction.from}</td>
-      <td>{transaction.to}</td>
-      <td>{transaction.amount}</td>
-      <td>{transaction.title}</td>
-      <td>{transaction.id}</td>
+      <td>{transaction.to}</td>       
     </tr>
   ), [changeSelection]);
 
@@ -43,19 +59,17 @@ export default function TransactionsTable({ transactions, deselected, deselect,
     <div className="table-container">
       <table className={`table is-hoverable ${!readonly ? styles.transactionTable : ""}`}>
         <thead>
-          <tr>
-                   
-            <th>Kind</th>
+          <tr>                   
+            <th></th>
             <th>Date</th>
-            <th>From</th>
-            <th>To</th>
             <th>Amount</th>
-            <th>Title</th>
-            <th>ID</th>
+            <th>Title</th>            
+            <th>From</th>
+            <th>To</th> 
           </tr>
         </thead>
         <tbody>
-          {transactions.map(renderRow)}
+          {reversedTransactions.map(renderRow)}
         </tbody>
       </table>
     </div>