127 lines
3.7 KiB
JavaScript
127 lines
3.7 KiB
JavaScript
import React, { useState } from 'react'
|
|
import {
|
|
Box,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Paper,
|
|
TablePagination,
|
|
Button,
|
|
IconButton,
|
|
Tooltip,
|
|
} from '@mui/material'
|
|
import { Visibility, ThumbUp, ThumbDown } from '@mui/icons-material'
|
|
import { format } from 'date-fns'
|
|
import { useNavigate } from 'react-router-dom'
|
|
|
|
const generateRandomData = (numRows) => {
|
|
const statuses = ['New', 'Pending', 'Rejected', 'Approved']
|
|
const data = []
|
|
|
|
for (let i = 0; i < numRows; i++) {
|
|
data.push({
|
|
id: i + 1,
|
|
tradeName: `Trade ${i + 1}`,
|
|
createdOn: new Date(),
|
|
status: statuses[Math.floor(Math.random() * statuses.length)],
|
|
})
|
|
}
|
|
|
|
return data
|
|
}
|
|
|
|
const Kyc = () => {
|
|
const [rows, setRows] = useState(generateRandomData(50))
|
|
const [page, setPage] = useState(0)
|
|
const [rowsPerPage, setRowsPerPage] = useState(5)
|
|
const navigate = useNavigate()
|
|
|
|
const handleChangePage = (event, newPage) => {
|
|
setPage(newPage)
|
|
}
|
|
|
|
const handleChangeRowsPerPage = (event) => {
|
|
setRowsPerPage(parseInt(event.target.value, 10))
|
|
setPage(0)
|
|
}
|
|
|
|
// const handleViewClick = (id) => {
|
|
// navigate(`/kyc/details/${id}`)
|
|
// }
|
|
|
|
return (
|
|
<Box sx={{ width: '100%' }}>
|
|
<Paper sx={{ width: '100%', mb: 2 }}>
|
|
<TableContainer>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>ID</TableCell>
|
|
<TableCell>Trade Name</TableCell>
|
|
<TableCell>Created On</TableCell>
|
|
<TableCell>Status</TableCell>
|
|
<TableCell>Action</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (
|
|
<TableRow key={row.id}>
|
|
<TableCell>{row.id}</TableCell>
|
|
<TableCell>{row.tradeName}</TableCell>
|
|
<TableCell>{format(row.createdOn, 'yyyy-MM-dd HH:mm:ss')}</TableCell>
|
|
<TableCell>{row.status}</TableCell>
|
|
<TableCell>
|
|
<Tooltip title="View">
|
|
{/* <IconButton color="primary">
|
|
<Visibility />
|
|
</IconButton> */}
|
|
<Button
|
|
sx={{ mr: '1rem' }}
|
|
color="primary"
|
|
variant="contained"
|
|
// onClick={() => handleViewClick(row.id)}
|
|
>
|
|
View
|
|
</Button>
|
|
</Tooltip>
|
|
<Tooltip title="Approve">
|
|
{/* <IconButton color="success">
|
|
<ThumbUp />
|
|
</IconButton> */}
|
|
<Button sx={{ mr: '1rem' }} color="success" variant="contained">
|
|
Approve
|
|
</Button>
|
|
</Tooltip>
|
|
<Tooltip title="Reject">
|
|
{/* <IconButton color="error">
|
|
<ThumbDown />
|
|
</IconButton> */}
|
|
<Button sx={{ mr: '1rem' }} color="error" variant="contained">
|
|
Reject
|
|
</Button>
|
|
</Tooltip>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<TablePagination
|
|
rowsPerPageOptions={[5, 10, 25]}
|
|
component="div"
|
|
count={rows.length}
|
|
rowsPerPage={rowsPerPage}
|
|
page={page}
|
|
onPageChange={handleChangePage}
|
|
onRowsPerPageChange={handleChangeRowsPerPage}
|
|
/>
|
|
</Paper>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default Kyc
|