lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

partial: Loyalty, Machines CSS rework

Browse source
This commit is contained in:
Rafael Taranto 2025-05-06 14:50:11 +01:00
parent 5f81487dcc
commit b95dd5cbbf
17 changed files with 134 additions and 459 deletions
Download patch file Download diff file Expand all files Collapse all files

58
new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js
View file

@ -1,58 +0,0 @@
import { spacer, errorColor } from 'src/styling/variables'
const styles = {
identification: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
'& > *:first-child': {
marginLeft: 0
},
'& > *': {
marginLeft: 6
},
'& > *:nth-child(3)': {
marginLeft: 15
}
},
form: {
display: 'flex',
flexDirection: 'column',
height: '100%',
'& > *:first-child': {
marginTop: 10
},
'& > *': {
marginBottom: 20
}
},
customerAutocomplete: {
width: 350
},
discountRateWrapper: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
discountInput: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
footer: {
display: 'flex',
flexDirection: 'row',
margin: [['auto', 0, spacer * 3, 0]]
},
submit: {
margin: [['auto', 0, 0, 'auto']]
},
error: {
color: errorColor
},
disabled: {
cursor: 'wait'
}
}
export default styles

28
new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx
View file

@ -1,20 +1,15 @@
import { makeStyles } from '@mui/styles'
import { Form, Formik, Field } from 'formik' import { Form, Formik, Field } from 'formik'
import * as R from 'ramda' import * as R from 'ramda'
import React from 'react' import React from 'react'
import ErrorMessage from 'src/components/ErrorMessage' import ErrorMessage from 'src/components/ErrorMessage'
import Modal from 'src/components/Modal' import Modal from 'src/components/Modal'
import { HelpTooltip } from 'src/components/Tooltip' import { HelpTooltip } from 'src/components/Tooltip'
import { H3, TL1, P } from 'src/components/typography' import { H1, H3, P } from 'src/components/typography'
import * as Yup from 'yup' import * as Yup from 'yup'
import { Button } from 'src/components/buttons' import { Button } from 'src/components/buttons'
import { NumberInput, Autocomplete } from 'src/components/inputs/formik' import { NumberInput, Autocomplete } from 'src/components/inputs/formik'
import styles from './IndividualDiscount.styles'
const useStyles = makeStyles(styles)
const initialValues = { const initialValues = {
customer: '', customer: '',
discount: '' discount: ''
@ -46,8 +41,6 @@ const IndividualDiscountModal = ({
addDiscount, addDiscount,
customers customers
}) => { }) => {
const classes = useStyles()
const handleAddDiscount = (customer, discount) => { const handleAddDiscount = (customer, discount) => {
addDiscount({ addDiscount({
variables: { variables: {
@ -77,8 +70,10 @@ const IndividualDiscountModal = ({
handleAddDiscount(customer, discount) handleAddDiscount(customer, discount)
}}> }}>
{({ errors, touched }) => ( {({ errors, touched }) => (
<Form id="individual-discount-form" className={classes.form}> <Form
<div className={classes.customerAutocomplete}> id="individual-discount-form"
className="flex flex-col h-full gap-5">
<div className="mt-2 w-88">
<Field <Field
name="customer" name="customer"
label="Select a customer" label="Select a customer"
@ -97,7 +92,7 @@ const IndividualDiscountModal = ({
/> />
</div> </div>
<div> <div>
<div className={classes.discountRateWrapper}> <div className="flex items-center">
<H3>Define discount rate</H3> <H3>Define discount rate</H3>
<HelpTooltip width={304}> <HelpTooltip width={304}>
<P> <P>
@ -112,22 +107,19 @@ const IndividualDiscountModal = ({
</P> </P>
</HelpTooltip> </HelpTooltip>
</div> </div>
<div className={classes.discountInput}> <div className="flex items-center">
<Field <Field
name="discount" name="discount"
size="lg" size="lg"
autoComplete="off" autoComplete="off"
width={50} width={50}
decimalScale={0} decimalScale={0}
className={classes.discountInputField}
component={NumberInput} component={NumberInput}
/> />
<TL1 inline className={classes.inputLabel}> <H1 className="ml-2 mt-4 font-bold inline">%</H1>
%
</TL1>
</div> </div>
</div> </div>
<div className={classes.footer}> <div className="flex mt-auto mb-6">
{getErrorMsg(errors, touched, creationError) && ( {getErrorMsg(errors, touched, creationError) && (
<ErrorMessage> <ErrorMessage>
{getErrorMsg(errors, touched, creationError)} {getErrorMsg(errors, touched, creationError)}
@ -136,7 +128,7 @@ const IndividualDiscountModal = ({
<Button <Button
type="submit" type="submit"
form="individual-discount-form" form="individual-discount-form"
className={classes.submit}> className="ml-auto">
Add discount Add discount
</Button> </Button>
</div> </div>

14
new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx
View file

@ -1,21 +1,17 @@
import { useQuery, useMutation, gql } from '@apollo/client' import { useQuery, useMutation, gql } from '@apollo/client'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useState } from 'react' import React, { useState } from 'react'
import { Link, Button, IconButton } from 'src/components/buttons'
import { DeleteDialog } from 'src/components/DeleteDialog' import { DeleteDialog } from 'src/components/DeleteDialog'
import DataTable from 'src/components/tables/DataTable' import DataTable from 'src/components/tables/DataTable'
import { Label3, TL1 } from 'src/components/typography' import { Label3, TL1 } from 'src/components/typography'
import PhoneIdIcon from 'src/styling/icons/ID/phone/zodiac.svg?react' import PhoneIdIcon from 'src/styling/icons/ID/phone/zodiac.svg?react'
import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react' import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
import { Link, Button, IconButton } from 'src/components/buttons'
import styles from './IndividualDiscount.styles'
import IndividualDiscountModal from './IndividualDiscountModal' import IndividualDiscountModal from './IndividualDiscountModal'
import classnames from 'classnames' import classnames from 'classnames'
const useStyles = makeStyles(styles)
const GET_INDIVIDUAL_DISCOUNTS = gql` const GET_INDIVIDUAL_DISCOUNTS = gql`
query individualDiscounts { query individualDiscounts {
individualDiscounts { individualDiscounts {
@ -57,8 +53,6 @@ const GET_CUSTOMERS = gql`
` `
const IndividualDiscounts = () => { const IndividualDiscounts = () => {
const classes = useStyles()
const [deleteDialog, setDeleteDialog] = useState(false) const [deleteDialog, setDeleteDialog] = useState(false)
const [toBeDeleted, setToBeDeleted] = useState() const [toBeDeleted, setToBeDeleted] = useState()
@ -94,7 +88,7 @@ const IndividualDiscounts = () => {
size: 'sm', size: 'sm',
view: t => { view: t => {
return ( return (
<div className={classes.identification}> <div className="flex items-center gap-2">
<PhoneIdIcon /> <PhoneIdIcon />
<span>{t.customer.phone}</span> <span>{t.customer.phone}</span>
</div> </div>
@ -158,7 +152,7 @@ const IndividualDiscounts = () => {
<Link <Link
color="primary" color="primary"
onClick={toggleModal} onClick={toggleModal}
className={classnames({ [classes.disabled]: customerLoading })} className={classnames({ 'cursor-wait': customerLoading })}
disabled={customerLoading}> disabled={customerLoading}>
Add new code Add new code
</Link> </Link>

7
new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx
View file

@ -1,7 +0,0 @@
import React from 'react'
const LoyaltyDiscounts = () => {
return <></>
}
export default LoyaltyDiscounts

6
new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx
View file

@ -1,5 +1,4 @@
import { useQuery, useMutation, gql } from '@apollo/client' import { useQuery, useMutation, gql } from '@apollo/client'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useState } from 'react' import React, { useState } from 'react'
import { DeleteDialog } from 'src/components/DeleteDialog' import { DeleteDialog } from 'src/components/DeleteDialog'
@ -9,11 +8,8 @@ import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
import { Link, Button, IconButton } from 'src/components/buttons' import { Link, Button, IconButton } from 'src/components/buttons'
import styles from './PromoCodes.styles'
import PromoCodesModal from './PromoCodesModal' import PromoCodesModal from './PromoCodesModal'
const useStyles = makeStyles(styles)
const DUPLICATE_ERROR_MSG = 'There is already a promotion with that code!' const DUPLICATE_ERROR_MSG = 'There is already a promotion with that code!'
const DEFAULT_ERROR_MSG = 'Failed to save' const DEFAULT_ERROR_MSG = 'Failed to save'
@ -46,8 +42,6 @@ const CREATE_CODE = gql`
` `
const PromoCodes = () => { const PromoCodes = () => {
const classes = useStyles()
const [deleteDialog, setDeleteDialog] = useState(false) const [deleteDialog, setDeleteDialog] = useState(false)
const [toBeDeleted, setToBeDeleted] = useState() const [toBeDeleted, setToBeDeleted] = useState()

51
new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js
View file

@ -1,51 +0,0 @@
import {
spacer,
fontPrimary,
primaryColor,
errorColor
} from 'src/styling/variables'
const styles = {
footer: {
display: 'flex',
flexDirection: 'row',
margin: [['auto', 0, spacer * 3, 0]]
},
modalLabel1: {
marginTop: 20
},
modalLabel2Wrapper: {
marginTop: 40,
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start'
},
discountInput: {
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-start'
},
inputLabel: {
color: primaryColor,
fontFamily: fontPrimary,
fontSize: 24,
marginLeft: 8,
marginTop: 15
},
tableWidth: {
width: 620
},
error: {
color: errorColor
},
form: {
display: 'flex',
flexDirection: 'column',
height: '100%'
},
submit: {
margin: [['auto', 0, 0, 'auto']]
}
}
export default styles

41
new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx
View file

@ -1,33 +1,30 @@
import { makeStyles } from '@mui/styles'
import { Form, Formik, Field } from 'formik' import { Form, Formik, Field } from 'formik'
import * as R from 'ramda' import * as R from 'ramda'
import React from 'react' import React from 'react'
import ErrorMessage from 'src/components/ErrorMessage' import ErrorMessage from 'src/components/ErrorMessage'
import Modal from 'src/components/Modal' import Modal from 'src/components/Modal'
import { HelpTooltip } from 'src/components/Tooltip' import { HelpTooltip } from 'src/components/Tooltip'
import { H3, TL1, P } from 'src/components/typography' import { H3, P, H1 } from 'src/components/typography'
import * as Yup from 'yup' import * as Yup from 'yup'
import { Button } from 'src/components/buttons' import { Button } from 'src/components/buttons'
import { TextInput, NumberInput } from 'src/components/inputs/formik' import { TextInput, NumberInput } from 'src/components/inputs/formik'
import styles from './PromoCodes.styles'
const useStyles = makeStyles(styles)
const initialValues = { const initialValues = {
code: '', code: '',
discount: '' discount: ''
} }
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
code: Yup.string().required().trim().max(25).matches(/^\S*$/, 'No whitespace allowed'), code: Yup.string()
.required()
.trim()
.max(25)
.matches(/^\S*$/, 'No whitespace allowed'),
discount: Yup.number().required().min(0).max(100) discount: Yup.number().required().min(0).max(100)
}) })
const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => { const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
const classes = useStyles()
const handleAddCode = (code, discount) => { const handleAddCode = (code, discount) => {
addCode(R.toUpper(code), parseInt(discount)) addCode(R.toUpper(code), parseInt(discount))
} }
@ -51,8 +48,8 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
handleAddCode(code, discount) handleAddCode(code, discount)
}}> }}>
{({ errors }) => ( {({ errors }) => (
<Form id="promo-form" className={classes.form}> <Form id="promo-form" className="flex flex-col h-full">
<H3 className={classes.modalLabel1}>Promo code name</H3> <H3 className="mt-5">Promo code name</H3>
<Field <Field
name="code" name="code"
autoFocus autoFocus
@ -62,8 +59,8 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
inputProps={{ style: { textTransform: 'uppercase' } }} inputProps={{ style: { textTransform: 'uppercase' } }}
component={TextInput} component={TextInput}
/> />
<div className={classes.modalLabel2Wrapper}> <div className="flex justify-start mt-10">
<H3 className={classes.modalLabel2}>Define discount rate</H3> <H3>Define discount rate</H3>
<HelpTooltip width={304}> <HelpTooltip width={304}>
<P> <P>
This is a percentage discount off of your existing This is a percentage discount off of your existing
@ -71,36 +68,30 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
machine. machine.
</P> </P>
<P> <P>
For instance, if you charge 8% commissions, and this code is For instance, if you charge 8% commissions, and this code
set for 50%, then you'll instead be charging 4% on is set for 50%, then you'll instead be charging 4% on
transactions using the code. transactions using the code.
</P> </P>
</HelpTooltip> </HelpTooltip>
</div> </div>
<div className={classes.discountInput}> <div className="flex items-start">
<Field <Field
name="discount" name="discount"
size="lg" size="lg"
autoComplete="off" autoComplete="off"
width={50} width={50}
decimalScale={0} decimalScale={0}
className={classes.discountInputField}
component={NumberInput} component={NumberInput}
/> />
<TL1 inline className={classes.inputLabel}> <H1 className="ml-2 mt-4 font-bold inline">%</H1>
%
</TL1>
</div> </div>
<div className={classes.footer}> <div className="flex mt-auto mb-6">
{(errorMsg || !R.isEmpty(errors)) && ( {(errorMsg || !R.isEmpty(errors)) && (
<ErrorMessage> <ErrorMessage>
{errorMsg || R.head(R.values(errors))} {errorMsg || R.head(R.values(errors))}
</ErrorMessage> </ErrorMessage>
)} )}
<Button <Button type="submit" form="promo-form" className="ml-auto">
type="submit"
form="promo-form"
className={classes.submit}>
Add code Add code
</Button> </Button>
</div> </div>

13
new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx
View file

@ -1,5 +1,4 @@
import { useMutation, gql } from "@apollo/client"; import { useMutation, gql } from '@apollo/client'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useState } from 'react' import React, { useState } from 'react'
import DataTable from 'src/components/tables/DataTable' import DataTable from 'src/components/tables/DataTable'
@ -9,10 +8,6 @@ import helper from 'src/pages/Maintenance/helper'
import { fromNamespace } from 'src/utils/config' import { fromNamespace } from 'src/utils/config'
import styles from './Cassettes.styles'
const useStyles = makeStyles(styles)
const SET_CASSETTE_BILLS = gql` const SET_CASSETTE_BILLS = gql`
mutation MachineAction( mutation MachineAction(
$deviceId: ID! $deviceId: ID!
@ -46,8 +41,6 @@ const widths = {
} }
const CashCassettes = ({ machine, config, refetchData, bills }) => { const CashCassettes = ({ machine, config, refetchData, bills }) => {
const classes = useStyles()
const [wizard, setWizard] = useState(false) const [wizard, setWizard] = useState(false)
const cashout = config && fromNamespace('cashOut')(config) const cashout = config && fromNamespace('cashOut')(config)
@ -57,7 +50,7 @@ const CashCassettes = ({ machine, config, refetchData, bills }) => {
const getCashoutSettings = deviceId => fromNamespace(deviceId)(cashout) const getCashoutSettings = deviceId => fromNamespace(deviceId)(cashout)
const elements = R.filter(it => it.name !== 'name')( const elements = R.filter(it => it.name !== 'name')(
helper.getElements(classes, config, bills, setWizard, widths) helper.getElements(config, bills, setWizard, widths)
) )
const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, { const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, {
@ -92,7 +85,7 @@ const CashCassettes = ({ machine, config, refetchData, bills }) => {
Details={InnerCashUnitDetails} Details={InnerCashUnitDetails}
emptyText="No machines so far" emptyText="No machines so far"
initialExpanded={0} initialExpanded={0}
tableClassName={classes.dataTable} tableClassName="min-h-72"
/> />
{wizard && ( {wizard && (
<Wizard <Wizard

35
new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js
View file

@ -1,35 +0,0 @@
import { offDarkColor } from 'src/styling/variables'
const styles = {
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
},
dataTable: {
minHeight: 290
}
}
export default styles

21
new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx
View file

@ -1,31 +1,26 @@
import { makeStyles } from '@mui/styles'
import React from 'react' import React from 'react'
import { Label3, P } from 'src/components/typography' import { Label1, P } from 'src/components/typography'
import { modelPrettifier } from 'src/utils/machine' import { modelPrettifier } from 'src/utils/machine'
import { formatDate } from 'src/utils/timezones' import { formatDate } from 'src/utils/timezones'
import styles from '../Machines.styles'
const useStyles = makeStyles(styles)
const Details = ({ data, timezone }) => { const Details = ({ data, timezone }) => {
const classes = useStyles()
return ( return (
<div className={classes.row}> <div className="flex gap-30">
<div className={classes.rowItem}> <div>
<Label3 className={classes.label3}>Paired at</Label3> <Label1 className="text-comet mt-0">Paired at</Label1>
<P> <P>
{data.pairedAt {data.pairedAt
? formatDate(data.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss') ? formatDate(data.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss')
: ''} : ''}
</P> </P>
</div> </div>
<div className={classes.rowItem}> <div>
<Label3 className={classes.label3}>Machine model</Label3> <Label1 className="text-comet mt-0">Machine model</Label1>
<P>{modelPrettifier[data.model]}</P> <P>{modelPrettifier[data.model]}</P>
</div> </div>
<div className={classes.rowItem}> <div>
<Label3 className={classes.label3}>Software version</Label3> <Label1 className="text-comet mt-0">Software version</Label1>
<P>{data.version}</P> <P>{data.version}</P>
</div> </div>
</div> </div>

44
new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx
View file

@ -1,4 +1,3 @@
import { makeStyles } from '@mui/styles'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import { formatDistance } from 'date-fns' import { formatDistance } from 'date-fns'
import React from 'react' import React from 'react'
@ -7,36 +6,25 @@ import MachineActions from 'src/components/machineActions/MachineActions'
import { H3, Label1, P } from 'src/components/typography' import { H3, Label1, P } from 'src/components/typography'
import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard' import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'
import styles from '../Machines.styles'
const useStyles = makeStyles(styles)
const Overview = ({ data, onActionSuccess }) => { const Overview = ({ data, onActionSuccess }) => {
const classes = useStyles()
return ( return (
<div className={classes.contentContainer}> <div className="flex flex-col gap-8">
<div className={classes.row}>
<div className={classes.rowItem}>
<H3>{data.name}</H3> <H3>{data.name}</H3>
</div> <div>
</div> <Label1 className="text-comet mt-0">Status</Label1>
<div className={classes.row}>
<div className={classes.rowItem}>
<Label1 className={classes.label3}>Status</Label1>
{data && data.statuses ? <Status status={data.statuses[0]} /> : null} {data && data.statuses ? <Status status={data.statuses[0]} /> : null}
</div> </div>
</div> <div className="flex gap-6">
<div className={classes.row}> <div>
<div className={classes.rowItem}> <Label1 className="text-comet mt-0">Ping</Label1>
<Label1 className={classes.label3}>Ping</Label1>
<P noMargin> <P noMargin>
{data.responseTime {data.responseTime
? new BigNumber(data.responseTime).toFixed(3).toString() + ' ms' ? new BigNumber(data.responseTime).toFixed(3).toString() + ' ms'
: 'unavailable'} : 'unavailable'}
</P> </P>
</div> </div>
<div className={classes.rowItem}> <div>
<Label1 className={classes.label3}>Last ping</Label1> <Label1 className="text-comet mt-0">Last ping</Label1>
<P noMargin> <P noMargin>
{data.lastPing {data.lastPing
? formatDistance(new Date(data.lastPing), new Date(), { ? formatDistance(new Date(data.lastPing), new Date(), {
@ -45,8 +33,8 @@ const Overview = ({ data, onActionSuccess }) => {
: 'unknown'} : 'unknown'}
</P> </P>
</div> </div>
<div className={classes.rowItem}> <div>
<Label1 className={classes.label3}>Network speed</Label1> <Label1 className="text-comet mt-0">Network speed</Label1>
<P noMargin> <P noMargin>
{data.downloadSpeed {data.downloadSpeed
? new BigNumber(data.downloadSpeed) ? new BigNumber(data.downloadSpeed)
@ -56,17 +44,15 @@ const Overview = ({ data, onActionSuccess }) => {
</P> </P>
</div> </div>
</div> </div>
<div className={classes.row}> <div>
<div className={classes.rowItem}> <div>
<Label1 className={classes.label3}>Device ID</Label1> <Label1 className="text-comet mt-0">Device ID</Label1>
<P noMargin> <P noMargin>
<CopyToClipboard buttonClassname={classes.copyToClipboard}> <CopyToClipboard>{data.deviceId}</CopyToClipboard>
{data.deviceId}
</CopyToClipboard>
</P> </P>
</div> </div>
</div> </div>
<div className={classes.row}> <div>
<MachineActions <MachineActions
machine={data} machine={data}
onActionSuccess={onActionSuccess}></MachineActions> onActionSuccess={onActionSuccess}></MachineActions>

6
new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx
View file

@ -1,15 +1,11 @@
import List from '@mui/material/List' import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem' import ListItem from '@mui/material/ListItem'
import ListItemText from '@mui/material/ListItemText' import ListItemText from '@mui/material/ListItemText'
import { makeStyles } from '@mui/styles'
import React from 'react' import React from 'react'
import styles from './Machines.styles'
const useStyles = makeStyles(styles)
const MachineSidebar = ({ data, getText, getKey, isSelected, selectItem }) => { const MachineSidebar = ({ data, getText, getKey, isSelected, selectItem }) => {
const classes = useStyles()
return ( return (
<List className={classes.sidebarContainer}> <List className="h-100 overflow-y-auto">
{data.map((item, idx) => { {data.map((item, idx) => {
return ( return (
<ListItem <ListItem

46
new-lamassu-admin/src/pages/Machines/Machines.jsx
View file

@ -1,9 +1,6 @@
import { useQuery, gql } from "@apollo/client"; import { useQuery, gql } from '@apollo/client'
import Breadcrumbs from '@mui/material/Breadcrumbs' import Breadcrumbs from '@mui/material/Breadcrumbs'
import Grid from '@mui/material/Grid'
import { makeStyles } from '@mui/styles'
import NavigateNextIcon from '@mui/icons-material/NavigateNext' import NavigateNextIcon from '@mui/icons-material/NavigateNext'
import classnames from 'classnames'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useState } from 'react' import React, { useState } from 'react'
import { Link, useLocation, useHistory } from 'react-router-dom' import { Link, useLocation, useHistory } from 'react-router-dom'
@ -14,8 +11,6 @@ import Commissions from './MachineComponents/Commissions'
import Details from './MachineComponents/Details' import Details from './MachineComponents/Details'
import Overview from './MachineComponents/Overview' import Overview from './MachineComponents/Overview'
import Transactions from './MachineComponents/Transactions' import Transactions from './MachineComponents/Transactions'
import styles from './Machines.styles'
const useStyles = makeStyles(styles)
const GET_INFO = gql` const GET_INFO = gql`
query getMachine($deviceId: ID!, $billFilters: JSONObject) { query getMachine($deviceId: ID!, $billFilters: JSONObject) {
@ -101,8 +96,6 @@ const MachineRoute = () => {
} }
const Machines = ({ data, refetch, reload }) => { const Machines = ({ data, refetch, reload }) => {
const classes = useStyles()
const timezone = R.path(['config', 'locale_timezone'], data) ?? {} const timezone = R.path(['config', 'locale_timezone'], data) ?? {}
const machine = R.path(['machine'])(data) ?? {} const machine = R.path(['machine'])(data) ?? {}
@ -113,33 +106,27 @@ const Machines = ({ data, refetch, reload }) => {
const machineID = R.path(['deviceId'])(machine) ?? null const machineID = R.path(['deviceId'])(machine) ?? null
return ( return (
<Grid container className={classes.grid}> <div className="flex flex-1 h-full gap-12">
<Grid item xs={3}> <div className="basis-1/4 min-w-1/4 pt-8">
<Grid item xs={12}>
<div className={classes.breadcrumbsContainer}>
<Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}> <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
<Link to="/dashboard" className={classes.breadcrumbLink}> <Link to="/dashboard" className="no-underline">
<Label3 noMargin className={classes.subtitle}> <Label3 noMargin className="text-comet mt-[1px]">
Dashboard Dashboard
</Label3> </Label3>
</Link> </Link>
<TL2 noMargin className={classes.subtitle}> <TL2 noMargin className="text-comet">
{machineName} {machineName}
</TL2> </TL2>
</Breadcrumbs> </Breadcrumbs>
<Overview data={machine} onActionSuccess={reload} /> <Overview data={machine} onActionSuccess={reload} />
</div> </div>
</Grid> <div className="basis-3/4 max-w-3/4 flex flex-col mt-6">
</Grid> <div>
<Grid item xs={9}> <TL1 className="text-comet">Details</TL1>
<div className={classes.content}>
<div
className={classnames(classes.detailItem, classes.detailsMargin)}>
<TL1 className={classes.subtitle}>{'Details'}</TL1>
<Details data={machine} timezone={timezone} /> <Details data={machine} timezone={timezone} />
</div> </div>
<div className={classes.detailItem}> <div>
<TL1 className={classes.subtitle}>{'Cash box & cassettes'}</TL1> <TL1 className="text-comet">Cash box & cassettes</TL1>
<Cassettes <Cassettes
refetchData={refetch} refetchData={refetch}
machine={machine} machine={machine}
@ -147,17 +134,16 @@ const Machines = ({ data, refetch, reload }) => {
bills={bills} bills={bills}
/> />
</div> </div>
<div className={classes.transactionsItem}> <div>
<TL1 className={classes.subtitle}>{'Latest transactions'}</TL1> <TL1 className="text-comet">Latest transactions</TL1>
<Transactions id={machineID} /> <Transactions id={machineID} />
</div> </div>
<div className={classes.detailItem}> <div>
<TL1 className={classes.subtitle}>{'Commissions'}</TL1> <TL1 className="text-comet">Commissions</TL1>
<Commissions name={'commissions'} id={machineID} /> <Commissions name={'commissions'} id={machineID} />
</div> </div>
</div> </div>
</Grid> </div>
</Grid>
) )
} }

66
new-lamassu-admin/src/pages/Machines/Machines.styles.js
View file

@ -1,66 +0,0 @@
import { spacer, comet } from 'src/styling/variables'
const styles = {
grid: {
flex: 1,
height: '100%'
},
content: {
display: 'flex',
flexDirection: 'column',
flex: 1,
marginLeft: spacer * 6,
maxWidth: 900
},
subtitle: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
color: comet
},
label3: {
color: comet,
marginTop: 0,
fontSize: 12
},
row: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around'
},
rowItem: {
flex: 1,
marginBottom: spacer * 2
},
detailItem: {
marginBottom: spacer * 4
},
actionButtonsContainer: {
display: 'flex',
flexDirection: 'row'
},
breadcrumbsContainer: {
marginTop: 32
},
breadcrumbLink: {
textDecoration: 'none'
},
detailsMargin: {
marginTop: 24
},
sidebarContainer: {
height: 400,
overflowY: 'auto'
},
contentContainer: {
'& > *': {
marginTop: 26
},
'& > *:first-child': {
marginTop: 0
}
}
}
export default styles

1
new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx
View file

@ -188,7 +188,6 @@ const CashCassettes = () => {
} }
const elements = helper.getElements( const elements = helper.getElements(
classes,
config, config,
bills, bills,
setWizard, setWizard,

26
new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js
View file

@ -27,32 +27,6 @@ export default {
downloadLogsButton: { downloadLogsButton: {
marginLeft: 13 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
},
dataTable: { dataTable: {
marginBottom: 80 marginBottom: 80
} }

20
new-lamassu-admin/src/pages/Maintenance/helper.jsx
View file

@ -7,14 +7,7 @@ import { IconButton } from 'src/components/buttons'
import { fromNamespace } from 'src/utils/config' import { fromNamespace } from 'src/utils/config'
import { getCashUnitCapacity } from 'src/utils/machine' import { getCashUnitCapacity } from 'src/utils/machine'
const getElements = ( const getElements = (config, bills, setWizard, widths, setMachineId) => {
classes,
config,
bills,
setWizard,
widths,
setMachineId
) => {
const fillingPercentageSettings = fromNamespace('notifications', config) const fillingPercentageSettings = fromNamespace('notifications', config)
const locale = fromNamespace('locale')(config) const locale = fromNamespace('locale')(config)
const cashout = fromNamespace('cashOut')(config) const cashout = fromNamespace('cashOut')(config)
@ -42,7 +35,6 @@ const getElements = (
width={25} width={25}
height={45} height={45}
omitInnerPercentage omitInnerPercentage
className={classes.padding}
/> />
), ),
inputProps: { inputProps: {
@ -55,8 +47,8 @@ const getElements = (
width: widths.cassettes, width: widths.cassettes,
view: m => { view: m => {
return ( return (
<div className={classes.unitsRow}> <div className="flex my-2 mx-0 gap-8">
<div className={classes.units}> <div className="flex gap-2">
{R.range(1, m.numberOfCassettes + 1).map((it, idx) => ( {R.range(1, m.numberOfCassettes + 1).map((it, idx) => (
<CashOutLite <CashOutLite
key={idx} key={idx}
@ -73,7 +65,7 @@ const getElements = (
/> />
))} ))}
</div> </div>
<div className={classes.units}> <div className="flex gap-2">
{R.map(it => ( {R.map(it => (
<> <>
<CashOutLite <CashOutLite
@ -109,7 +101,7 @@ const getElements = (
capacity={getCashUnitCapacity(m.model, 'recycler')} capacity={getCashUnitCapacity(m.model, 'recycler')}
/> />
{it !== m.numberOfRecyclers / 2 && ( {it !== m.numberOfRecyclers / 2 && (
<span className={classes.verticalLine} /> <span className="h-full w-[1px] bg-comet2" />
)} )}
</> </>
))(R.range(1, m.numberOfRecyclers / 2 + 1))} ))(R.range(1, m.numberOfRecyclers / 2 + 1))}
@ -136,7 +128,7 @@ const getElements = (
size="large"> size="large">
<EditIcon /> <EditIcon />
</IconButton> </IconButton>
); )
} }
} }
] ]