69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { useRouter } from "next/navigation";
|
|
import { Box, Button, IconButton, Paper, Typography } from "@mui/material";
|
|
import { PieCharts } from "../PieCharts/PieCharts";
|
|
|
|
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
|
import { TransactionsOverviewTable } from "./TransactionsOverViewTable";
|
|
|
|
export const TransactionsOverview = () => {
|
|
const router = useRouter();
|
|
return (
|
|
<Paper
|
|
elevation={3}
|
|
sx={{
|
|
padding: "23px",
|
|
margin: 2,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
{/* Title and All Transactions Button */}
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
px: 1,
|
|
}}
|
|
>
|
|
<Typography variant="h5" fontWeight="bold">
|
|
Transactions Overview (Last 24h)
|
|
</Typography>
|
|
<Box>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={() => router.push("dashboard/transactions")}
|
|
>
|
|
All Transactions
|
|
</Button>
|
|
<IconButton size="small">
|
|
<MoreVertIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Chart and Table */}
|
|
<Box
|
|
sx={{
|
|
padding: 2,
|
|
margin: 2,
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
flexWrap: {
|
|
xs: "wrap", // Wrap on small screens
|
|
md: "nowrap", // No wrap on medium and up
|
|
},
|
|
gap: {
|
|
xs: 4, // Add spacing on small screens
|
|
md: 0, // No spacing on larger screens
|
|
},
|
|
}}
|
|
>
|
|
<PieCharts />
|
|
<TransactionsOverviewTable />
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
};
|