Master Page with Charts

Here's an updated version with charts and data pagination: Master Page with Charts

const { AppBar, Toolbar, Typography, Button, Container, Box, CssBaseline, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Pagination } = MaterialUI; // Sample data for the table const data = [ { id: 1, name: 'Product A', price: 100, sales: 45 }, { id: 2, name: 'Product B', price: 200, sales: 30 }, { id: 3, name: 'Product C', price: 150, sales: 60 }, { id: 4, name: 'Product D', price: 250, sales: 25 }, { id: 5, name: 'Product E', price: 300, sales: 50 }, { id: 6, name: 'Product F', price: 180, sales: 40 }, { id: 7, name: 'Product G', price: 220, sales: 35 }, { id: 8, name: 'Product H', price: 190, sales: 55 }, { id: 9, name: 'Product I', price: 210, sales: 20 }, { id: 10, name: 'Product J', price: 170, sales: 45 } ]; function ChartComponent() { React.useEffect(() => { const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: data.map(item => item.name), datasets: [{ label: 'Sales', data: data.map(item => item.sales), backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); }, []); return

; } function DataTable() { const [page, setPage] = React.useState(1); const itemsPerPage = 3; const count = Math.ceil(data.length / itemsPerPage); const handleChange = (event, value) => { setPage(value); }; const currentData = data.slice( (page - 1) * itemsPerPage, page * itemsPerPage ); return ( ID Name Price Sales {currentData.map((row) => ( {row.id} {row.name} ${row.price} {row.sales} ))}

); } function Layout({ children }) { return ( Dashboard {children} © {new Date().getFullYear()} Dashboard App ); } function App() { return ( Sales Dashboard Product Data ); } ReactDOM.render(, document.getElementById('root'));