120 lines
3.2 KiB
JavaScript
120 lines
3.2 KiB
JavaScript
import { format } from 'date-fns/fp'
|
|
import * as R from 'ramda'
|
|
import React, { useMemo } from 'react'
|
|
import { MaterialReactTable, useMaterialReactTable } from 'material-react-table'
|
|
import { MainStatus } from '../../components/Status'
|
|
import TxInIcon from '../../styling/icons/direction/cash-in.svg?react'
|
|
import TxOutIcon from '../../styling/icons/direction/cash-out.svg?react'
|
|
import {
|
|
defaultMaterialTableOpts,
|
|
alignRight,
|
|
} from '../../utils/materialReactTableOpts'
|
|
|
|
import { getFormattedPhone, getName } from './helper'
|
|
|
|
const CustomersList = ({ data, country, onClick, loading }) => {
|
|
const columns = useMemo(
|
|
() => [
|
|
{
|
|
accessorKey: 'id',
|
|
header: 'ID',
|
|
size: 315,
|
|
},
|
|
{
|
|
id: 'phone-email',
|
|
accessorFn: it =>
|
|
`${getFormattedPhone(it.phone, 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 = <LastTxIcon className="ml-3" />
|
|
return (
|
|
<>
|
|
{hasLastTx &&
|
|
`${parseFloat(cell.getValue())} ${row.original.lastTxFiatCode ?? ''}`}
|
|
{hasLastTx && lastIcon}
|
|
</>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
header: 'Status',
|
|
id: 'status',
|
|
size: 100,
|
|
enableColumnFilter: false,
|
|
accessorKey: 'authorizedStatus',
|
|
Cell: ({ cell }) => <MainStatus statuses={[cell.getValue()]} />,
|
|
},
|
|
],
|
|
[],
|
|
)
|
|
|
|
const table = useMaterialReactTable({
|
|
...defaultMaterialTableOpts,
|
|
columns: columns,
|
|
data,
|
|
initialState: {
|
|
...defaultMaterialTableOpts.initialState,
|
|
columnVisibility: {
|
|
id: false,
|
|
},
|
|
},
|
|
state: { isLoading: loading },
|
|
getRowId: it => it.id,
|
|
muiTableBodyRowProps: ({ row }) => ({
|
|
onClick: () => onClick(row),
|
|
sx: { cursor: 'pointer' },
|
|
}),
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<MaterialReactTable table={table} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default CustomersList
|