Merge pull request #659 from csrapr/Fix/machine-dashboard-issues-hotfix

Fix/machine dashboard issues hotfix

new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.js

@@ -73,7 +73,7 @@ const CashCassettes = ({ machine, config, refetchData }) => {
       name: 'cashbox',
       header: 'Cashbox',
       width: 240,
-      stripe: true,
+      stripe: false,
       view: value => (
         <CashIn currency={{ code: fiatCurrency }} notes={value} total={0} />
       ),
@@ -145,7 +145,6 @@ const CashCassettes = ({ machine, config, refetchData }) => {
       disableRowEdit={isCashOutDisabled}
       name="cashboxes"
       elements={elements}
-      enableEdit
       data={[machine] || []}
       save={onSave}
       validationSchema={ValidationSchema}

new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.js

@@ -104,7 +104,7 @@ const DataTable = ({
   useEffect(() => setExpanded(initialExpanded), [initialExpanded])
 
   const coreWidth = R.compose(R.sum, R.map(R.prop('width')))(elements)
-  const expWidth = 1000 - coreWidth
+  const expWidth = 850 - coreWidth
   const width = coreWidth + (expandable ? expWidth : 0)
 
   const classes = useStyles({ width })
@@ -166,7 +166,7 @@ const DataTable = ({
             {() => (
               <List
                 // this has to be in a style because of how the component works
-                style={{ overflow: 'inherit', outline: 'none' }}
+                style={{ overflowX: 'inherit', outline: 'none' }}
                 {...props}
                 height={data.length * 62 + extraHeight}
                 width={width}

new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js

@@ -50,6 +50,9 @@ const GET_TRANSACTIONS = gql`
       customerIdCardPhotoPath
       customerFrontCameraPath
       customerPhone
+      discount
+      customerId
+      isAnonymous
     }
   }
 `
@@ -95,13 +98,13 @@ const Transactions = ({ id }) => {
   const elements = [
     {
       header: '',
-      width: 62,
+      width: 0,
       size: 'sm',
       view: it => (it.txClass === 'cashOut' ? <TxOutIcon /> : <TxInIcon />)
     },
     {
       header: 'Customer',
-      width: 162,
+      width: 122,
       size: 'sm',
       view: getCustomerDisplayName
     },
@@ -128,20 +131,20 @@ const Transactions = ({ id }) => {
       className: classes.overflowTd,
       size: 'sm',
       textAlign: 'left',
-      width: 170
+      width: 140
     },
     {
       header: 'Date (UTC)',
       view: it => moment.utc(it.created).format('YYYY-MM-DD'),
       textAlign: 'left',
       size: 'sm',
-      width: 150
+      width: 140
     },
     {
       header: 'Status',
       view: it => getStatus(it),
       size: 'sm',
-      width: 80
+      width: 20
     }
   ]
 
@@ -162,8 +165,7 @@ const Transactions = ({ id }) => {
       loading={loading || id === null}
       emptyText="No transactions so far"
       elements={elements}
-      // need to splice because back end query could return double NUM_LOG_RESULTS because it doesnt merge the txIn and the txOut results before applying the limit
-      data={R.path(['transactions'])(txResponse)} // .splice(0,NUM_LOG_RESULTS)}
+      data={R.path(['transactions'])(txResponse)}
       Details={DetailsRow}
       expandable
     />

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

@@ -6,7 +6,7 @@ import NavigateNextIcon from '@material-ui/icons/NavigateNext'
 import classnames from 'classnames'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
 import { TL1, TL2, Label3 } from 'src/components/typography'
@@ -46,25 +46,17 @@ const GET_INFO = gql`
 const getMachines = R.path(['machines'])
 
 const Machines = () => {
-  const { data, refetch, loading } = useQuery(GET_INFO)
+  const { data, refetch } = useQuery(GET_INFO)
   const location = useLocation()
-  const [selectedMachine, setSelectedMachine] = useState('')
   const classes = useStyles()
 
+  const selectedMachine =
+    R.path(['state', 'selectedMachine'])(location) ??
+    R.path(['machines', 0, 'name'])(data) ??
+    ''
   const machines = getMachines(data) ?? []
   const machineInfo = getMachineInfo(selectedMachine)(machines) ?? {}
 
-  // pre-selects first machine from the list, if there is a machine configured.
-  useEffect(() => {
-    if (!loading && data && data.machines) {
-      if (location.state && location.state.selectedMachine) {
-        setSelectedMachine(location.state.selectedMachine)
-      } else {
-        setSelectedMachine(R.path(['machines', 0, 'name'])(data) ?? '')
-      }
-    }
-  }, [loading, data, location.state])
-
   return (
     <Grid container className={classes.grid}>
       <Grid item xs={3}>