fix: customers without transactions are now returned on the gql query

style: added stripes as bg to table rows

feat: created the stripped lines pattern for null values in tables

style: center objects vertically in the tables

fix: removed the vertical alignment on the Td component (broke some
tables)

fix: coalesce the last_active customer property to it's own creation
when there's no tx associated

fix: check for null values in the customer properties

fix: fix the ordering of the customers table

style: centered td contents vertically

lib/customers.js

@@ -386,14 +386,16 @@ function batch () {
  */
 function getCustomersList () {
   const sql = `select name, phone, total_txs, total_spent, 
-  created as last_active, fiat as last_tx_fiat, fiat_code as last_tx_fiat_code,
+  coalesce(tx_created, customer_created) as last_active, 
+  fiat as last_tx_fiat, fiat_code as last_tx_fiat_code,
   tx_class as last_tx_class
   from (
-    select c.name, c.phone, t.tx_class, t.fiat, t.fiat_code, t.created,
+    select c.name, c.phone, c.created as customer_created, 
+    t.tx_class, t.fiat, t.fiat_code, t.created as tx_created,
     row_number() over (partition by c.id order by t.created desc) as rn,
-    count(0) over (partition by c.id) as total_txs,
+    sum(case when t.id is not null then 1 else 0 end) over (partition by c.id) as total_txs,
-    sum(t.fiat) over (partition by c.id) as total_spent
+    coalesce(sum(t.fiat) over (partition by c.id), 0) as total_spent
-    from customers c inner join (
+    from customers c left outer join (
       select 'cashIn' as tx_class, id, fiat, fiat_code, created, customer_id 
       from cash_in_txs where send_confirmed = true union
       select 'cashOut' as tx_class, id, fiat, fiat_code, created, customer_id 

new-lamassu-admin/src/components/fake-table/Table.js

@@ -90,6 +90,7 @@ const Tr = ({ error, errorMessage, children, className }) => {
   const classes = useStyles()
   const cardClasses = { root: classes.cardContentRoot }
   const classNames = {
+    [classes.tr]: true,
     [classes.trError]: error
   }
 

new-lamassu-admin/src/pages/Customers/Customers.js

@@ -44,7 +44,7 @@ const Customers = () => {
     {
       header: 'Phone',
       width: 166,
-      view: it => parsePhoneNumberFromString(it.phone).formatInternational()
+      view: it => parsePhoneNumberFromString(it.phone)?.formatInternational()
     },
     {
       header: 'Total TXs',
@@ -56,23 +56,28 @@ const Customers = () => {
       header: 'Total spent',
       width: 188,
       textAlign: 'right',
-      view: it => `${Number.parseFloat(it.totalSpent)} ${it.lastTxFiatCode}`
+      view: it =>
+        it.lastTxFiatCode
+          ? `${Number.parseFloat(it.totalSpent)} ${it.lastTxFiatCode}`
+          : null
     },
     {
       header: 'Last active',
       width: 197,
-      view: it => moment.utc(it.lastActive).format('YYYY-MM-D')
+      view: it =>
+        it.lastActive ? moment.utc(it.lastActive).format('YYYY-MM-D') : null
     },
     {
       header: 'Last transaction',
       width: 198,
       textAlign: 'right',
-      view: it => (
+      view: it =>
-        <>
+        it.lastTxFiatCode ? (
-          {`${Number.parseFloat(it.lastTxFiat)} ${it.lastTxFiatCode} `}
+          <div>
-          {it.lastTxClass === 'cashOut' ? <TxOutIcon /> : <TxInIcon />}
+            {`${Number.parseFloat(it.lastTxFiat)} ${it.lastTxFiatCode} `}
-        </>
+            {it.lastTxClass === 'cashOut' ? <TxOutIcon /> : <TxInIcon />}
-      )
+          </div>
+        ) : null
     }
   ]
 
@@ -95,9 +100,10 @@ const Customers = () => {
       </div>
       <DataTable
         elements={elements}
-        data={R.sortWith([R.descend('lastActive')])(
+        data={R.sortWith([
-          R.path(['customers'])(customersResponse) ?? []
+          R.ascend(R.prop('name')),
-        )}
+          R.descend(R.prop('lastActive'))
+        ])(R.path(['customers'])(customersResponse) ?? [])}
       />
     </>
   )