fix: machine profile page changes

new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js

@@ -53,8 +53,10 @@ const MachinesTable = ({ machines, numToRender }) => {
     return <TL2>{`${percent}%`}</TL2>
   }
 
-  const redirect = name => {
-    return history.push('/machines', { selectedMachine: name })
+  const redirect = ({ name, deviceId }) => {
+    return history.push('/machines/' + `${deviceId}`, {
+      selectedMachine: name
+    })
   }
 
   return (
@@ -96,7 +98,7 @@ const MachinesTable = ({ machines, numToRender }) => {
             if (idx < numToRender) {
               return (
                 <TableRow
-                  onClick={() => redirect(machine.name)}
+                  onClick={() => redirect(machine)}
                   className={classnames(classes.row, classes.clickableRow)}
                   key={machine.deviceId + idx}>
                   <StyledCell align="left">

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

@@ -5,7 +5,7 @@ import React from 'react'
 import * as Yup from 'yup'
 
 import { Table as EditableTable } from 'src/components/editableTable'
-import { CashOut } from 'src/components/inputs/cashbox/Cashbox'
+import { CashOut, CashIn } from 'src/components/inputs/cashbox/Cashbox'
 import { NumberInput } from 'src/components/inputs/formik'
 import { fromNamespace } from 'src/utils/config'
 
@@ -15,6 +15,12 @@ const useStyles = makeStyles(styles)
 
 const ValidationSchema = Yup.object().shape({
   name: Yup.string().required('Required'),
+  cashbox: Yup.number()
+    .label('Cashbox')
+    .required()
+    .integer()
+    .min(0)
+    .max(1000),
   cassette1: Yup.number()
     .required('Required')
     .integer()
@@ -27,20 +33,23 @@ const ValidationSchema = Yup.object().shape({
     .max(500)
 })
 
-const RESET_CASHOUT_BILLS = gql`
+const SET_CASSETTE_BILLS = gql`
   mutation MachineAction(
     $deviceId: ID!
     $action: MachineAction!
+    $cashbox: Int!
     $cassette1: Int!
     $cassette2: Int!
   ) {
     machineAction(
       deviceId: $deviceId
       action: $action
+      cashbox: $cashbox
       cassette1: $cassette1
       cassette2: $cassette2
     ) {
       deviceId
+      cashbox
       cassette1
       cassette2
     }
@@ -60,6 +69,19 @@ const CashCassettes = ({ machine, config, refetchData }) => {
     !getCashoutSettings(deviceId).active
 
   const elements = [
+    {
+      name: 'cashbox',
+      header: 'Cashbox',
+      width: 240,
+      stripe: true,
+      view: value => (
+        <CashIn currency={{ code: fiatCurrency }} notes={value} total={0} />
+      ),
+      input: NumberInput,
+      inputProps: {
+        decimalPlaces: 0
+      }
+    },
     {
       name: 'cassette1',
       header: 'Cash-out 1',
@@ -100,15 +122,16 @@ const CashCassettes = ({ machine, config, refetchData }) => {
     }
   ]
 
-  const [resetCashOut, { error }] = useMutation(RESET_CASHOUT_BILLS, {
+  const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, {
     refetchQueries: () => refetchData()
   })
 
-  const onSave = (...[, { deviceId, cassette1, cassette2 }]) => {
-    return resetCashOut({
+  const onSave = (...[, { deviceId, cashbox, cassette1, cassette2 }]) => {
+    return setCassetteBills({
       variables: {
-        action: 'resetCashOutBills',
+        action: 'setCassetteBills',
         deviceId: deviceId,
+        cashbox,
         cassette1,
         cassette2
       }

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

@@ -16,7 +16,6 @@ import Commissions from './MachineComponents/Commissions'
 import Details from './MachineComponents/Details'
 import Overview from './MachineComponents/Overview'
 import Transactions from './MachineComponents/Transactions'
-import Sidebar from './MachineSidebar'
 import styles from './Machines.styles'
 const useStyles = makeStyles(styles)
 
@@ -73,21 +72,21 @@ const Machines = () => {
           <div className={classes.breadcrumbsContainer}>
             <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
               <Link to="/dashboard" className={classes.breadcrumbLink}>
-                <Label3 className={classes.subtitle}>Dashboard</Label3>
+                <Label3 className={classes.breadcrumbElem}>Dashboard</Label3>
               </Link>
-              <TL2 className={classes.subtitle}>{selectedMachine}</TL2>
+              <TL2 className={classes.breadcrumbElem}>{selectedMachine}</TL2>
             </Breadcrumbs>
             <Overview data={machineInfo} onActionSuccess={refetch} />
           </div>
         </Grid>
         <Grid item xs={12}>
-          <Sidebar
+          {/* on hold for now <Sidebar
             isSelected={R.equals(selectedMachine)}
             selectItem={setSelectedMachine}
             data={machines}
             getText={R.prop('name')}
             getKey={R.prop('deviceId')}
-          />
+          /> */}
         </Grid>
       </Grid>
       <Grid item xs={9}>

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

@@ -76,6 +76,14 @@ const styles = {
   breadcrumbLink: {
     textDecoration: 'none'
   },
+  breadcrumbElem: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+    color: comet,
+    margin: 0
+  },
   detailsMargin: {
     marginTop: 24
   },