-
-
- }
appendixRight={
setShowCreationModal(true)}>
@@ -227,21 +141,11 @@ const Customers = () => {
{ label: 'Cash-out', icon: },
]}
/>
- {filters.length > 0 && (
-
- )}
{
- const elements = [
- {
- header: 'Phone/email',
- width: 199,
- view: it => `${getFormattedPhone(it.phone, locale.country) || ''}
- ${it.email || ''}`,
- },
- {
- header: 'Name',
- width: 241,
- view: getName,
- },
- {
- header: 'Total Txs',
- width: 126,
- textAlign: 'right',
- view: it => `${Number.parseInt(it.totalTxs)}`,
- },
- {
- header: 'Total spent',
- width: 152,
- textAlign: 'right',
- view: it =>
- `${Number.parseFloat(it.totalSpent)} ${it.lastTxFiatCode ?? ''}`,
- },
- {
- header: 'Last active',
- width: 133,
- view: it =>
- (it.lastActive && format('yyyy-MM-dd', new Date(it.lastActive))) ?? '',
- },
- {
- header: 'Last transaction',
- width: 161,
- textAlign: 'right',
- view: it => {
- const hasLastTx = !R.isNil(it.lastTxFiatCode)
- const LastTxIcon = it.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon
- const lastIcon =
- return (
- <>
- {hasLastTx &&
- `${parseFloat(it.lastTxFiat)} ${it.lastTxFiatCode ?? ''}`}
- {hasLastTx && lastIcon}
-
- )
+ const columns = useMemo(
+ () => [
+ {
+ accessorKey: 'id',
+ header: 'ID',
+ size: 315,
+ enableColumnFilter: true,
+ },
+ {
+ id: 'phone-email',
+ accessorFn: it =>
+ `${getFormattedPhone(it.phone, locale.country) || ''} ${it.email || ''}`,
+ size: 180,
+ header: 'Phone/email',
+ },
+ {
+ id: 'name',
+ header: 'Name',
+ accessorFn: getName,
+ },
+ {
+ accessorKey: 'totalTxs',
+ header: 'Total txs',
+ size: 126,
+ enableColumnFilter: false,
+ ...alignRight,
+ },
+ {
+ id: 'totalSpent',
+ accessorKey: 'totalSpent',
+ size: 152,
+ enableColumnFilter: false,
+ Cell: ({ cell, row }) =>
+ `${Number.parseFloat(cell.getValue())} ${row.original.lastTxFiatCode ?? ''}`,
+ header: 'Total spent',
+ ...alignRight,
+ },
+ {
+ header: 'Last active',
+ // accessorKey: 'lastActive',
+ accessorFn: it => new Date(it.lastActive),
+ size: 133,
+ enableColumnFilter: false,
+ Cell: ({ cell }) =>
+ (cell.getValue() &&
+ format('yyyy-MM-dd', new Date(cell.getValue()))) ??
+ '',
+ },
+ {
+ header: 'Last transaction',
+ ...alignRight,
+ size: 170,
+ enableColumnFilter: false,
+ accessorKey: 'lastTxFiat',
+ Cell: ({ cell, row }) => {
+ const hasLastTx = !R.isNil(row.original.lastTxFiatCode)
+ const LastTxIcon =
+ row.original.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon
+ const lastIcon =
+ return (
+ <>
+ {hasLastTx &&
+ `${parseFloat(cell.getValue())} ${row.original.lastTxFiatCode ?? ''}`}
+ {hasLastTx && lastIcon}
+
+ )
+ },
+ },
+ {
+ header: 'Status',
+ id: 'status',
+ size: 100,
+ enableColumnFilter: false,
+ accessorKey: 'authorizedStatus',
+ Cell: ({ cell }) => ,
+ },
+ ],
+ [],
+ )
+
+ const table = useMaterialReactTable({
+ ...defaultMaterialTableOpts,
+ columns: columns,
+ data,
+ initialState: {
+ ...defaultMaterialTableOpts.initialState,
+ columnVisibility: {
+ id: false,
},
},
- {
- header: 'Status',
- width: 191,
- view: it => ,
- },
- ]
+ state: { isLoading: loading },
+ getRowId: it => it.id,
+ muiTableBodyRowProps: ({ row }) => ({
+ onClick: () => onClick(row),
+ sx: { cursor: 'pointer' },
+ }),
+ })
return (
<>
-
+
)
}
diff --git a/packages/admin-ui/src/styling/theme.js b/packages/admin-ui/src/styling/theme.js
index a7af0a69..2816db3a 100644
--- a/packages/admin-ui/src/styling/theme.js
+++ b/packages/admin-ui/src/styling/theme.js
@@ -30,6 +30,8 @@ const { p } = typographyStyles
let theme = createTheme({
typography: {
fontFamily: inputFontFamily,
+ root: { ...p },
+ body1: { ...p },
},
palette: {
primary: {
@@ -56,6 +58,18 @@ theme = createTheme(theme, {
body1: { ...p },
},
},
+ MuiCircularProgress: {
+ styleOverrides: {
+ root: {
+ color: primaryColor,
+ },
+ },
+ },
+ MuiTableCell: {
+ styleOverrides: {
+ root: { ...p },
+ },
+ },
MuiIconButtonBase: {
defaultProps: {
disableRipple: true,
diff --git a/packages/admin-ui/src/utils/materialReactTableOpts.js b/packages/admin-ui/src/utils/materialReactTableOpts.js
new file mode 100644
index 00000000..c60960a1
--- /dev/null
+++ b/packages/admin-ui/src/utils/materialReactTableOpts.js
@@ -0,0 +1,33 @@
+const defaultMaterialTableOpts = {
+ enableGlobalFilter: false,
+ paginationDisplayMode: 'pages',
+ enableColumnActions: false,
+ initialState: { density: 'compact' },
+ mrtTheme: it => ({
+ ...it,
+ baseBackgroundColor: '#fff',
+ }),
+ muiTopToolbarProps: () => ({
+ sx: {
+ backgroundColor: 'var(--zodiac)',
+ '& .MuiButtonBase-root': { color: '#fff' },
+ },
+ }),
+ muiTableHeadRowProps: () => ({
+ sx: { backgroundColor: 'var(--zircon)' },
+ }),
+}
+
+const alignRight = {
+ muiTableHeadCellProps: {
+ align: 'right',
+ },
+ muiTableBodyCellProps: {
+ align: 'right',
+ },
+ muiTableFooterCellProps: {
+ align: 'right',
+ },
+}
+
+export { defaultMaterialTableOpts, alignRight }
diff --git a/packages/server/lib/new-admin/filters.js b/packages/server/lib/new-admin/filters.js
index 8e152fe9..5818e451 100644
--- a/packages/server/lib/new-admin/filters.js
+++ b/packages/server/lib/new-admin/filters.js
@@ -27,18 +27,5 @@ function transaction() {
return db.any(sql)
}
-function customer() {
- const sql = `SELECT DISTINCT * FROM (
- SELECT 'phone' AS type, phone AS value FROM customers WHERE phone IS NOT NULL UNION
- SELECT 'email' AS type, email AS value FROM customers WHERE email IS NOT NULL UNION
- SELECT 'name' AS type, id_card_data::json->>'firstName' AS value FROM customers WHERE id_card_data::json->>'firstName' IS NOT NULL AND id_card_data::json->>'lastName' IS NULL UNION
- SELECT 'name' AS type, id_card_data::json->>'lastName' AS value FROM customers WHERE id_card_data::json->>'firstName' IS NULL AND id_card_data::json->>'lastName' IS NOT NULL UNION
- SELECT 'name' AS type, concat(id_card_data::json->>'firstName', ' ', id_card_data::json->>'lastName') AS value FROM customers WHERE id_card_data::json->>'firstName' IS NOT NULL AND id_card_data::json->>'lastName' IS NOT NULL UNION
- SELECT 'address' as type, id_card_data::json->>'address' AS value FROM customers WHERE id_card_data::json->>'address' IS NOT NULL UNION
- SELECT 'id' AS type, id_card_data::json->>'documentNumber' AS value FROM customers WHERE id_card_data::json->>'documentNumber' IS NOT NULL
- ) f`
- return db.any(sql)
-}
-
-module.exports = { transaction, customer }
+module.exports = { transaction }
diff --git a/packages/server/lib/new-admin/graphql/resolvers/customer.resolver.js b/packages/server/lib/new-admin/graphql/resolvers/customer.resolver.js
index bdd7c640..9dbf2951 100644
--- a/packages/server/lib/new-admin/graphql/resolvers/customer.resolver.js
+++ b/packages/server/lib/new-admin/graphql/resolvers/customer.resolver.js
@@ -1,7 +1,6 @@
const authentication = require('../modules/userManagement')
const anonymous = require('../../../constants').anonymousCustomer
const customers = require('../../../customers')
-const filters = require('../../filters')
const customerNotes = require('../../../customer-notes')
const machineLoader = require('../../../machine-loader')
@@ -22,7 +21,6 @@ const resolvers = {
customers.getCustomersList(phone, name, address, id, email),
customer: (...[, { customerId }]) =>
customers.getCustomerById(customerId).then(addLastUsedMachineName),
- customerFilters: () => filters.customer(),
},
Mutation: {
setCustomer: (root, { customerId, customerInput }, context) => {