79 lines
No EOL
2.4 KiB
JavaScript
79 lines
No EOL
2.4 KiB
JavaScript
import React, {useState} from 'react'
|
|
import Header from 'components/Header'
|
|
import { Box } from '@mui/material'
|
|
import { DataGrid } from '@mui/x-data-grid'
|
|
import { useGetTransactionsQuery } from 'state/api'
|
|
import DataGridCustomToolbar from "components/DataGridCustomToolbar"
|
|
|
|
const Transactions = () => {
|
|
const [page, setPage] = useState(0);
|
|
const [pageSize, setPageSize] = useState(25);
|
|
const [sort, setSort] = useState({});
|
|
const [search, setSearch] = useState("");
|
|
const [searchInput, setSearchInput] = useState("");
|
|
const {data, isLoading} = useGetTransactionsQuery({
|
|
page, pageSize, sort: JSON.stringify(sort), search,
|
|
});
|
|
console.log(data)
|
|
const columns = [
|
|
{
|
|
field: "_id",
|
|
headerName: "ID",
|
|
flex: 1,
|
|
},
|
|
{
|
|
field: "userId",
|
|
headerName: "User ID",
|
|
flex: 1,
|
|
},
|
|
{
|
|
field: "createdAt",
|
|
headerName: "CreatedAt",
|
|
flex: 1,
|
|
},
|
|
{
|
|
field: "products",
|
|
headerName: "Number of Products",
|
|
flex: 0.5,
|
|
sortable: false,
|
|
renderCell: (params) => params.value.length
|
|
},
|
|
{
|
|
field: "cost",
|
|
headerName: "Cost",
|
|
flex: 1,
|
|
renderCell: (params) => `$${Number(params.value).toFixed(2)}`
|
|
},
|
|
];
|
|
|
|
|
|
return (
|
|
<Box m="1.5rem 2.5rem">
|
|
<Header title="Transactions" subtitle="List of transactions"/>
|
|
<Box height="80vh">
|
|
<DataGrid
|
|
loading={isLoading || !data}
|
|
getRowId={(row) => row._id}
|
|
rows={(data && data.transactions) || []}
|
|
columns={columns}
|
|
rowCount={(data && data.total) || 0}
|
|
pagination
|
|
page={page}
|
|
pageSize={pageSize}
|
|
paginationMode="server"
|
|
sortingMode="server"
|
|
onPageChange={(newPage) => setPage(newPage)}
|
|
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
|
|
onSortModelChange={(newSortModel) => setSort(...newSortModel)}
|
|
rowsPerPageOptions={[25, 50, 100]}
|
|
slots={{toolbar: DataGridCustomToolbar}}
|
|
slotProps={{
|
|
toolbar: { searchInput, setSearchInput, setSearch}
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default Transactions |