Feat: cash cassette graph next to input field

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js

@@ -46,7 +46,7 @@ const CashIn = ({ currency, notes, total }) => {
   return (
     <>
       <div className={classes.row}>
-        <div className={classes.col2}>
+        <div>
           <div className={classes.innerRow}>
             <Info2 className={classes.noMarginText}>{notes} notes</Info2>
           </div>
@@ -104,7 +104,8 @@ const CashOut = ({
   denomination = 0,
   currency,
   notes,
-  className
+  className,
+  editingMode = false
 }) => {
   const percent = (100 * notes) / capacity
   const classes = gridClasses()
@@ -114,20 +115,22 @@ const CashOut = ({
         <div className={classes.col}>
           <Cashbox className={className} percent={percent} cashOut />
         </div>
-        <div className={classes.col2}>
-          <div className={classes.innerRow}>
-            <Info2 className={classes.noMarginText}>{notes}</Info2>
-            <Chip
-              className={classes.chip}
-              label={`${denomination} ${currency.code}`}
-            />
+        {!editingMode && (
+          <div className={classes.col2}>
+            <div className={classes.innerRow}>
+              <Info2 className={classes.noMarginText}>{notes}</Info2>
+              <Chip
+                className={classes.chip}
+                label={`${denomination} ${currency.code}`}
+              />
+            </div>
+            <div className={classes.innerRow}>
+              <Label1 className={classes.noMarginText}>
+                {notes * denomination} {currency.code}
+              </Label1>
+            </div>
           </div>
-          <div className={classes.innerRow}>
-            <Label1 className={classes.noMarginText}>
-              {notes * denomination} {currency.code}
-            </Label1>
-          </div>
-        </div>
+        )}
       </div>
     </>
   )

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js

@@ -48,8 +48,7 @@ const cashboxStyles = {
 
 const gridStyles = {
   row: {
-    display: 'flex',
-    justifyContent: 'space-between'
+    display: 'flex'
   },
   innerRow: {
     display: 'flex',

new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js

@@ -0,0 +1,47 @@
+import { makeStyles } from '@material-ui/core'
+import React, { memo, useState } from 'react'
+
+import { CashOut } from 'src/components/inputs/cashbox/Cashbox'
+
+import { NumberInput } from '../base'
+const useStyles = makeStyles({
+  flex: {
+    display: 'flex'
+  },
+  cashCassette: {
+    width: 80,
+    height: 36,
+    marginRight: 16
+  }
+})
+
+const CashCassetteInput = memo(({ decimalPlaces, ...props }) => {
+  const classes = useStyles()
+  const { name, onChange, onBlur, value } = props.field
+  const { touched, errors } = props.form
+  const [notes, setNotes] = useState(value)
+  const error = !!(touched[name] && errors[name])
+  return (
+    <div className={classes.flex}>
+      <CashOut
+        className={classes.cashCassette}
+        notes={notes}
+        editingMode={true}
+      />
+      <NumberInput
+        name={name}
+        onChange={e => {
+          setNotes(e.target.value)
+          return onChange(e)
+        }}
+        onBlur={onBlur}
+        value={value}
+        error={error}
+        decimalPlaces={decimalPlaces}
+        {...props}
+      />
+    </div>
+  )
+})
+
+export default CashCassetteInput

new-lamassu-admin/src/components/inputs/formik/index.js

@@ -1,4 +1,5 @@
 import Autocomplete from './Autocomplete'
+import CashCassetteInput from './CashCassetteInput'
 import Checkbox from './Checkbox'
 import NumberInput from './NumberInput'
 import RadioGroup from './RadioGroup'
@@ -11,5 +12,6 @@ export {
   TextInput,
   NumberInput,
   SecretInput,
-  RadioGroup
+  RadioGroup,
+  CashCassetteInput
 }

new-lamassu-admin/src/pages/Maintenance/CashCassettes.js

@@ -7,7 +7,7 @@ import * as Yup from 'yup'
 
 import { Table as EditableTable } from 'src/components/editableTable'
 import { CashOut, CashIn } from 'src/components/inputs/cashbox/Cashbox'
-import { NumberInput } from 'src/components/inputs/formik'
+import { NumberInput, CashCassetteInput } from 'src/components/inputs/formik'
 import TitleSection from 'src/components/layout/TitleSection'
 import { EmptyTable } from 'src/components/table'
 import { fromNamespace } from 'src/utils/config'
@@ -86,6 +86,7 @@ const CashCassettes = () => {
   const cashout = data?.config && fromNamespace('cashOut')(data.config)
   const locale = data?.config && fromNamespace('locale')(data.config)
   const fiatCurrency = locale?.fiatCurrency
+  const machines = R.path(['machines'])(data) ?? []
 
   const onSave = (...[, { id, cashbox, cassette1, cassette2 }]) => {
     return setCassetteBills({
@@ -135,7 +136,7 @@ const CashCassettes = () => {
           notes={value}
         />
       ),
-      input: NumberInput,
+      input: CashCassetteInput,
       inputProps: {
         decimalPlaces: 0
       }
@@ -145,15 +146,17 @@ const CashCassettes = () => {
       header: 'Cassette 2 (Bottom)',
       width: 265,
       stripe: true,
-      view: (value, { id }) => (
-        <CashOut
-          className={classes.cashbox}
-          denomination={getCashoutSettings(id)?.bottom}
-          currency={{ code: fiatCurrency }}
-          notes={value}
-        />
-      ),
-      input: NumberInput,
+      view: (value, { id }) => {
+        return (
+          <CashOut
+            className={classes.cashbox}
+            denomination={getCashoutSettings(id)?.bottom}
+            currency={{ code: fiatCurrency }}
+            notes={value}
+          />
+        )
+      },
+      input: CashCassetteInput,
       inputProps: {
         decimalPlaces: 0
       }
@@ -161,24 +164,23 @@ const CashCassettes = () => {
   ]
 
   return (
-    <>
+    <div className={classes.pageBottomMargin}>
       <TitleSection title="Cash Cassettes" />
-
       <EditableTable
         error={error?.message}
         name="cashboxes"
         enableEdit
         stripeWhen={isCashOutDisabled}
         elements={elements}
-        data={data && data.machines}
+        data={machines}
         save={onSave}
         validationSchema={ValidationSchema}
       />
 
-      {data && R.isEmpty(data.machines) && (
+      {data && R.isEmpty(machines) && (
         <EmptyTable message="No machines so far" />
       )}
-    </>
+    </div>
   )
 }
 

new-lamassu-admin/src/pages/Maintenance/CashCassettes.styles.js

@@ -2,5 +2,8 @@ export default {
   cashbox: {
     width: 80,
     height: 36
+  },
+  pageBottomMargin: {
+    marginBottom: 180
   }
 }