[material-ui][docs] Add improvements to Dashboard template

docs/data/material/getting-started/templates/dashboard/Dashboard.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
 
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider, alpha } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import getDashboardTheme from './getDashboardTheme';
+import Stack from '@mui/material/Stack';
+import getDashboardTheme from './theme/getDashboardTheme';
 import ToggleCustomTheme from './internals/components/ToggleCustomTheme';
-import Copyright from './internals/components/Copyright';
 import Navbar from './components/Navbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
+import SideMenu from './components/SideMenu';
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState('light');
@@ -29,30 +29,32 @@ export default function Dashboard() {
     <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
       <CssBaseline />
       <Box sx={{ display: 'flex' }}>
+        <SideMenu />
         <Navbar mode={mode} toggleColorMode={toggleColorMode} />
+        {/* Main content */}
         <Box
           component="main"
-          sx={{
-            backgroundColor: 'background.default',
+          sx={(theme) => ({
+            position: { sm: 'relative', md: '' },
+            top: { sm: '48px', md: '0' },
+            height: { sm: 'calc(100vh - 48px)', md: '100vh' },
             flexGrow: 1,
-            height: '100vh',
+            pt: 2,
+            backgroundColor: alpha(theme.palette.background.default, 1),
             overflow: 'auto',
-          }}
+          })}
         >
-          {/* Main content */}
-          <Container
-            maxWidth="xl"
+          <Stack
+            spacing={2}
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              py: { xs: 14, sm: 16 },
-              gap: 2,
+              alignItems: 'center',
+              mx: 3,
+              pb: 10,
             }}
           >
-            <Header />
+            <Header mode={mode} toggleColorMode={toggleColorMode} />
             <MainGrid />
-            <Copyright sx={{ my: 4 }} />
-          </Container>
+          </Stack>
         </Box>
         <ToggleCustomTheme
           showCustomTheme={showCustomTheme}

docs/data/material/getting-started/templates/dashboard/Dashboard.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { PaletteMode } from '@mui/material';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider, alpha } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import getDashboardTheme from './getDashboardTheme';
+import Stack from '@mui/material/Stack';
+import getDashboardTheme from './theme/getDashboardTheme';
 import ToggleCustomTheme from './internals/components/ToggleCustomTheme';
-import Copyright from './internals/components/Copyright';
 import Navbar from './components/Navbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
+import SideMenu from './components/SideMenu';
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
@@ -29,30 +29,32 @@ export default function Dashboard() {
     <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
       <CssBaseline />
       <Box sx={{ display: 'flex' }}>
+        <SideMenu />
         <Navbar mode={mode} toggleColorMode={toggleColorMode} />
+        {/* Main content */}
         <Box
           component="main"
-          sx={{
-            backgroundColor: 'background.default',
+          sx={(theme) => ({
+            position: { sm: 'relative', md: '' },
+            top: { sm: '48px', md: '0' },
+            height: { sm: 'calc(100vh - 48px)', md: '100vh' },
             flexGrow: 1,
-            height: '100vh',
+            pt: 2,
+            backgroundColor: alpha(theme.palette.background.default, 1),
             overflow: 'auto',
-          }}
+          })}
         >
-          {/* Main content */}
-          <Container
-            maxWidth="xl"
+          <Stack
+            spacing={2}
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              py: { xs: 14, sm: 16 },
-              gap: 2,
+              alignItems: 'center',
+              mx: 3,
+              pb: 10,
             }}
           >
-            <Header />
+            <Header mode={mode} toggleColorMode={toggleColorMode} />
             <MainGrid />
-            <Copyright sx={{ my: 4 }} />
-          </Container>
+          </Stack>
         </Box>
         <ToggleCustomTheme
           showCustomTheme={showCustomTheme}

docs/data/material/getting-started/templates/dashboard/components/CardAlert.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+
+export default function CardAlert() {
+  return (
+    <Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
+      <CardContent>
+        <AutoAwesomeRoundedIcon fontSize="small" />
+        <Typography gutterBottom sx={{ fontWeight: 600 }}>
+          Plan about to expire
+        </Typography>
+        <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+          Enjoy 10% off when renewing your plan today.
+        </Typography>
+        <Button variant="contained" size="small" fullWidth>
+          Get the discount
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+
+export default function CardAlert() {
+  return (
+    <Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
+      <CardContent>
+        <AutoAwesomeRoundedIcon fontSize="small" />
+        <Typography gutterBottom sx={{ fontWeight: 600 }}>
+          Plan about to expire
+        </Typography>
+        <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+          Enjoy 10% off when renewing your plan today.
+        </Typography>
+        <Button variant="contained" size="small" fullWidth>
+          Get the discount
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js

@@ -112,15 +112,18 @@ PieCenterLabel.propTypes = {
 };
 
 const colors = [
-  'hsl(220, 25%, 65%)',
-  'hsl(220, 25%, 45%)',
-  'hsl(220, 25%, 30%)',
-  'hsl(220, 25%, 20%)',
+  'hsl(220, 20%, 65%)',
+  'hsl(220, 20%, 42%)',
+  'hsl(220, 20%, 35%)',
+  'hsl(220, 20%, 25%)',
 ];
 
 export default function ChartUserByCountry() {
   return (
-    <Card variant="outlined" sx={{ pb: '8px' }}>
+    <Card
+      variant="outlined"
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
+    >
       <CardContent>
         <Typography component="h2" variant="subtitle2">
           Users by country
@@ -177,6 +180,7 @@ export default function ChartUserByCountry() {
               </Stack>
               <LinearProgress
                 variant="determinate"
+                aria-label="Number of users by country"
                 value={country.value}
                 sx={{
                   [`& .${linearProgressClasses.bar}`]: {

docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx

@@ -115,15 +115,18 @@ function PieCenterLabel({ primaryText, secondaryText }: PieCenterLabelProps) {
 }
 
 const colors = [
-  'hsl(220, 25%, 65%)',
-  'hsl(220, 25%, 45%)',
-  'hsl(220, 25%, 30%)',
-  'hsl(220, 25%, 20%)',
+  'hsl(220, 20%, 65%)',
+  'hsl(220, 20%, 42%)',
+  'hsl(220, 20%, 35%)',
+  'hsl(220, 20%, 25%)',
 ];
 
 export default function ChartUserByCountry() {
   return (
-    <Card variant="outlined" sx={{ pb: '8px' }}>
+    <Card
+      variant="outlined"
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
+    >
       <CardContent>
         <Typography component="h2" variant="subtitle2">
           Users by country
@@ -180,6 +183,7 @@ export default function ChartUserByCountry() {
               </Stack>
               <LinearProgress
                 variant="determinate"
+                aria-label="Number of users by country"
                 value={country.value}
                 sx={{
                   [`& .${linearProgressClasses.bar}`]: {

docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js

@@ -5,17 +5,45 @@ import { columns, rows } from '../internals/data/gridData';
 export default function CustomizedDataGrid() {
   return (
     <DataGrid
+      autoHeight
       checkboxSelection
       rows={rows}
       columns={columns}
       getRowClassName={(params) =>
         params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
       }
       initialState={{
-        pagination: { paginationModel: { pageSize: 10 } },
+        pagination: { paginationModel: { pageSize: 20 } },
       }}
-      pageSizeOptions={[10, 25, 50]}
+      pageSizeOptions={[10, 20, 50]}
       disableColumnResize
+      density="compact"
+      slotProps={{
+        filterPanel: {
+          filterFormProps: {
+            logicOperatorInputProps: {
+              variant: 'outlined',
+              size: 'small',
+            },
+            columnInputProps: {
+              variant: 'outlined',
+              size: 'small',
+              sx: { mt: 'auto' },
+            },
+            operatorInputProps: {
+              variant: 'outlined',
+              size: 'small',
+              sx: { mt: 'auto' },
+            },
+            valueInputProps: {
+              InputComponentProps: {
+                variant: 'outlined',
+                size: 'small',
+              },
+            },
+          },
+        },
+      }}
     />
   );
 }

docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx

@@ -5,17 +5,45 @@ import { columns, rows } from '../internals/data/gridData';
 export default function CustomizedDataGrid() {
   return (
     <DataGrid
+      autoHeight
       checkboxSelection
       rows={rows}
       columns={columns}
       getRowClassName={(params) =>
         params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
       }
       initialState={{
-        pagination: { paginationModel: { pageSize: 10 } },
+        pagination: { paginationModel: { pageSize: 20 } },
       }}
-      pageSizeOptions={[10, 25, 50]}
+      pageSizeOptions={[10, 20, 50]}
       disableColumnResize
+      density="compact"
+      slotProps={{
+        filterPanel: {
+          filterFormProps: {
+            logicOperatorInputProps: {
+              variant: 'outlined',
+              size: 'small',
+            },
+            columnInputProps: {
+              variant: 'outlined',
+              size: 'small',
+              sx: { mt: 'auto' },
+            },
+            operatorInputProps: {
+              variant: 'outlined',
+              size: 'small',
+              sx: { mt: 'auto' },
+            },
+            valueInputProps: {
+              InputComponentProps: {
+                variant: 'outlined',
+                size: 'small',
+              },
+            },
+          },
+        },
+      }}
     />
   );
 }

docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js

@@ -200,10 +200,12 @@ export default function CustomizedTreeView() {
   return (
     <Card
       variant="outlined"
-      sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
     >
       <CardContent>
-        <Typography variant="subtitle2">Product tree</Typography>
+        <Typography component="h2" variant="subtitle2">
+          Product tree
+        </Typography>
         <RichTreeView
           items={ITEMS}
           aria-label="pages"

docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx

@@ -181,10 +181,12 @@ export default function CustomizedTreeView() {
   return (
     <Card
       variant="outlined"
-      sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
     >
       <CardContent>
-        <Typography variant="subtitle2">Product tree</Typography>
+        <Typography component="h2" variant="subtitle2">
+          Product tree
+        </Typography>
         <RichTreeView
           items={ITEMS}
           aria-label="pages"