partial: few missing pages migrations

new-lamassu-admin/src/components/tables/DataTable.jsx

@@ -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) => (

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

@@ -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'

new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx

@@ -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'

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

@@ -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>

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

@@ -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

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

@@ -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}

new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx

@@ -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
-      <div className={classes.smsPreviewContainer}>
+      className="absolute w-88 overflow-visible"
-        <div className={classes.smsPreviewIcon}>
+      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>

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

@@ -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

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

@@ -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>

new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx

@@ -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') ||