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

partial: few missing pages migrations

Browse source
This commit is contained in:
Rafael Taranto 2025-05-08 09:27:07 +01:00
parent 2136e26de5
commit 636cf0fc02
10 changed files with 28 additions and 318 deletions
Download patch file Download diff file Expand all files Collapse all files

9
new-lamassu-admin/src/components/tables/DataTable.jsx
View file

@ -105,6 +105,7 @@ const DataTable = ({
initialExpanded,
onClick,
loading,
maxWidth = 1200,
emptyText,
rowSize,
...props
@ -114,7 +115,7 @@ const DataTable = ({
useEffect(() => setExpanded(initialExpanded), [initialExpanded])
const coreWidth = R.compose(R.sum, R.map(R.prop('width')))(elements)
const expWidth = 1200 - coreWidth
const expWidth = maxWidth - coreWidth
const width = coreWidth + (expandable ? expWidth : 0)
const classes = useStyles({ width })
@ -170,7 +171,11 @@ const DataTable = ({
}
return (
<div className="flex flex-1 flex-col">
<div
className={classnames({
'flex flex-1 flex-col': true,
[className]: !!className
})}>
<Table className={classnames(classes.table, tableClassName)}>
<THead>
{elements.map(({ width, className, textAlign, header }, idx) => (

1
new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.jsx
View file

@ -1,5 +1,4 @@
import Paper from '@mui/material/Paper'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { memo } from 'react'
import { Info2, Label3, P } from 'src/components/typography'

1
new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx
View file

@ -1,5 +1,4 @@
import { useQuery, gql } from '@apollo/client'
import { makeStyles } from '@mui/styles'
import BigNumber from 'bignumber.js'
import * as R from 'ramda'
import React from 'react'

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

@ -47,7 +47,7 @@ const Overview = ({ data, onActionSuccess }) => {
<div>
<div>
<Label1 className="text-comet mt-0">Device ID</Label1>
<P noMargin>
<P className="wrap-anywhere" noMargin>
<CopyToClipboard>{data.deviceId}</CopyToClipboard>
</P>
</div>

187
new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.jsx
View file

@ -1,187 +0,0 @@
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import * as R from 'ramda'
import React, { useState, useEffect } from 'react'
import {
AutoSizer,
List,
CellMeasurer,
CellMeasurerCache
} from 'react-virtualized'
import {
Table,
TBody,
THead,
Tr,
Td,
Th
} from 'src/components/fake-table/Table'
import { H4 } from 'src/components/typography'
import ExpandClosedIcon from 'src/styling/icons/action/expand/closed.svg?react'
import ExpandOpenIcon from 'src/styling/icons/action/expand/open.svg?react'
import styles from 'src/components/tables/DataTable.styles'
const useStyles = makeStyles(styles)
const Row = ({
id,
elements,
data,
width,
Details,
expanded,
expandRow,
expWidth,
expandable,
onClick
}) => {
const classes = useStyles()
const hasPointer = onClick || expandable
const trClasses = {
[classes.pointer]: hasPointer,
[classes.row]: true,
[classes.expanded]: expanded
}
return (
<div className={classes.rowWrapper}>
<div className={classnames({ [classes.before]: expanded && id !== 0 })}>
<Tr
className={classnames(trClasses)}
onClick={() => {
expandable && expandRow(id)
onClick && onClick(data)
}}
error={data.error}
errorMessage={data.errorMessage}>
{elements.map(({ view = it => it?.toString(), ...props }, idx) => (
<Td key={idx} {...props}>
{view(data)}
</Td>
))}
{expandable && (
<Td width={expWidth} textAlign="center">
<button
onClick={() => expandRow(id)}
className={classes.expandButton}>
{expanded && <ExpandOpenIcon />}
{!expanded && <ExpandClosedIcon />}
</button>
</Td>
)}
</Tr>
</div>
{expandable && expanded && (
<div className={classes.after}>
<Tr className={classnames({ [classes.expanded]: expanded })}>
<Td width={width}>
<Details it={data} />
</Td>
</Tr>
</div>
)}
</div>
)
}
const DataTable = ({
elements = [],
data = [],
Details,
className,
expandable,
initialExpanded,
onClick,
loading,
emptyText,
extraHeight,
...props
}) => {
const [expanded, setExpanded] = useState(initialExpanded)
useEffect(() => setExpanded(initialExpanded), [initialExpanded])
const coreWidth = R.compose(R.sum, R.map(R.prop('width')))(elements)
const expWidth = 850 - coreWidth
const width = coreWidth + (expandable ? expWidth : 0)
const classes = useStyles({ width })
const expandRow = id => {
setExpanded(id === expanded ? null : id)
}
const cache = new CellMeasurerCache({
defaultHeight: 62,
fixedWidth: true
})
function rowRenderer({ index, key, parent, style }) {
return (
<CellMeasurer
cache={cache}
columnIndex={0}
key={key}
parent={parent}
rowIndex={index}>
<div style={style}>
<Row
width={width}
id={index}
expWidth={expWidth}
elements={elements}
data={data[index]}
Details={Details}
expanded={index === expanded}
expandRow={expandRow}
expandable={expandable}
onClick={onClick}
/>
</div>
</CellMeasurer>
)
}
return (
<div className="flex flex-1 flex-col">
<Table className={classes.table}>
<THead>
{elements.map(({ width, className, textAlign, header }, idx) => (
<Th
key={idx}
width={width}
className={className}
textAlign={textAlign}>
{header}
</Th>
))}
{expandable && <Th width={expWidth}></Th>}
</THead>
<TBody className={classes.body}>
{loading && <H4>Loading...</H4>}
{!loading && R.isEmpty(data) && <H4>{emptyText}</H4>}
<AutoSizer disableWidth disableHeight>
{() => (
<List
// this has to be in a style because of how the component works
style={{ overflowX: 'inherit', outline: 'none' }}
{...props}
height={data.length * 62 + extraHeight}
width={width}
rowCount={data.length}
rowHeight={cache.rowHeight}
rowRenderer={rowRenderer}
overscanRowCount={50}
deferredMeasurementCache={cache}
/>
)}
</AutoSizer>
</TBody>
</Table>
</div>
)
}
export default DataTable

4
new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.jsx
View file

@ -11,7 +11,7 @@ import { getStatus } from 'src/pages/Transactions/helper'
import * as Customer from 'src/utils/customer'
import { formatDate } from 'src/utils/timezones'
import DataTable from './DataTable'
import DataTable from 'src/components/tables/DataTable'
const NUM_LOG_RESULTS = 5
@ -164,6 +164,8 @@ const Transactions = ({ id }) => {
<DataTable
extraHeight={extraHeight}
onClick={handleClick}
maxWidth="950"
className="min-h-90"
loading={loading || id === null}
emptyText="No transactions so far"
elements={elements}

24
new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx
View file

@ -1,7 +1,6 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { useQuery, useMutation, gql } from '@apollo/client'
import Paper from '@mui/material/Paper'
import Switch from '@mui/material/Switch'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
import { HelpTooltip } from 'src/components/Tooltip'
@ -15,11 +14,8 @@ import WhiteLogo from 'src/styling/icons/menu/logo-white.svg?react'
import { IconButton, SupportLinkButton } from 'src/components/buttons'
import { formatDate } from 'src/utils/timezones'
import styles from './SMSNotices.styles'
import CustomSMSModal from './SMSNoticesModal'
const useStyles = makeStyles(styles)
const GET_SMS_NOTICES = gql`
query SMSNotices {
SMSNotices {
@ -88,20 +84,20 @@ const TOOLTIPS = {
}
const SMSPreview = ({ sms, coords, timezone }) => {
const classes = useStyles(coords)
const matches = {
'#code': 123,
'#timestamp': formatDate(new Date(), timezone, 'HH:mm')
}
return (
<div className={classes.smsPreview}>
<div className={classes.smsPreviewContainer}>
<div className={classes.smsPreviewIcon}>
<div
className="absolute w-88 overflow-visible"
style={{ left: coords.x, bottom: coords.y }}>
<div className="flex flex-row items-end gap-2">
<div className="flex w-9 h-9 rounded-full bg-[#16D6D3] items-center justify-center">
<WhiteLogo width={22} height={22} />
</div>
<Paper className={classes.smsPreviewContent}>
<Paper className="w-56 p-4 rounded-2xl">
<P noMargin>
{R.isEmpty(sms?.message) ? (
<i>No content available</i>
@ -117,8 +113,6 @@ const SMSPreview = ({ sms, coords, timezone }) => {
}
const SMSNotices = () => {
const classes = useStyles()
const [showModal, setShowModal] = useState(false)
const [selectedSMS, setSelectedSMS] = useState(null)
const [previewOpen, setPreviewOpen] = useState(false)
@ -160,7 +154,7 @@ const SMSNotices = () => {
textAlign: 'left',
view: it =>
!R.isEmpty(TOOLTIPS[it.event]) ? (
<div className={classes.messageWithTooltip}>
<div className="flex flex-row items-center">
{R.prop('messageName', it)}
<HelpTooltip width={250}>
<P>{TOOLTIPS[it.event]}</P>
@ -237,7 +231,7 @@ const SMSNotices = () => {
return (
<>
<div className={classes.header}>
<div className="flex relative items-center justify-between w-200">
<H4>SMS notices</H4>
<HelpTooltip width={320}>
<P>

95
new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.styles.js
View file

@ -1,95 +0,0 @@
import {
spacer,
fontMonospaced,
fontSize5,
fontColor
} from 'src/styling/variables'
const styles = {
header: {
display: 'flex',
position: 'relative',
alignItems: 'center',
justifyContent: 'space-between',
width: 800
},
form: {
'& > *': {
marginTop: 20
},
display: 'flex',
flexDirection: 'column',
height: '100%'
},
footer: {
display: 'flex',
flexDirection: 'row',
margin: [['auto', 0, spacer * 3, 0]]
},
submit: {
margin: [['auto', 0, 0, 'auto']]
},
smsPreview: {
position: 'absolute',
left: ({ x }) => x,
bottom: ({ y }) => y,
width: 350,
overflow: 'visible'
},
smsPreviewContainer: {
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',
'& > *': {
marginRight: 10
}
},
smsPreviewIcon: {
display: 'flex',
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: '#16D6D3',
alignItems: 'center',
justifyContent: 'center'
},
smsPreviewContent: {
width: 225,
padding: 15,
borderRadius: '15px 15px 15px 0px'
},
chipButtons: {
width: 480,
display: 'flex',
flexDirection: 'column',
alignItems: 'space-between',
'& > div': {
marginTop: 15
},
'& > div:first-child': {
marginTop: 0
},
'& > div > div': {
margin: [[0, 5, 0, 5]]
},
'& > div > div > span': {
lineHeight: '120%',
color: fontColor,
fontSize: fontSize5,
fontFamily: fontMonospaced,
fontWeight: 500
},
marginLeft: 'auto',
marginRight: 'auto'
},
resetToDefault: {
width: 145
},
messageWithTooltip: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
}
}
export default styles

21
new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNoticesModal.jsx
View file

@ -1,5 +1,4 @@
import Chip from '@mui/material/Chip'
import { makeStyles } from '@mui/styles'
import { Form, Formik, Field } from 'formik'
import * as R from 'ramda'
import React from 'react'
@ -14,10 +13,6 @@ import { ActionButton, Button } from 'src/components/buttons'
import { TextInput } from 'src/components/inputs/formik'
import { zircon } from 'src/styling/variables'
import styles from './SMSNotices.styles'
const useStyles = makeStyles(styles)
const getErrorMsg = (formikErrors, formikTouched, mutationError) => {
if (!formikErrors || !formikTouched) return null
if (mutationError) return 'Internal server error'
@ -77,8 +72,6 @@ const SMSNoticesModal = ({
creationError,
submit
}) => {
const classes = useStyles()
const initialValues = {
event: !R.isNil(sms) ? sms.event : '',
message: !R.isNil(sms) ? sms.message : ''
@ -128,12 +121,12 @@ const SMSNoticesModal = ({
handleSubmit(values, errors, touched)
}>
{({ values, errors, touched, setFieldValue }) => (
<Form id="sms-notice" className={classes.form}>
<Form id="sms-notice" className="flex flex-col h-full gap-5">
<ActionButton
color="primary"
Icon={DefaultIcon}
InverseIcon={DefaultIconReverse}
className={classes.resetToDefault}
className="w-37"
type="button"
onClick={() =>
setFieldValue('message', DEFAULT_MESSAGES[sms?.event])
@ -151,9 +144,9 @@ const SMSNoticesModal = ({
{R.length(CHIPS[sms?.event]) > 0 && (
<Info2 noMargin>Values to attach</Info2>
)}
<div className={classes.chipButtons}>
<div className="w-120">
{R.splitEvery(3, CHIPS[sms?.event]).map((it, idx) => (
<div key={idx}>
<div key={idx} className="flex gap-2">
{it.map((ite, idx2) => (
<Chip
key={idx2}
@ -161,7 +154,7 @@ const SMSNoticesModal = ({
size="small"
style={{ backgroundColor: zircon }}
disabled={R.includes(ite.code, values.message)}
className={classes.chip}
className="p-2"
onClick={() => {
setFieldValue(
'message',
@ -176,7 +169,7 @@ const SMSNoticesModal = ({
</div>
))}
</div>
<div className={classes.footer}>
<div className="flex flex-row mt-auto mx-0 mb-6">
{getErrorMsg(errors, touched, creationError) && (
<ErrorMessage>
{getErrorMsg(errors, touched, creationError)}
@ -185,7 +178,7 @@ const SMSNoticesModal = ({
<Button
type="submit"
form="sms-notice"
className={classes.submit}>
className="mt-auto ml-auto mr-0 mb-0">
Confirm
</Button>
</div>

2
new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx
View file

@ -384,7 +384,7 @@ const DetailsRow = ({ it: tx, timezone }) => {
<CopyToClipboard>{tx.id}</CopyToClipboard>
</div>
</div>
<div className="flex flex-row mb-8">
<div className="flex flex-row mb-8 gap-10">
<div data-cy="status" className="62">
{errorElements}
{((tx.txClass === 'cashOut' && getStatus(tx) === 'Pending') ||