72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Paper,
|
|
Box,
|
|
Button
|
|
} from '@mui/material';
|
|
|
|
const data1 = [
|
|
{ state: 'Success', count: 120, percentage: '60%', color: 'green' },
|
|
{ state: 'Pending', count: 50, percentage: '25%', color: 'orange' },
|
|
{ state: 'Failed', count: 20, percentage: '10%', color: 'red' },
|
|
{ state: 'Other', count: 10, percentage: '5%', color: 'gray' }
|
|
];
|
|
|
|
export const TransactionsOverviewTable = () => {
|
|
return (
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell align="center">State</TableCell>
|
|
<TableCell align="center">Count</TableCell>
|
|
<TableCell align="center">Percentage</TableCell>
|
|
<TableCell align="center">Action</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{data1.map((row) => (
|
|
<TableRow key={row.state}>
|
|
<TableCell align="center">
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'center',
|
|
mx: 'auto', // center the flexbox itself
|
|
width: '73px' // consistent width for alignment
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: 10,
|
|
height: 10,
|
|
borderRadius: '50%',
|
|
bgcolor: row.color,
|
|
mr: 1
|
|
}}
|
|
/>
|
|
{row.state}
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell align="center">{row.count}</TableCell>
|
|
<TableCell align="center">{row.percentage}</TableCell>
|
|
<TableCell align="center">
|
|
<Button variant="outlined" size="small">
|
|
View
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
};
|
|
|