From 9c4b7a307adfe5b5b8d50788d659d7a3cf356bab Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 22 Jun 2025 16:52:25 +0200
Subject: [PATCH] improve frontend layout with a new table format for better
 user experience and clarity in transaction details.

---
 static/js/index.js                    | 69 +++++++++++++++++++++-
 templates/satmachineclient/index.html | 85 ++++++++++++++++++++++-----
 2 files changed, 135 insertions(+), 19 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 04ca64e..c9fb6e5 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -8,7 +8,57 @@ window.app = Vue.createApp({
       transactions: [],
       loading: true,
       error: null,
-      showFiatValues: false  // Hide fiat values by default
+      showFiatValues: false,  // Hide fiat values by default
+      transactionColumns: [
+        {
+          name: 'date',
+          label: 'Date',
+          align: 'left',
+          field: row => row.transaction_time || row.created_at,
+          format: val => val,
+          sortable: true,
+          sort: (a, b, rowA, rowB) => {
+            // Sort by most recent first
+            const dateA = new Date(rowA.transaction_time || rowA.created_at);
+            const dateB = new Date(rowB.transaction_time || rowB.created_at);
+            return dateB - dateA;
+          }
+        },
+        {
+          name: 'amount_sats',
+          label: 'Bitcoin',
+          align: 'right',
+          field: 'amount_sats',
+          sortable: true
+        },
+        {
+          name: 'amount_fiat',
+          label: 'Fiat Amount',
+          align: 'right',
+          field: 'amount_fiat',
+          sortable: true
+        },
+        {
+          name: 'type',
+          label: 'Type',
+          align: 'center',
+          field: 'transaction_type',
+          sortable: true
+        },
+        {
+          name: 'status',
+          label: 'Status',
+          align: 'center',
+          field: 'status',
+          sortable: true
+        }
+      ],
+      transactionPagination: {
+        sortBy: 'date',
+        descending: true,
+        page: 1,
+        rowsPerPage: 10
+      }
     }
   },
 
@@ -41,6 +91,14 @@ window.app = Vue.createApp({
       return new Date(dateString).toLocaleDateString()
     },
 
+    formatTime(dateString) {
+      if (!dateString) return ''
+      return new Date(dateString).toLocaleTimeString('en-US', { 
+        hour: '2-digit', 
+        minute: '2-digit' 
+      })
+    },
+
     formatSats(amount) {
       if (!amount) return '0 sats'
       return new Intl.NumberFormat('en-US').format(amount) + ' sats'
@@ -64,10 +122,15 @@ window.app = Vue.createApp({
       try {
         const {data} = await LNbits.api.request(
           'GET',
-          '/satmachineclient/api/v1/dashboard/transactions?limit=10',
+          '/satmachineclient/api/v1/dashboard/transactions?limit=50',
           this.g.user.wallets[0].inkey
         )
-        this.transactions = data
+        // Sort transactions by most recent first
+        this.transactions = data.sort((a, b) => {
+          const dateA = new Date(a.transaction_time || a.created_at)
+          const dateB = new Date(b.transaction_time || b.created_at)
+          return dateB - dateA
+        })
       } catch (error) {
         console.error('Error loading transactions:', error)
       }
diff --git a/templates/satmachineclient/index.html b/templates/satmachineclient/index.html
index b265358..a09834a 100644
--- a/templates/satmachineclient/index.html
+++ b/templates/satmachineclient/index.html
@@ -143,30 +143,83 @@
         </q-card-section>
       </q-card>
 
-      <!-- Recent Transactions -->
+      <!-- Transaction History -->
       <q-card>
         <q-card-section>
-          <h6 class="text-subtitle2 q-my-none q-mb-md">Recent Transactions</h6>
-          <div v-if="transactions.length === 0" class="text-grey text-center q-pa-md">
-            No transactions yet
+          <div class="row items-center q-mb-md">
+            <div class="col">
+              <h6 class="text-subtitle2 q-my-none">Transaction History</h6>
+            </div>
+            <div class="col-auto">
+              <q-btn 
+                flat 
+                dense 
+                icon="refresh" 
+                @click="loadTransactions"
+                :loading="loading"
+                size="sm"
+              >
+                Refresh
+              </q-btn>
+            </div>
           </div>
-          <q-list v-else>
-            <q-item v-for="tx in transactions" :key="tx.id">
-              <q-item-section>
-                <q-item-label>${formatSats(tx.amount_sats)}</q-item-label>
-                <q-item-label caption>${formatCurrency(tx.amount_fiat)} • ${formatDate(tx.transaction_time || tx.created_at)}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
+          
+          <q-table
+            :rows="transactions"
+            :columns="transactionColumns"
+            row-key="id"
+            :pagination="transactionPagination"
+            :loading="loading"
+            flat
+            bordered
+            :no-data-label="'No transactions yet - start your DCA journey!'"
+          >
+            <template v-slot:body-cell-amount_sats="props">
+              <q-td :props="props">
+                <div class="text-weight-medium text-orange-8">
+                  ${formatSats(props.row.amount_sats)}
+                </div>
+              </q-td>
+            </template>
+            
+            <template v-slot:body-cell-amount_fiat="props">
+              <q-td :props="props">
+                <div class="text-weight-medium">
+                  ${formatCurrency(props.row.amount_fiat)}
+                </div>
+              </q-td>
+            </template>
+            
+            <template v-slot:body-cell-date="props">
+              <q-td :props="props">
+                <div>${formatDate(props.row.transaction_time || props.row.created_at)}</div>
+                <div class="text-caption text-grey">
+                  ${formatTime(props.row.transaction_time || props.row.created_at)}
+                </div>
+              </q-td>
+            </template>
+            
+            <template v-slot:body-cell-status="props">
+              <q-td :props="props">
                 <q-chip 
-                  :color="tx.status === 'confirmed' ? 'positive' : 'warning'"
+                  :color="props.row.status === 'confirmed' ? 'positive' : props.row.status === 'failed' ? 'negative' : 'warning'"
                   text-color="white"
                   size="sm"
                 >
-                  ${tx.status}
+                  ${props.row.status}
                 </q-chip>
-              </q-item-section>
-            </q-item>
-          </q-list>
+              </q-td>
+            </template>
+            
+            <template v-slot:body-cell-type="props">
+              <q-td :props="props">
+                <q-badge 
+                  :color="props.row.transaction_type === 'flow' ? 'blue' : 'purple'"
+                  :label="props.row.transaction_type.toUpperCase()"
+                />
+              </q-td>
+            </template>
+          </q-table>
         </q-card-section>
       </q-card>
     </div>