Feat: cash cassettes footer skeleton

new-lamassu-admin/src/components/editableTable/Table.js

@@ -54,7 +54,8 @@ const ETable = ({
   groupBy,
   sortBy,
   createText = 'Add override',
-  forceAdd = false
+  forceAdd = false,
+  tbodyWrapperClass
 }) => {
   const [editingId, setEditingId] = useState(null)
   const [adding, setAdding] = useState(false)
@@ -180,57 +181,60 @@ const ETable = ({
             )}
             <Table>
               <Header />
-              <TBody>
-                {adding && (
-                  <Formik
-                    validateOnBlur={false}
-                    validateOnChange={false}
-                    initialValues={{ id: v4(), ...initialValues }}
-                    onReset={onReset}
-                    validationSchema={validationSchema}
-                    onSubmit={innerSave}>
-                    <Form>
-                      <PromptWhenDirty />
-                      <ERow editing={true} disabled={forceDisable} />
-                    </Form>
-                  </Formik>
-                )}
-                {innerData.map((it, idx) => {
-                  const nextElement = innerData[idx + 1]
-
-                  const canGroup = !!groupBy && nextElement
-                  const isFunction = R.type(groupBy) === 'Function'
-                  const groupFunction = isFunction ? groupBy : R.prop(groupBy)
-
-                  const isLastOfGroup =
-                    canGroup && groupFunction(it) !== groupFunction(nextElement)
-
-                  return (
+              <div className={tbodyWrapperClass}>
+                <TBody>
+                  {adding && (
                     <Formik
                       validateOnBlur={false}
                       validateOnChange={false}
-                      key={it.id ?? idx}
-                      enableReinitialize
-                      initialValues={it}
+                      initialValues={{ id: v4(), ...initialValues }}
                       onReset={onReset}
                       validationSchema={validationSchema}
                       onSubmit={innerSave}>
                       <Form>
                         <PromptWhenDirty />
-                        <ERow
-                          lastOfGroup={isLastOfGroup}
-                          editing={editingId === it.id}
-                          disabled={
-                            forceDisable ||
-                            (editingId && editingId !== it.id) ||
-                            adding
-                          }
-                        />
+                        <ERow editing={true} disabled={forceDisable} />
                       </Form>
                     </Formik>
-                  )
-                })}
-              </TBody>
+                  )}
+                  {innerData.map((it, idx) => {
+                    const nextElement = innerData[idx + 1]
+
+                    const canGroup = !!groupBy && nextElement
+                    const isFunction = R.type(groupBy) === 'Function'
+                    const groupFunction = isFunction ? groupBy : R.prop(groupBy)
+
+                    const isLastOfGroup =
+                      canGroup &&
+                      groupFunction(it) !== groupFunction(nextElement)
+
+                    return (
+                      <Formik
+                        validateOnBlur={false}
+                        validateOnChange={false}
+                        key={it.id ?? idx}
+                        enableReinitialize
+                        initialValues={it}
+                        onReset={onReset}
+                        validationSchema={validationSchema}
+                        onSubmit={innerSave}>
+                        <Form>
+                          <PromptWhenDirty />
+                          <ERow
+                            lastOfGroup={isLastOfGroup}
+                            editing={editingId === it.id}
+                            disabled={
+                              forceDisable ||
+                              (editingId && editingId !== it.id) ||
+                              adding
+                            }
+                          />
+                        </Form>
+                      </Formik>
+                    )
+                  })}
+                </TBody>
+              </div>
             </Table>
           </>
         )}

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

@@ -13,6 +13,7 @@ import { EmptyTable } from 'src/components/table'
 import { fromNamespace } from 'src/utils/config'
 
 import styles from './CashCassettes.styles.js'
+import CashCassettesFooter from './CashCassettesFooter'
 
 const useStyles = makeStyles(styles)
 
@@ -78,7 +79,6 @@ const CashCassettes = () => {
   const classes = useStyles()
 
   const { data } = useQuery(GET_MACHINES_AND_CONFIG)
-
   const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, {
     refetchQueries: () => ['getData']
   })
@@ -164,23 +164,27 @@ const CashCassettes = () => {
   ]
 
   return (
-    <div className={classes.pageBottomMargin}>
+    <>
       <TitleSection title="Cash Cassettes" />
-      <EditableTable
-        error={error?.message}
-        name="cashboxes"
-        enableEdit
-        stripeWhen={isCashOutDisabled}
-        elements={elements}
-        data={machines}
-        save={onSave}
-        validationSchema={ValidationSchema}
-      />
+      <div className={classes.tableContainer}>
+        <EditableTable
+          error={error?.message}
+          name="cashboxes"
+          enableEdit
+          stripeWhen={isCashOutDisabled}
+          elements={elements}
+          data={machines}
+          save={onSave}
+          validationSchema={ValidationSchema}
+          tbodyWrapperClass={classes.tBody}
+        />
 
-      {data && R.isEmpty(machines) && (
-        <EmptyTable message="No machines so far" />
-      )}
-    </div>
+        {data && R.isEmpty(machines) && (
+          <EmptyTable message="No machines so far" />
+        )}
+      </div>
+      <CashCassettesFooter />
+    </>
   )
 }
 

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

@@ -3,7 +3,12 @@ export default {
     width: 80,
     height: 36
   },
-  pageBottomMargin: {
-    marginBottom: 180
+  tableContainer: {
+    flex: 1,
+    marginBottom: 100
+  },
+  tBody: {
+    maxHeight: '65vh',
+    overflow: 'auto'
   }
 }

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

@@ -0,0 +1,55 @@
+import { makeStyles } from '@material-ui/core'
+import React from 'react'
+
+import { Info1, Info2, Info3 } from 'src/components/typography/index'
+import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
+import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
+
+import styles from './CashCassettesFooter.styles.js'
+const useStyles = makeStyles(styles)
+
+const CashCassettesFooter = () => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.footerContainer}>
+      <div className={classes.footerContent}>
+        <Info3 className={classes.footerLabel}>Cash value in System</Info3>
+        <div style={{ display: 'flex' }}>
+          <TxInIcon
+            style={{
+              alignSelf: 'center',
+              height: 20,
+              width: 20,
+              marginRight: 8
+            }}
+          />
+          <Info2 style={{ alignSelf: 'center', marginRight: 8 }}>
+            Cash-in:
+          </Info2>
+          <Info1 style={{ alignSelf: 'center' }}>123123123€</Info1>
+        </div>
+        <div style={{ display: 'flex' }}>
+          <TxOutIcon
+            style={{
+              alignSelf: 'center',
+              height: 20,
+              width: 20,
+              marginRight: 8
+            }}
+          />
+          <Info2 style={{ alignSelf: 'center', marginRight: 8 }}>
+            Cash-out:
+          </Info2>
+          <Info1 style={{ alignSelf: 'center' }}>123123123€</Info1>
+        </div>
+        <div style={{ display: 'flex' }}>
+          <Info2 style={{ alignSelf: 'center', marginRight: 8 }}>Total:</Info2>
+          <Info1 style={{ alignSelf: 'center' }}>123123123€</Info1>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CashCassettesFooter

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

@@ -0,0 +1,24 @@
+import { comet } from 'src/styling/variables'
+
+export default {
+  footerLabel: {
+    color: comet,
+    alignSelf: 'center'
+  },
+  footerContent: {
+    width: 1200,
+    height: 64,
+    display: 'flex',
+    justifyContent: 'space-around'
+  },
+  footerContainer: {
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 64,
+    backgroundColor: 'white',
+    display: 'flex',
+    justifyContent: 'space-around'
+  }
+}