chore: use monorepo organization

packages/admin-ui/src/components/inputs/cashbox/Cashbox.jsx

@@ -0,0 +1,181 @@
+import Chip from '@mui/material/Chip'
+import classnames from 'classnames'
+import React from 'react'
+import { Info2, Label1, Label2 } from 'src/components/typography'
+
+import { numberToFiatAmount } from 'src/utils/number'
+
+import classes from './Cashbox.module.css'
+import { primaryColor as zodiac, tomato } from '../../../styling/variables.js'
+
+const colors = {
+  cashOut: {
+    empty: tomato,
+    full: zodiac
+  },
+  cashIn: {
+    empty: zodiac,
+    full: tomato
+  }
+}
+
+const Cashbox = ({
+  percent = 0,
+  cashOut = false,
+  width = 80,
+  height = 118,
+  className,
+  emptyPartClassName,
+  labelClassName,
+  omitInnerPercentage,
+  isLow
+}) => {
+  const ltHalf = percent <= 51
+  const color =
+    colors[cashOut ? 'cashOut' : 'cashIn'][!isLow ? 'full' : 'empty']
+
+  return (
+    <div
+      style={{ height, width, backgroundColor: color, borderColor: color }}
+      className={classnames(className, classes.cashbox)}>
+      <div
+        className={classnames(emptyPartClassName, classes.emptyPart)}
+        style={{ height: `${100 - percent}%` }}>
+        {!omitInnerPercentage && ltHalf && (
+          <Label2
+            style={{ color }}
+            className={classnames(labelClassName, classes.emptyPartP)}>
+            {percent.toFixed(0)}%
+          </Label2>
+        )}
+      </div>
+      <div style={{ backgroundColor: color }}>
+        {!omitInnerPercentage && !ltHalf && (
+          <Label2 className={classnames(classes.fullPartP, labelClassName)}>
+            {percent.toFixed(0)}%
+          </Label2>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// 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 = ({
+  capacity = 500,
+  currency,
+  notes,
+  className,
+  editingMode = false,
+  threshold,
+  width,
+  height,
+  total,
+  omitInnerPercentage
+}) => {
+  const percent = (100 * notes) / capacity
+  const isLow = percent < threshold
+  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 && (
+          <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
+  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 && (
+          <div className={classes.col2}>
+            <div className={classes.innerRow}>
+              <Info2 className={classes.noMarginText}>{notes}</Info2>
+              <Chip label={`${denomination} ${currency.code}`} />
+            </div>
+            <div className={classes.innerRow}>
+              <Label1 className={classes.noMarginText}>
+                {numberToFiatAmount(notes * denomination)} {currency.code}
+              </Label1>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+const CashOutLite = ({
+  capacity = 500,
+  denomination = 0,
+  currency,
+  notes,
+  threshold,
+  width
+}) => {
+  const percent = (100 * notes) / capacity
+  const isLow = percent < threshold
+  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 }