From 6474017563bbf2965e671e0183ddde3414f9e7a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Tue, 30 May 2023 13:49:11 +0100
Subject: [PATCH] feat: revamp cash units screen fix: bill math

---
 lib/bill-math.js                              |  14 +-
 .../src/components/inputs/cashbox/Cashbox.js  | 106 +++++--
 .../inputs/cashbox/Cashbox.styles.js          |  10 +-
 .../pages/Maintenance/CashCassettes.styles.js |  30 --
 .../src/pages/Maintenance/CashUnitDetails.js  | 211 +++++++++++++
 .../{CashCassettes.js => CashUnits.js}        |  52 ++--
 .../src/pages/Maintenance/CashUnits.styles.js |  56 ++++
 ...hCassettesFooter.js => CashUnitsFooter.js} |   3 +-
 ...er.styles.js => CashUnitsFooter.styles.js} |   0
 .../src/pages/Maintenance/helper.js           | 294 ++++++------------
 .../src/routing/lamassu.routes.js             |  10 +-
 new-lamassu-admin/src/routing/pazuz.routes.js |  10 +-
 12 files changed, 487 insertions(+), 309 deletions(-)
 delete mode 100644 new-lamassu-admin/src/pages/Maintenance/CashCassettes.styles.js
 create mode 100644 new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.js
 rename new-lamassu-admin/src/pages/Maintenance/{CashCassettes.js => CashUnits.js} (89%)
 create mode 100644 new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js
 rename new-lamassu-admin/src/pages/Maintenance/{CashCassettesFooter.js => CashUnitsFooter.js} (98%)
 rename new-lamassu-admin/src/pages/Maintenance/{CashCassettesFooter.styles.js => CashUnitsFooter.styles.js} (100%)

diff --git a/lib/bill-math.js b/lib/bill-math.js
index c94cc2fb..c423e1c5 100644
--- a/lib/bill-math.js
+++ b/lib/bill-math.js
@@ -56,17 +56,16 @@ const buildBillList = (units, mode) => {
           units
         )
       
-        const _units = _.cloneDeep(units)
+        const _units = _.filter(it => it.count > 0)(_.cloneDeep(units))
         const bills = []
       
         for(let i = 0; i < amountOfBills; i++) {
           const idx = i % _.size(_units)
           if (_units[idx].count > 0) {
             bills.push(_units[idx].denomination)
+            _units[idx].count--
           }
       
-          _units[idx].count--
-      
           if (_units[idx].count === 0) {
             _units.splice(idx, 1)
           }
@@ -82,17 +81,16 @@ const buildBillList = (units, mode) => {
           units
         )
       
-        const _units = _.orderBy(['denomination'], ['asc'])(_.cloneDeep(units))
+        const _units = _.flow([_.filter(it => it.count > 0), _.orderBy(['denomination'], ['asc'])])(_.cloneDeep(units))
         const bills = []
       
         for(let i = 0; i < amountOfBills; i++) {
           const idx = i % _.size(_units)
           if (_units[idx].count > 0) {
             bills.push(_units[idx].denomination)
+            _units[idx].count--
           }
       
-          _units[idx].count--
-      
           if (_units[idx].count === 0) {
             _units.splice(idx, 1)
           }
@@ -107,6 +105,10 @@ const buildBillList = (units, mode) => {
 
 const getSolution = (units, amount, mode) => {
   const billList = buildBillList(units, mode)
+
+  if (_.sum(billList) < amount.toNumber()) {
+    return []
+  }
   
   const solver = sumService.subsetSum(billList, amount.toNumber())
   const solution = _.countBy(Math.floor, solver.next().value)
diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
index 3ffca2a8..68755b53 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
@@ -15,6 +15,7 @@ const Cashbox = ({
   percent = 0,
   cashOut = false,
   width,
+  height,
   className,
   emptyPartClassName,
   labelClassName,
@@ -27,6 +28,7 @@ const Cashbox = ({
     percent,
     cashOut,
     width,
+    height,
     applyColorVariant,
     isLow
   })
@@ -55,35 +57,17 @@ const Cashbox = ({
 
 // https://support.lamassu.is/hc/en-us/articles/360025595552-Installing-the-Sintra-Forte
 // Sintra and Sintra Forte can have up to 500 notes per cashOut box and up to 1000 per cashIn box
-const CashIn = ({ currency, notes, total }) => {
-  const classes = gridClasses()
-  return (
-    <>
-      <div className={classes.row}>
-        <div>
-          <div className={classes.innerRow}>
-            <Info2 className={classes.noMarginText}>{notes} notes</Info2>
-          </div>
-          <div className={classes.innerRow}>
-            <Label1 className={classes.noMarginText}>
-              {total} {currency.code}
-            </Label1>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-const CashOut = ({
+const CashIn = ({
   capacity = 500,
-  denomination = 0,
   currency,
   notes,
   className,
   editingMode = false,
   threshold,
-  width
+  width,
+  height,
+  total,
+  omitInnerPercentage
 }) => {
   const percent = (100 * notes) / capacity
   const isLow = percent < threshold
@@ -98,6 +82,54 @@ const CashOut = ({
             cashOut
             isLow={isLow}
             width={width}
+            height={height}
+            omitInnerPercentage={omitInnerPercentage}
+          />
+        </div>
+        {!editingMode && (
+          <div className={classes.col2}>
+            <div className={classes.innerRow}>
+              <Info2 className={classes.noMarginText}>{notes} notes</Info2>
+            </div>
+            <div className={classes.innerRow}>
+              <Label1 className={classes.noMarginText}>
+                {total} {currency.code}
+              </Label1>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+const CashOut = ({
+  capacity = 500,
+  denomination = 0,
+  currency,
+  notes,
+  className,
+  editingMode = false,
+  threshold,
+  width,
+  height,
+  omitInnerPercentage
+}) => {
+  const percent = (100 * notes) / capacity
+  const isLow = percent < threshold
+  const classes = gridClasses()
+  return (
+    <>
+      <div className={classes.row}>
+        <div className={classes.col}>
+          <Cashbox
+            className={className}
+            percent={percent}
+            cashOut
+            isLow={isLow}
+            width={width}
+            height={height}
+            omitInnerPercentage={omitInnerPercentage}
           />
         </div>
         {!editingMode && (
@@ -121,4 +153,30 @@ const CashOut = ({
   )
 }
 
-export { Cashbox, CashIn, CashOut }
+const CashOutLite = ({
+  capacity = 500,
+  denomination = 0,
+  currency,
+  notes,
+  threshold,
+  width
+}) => {
+  const percent = (100 * notes) / capacity
+  const isLow = percent < threshold
+  const classes = gridClasses()
+  return (
+    <div className={classes.col}>
+      <Cashbox
+        percent={percent}
+        cashOut
+        isLow={isLow}
+        width={width}
+        height={15}
+        omitInnerPercentage
+      />
+      <Chip label={`${denomination} ${currency.code}`} />
+    </div>
+  )
+}
+
+export { Cashbox, CashIn, CashOut, CashOutLite }
diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
index e806f3ab..df06ed6b 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
@@ -21,7 +21,7 @@ const cashboxStyles = {
   cashbox: {
     borderColor: colorPicker,
     backgroundColor: colorPicker,
-    height: 118,
+    height: ({ height }) => height ?? 118,
     width: ({ width }) => width ?? 80,
     border: '2px solid',
     textAlign: 'end',
@@ -58,7 +58,13 @@ const cashboxStyles = {
 
 const gridStyles = {
   row: {
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'center'
+  },
+  col: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
   },
   innerRow: {
     display: 'flex',
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashCassettes.styles.js b/new-lamassu-admin/src/pages/Maintenance/CashCassettes.styles.js
deleted file mode 100644
index 45689187..00000000
--- a/new-lamassu-admin/src/pages/Maintenance/CashCassettes.styles.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { offColor } from 'src/styling/variables'
-
-export default {
-  cashbox: {
-    height: 36
-  },
-  tBody: {
-    maxHeight: '65vh',
-    overflow: 'auto'
-  },
-  tableWidth: {
-    display: 'flex',
-    alignItems: 'center',
-    marginRight: 1
-  },
-  descriptions: {
-    color: offColor,
-    marginTop: 0
-  },
-  cashboxReset: {
-    color: offColor,
-    margin: [[13, 0, -5, 20]]
-  },
-  selection: {
-    marginRight: 12
-  },
-  downloadLogsButton: {
-    marginLeft: 13
-  }
-}
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.js b/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.js
new file mode 100644
index 00000000..6bd69372
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.js
@@ -0,0 +1,211 @@
+import { makeStyles } from '@material-ui/core/styles'
+import * as R from 'ramda'
+import React from 'react'
+
+import Chip from 'src/components/Chip'
+import { CashOut } from 'src/components/inputs'
+import { Label1, TL2 } from 'src/components/typography'
+import { offDarkColor } from 'src/styling/variables'
+import { fromNamespace } from 'src/utils/config'
+import { cashUnitCapacity, modelPrettifier } from 'src/utils/machine'
+
+const styles = {
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginTop: 12,
+    marginBottom: 16,
+    '& > *': {
+      marginRight: 40
+    },
+    '& > *:last-child': {
+      marginRight: 0
+    },
+    minHeight: 120
+  },
+  row: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  col: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  machineData: {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 210
+  },
+  billList: {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 160,
+    '& > span': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      '& > p': {
+        minWidth: 30
+      }
+    }
+  },
+  unitList: {
+    display: 'flex',
+    flexDirection: 'row',
+    '& > *': {
+      marginRight: 20
+    },
+    '& > *:last-child': {
+      marginRight: 0
+    },
+    marginTop: 10
+  },
+  verticalLine: {
+    height: '100%',
+    width: 1,
+    backgroundColor: offDarkColor
+  },
+  label: {
+    marginBottom: 10
+  },
+  loadingBoxes: {
+    display: 'flex',
+    flexDirection: 'column',
+    '& > *': {
+      marginBottom: 20
+    },
+    '& > *:last-child': {
+      marginBottom: 0
+    }
+  }
+}
+
+const useStyles = makeStyles(styles)
+
+const CashUnitDetails = ({ machine, bills, currency, config }) => {
+  const classes = useStyles()
+  const billCount = R.countBy(it => it.fiat)(bills)
+  const fillingPercentageSettings = fromNamespace('notifications', config)
+  const cashout = fromNamespace('cashOut')(config)
+  const getCashoutSettings = id => fromNamespace(id)(cashout)
+
+  return (
+    <div className={classes.wrapper}>
+      <div className={classes.machineData}>
+        <Label1>Machine Model</Label1>
+        <span>{modelPrettifier[machine.model]}</span>
+      </div>
+      <div className={classes.billList}>
+        <Label1>Cash box</Label1>
+        {R.isEmpty(billCount) && <TL2 noMargin>Empty</TL2>}
+        {R.map(it => (
+          <span>
+            <TL2 noMargin>{billCount[it]}</TL2>
+            <Chip label={`${it} ${currency}`} />
+          </span>
+        ))(R.keys(billCount))}
+      </div>
+      <div className={classes.unitList}>
+        {machine.numberOfStackers === 0 &&
+          R.map(it => (
+            <>
+              <div className={classes.col}>
+                <Label1
+                  noMargin
+                  className={classes.label}>{`Cassette ${it}`}</Label1>
+                <CashOut
+                  width={60}
+                  height={40}
+                  currency={{ code: currency }}
+                  notes={machine.cashUnits[`cassette${it}`]}
+                  denomination={getCashoutSettings(machine.id)[`cassette${it}`]}
+                  threshold={
+                    fillingPercentageSettings[`fillingPercentageCassette${it}`]
+                  }
+                  capacity={cashUnitCapacity[machine.model].cassette}
+                />
+              </div>
+              {it !== machine.numberOfCassettes && (
+                <span className={classes.verticalLine} />
+              )}
+            </>
+          ))(R.range(1, machine.numberOfCassettes + 1))}
+        {machine.numberOfStackers > 0 && (
+          <>
+            <div className={classes.col}>
+              <Label1
+                noMargin
+                className={classes.label}>{`Loading boxes`}</Label1>
+              <div className={classes.loadingBoxes}>
+                {R.map(it => (
+                  <CashOut
+                    width={60}
+                    height={40}
+                    currency={{ code: currency }}
+                    notes={machine.cashUnits[`cassette${it}`]}
+                    denomination={
+                      getCashoutSettings(machine.id)[`cassette${it}`]
+                    }
+                    threshold={
+                      fillingPercentageSettings[
+                        `fillingPercentageCassette${it}`
+                      ]
+                    }
+                    capacity={cashUnitCapacity[machine.model].cassette}
+                  />
+                ))(R.range(1, machine.numberOfCassettes + 1))}
+              </div>
+            </div>
+            <span className={classes.verticalLine} />
+            {R.map(it => (
+              <>
+                <div className={classes.col}>
+                  <Label1
+                    noMargin
+                    className={classes.label}>{`Stacker ${it}`}</Label1>
+                  <div className={classes.loadingBoxes}>
+                    <CashOut
+                      width={60}
+                      height={40}
+                      currency={{ code: currency }}
+                      notes={machine.cashUnits[`stacker${it}f`]}
+                      denomination={
+                        getCashoutSettings(machine.id)[`stacker${it}f`]
+                      }
+                      threshold={
+                        fillingPercentageSettings[
+                          `fillingPercentageStacker${it}f`
+                        ]
+                      }
+                      capacity={cashUnitCapacity[machine.model].stacker}
+                    />
+                    <CashOut
+                      width={60}
+                      height={40}
+                      currency={{ code: currency }}
+                      notes={machine.cashUnits[`stacker${it}r`]}
+                      denomination={
+                        getCashoutSettings(machine.id)[`stacker${it}r`]
+                      }
+                      threshold={
+                        fillingPercentageSettings[
+                          `fillingPercentageStacker${it}r`
+                        ]
+                      }
+                      capacity={cashUnitCapacity[machine.model].stacker}
+                    />
+                  </div>
+                </div>
+                {it !== machine.numberOfStackers && (
+                  <span className={classes.verticalLine} />
+                )}
+              </>
+            ))(R.range(1, machine.numberOfStackers + 1))}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default CashUnitDetails
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashCassettes.js b/new-lamassu-admin/src/pages/Maintenance/CashUnits.js
similarity index 89%
rename from new-lamassu-admin/src/pages/Maintenance/CashCassettes.js
rename to new-lamassu-admin/src/pages/Maintenance/CashUnits.js
index 4e4c4251..212af940 100644
--- a/new-lamassu-admin/src/pages/Maintenance/CashCassettes.js
+++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.js
@@ -7,10 +7,10 @@ import React, { useState } from 'react'
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
 import Modal from 'src/components/Modal'
 import { IconButton, Button } from 'src/components/buttons'
-import { Table as EditableTable } from 'src/components/editableTable'
 import { RadioGroup } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
 import { EmptyTable } from 'src/components/table'
+import DataTable from 'src/components/tables/DataTable'
 import { P, Label1 } from 'src/components/typography'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 import { ReactComponent as ReverseHistoryIcon } from 'src/styling/icons/circle buttons/history/white.svg'
@@ -19,8 +19,9 @@ import { fromNamespace, toNamespace } from 'src/utils/config'
 import { MANUAL, AUTOMATIC } from 'src/utils/constants'
 import { onlyFirstToUpper } from 'src/utils/string'
 
-import styles from './CashCassettes.styles'
-import CashCassettesFooter from './CashCassettesFooter'
+import CashUnitDetails from './CashUnitDetails'
+import styles from './CashUnits.styles'
+import CashCassettesFooter from './CashUnitsFooter'
 import CashboxHistory from './CashboxHistory'
 import Wizard from './Wizard/Wizard'
 import helper from './helper'
@@ -117,9 +118,6 @@ const CashCassettes = () => {
   const [machineId, setMachineId] = useState('')
 
   const machines = R.path(['machines'])(data) ?? []
-  const [stackerMachines, nonStackerMachines] = R.partition(
-    it => it.numberOfStackers > 0
-  )(machines)
   const unpairedMachines = R.path(['unpairedMachines'])(data) ?? []
   const config = R.path(['config'])(data) ?? {}
   const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, {
@@ -141,7 +139,6 @@ const CashCassettes = () => {
   const fiatCurrency = locale?.fiatCurrency
 
   const getCashoutSettings = id => fromNamespace(id)(cashout)
-  const isCashOutDisabled = ({ id }) => !getCashoutSettings(id).active
 
   const onSave = (id, cashUnits) => {
     return setCassetteBills({
@@ -178,8 +175,8 @@ const CashCassettes = () => {
     setSelectedRadio(selectedRadio)
   }
 
-  const nonStackerElements = helper.getElements(
-    nonStackerMachines,
+  const elements = helper.getElements(
+    machines,
     classes,
     config,
     bills,
@@ -187,13 +184,13 @@ const CashCassettes = () => {
     setWizard
   )
 
-  const stackerElements = helper.getElements(
-    stackerMachines,
-    classes,
-    config,
-    bills,
-    setMachineId,
-    setWizard
+  const InnerCashUnitDetails = ({ it }) => (
+    <CashUnitDetails
+      machine={it}
+      bills={bills[it.id] ?? []}
+      currency={fiatCurrency}
+      config={config}
+    />
   )
 
   return (
@@ -250,22 +247,13 @@ const CashCassettes = () => {
         </TitleSection>
         {!showHistory && (
           <>
-            <EditableTable
-              error={error?.message}
-              name="cashboxes"
-              stripeWhen={isCashOutDisabled}
-              elements={nonStackerElements}
-              data={nonStackerMachines}
-              tbodyWrapperClass={classes.tBody}
-            />
-
-            <EditableTable
-              error={error?.message}
-              name="recyclerCashboxes"
-              stripeWhen={isCashOutDisabled}
-              elements={stackerElements}
-              data={stackerMachines}
-              tbodyWrapperClass={classes.tBody}
+            <DataTable
+              loading={dataLoading}
+              elements={elements}
+              data={machines}
+              Details={InnerCashUnitDetails}
+              emptyText="No machines so far"
+              expandable
             />
 
             {data && R.isEmpty(machines) && (
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js b/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js
new file mode 100644
index 00000000..683feeaa
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js
@@ -0,0 +1,56 @@
+import { offColor, offDarkColor } from 'src/styling/variables'
+
+export default {
+  cashbox: {
+    height: 36
+  },
+  tBody: {
+    maxHeight: '65vh',
+    overflow: 'auto'
+  },
+  tableWidth: {
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: 1
+  },
+  descriptions: {
+    color: offColor,
+    marginTop: 0
+  },
+  cashboxReset: {
+    color: offColor,
+    margin: [[13, 0, -5, 20]]
+  },
+  selection: {
+    marginRight: 12
+  },
+  downloadLogsButton: {
+    marginLeft: 13
+  },
+  unitsRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    margin: [[10, 0]],
+    '& > *': {
+      marginRight: 30
+    },
+    '& > *:last-child': {
+      marginRight: 0
+    }
+  },
+  units: {
+    display: 'flex',
+    flexDirection: 'row',
+    '& > *': {
+      marginRight: 10
+    },
+    '& > *:last-child': {
+      marginRight: 0
+    }
+  },
+  verticalLine: {
+    height: '100%',
+    width: 1,
+    backgroundColor: offDarkColor
+  }
+}
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashCassettesFooter.js b/new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.js
similarity index 98%
rename from new-lamassu-admin/src/pages/Maintenance/CashCassettesFooter.js
rename to new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.js
index cc417cc4..8bb4f533 100644
--- a/new-lamassu-admin/src/pages/Maintenance/CashCassettesFooter.js
+++ b/new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.js
@@ -9,7 +9,8 @@ import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-ou
 import { fromNamespace } from 'src/utils/config'
 import { numberToFiatAmount } from 'src/utils/number.js'
 
-import styles from './CashCassettesFooter.styles.js'
+import styles from './CashUnitsFooter.styles.js'
+
 const useStyles = makeStyles(styles)
 
 const CashCassettesFooter = ({
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashCassettesFooter.styles.js b/new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.styles.js
similarity index 100%
rename from new-lamassu-admin/src/pages/Maintenance/CashCassettesFooter.styles.js
rename to new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.styles.js
diff --git a/new-lamassu-admin/src/pages/Maintenance/helper.js b/new-lamassu-admin/src/pages/Maintenance/helper.js
index 1a3f11c2..c37769be 100644
--- a/new-lamassu-admin/src/pages/Maintenance/helper.js
+++ b/new-lamassu-admin/src/pages/Maintenance/helper.js
@@ -1,77 +1,11 @@
 import * as R from 'ramda'
 
 import { IconButton } from 'src/components/buttons'
-import { CashOut, CashIn } from 'src/components/inputs/cashbox/Cashbox'
-import { NumberInput, CashCassetteInput } from 'src/components/inputs/formik'
+import { CashIn, CashOutLite } from 'src/components/inputs/cashbox/Cashbox'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 import { fromNamespace } from 'src/utils/config'
 import { cashUnitCapacity } from 'src/utils/machine'
 
-const widthsByCashUnits = {
-  2: {
-    machine: 250,
-    cashbox: 260,
-    cassette: 300,
-    unitGraph: 80,
-    editWidth: 90
-  },
-  3: {
-    machine: 220,
-    cashbox: 215,
-    cassette: 225,
-    unitGraph: 60,
-    editWidth: 90
-  },
-  4: {
-    machine: 190,
-    cashbox: 180,
-    cassette: 185,
-    unitGraph: 50,
-    editWidth: 90
-  },
-  5: {
-    machine: 170,
-    cashbox: 140,
-    cassette: 160,
-    unitGraph: 45,
-    editWidth: 90
-  },
-  6: {
-    machine: 150,
-    cashbox: 130,
-    cassette: 142,
-    unitGraph: 45,
-    editWidth: 70
-  },
-  7: {
-    machine: 140,
-    cashbox: 115,
-    cassette: 125,
-    unitGraph: 40,
-    editWidth: 70
-  },
-  8: {
-    machine: 100,
-    cashbox: 115,
-    cassette: 122,
-    unitGraph: 35,
-    editWidth: 70
-  }
-}
-
-const getMaxNumberOfCassettesMap = machines =>
-  Math.max(...R.map(it => it.numberOfCassettes, machines), 0)
-
-const getMaxNumberOfStackersMap = machines =>
-  Math.max(...R.map(it => it.numberOfStackers, machines), 0)
-
-// Each stacker counts as two cash units (front and rear)
-const getMaxNumberOfCashUnits = machines =>
-  Math.max(
-    ...R.map(it => it.numberOfCassettes + it.numberOfStackers * 2, machines),
-    0
-  )
-
 const getElements = (
   machines,
   classes,
@@ -91,157 +25,109 @@ const getElements = (
     {
       name: 'name',
       header: 'Machine',
-      width: widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.machine,
-      view: name => <>{name}</>,
+      width: 250,
+      view: m => <>{m.name}</>,
       input: ({ field: { value: name } }) => <>{name}</>
     },
     {
       name: 'cashbox',
-      header: 'Cash box',
-      width: widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.cashbox,
-      view: (_, { id, cashUnits }) => (
+      header: 'Cashbox',
+      width: 200,
+      view: m => (
         <CashIn
           currency={{ code: fiatCurrency }}
-          notes={cashUnits.cashbox}
-          total={R.sum(R.map(it => it.fiat, bills[id] ?? []))}
+          notes={m.cashUnits.cashbox}
+          total={R.sum(R.map(it => it.fiat, bills[m.id] ?? []))}
+          width={25}
+          height={45}
+          omitInnerPercentage
+          className={classes.padding}
         />
       ),
-      input: NumberInput,
       inputProps: {
         decimalPlaces: 0
       }
+    },
+    {
+      name: 'cassettes',
+      header: 'Cassettes & Recyclers',
+      width: 575,
+      view: m => {
+        return (
+          <div className={classes.unitsRow}>
+            <div className={classes.units}>
+              {R.map(it => (
+                <CashOutLite
+                  width={'100%'}
+                  currency={{ code: fiatCurrency }}
+                  notes={m.cashUnits[`cassette${it}`]}
+                  denomination={getCashoutSettings(m.id)[`cassette${it}`]}
+                  threshold={
+                    fillingPercentageSettings[`fillingPercentageCassette${it}`]
+                  }
+                  capacity={cashUnitCapacity[m.model].cassette}
+                />
+              ))(R.range(1, m.numberOfCassettes + 1))}
+            </div>
+            <div className={classes.units}>
+              {R.map(it => (
+                <>
+                  <CashOutLite
+                    width={'100%'}
+                    currency={{ code: fiatCurrency }}
+                    notes={m.cashUnits[`stacker${it}f`]}
+                    denomination={getCashoutSettings(m.id)[`stacker${it}f`]}
+                    threshold={
+                      fillingPercentageSettings[
+                        `fillingPercentageStacker${it}f`
+                      ]
+                    }
+                    capacity={cashUnitCapacity[m.model].stacker}
+                  />
+                  <CashOutLite
+                    width={'100%'}
+                    currency={{ code: fiatCurrency }}
+                    notes={m.cashUnits[`stacker${it}r`]}
+                    denomination={getCashoutSettings(m.id)[`stacker${it}r`]}
+                    threshold={
+                      fillingPercentageSettings[
+                        `fillingPercentageStacker${it}r`
+                      ]
+                    }
+                    capacity={cashUnitCapacity[m.model].stacker}
+                  />
+                  {it !== m.numberOfStackers && (
+                    <span className={classes.verticalLine} />
+                  )}
+                </>
+              ))(R.range(1, m.numberOfStackers + 1))}
+            </div>
+          </div>
+        )
+      },
+      inputProps: {
+        decimalPlaces: 0
+      }
+    },
+    {
+      name: 'edit',
+      header: 'Edit',
+      width: 90,
+      textAlign: 'center',
+      view: m => {
+        return (
+          <IconButton
+            onClick={() => {
+              setMachineId(m.id)
+              setWizard(true)
+            }}>
+            <EditIcon />
+          </IconButton>
+        )
+      }
     }
   ]
 
-  R.until(
-    R.gt(R.__, getMaxNumberOfCassettesMap(machines)),
-    it => {
-      elements.push({
-        name: `cassette${it}`,
-        header: `Cassette ${it}`,
-        width: widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.cassette,
-        stripe: true,
-        doubleHeader: 'Cash-out',
-        view: (_, { id, model, cashUnits }) => (
-          <CashOut
-            className={classes.cashbox}
-            denomination={getCashoutSettings(id)?.[`cassette${it}`]}
-            currency={{ code: fiatCurrency }}
-            notes={cashUnits[`cassette${it}`]}
-            capacity={cashUnitCapacity[model].cassette}
-            width={
-              widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.unitGraph
-            }
-            threshold={
-              fillingPercentageSettings[`fillingPercentageCassette${it}`]
-            }
-          />
-        ),
-        isHidden: ({ numberOfCassettes }) => it > numberOfCassettes,
-        input: CashCassetteInput,
-        inputProps: {
-          decimalPlaces: 0,
-          width:
-            widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.unitGraph,
-          inputClassName: classes.cashbox
-        }
-      })
-      return R.add(1, it)
-    },
-    1
-  )
-
-  R.until(
-    R.gt(R.__, getMaxNumberOfStackersMap(machines)),
-    it => {
-      elements.push(
-        {
-          name: `stacker${it}f`,
-          header: `Stacker ${it}F`,
-          width: widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.cassette,
-          stripe: true,
-          view: (_, { id, model, cashUnits }) => (
-            <CashOut
-              className={classes.cashbox}
-              denomination={getCashoutSettings(id)?.[`stacker${it}f`]}
-              currency={{ code: fiatCurrency }}
-              notes={cashUnits[`stacker${it}f`]}
-              capacity={
-                it === 1
-                  ? cashUnitCapacity[model].stacker -
-                    cashUnitCapacity[model].escrow
-                  : cashUnitCapacity[model].stacker
-              }
-              width={
-                widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.unitGraph
-              }
-              threshold={
-                fillingPercentageSettings[`fillingPercentageStacker${it}f`]
-              }
-            />
-          ),
-          isHidden: ({ numberOfStackers }) => it > numberOfStackers,
-          input: CashCassetteInput,
-          inputProps: {
-            decimalPlaces: 0,
-            width:
-              widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.unitGraph,
-            inputClassName: classes.cashbox
-          }
-        },
-        {
-          name: `stacker${it}r`,
-          header: `Stacker ${it}R`,
-          width: widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.cassette,
-          stripe: true,
-          view: (_, { id, model, cashUnits }) => (
-            <CashOut
-              className={classes.cashbox}
-              denomination={getCashoutSettings(id)?.[`stacker${it}r`]}
-              currency={{ code: fiatCurrency }}
-              notes={cashUnits[`stacker${it}r`]}
-              capacity={cashUnitCapacity[model].stacker}
-              width={
-                widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.unitGraph
-              }
-              threshold={
-                fillingPercentageSettings[`fillingPercentageStacker${it}r`]
-              }
-            />
-          ),
-          isHidden: ({ numberOfStackers }) => it > numberOfStackers,
-          input: CashCassetteInput,
-          inputProps: {
-            decimalPlaces: 0,
-            width:
-              widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.unitGraph,
-            inputClassName: classes.cashbox
-          }
-        }
-      )
-      return R.add(1, it)
-    },
-    1
-  )
-
-  elements.push({
-    name: 'edit',
-    header: 'Edit',
-    width: widthsByCashUnits[getMaxNumberOfCashUnits(machines)]?.editWidth,
-    textAlign: 'center',
-    view: (_, { id }) => {
-      return (
-        <IconButton
-          onClick={() => {
-            setMachineId(id)
-            setWizard(true)
-          }}>
-          <EditIcon />
-        </IconButton>
-      )
-    }
-  })
-
   return elements
 }
 
diff --git a/new-lamassu-admin/src/routing/lamassu.routes.js b/new-lamassu-admin/src/routing/lamassu.routes.js
index e33d690c..4b2ca01f 100644
--- a/new-lamassu-admin/src/routing/lamassu.routes.js
+++ b/new-lamassu-admin/src/routing/lamassu.routes.js
@@ -11,7 +11,7 @@ import Locales from 'src/pages/Locales'
 import IndividualDiscounts from 'src/pages/LoyaltyPanel/IndividualDiscounts'
 import PromoCodes from 'src/pages/LoyaltyPanel/PromoCodes'
 import MachineLogs from 'src/pages/MachineLogs'
-import CashCassettes from 'src/pages/Maintenance/CashCassettes'
+import CashUnits from 'src/pages/Maintenance/CashUnits'
 import MachineStatus from 'src/pages/Maintenance/MachineStatus'
 import Notifications from 'src/pages/Notifications/Notifications'
 import CoinAtmRadar from 'src/pages/OperatorInfo/CoinATMRadar'
@@ -48,11 +48,11 @@ const getLamassuRoutes = () => [
     },
     children: [
       {
-        key: 'cash_cassettes',
-        label: 'Cash Cassettes',
-        route: '/maintenance/cash-cassettes',
+        key: 'cash_units',
+        label: 'Cash Units',
+        route: '/maintenance/cash-units',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: CashCassettes
+        component: CashUnits
       },
       {
         key: 'funding',
diff --git a/new-lamassu-admin/src/routing/pazuz.routes.js b/new-lamassu-admin/src/routing/pazuz.routes.js
index 65bc74f9..e0a9be94 100644
--- a/new-lamassu-admin/src/routing/pazuz.routes.js
+++ b/new-lamassu-admin/src/routing/pazuz.routes.js
@@ -13,7 +13,7 @@ import Locales from 'src/pages/Locales'
 import IndividualDiscounts from 'src/pages/LoyaltyPanel/IndividualDiscounts'
 import PromoCodes from 'src/pages/LoyaltyPanel/PromoCodes'
 import MachineLogs from 'src/pages/MachineLogs'
-import CashCassettes from 'src/pages/Maintenance/CashCassettes'
+import CashUnits from 'src/pages/Maintenance/CashUnits'
 import MachineStatus from 'src/pages/Maintenance/MachineStatus'
 import Notifications from 'src/pages/Notifications/Notifications'
 import CoinAtmRadar from 'src/pages/OperatorInfo/CoinATMRadar'
@@ -48,11 +48,11 @@ const getPazuzRoutes = () => [
     },
     children: [
       {
-        key: 'cash_cassettes',
-        label: 'Cash Cassettes',
-        route: '/maintenance/cash-cassettes',
+        key: 'cash_units',
+        label: 'Cash Units',
+        route: '/maintenance/cash-units',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: CashCassettes
+        component: CashUnits
       },
       {
         key: 'logs',