71 lines
2.1 KiB
TypeScript
71 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>
|
|
);
|
|
};
|