feat: add pazuz accounting screen

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

@@ -0,0 +1,167 @@
+import { makeStyles } from '@material-ui/core/styles'
+import moment from 'moment'
+import React from 'react'
+
+import { Tooltip } from 'src/components/Tooltip'
+import TitleSection from 'src/components/layout/TitleSection'
+import DataTable from 'src/components/tables/DataTable'
+import { H4, Info2, P } from 'src/components/typography'
+
+import styles from './Accounting.styles'
+
+const mockData = [
+  {
+    operation: 'Hedging summary',
+    direction: 'in',
+    extraInfo: 'This is mocked information',
+    amount: 486,
+    currency: 'USD',
+    balanceAfterTx: 10438,
+    date: '2021-02-22T20:16:12.020Z'
+  },
+  {
+    operation: 'Funding transaction',
+    direction: 'in',
+    amount: 2000,
+    currency: 'USD',
+    balanceAfterTx: 9952,
+    date: '2021-02-22T12:40:32.020Z'
+  },
+  {
+    operation: 'ZEC hot wallet top up',
+    direction: 'out',
+    amount: 1000,
+    currency: 'USD',
+    balanceAfterTx: 7952,
+    date: '2021-02-21T16:30:44.020Z'
+  },
+  {
+    operation: 'Funding transaction',
+    direction: 'in',
+    amount: 8000,
+    currency: 'USD',
+    balanceAfterTx: 8952,
+    date: '2021-02-21T08:16:20.020Z'
+  }
+]
+
+const useStyles = makeStyles(styles)
+
+const Assets = ({ balance, hedgingReserve, currency }) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.totalAssetWrapper}>
+      <div className={classes.totalAssetFieldWrapper}>
+        <P className={classes.fieldHeader}>Pazuz fiat balance</P>
+        <div className={classes.totalAssetWrapper}>
+          <Info2 noMargin className={classes.fieldValue}>
+            {balance.toLocaleString('en-US', { maximumFractionDigits: 2 })}
+          </Info2>
+          <Info2 noMargin className={classes.fieldCurrency}>
+            {currency}
+          </Info2>
+        </div>
+      </div>
+      <Info2 className={classes.separator}>-</Info2>
+      <div className={classes.totalAssetFieldWrapper}>
+        <P className={classes.fieldHeader}>Hedging reserve</P>
+        <div className={classes.totalAssetWrapper}>
+          <Info2 noMargin className={classes.fieldValue}>
+            {hedgingReserve.toLocaleString('en-US', {
+              maximumFractionDigits: 2
+            })}
+          </Info2>
+          <Info2 noMargin className={classes.fieldCurrency}>
+            {currency}
+          </Info2>
+        </div>
+      </div>
+      <Info2 className={classes.separator}>=</Info2>
+      <div className={classes.totalAssetFieldWrapper}>
+        <P className={classes.fieldHeader}>Available balance</P>
+        <div className={classes.totalAssetWrapper}>
+          <Info2 noMargin className={classes.fieldValue}>
+            {(balance - hedgingReserve).toLocaleString('en-US', {
+              maximumFractionDigits: 2
+            })}
+          </Info2>
+          <Info2 noMargin className={classes.fieldCurrency}>
+            {currency}
+          </Info2>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Accounting = () => {
+  const classes = useStyles()
+
+  const elements = [
+    {
+      header: 'Operation',
+      width: 500,
+      size: 'sm',
+      textAlign: 'left',
+      view: it => {
+        return (
+          <span className={classes.operation}>
+            {it.operation}
+            {!!it.extraInfo && (
+              <Tooltip width={175}>
+                <P>{it.extraInfo}</P>
+              </Tooltip>
+            )}
+          </span>
+        )
+      }
+    },
+    {
+      header: 'Amount',
+      width: 147,
+      size: 'sm',
+      textAlign: 'right',
+      view: it =>
+        `${it.direction === 'in' ? it.amount : -it.amount} ${it.currency}`
+    },
+    {
+      header: 'Balance after operation',
+      width: 250,
+      size: 'sm',
+      textAlign: 'right',
+      view: it => `${it.balanceAfterTx} ${it.currency}`
+    },
+    {
+      header: 'Date',
+      width: 150,
+      size: 'sm',
+      textAlign: 'right',
+      view: it => moment.utc(it.created).format('YYYY-MM-DD')
+    },
+    {
+      header: 'Time',
+      width: 150,
+      size: 'sm',
+      textAlign: 'right',
+      view: it => moment.utc(it.created).format('HH:mm:ss')
+    }
+  ]
+
+  return (
+    <>
+      <TitleSection title="Accounting" />
+      <Assets balance={10438} hedgingReserve={1486} currency={'USD'} />
+      <H4 className={classes.tableTitle}>Fiat balance history</H4>
+      <DataTable
+        loading={false}
+        emptyText="No transactions so far"
+        elements={elements}
+        data={mockData}
+        rowSize="sm"
+      />
+    </>
+  )
+}
+
+export default Accounting

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

@@ -0,0 +1,39 @@
+import { offColor } from 'src/styling/variables'
+
+const styles = () => ({
+  totalAssetWrapper: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  totalAssetFieldWrapper: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  fieldHeader: {
+    color: offColor,
+    marginBottom: 5
+  },
+  fieldValue: {
+    fontSize: 36
+  },
+  fieldCurrency: {
+    fontSize: 20,
+    alignSelf: 'flex-end',
+    margin: [[0, 0, 5, 5]]
+  },
+  separator: {
+    fontSize: 32,
+    alignSelf: 'center',
+    margin: [[25, 20, 0, 20]]
+  },
+  tableTitle: {
+    marginTop: 35
+  },
+  operation: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+})
+
+export default styles

new-lamassu-admin/src/routing/pazuz.routes.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Redirect } from 'react-router-dom'
 
 import ATMWallet from 'src/pages/ATMWallet/ATMWallet'
+import Accounting from 'src/pages/Accounting/Accounting'
 import Blacklist from 'src/pages/Blacklist'
 import Cashout from 'src/pages/Cashout'
 import Commissions from 'src/pages/Commissions'
@@ -228,6 +229,13 @@ const getPazuzRoutes = () => [
       return () => <Redirect to={this.children[0].route} />
     },
     children: [
+      {
+        key: 'accountingpage',
+        label: 'Accounting',
+        route: '/accounting/accounting',
+        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        component: Accounting
+      },
       {
         key: 'atmwallets',
         label: 'ATM Wallets',