51 lines
1.6 KiB
TypeScript
51 lines
1.6 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: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>
|
|
|
|
{/* Title and All Transactions Button */}
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', px: 1 }}>
|
|
<Typography variant="h6">
|
|
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>
|
|
)
|
|
}
|