From 64034aa017bbbc54f424c2cebbc956a4e67273f3 Mon Sep 17 00:00:00 2001
From: ShahanaFarooqui <shahana.farooqui@gmail.com>
Date: Thu, 20 Oct 2022 14:51:06 -0700
Subject: [PATCH] ECL Page Layout Default Settings

---
 backend/controllers/eclair/fees.js            |   3 -
 backend/controllers/eclair/invoices.js        |   6 +-
 backend/controllers/eclair/onchain.js         |   3 -
 backend/controllers/eclair/peers.js           |   4 +-
 server/controllers/eclair/fees.ts             |   3 -
 server/controllers/eclair/invoices.ts         |   6 +-
 server/controllers/eclair/onchain.ts          |   1 -
 server/controllers/eclair/peers.ts            |   4 +-
 .../query-routes/query-routes.component.html  |   2 +-
 .../lightning-payments.component.html         |  10 +-
 .../node-lookup/node-lookup.component.html    |   6 +-
 .../node-lookup/node-lookup.component.scss    |  10 ++
 .../query-routes/query-routes.component.html  |  12 +-
 .../query-routes/query-routes.component.scss  |  15 +--
 .../query-routes/query-routes.component.ts    |  11 +-
 .../shared/services/consts-enums-functions.ts | 105 +++++++++++++++---
 src/app/shared/theme/styles/mixins.scss       |   8 +-
 src/app/shared/theme/styles/root.scss         |   2 +-
 18 files changed, 139 insertions(+), 72 deletions(-)

diff --git a/backend/controllers/eclair/fees.js b/backend/controllers/eclair/fees.js
index 05176e70..4d02048e 100644
--- a/backend/controllers/eclair/fees.js
+++ b/backend/controllers/eclair/fees.js
@@ -88,9 +88,6 @@ export const arrangePayments = (selNode, body) => {
             relayedEle.amountOut = Math.round(relayedEle.amountOut / 1000);
         }
     });
-    payments.sent = common.sortDescByKey(payments.sent, 'firstPartTimestamp');
-    payments.received = common.sortDescByKey(payments.received, 'firstPartTimestamp');
-    payments.relayed = common.sortDescByKey(payments.relayed, 'timestamp');
     logger.log({ selectedNode: selNode, level: 'DEBUG', fileName: 'Fees', msg: 'Arranged Payments Received', data: payments });
     return payments;
 };
diff --git a/backend/controllers/eclair/invoices.js b/backend/controllers/eclair/invoices.js
index 339e670f..e7228f00 100644
--- a/backend/controllers/eclair/invoices.js
+++ b/backend/controllers/eclair/invoices.js
@@ -71,10 +71,7 @@ export const listInvoices = (req, res, next) => {
             const invoices = (!body[0] || body[0].length <= 0) ? [] : body[0];
             pendingInvoices = (!body[1] || body[1].length <= 0) ? [] : body[1];
             return Promise.all(invoices === null || invoices === void 0 ? void 0 : invoices.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.ln_server_url, invoice))).
-                then((values) => {
-                body = common.sortDescByKey(invoices, 'expiresAt');
-                return res.status(200).json(invoices);
-            });
+                then((values) => res.status(200).json(invoices));
         });
     }
     else {
@@ -86,7 +83,6 @@ export const listInvoices = (req, res, next) => {
             if (invoices && invoices.length > 0) {
                 return Promise.all(invoices === null || invoices === void 0 ? void 0 : invoices.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.ln_server_url, invoice))).
                     then((values) => {
-                    body = common.sortDescByKey(invoices, 'expiresAt');
                     logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Invoices', msg: 'Sorted Invoices List Received', data: invoices });
                     return res.status(200).json(invoices);
                 }).
diff --git a/backend/controllers/eclair/onchain.js b/backend/controllers/eclair/onchain.js
index 05e255fa..d69b1de2 100644
--- a/backend/controllers/eclair/onchain.js
+++ b/backend/controllers/eclair/onchain.js
@@ -66,9 +66,6 @@ export const getTransactions = (req, res, next) => {
     };
     logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'OnChain', msg: 'Getting On Chain Transactions Options', data: options.form });
     request.post(options).then((body) => {
-        if (body && body.length > 0) {
-            body = common.sortDescByKey(body, 'timestamp');
-        }
         logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'OnChain', msg: 'On Chain Transactions Received', data: body });
         res.status(200).json(body);
     }).catch((errRes) => {
diff --git a/backend/controllers/eclair/peers.js b/backend/controllers/eclair/peers.js
index 2fb4de93..b2eb13b3 100644
--- a/backend/controllers/eclair/peers.js
+++ b/backend/controllers/eclair/peers.js
@@ -37,7 +37,6 @@ export const getPeers = (req, res, next) => {
                         peer.alias = foundPeer ? foundPeer.alias : peer.nodeId.substring(0, 20);
                         return peer;
                     });
-                    body = common.sortDescByStrKey(body, 'alias');
                     logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Sorted Peers List Received', data: body });
                     res.status(200).json(body);
                 });
@@ -90,8 +89,7 @@ export const connectPeer = (req, res, next) => {
                         peer.alias = foundPeer ? foundPeer.alias : peer.nodeId.substring(0, 20);
                         return peer;
                     });
-                    let peers = (body) ? common.sortDescByStrKey(body, 'alias') : [];
-                    peers = common.newestOnTop(peers, 'nodeId', req.query.nodeId ? req.query.nodeId : req.query.uri ? req.query.uri.substring(0, req.query.uri.indexOf('@')) : '');
+                    const peers = common.newestOnTop(body || [], 'nodeId', req.query.nodeId ? req.query.nodeId : req.query.uri ? req.query.uri.substring(0, req.query.uri.indexOf('@')) : '');
                     logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Peers List after Connect Received', data: peers });
                     res.status(201).json(peers);
                 });
diff --git a/server/controllers/eclair/fees.ts b/server/controllers/eclair/fees.ts
index f4cecf53..c67d14d7 100644
--- a/server/controllers/eclair/fees.ts
+++ b/server/controllers/eclair/fees.ts
@@ -72,9 +72,6 @@ export const arrangePayments = (selNode: CommonSelectedNode, body) => {
     if (relayedEle.amountIn) { relayedEle.amountIn = Math.round(relayedEle.amountIn / 1000); }
     if (relayedEle.amountOut) { relayedEle.amountOut = Math.round(relayedEle.amountOut / 1000); }
   });
-  payments.sent = common.sortDescByKey(payments.sent, 'firstPartTimestamp');
-  payments.received = common.sortDescByKey(payments.received, 'firstPartTimestamp');
-  payments.relayed = common.sortDescByKey(payments.relayed, 'timestamp');
   logger.log({ selectedNode: selNode, level: 'DEBUG', fileName: 'Fees', msg: 'Arranged Payments Received', data: payments });
   return payments;
 };
diff --git a/server/controllers/eclair/invoices.ts b/server/controllers/eclair/invoices.ts
index 25b9bf2e..94067937 100644
--- a/server/controllers/eclair/invoices.ts
+++ b/server/controllers/eclair/invoices.ts
@@ -67,10 +67,7 @@ export const listInvoices = (req, res, next) => {
       const invoices = (!body[0] || body[0].length <= 0) ? [] : body[0];
       pendingInvoices = (!body[1] || body[1].length <= 0) ? [] : body[1];
       return Promise.all(invoices?.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.ln_server_url, invoice))).
-        then((values) => {
-          body = common.sortDescByKey(invoices, 'expiresAt');
-          return res.status(200).json(invoices);
-        });
+        then((values) => res.status(200).json(invoices));
     });
   } else {
     return Promise.all([request(options1), request(options2)]).
@@ -81,7 +78,6 @@ export const listInvoices = (req, res, next) => {
         if (invoices && invoices.length > 0) {
           return Promise.all(invoices?.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.ln_server_url, invoice))).
             then((values) => {
-              body = common.sortDescByKey(invoices, 'expiresAt');
               logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Invoices', msg: 'Sorted Invoices List Received', data: invoices });
               return res.status(200).json(invoices);
             }).
diff --git a/server/controllers/eclair/onchain.ts b/server/controllers/eclair/onchain.ts
index 03e38cc1..a431e8f8 100644
--- a/server/controllers/eclair/onchain.ts
+++ b/server/controllers/eclair/onchain.ts
@@ -59,7 +59,6 @@ export const getTransactions = (req, res, next) => {
   };
   logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'OnChain', msg: 'Getting On Chain Transactions Options', data: options.form });
   request.post(options).then((body) => {
-    if (body && body.length > 0) { body = common.sortDescByKey(body, 'timestamp'); }
     logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'OnChain', msg: 'On Chain Transactions Received', data: body });
     res.status(200).json(body);
   }).catch((errRes) => {
diff --git a/server/controllers/eclair/peers.ts b/server/controllers/eclair/peers.ts
index 88996101..78dcfc0b 100644
--- a/server/controllers/eclair/peers.ts
+++ b/server/controllers/eclair/peers.ts
@@ -37,7 +37,6 @@ export const getPeers = (req, res, next) => {
             peer.alias = foundPeer ? foundPeer.alias : peer.nodeId.substring(0, 20);
             return peer;
           });
-          body = common.sortDescByStrKey(body, 'alias');
           logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Sorted Peers List Received', data: body });
           res.status(200).json(body);
         });
@@ -87,8 +86,7 @@ export const connectPeer = (req, res, next) => {
             peer.alias = foundPeer ? foundPeer.alias : peer.nodeId.substring(0, 20);
             return peer;
           });
-          let peers = (body) ? common.sortDescByStrKey(body, 'alias') : [];
-          peers = common.newestOnTop(peers, 'nodeId', req.query.nodeId ? req.query.nodeId : req.query.uri ? req.query.uri.substring(0, req.query.uri.indexOf('@')) : '');
+          const peers = common.newestOnTop(body || [], 'nodeId', req.query.nodeId ? req.query.nodeId : req.query.uri ? req.query.uri.substring(0, req.query.uri.indexOf('@')) : '');
           logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Peers List after Connect Received', data: peers });
           res.status(201).json(peers);
         });
diff --git a/src/app/cln/graph/query-routes/query-routes.component.html b/src/app/cln/graph/query-routes/query-routes.component.html
index cf760c20..0d8d1696 100644
--- a/src/app/cln/graph/query-routes/query-routes.component.html
+++ b/src/app/cln/graph/query-routes/query-routes.component.html
@@ -62,7 +62,7 @@
       </ng-container>
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef class="pl-2 pr-3">
-          <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>          
+          <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
         </th>
         <td mat-cell *matCellDef="let hop" class="pl-2 pr-3" fxLayoutAlign="end center">
           <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)" class="table-actions-button">View Info</button>          
diff --git a/src/app/cln/transactions/payments/lightning-payments.component.html b/src/app/cln/transactions/payments/lightning-payments.component.html
index 342c7122..47d49544 100644
--- a/src/app/cln/transactions/payments/lightning-payments.component.html
+++ b/src/app/cln/transactions/payments/lightning-payments.component.html
@@ -143,7 +143,7 @@
           <ng-container matColumnDef="group_type">
             <td mat-cell *matCellDef="let payment">
               <span fxLayoutAlign="start center" class="mpp-row-span">{{ payment?.bolt12 ? 'Bolt12' : payment?.bolt11 ? 'Bolt11' : 'Keysend' }}</span>
-              <span *ngIf="payment.is_expanded"><span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span">{{ payment?.bolt12 ? 'Bolt12' : payment?.bolt11 ? 'Bolt11' : 'Keysend' }}</span></span>
+              <span *ngIf="payment.is_expanded"><span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span"></span></span>
             </td>
           </ng-container>
           <ng-container matColumnDef="group_payment_hash">
@@ -165,7 +165,7 @@
               </span>
               <span *ngIf="payment.is_expanded">
                 <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
-                  <span class="ellipsis-child">{{mpp?.bolt11}}</span>
+                  <span class="ellipsis-child"></span>
                 </span>
               </span>
             </td>
@@ -177,7 +177,7 @@
               </span>
               <span *ngIf="payment.is_expanded">
                 <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
-                  <span class="ellipsis-child">{{mpp?.label}}</span>
+                  <span class="ellipsis-child"></span>
                 </span>
               </span>
             </td>
@@ -189,7 +189,7 @@
               </span>
               <span *ngIf="payment.is_expanded">
                 <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
-                  <span class="ellipsis-child">{{mpp?.destination}}</span>
+                  <span class="ellipsis-child"></span>
                 </span>
               </span>
             </td>
@@ -201,7 +201,7 @@
               </span>
               <span *ngIf="payment.is_expanded">
                 <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
-                  <span class="ellipsis-child">{{mpp?.memo}}</span>
+                  <span class="ellipsis-child"></span>
                 </span>
               </span>
             </td>
diff --git a/src/app/eclair/graph/lookups/node-lookup/node-lookup.component.html b/src/app/eclair/graph/lookups/node-lookup/node-lookup.component.html
index 4e51881e..d7e02021 100644
--- a/src/app/eclair/graph/lookups/node-lookup/node-lookup.component.html
+++ b/src/app/eclair/graph/lookups/node-lookup/node-lookup.component.html
@@ -38,10 +38,12 @@
           <td mat-cell *matCellDef="let address"> {{address}} </td>
         </ng-container>
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef class="pl-1"><span fxLayoutAlign="end center">Actions</span></th>
+          <th mat-header-cell *matHeaderCellDef class="pl-1">
+            <div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>            
+          </th>
           <td mat-cell *matCellDef="let address" class="pl-1">
             <span fxLayoutAlign="end center">
-              <button mat-stroked-button color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult?.nodeId + '@' + address" (copied)="onCopyNodeURI($event)">Copy Node URI</button>
+              <button mat-stroked-button class="btn-action-copy" color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult?.nodeId + '@' + address" (copied)="onCopyNodeURI($event)">Copy Node URI</button>
             </span>
           </td>
         </ng-container>
diff --git a/src/app/eclair/graph/lookups/node-lookup/node-lookup.component.scss b/src/app/eclair/graph/lookups/node-lookup/node-lookup.component.scss
index e69de29b..3f11121e 100644
--- a/src/app/eclair/graph/lookups/node-lookup/node-lookup.component.scss
+++ b/src/app/eclair/graph/lookups/node-lookup/node-lookup.component.scss
@@ -0,0 +1,10 @@
+div.bordered-box.table-actions-select.btn-action {
+    min-width: 13rem;
+    width: 13rem;
+  }
+  
+  button.mat-stroked-button.btn-action-copy {
+    min-width: 13rem;
+    width: 13rem;
+  }
+  
\ No newline at end of file
diff --git a/src/app/eclair/graph/query-routes/query-routes.component.html b/src/app/eclair/graph/query-routes/query-routes.component.html
index 41c06059..982d728e 100644
--- a/src/app/eclair/graph/query-routes/query-routes.component.html
+++ b/src/app/eclair/graph/query-routes/query-routes.component.html
@@ -43,11 +43,17 @@
                 </ng-container>
                 <ng-container matColumnDef="nodeId">
                   <th mat-header-cell *matHeaderCellDef> ID </th>
-                  <td mat-cell *matCellDef="let hop"> {{hop?.nodeId}} </td>
+                  <td mat-cell *matCellDef="let hop">
+                    <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '20rem' : '60rem'}">
+                      <span class="ellipsis-child">{{hop?.nodeId}}</span>
+                    </span>
+                  </td>
                 </ng-container>
                 <ng-container matColumnDef="actions">
-                  <th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
-                  <td mat-cell *matCellDef="let hop" class="pl-4">
+                  <th mat-header-cell *matHeaderCellDef class="pl-4 pr-3">
+                    <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>          
+                  </th>
+                  <td mat-cell *matCellDef="let hop" class="pl-4 pr-3" fxLayoutAlign="end center">
                     <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop)" class="table-actions-button">View Info</button>
                   </td>
                 </ng-container>
diff --git a/src/app/eclair/graph/query-routes/query-routes.component.scss b/src/app/eclair/graph/query-routes/query-routes.component.scss
index 3d0e9c13..18b999e4 100644
--- a/src/app/eclair/graph/query-routes/query-routes.component.scss
+++ b/src/app/eclair/graph/query-routes/query-routes.component.scss
@@ -1,10 +1,11 @@
-.mat-column-actions {
-  min-height: 4.8rem;
+.mat-column-nodeId {
+  flex: 0 0 50%;
+  width: 50%;
+  & .ellipsis-parent {
+    display: flex;
+  }
 }
 
-.mat-column-pubkey_alias {
-  flex: 1 1 25%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.mat-column-actions {
+  min-height: 4.8rem;
 }
diff --git a/src/app/eclair/graph/query-routes/query-routes.component.ts b/src/app/eclair/graph/query-routes/query-routes.component.ts
index 3fea5dd4..b96e7e1d 100644
--- a/src/app/eclair/graph/query-routes/query-routes.component.ts
+++ b/src/app/eclair/graph/query-routes/query-routes.component.ts
@@ -26,7 +26,7 @@ export class ECLQueryRoutesComponent implements OnInit, OnDestroy {
   public nodeId = '';
   public amount = 0;
   public qrHops: Array<any> = [];
-  public displayedColumns: any;
+  public displayedColumns = ['alias', 'nodeId', 'actions'];
   public flgLoading: Array<Boolean | 'error'> = [false]; // 0: peers
   public faRoute = faRoute;
   public faExclamationTriangle = faExclamationTriangle;
@@ -36,15 +36,6 @@ export class ECLQueryRoutesComponent implements OnInit, OnDestroy {
 
   constructor(private store: Store<RTLState>, private eclEffects: ECLEffects, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['alias', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['alias', 'nodeId', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['alias', 'nodeId', 'actions'];
-    } else {
-      this.displayedColumns = ['alias', 'nodeId', 'actions'];
-    }
   }
 
   ngOnInit() {
diff --git a/src/app/shared/services/consts-enums-functions.ts b/src/app/shared/services/consts-enums-functions.ts
index 69c7c780..6ff740a8 100644
--- a/src/app/shared/services/consts-enums-functions.ts
+++ b/src/app/shared/services/consts-enums-functions.ts
@@ -786,11 +786,11 @@ export const CLN_TABLES_DEF = {
   },
   transactions: {
     payments: {
-      maxColumns: 5,
+      maxColumns: 7,
       allowedColumns: ['created_at', 'type', 'payment_hash', 'bolt11', 'destination', 'memo', 'label', 'msatoshi_sent', 'msatoshi']
     },
     invoices: {
-      maxColumns: 6,
+      maxColumns: 7,
       allowedColumns: ['expires_at', 'paid_at', 'type', 'description', 'label', 'payment_hash', 'bolt11', 'msatoshi', 'msatoshi_received']
     },
     offers: {
@@ -798,7 +798,7 @@ export const CLN_TABLES_DEF = {
       allowedColumns: ['offer_id', 'single_use', 'used', 'bolt12']
     },
     offer_bookmarks: {
-      maxColumns: 5,
+      maxColumns: 6,
       allowedColumns: ['lastUpdatedAt', 'title', 'amountMSat', 'description', 'vendor', 'bolt12']
     }
   },
@@ -881,24 +881,103 @@ export const LND_TABLES_DEF = {
 
 export const ECL_DEFAULT_PAGE_SETTINGS: PageSettings[] = [
   { pageId: 'on_chain', tables: [
-    { tableId: 'utxos', recordsPerPage: PAGE_SIZE, sortBy: 'blockheight', sortOrder: SortOrderEnum.DESCENDING,
-      columnSelectionSM: ['txid', 'value'],
-      columnSelection: ['txid', 'output', 'value', 'blockheight'] },
-    { tableId: 'dust_utxos', recordsPerPage: PAGE_SIZE, sortBy: 'blockheight', sortOrder: SortOrderEnum.DESCENDING,
-      columnSelectionSM: ['txid', 'value'],
-      columnSelection: ['txid', 'output', 'value', 'blockheight'] }
+    { tableId: 'transaction', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['timestamp', 'amount'],
+      columnSelection: ['timestamp', 'amount', 'fees', 'confirmations', 'address'] }
+  ] },
+  { pageId: 'peers_channels', tables: [
+    { tableId: 'open_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['alias', 'toLocal', 'toRemote'],
+      columnSelection: ['shortChannelId', 'alias', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'balancedness'] },
+    { tableId: 'pending_channels', recordsPerPage: PAGE_SIZE, sortBy: 'state', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['state', 'alias', 'toLocal'],
+      columnSelection: ['state', 'alias', 'toLocal', 'toRemote'] },
+    { tableId: 'inactive_channels', recordsPerPage: PAGE_SIZE, sortBy: 'state', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['state', 'alias', 'toLocal', 'toRemote'],
+      columnSelection: ['state', 'shortChannelId', 'alias', 'toLocal', 'toRemote', 'balancedness'] },
+    { tableId: 'peers', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.ASCENDING,
+      columnSelectionSM: ['alias', 'nodeId'],
+      columnSelection: ['alias', 'nodeId', 'address', 'channels'] }
+  ] },
+  { pageId: 'transactions', tables: [
+    { tableId: 'payments', recordsPerPage: PAGE_SIZE, sortBy: 'firstPartTimestamp', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['firstPartTimestamp', 'recipientAmount'],
+      columnSelection: ['firstPartTimestamp', 'id', 'recipientNodeAlias', 'recipientAmount'] },
+    { tableId: 'invoices', recordsPerPage: PAGE_SIZE, sortBy: 'expiresAt', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['timestamp', 'amount', 'amountSettled'],
+      columnSelection: ['timestamp', 'receivedAt', 'description', 'amount', 'amountSettled'] }
+  ] },
+  { pageId: 'routing', tables: [
+    { tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['timestamp', 'amountIn', 'fee'],
+      columnSelection: ['timestamp', 'fromChannelAlias', 'toChannelAlias', 'amountIn', 'amountOut', 'fee'] },
+    { tableId: 'routing_peers', recordsPerPage: PAGE_SIZE, sortBy: 'totalFee', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['alias', 'events', 'totalFee'],
+      columnSelection: ['channelId', 'alias', 'events', 'totalAmount', 'totalFee'] }
+  ] },
+  { pageId: 'reports', tables: [
+    { tableId: 'routing', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['timestamp', 'amountIn', 'fee'],
+      columnSelection: ['timestamp', 'fromChannelAlias', 'toChannelAlias', 'amountIn', 'amountOut', 'fee'] },
+    { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['date', 'amount_paid', 'amount_received'],
+      columnSelection: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'] }
   ] }
 ];
 
 export const ECL_TABLES_DEF = {
   on_chain: {
-    utxos: {
+    transaction: {
+      maxColumns: 6,
+      allowedColumns: ['timestamp', 'amount', 'fees', 'confirmations', 'address', 'blockHash', 'txid']
+    }
+  },
+  peers_channels: {
+    open_channels: {
+      maxColumns: 8,
+      allowedColumns: ['state', 'shortChannelId', 'channelId', 'alias', 'nodeId', 'isFunder', 'buried', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'feeRatePerKwLocal', 'feeRatePerKwRemote', 'balancedness']
+    },
+    pending_channels: {
+      maxColumns: 8,
+      allowedColumns: ['state', 'shortChannelId', 'channelId', 'alias', 'nodeId', 'isFunder', 'buried', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'feeRatePerKwLocal', 'feeRatePerKwRemote', 'balancedness']
+    },
+    inactive_channels: {
+      maxColumns: 8,
+      allowedColumns: ['state', 'shortChannelId', 'channelId', 'alias', 'nodeId', 'isFunder', 'buried', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'feeRatePerKwLocal', 'feeRatePerKwRemote', 'balancedness']
+    },
+    peers: {
+      maxColumns: 4,
+      allowedColumns: ['alias', 'nodeId', 'address', 'channels']
+    }
+  },
+  transactions: {
+    payments: {
       maxColumns: 7,
-      allowedColumns: ['txid', 'address', 'scriptpubkey', 'output', 'value', 'blockheight', 'reserved']
+      allowedColumns: ['firstPartTimestamp', 'id', 'recipientNodeId', 'recipientNodeAlias', 'recipientAmount', 'description', 'paymentHash', 'paymentPreimage']
     },
-    dust_utxos: {
+    invoices: {
       maxColumns: 7,
-      allowedColumns: ['txid', 'address', 'scriptpubkey', 'output', 'value', 'blockheight', 'reserved']
+      allowedColumns: ['timestamp', 'expiresAt', 'receivedAt', 'nodeId', 'description', 'paymentHash', 'amount', 'amountSettled']
+    }
+  },
+  routing: {
+    forwarding_history: {
+      maxColumns: 8,
+      allowedColumns: ['timestamp', 'fromChannelId', 'fromShortChannelId', 'fromChannelAlias', 'toChannelId', 'toShortChannelId', 'toChannelAlias', 'amountIn', 'amountOut', 'paymentHash', 'fee']
+    },
+    routing_peers: {
+      maxColumns: 5,
+      allowedColumns: ['channelId', 'alias', 'events', 'totalAmount', 'totalFee']
+    }
+  },
+  reports: {
+    routing: {
+      maxColumns: 8,
+      allowedColumns: ['timestamp', 'fromChannelId', 'fromShortChannelId', 'fromChannelAlias', 'toChannelId', 'toShortChannelId', 'toChannelAlias', 'amountIn', 'amountOut', 'paymentHash', 'fee']
+    },
+    transactions: {
+      maxColumns: 5,
+      allowedColumns: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices']
     }
   }
 };
diff --git a/src/app/shared/theme/styles/mixins.scss b/src/app/shared/theme/styles/mixins.scss
index c1795fb0..136cfba6 100644
--- a/src/app/shared/theme/styles/mixins.scss
+++ b/src/app/shared/theme/styles/mixins.scss
@@ -19,16 +19,16 @@ ORDER: Base + typography > general layout + grid > page layout > components
 
 @mixin for_screensize($breakpoint) {
     @if $breakpoint == phone {
-        @media only screen and (max-width: 60rem) { @content };    //600px
+        @media only screen and (max-width: 37.5em) { @content };    //600px
     }
     @if $breakpoint == tab-port {
-        @media only screen and (max-width: 90rem) { @content };     //900px
+        @media only screen and (max-width: 56.25em) { @content };     //900px
     }
     @if $breakpoint == tab-land {
-        @media only screen and (max-width: 120rem) { @content };    //1200px
+        @media only screen and (max-width: 75em) { @content };    //1200px
     }
     @if $breakpoint == big-desktop {
-        @media only screen and (min-width: 180rem) { @content };    //1800px
+        @media only screen and (min-width: 112.5em) { @content };    //1800px
     }
 }
 
diff --git a/src/app/shared/theme/styles/root.scss b/src/app/shared/theme/styles/root.scss
index e41f1b69..77125686 100644
--- a/src/app/shared/theme/styles/root.scss
+++ b/src/app/shared/theme/styles/root.scss
@@ -147,7 +147,7 @@ body {
 .padding-gap-large {
   padding: $gap * 2 !important;
   @include for_screensize(tab-land) {
-    padding: $gap !important;
+    padding: $gap * 4 !important;
   }
   @include for_screensize(tab-port) {
     padding: math.div($gap, 2) !important;