Run docs:typescript:formatted

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

@@ -3,13 +3,14 @@ import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
+import { alpha } from '@mui/material';
 import getDashboardTheme from './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');
@@ -30,29 +31,31 @@ export default function Dashboard() {
       <CssBaseline />
       <Box sx={{ display: 'flex' }}>
         <Navbar mode={mode} toggleColorMode={toggleColorMode} />
+        <SideMenu />
         <Box
           component="main"
-          sx={{
-            backgroundColor: 'background.default',
+          sx={(theme) => ({
+            backgroundColor: alpha(theme.palette.background.paper, 0.4),
             flexGrow: 1,
             height: '100vh',
             overflow: 'auto',
-          }}
+          })}
         >
           {/* Main content */}
-          <Container
-            maxWidth="xl"
+          <Box
             sx={{
               display: 'flex',
               flexDirection: 'column',
-              py: { xs: 14, sm: 16 },
+              mx: 3,
+              py: 8,
               gap: 2,
+              maxWidth: { sm: '100%', md: '1500px' },
             }}
           >
             <Header />
             <MainGrid />
             <Copyright sx={{ my: 4 }} />
-          </Container>
+          </Box>
         </Box>
         <ToggleCustomTheme
           showCustomTheme={showCustomTheme}

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

@@ -0,0 +1,23 @@
+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';
+
+export default function CardAlert() {
+  return (
+    <Card sx={{ m: 1.5, p: 1.5 }}>
+      <CardContent>
+        <Typography fontWeight="600" gutterBottom>
+          Plan about to expire
+        </Typography>
+        <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+          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

@@ -155,7 +155,7 @@ export default function ChartUserByCountry() {
               </Stack>
               <LinearProgress
                 variant="determinate"
-                aria-label="Amount of users by country"
+                aria-label="Number of users by country"
                 value={country.value}
                 sx={{
                   [`& .${linearProgressClasses.bar}`]: {

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

@@ -1,32 +1,21 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import Search from './Search';
 import CustomDatePicker from './CustomDatePicker';
+import NavbarBreadcrumbs from './NavbarBreadcrumbs';
 
 export default function Header() {
   return (
     <Stack
-      direction={{ xs: 'column', md: 'row' }}
+      direction="row"
       sx={{
-        alignItems: { xs: 'flex-start', md: 'flex-end' },
+        alignItems: { xs: 'flex-start', md: 'center' },
         justifyContent: 'space-between',
         gap: 2,
-        my: 2,
+        mt: 2,
       }}
     >
-      <Stack sx={{ maxWidth: 500 }}>
-        <Typography variant="h4" component="h1">
-          Dashboard
-        </Typography>
-        <Typography sx={{ color: 'text.secondary' }}>
-          Real-time analytics to improve user engagement and guide strategy.
-        </Typography>
-      </Stack>
-      <Stack direction="row" sx={{ gap: 1, width: { xs: '100%', sm: 'auto' } }}>
-        <Search />
-        <CustomDatePicker />
-      </Stack>
+      <NavbarBreadcrumbs />
+      <CustomDatePicker />
     </Stack>
   );
 }

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

@@ -31,13 +31,6 @@ const data = [
     trend: 'neutral',
     data: [5, 4, 6, 3, 4, 3, 7, 6],
   },
-  {
-    title: 'Engagement',
-    value: '30k',
-    interval: 'Last 30 days',
-    trend: 'up',
-    data: [2, 4, 3, 4, 5, 4, 7, 8],
-  },
 ];
 
 export default function MainGrid() {
@@ -47,11 +40,11 @@ export default function MainGrid() {
 
       <Grid container spacing={2} columns={12}>
         {data.map((card, index) => (
-          <Grid xs={6} sm={3} md={2} lg={2.25}>
+          <Grid xs={12} sm={6} md={3} lg={3}>
             <StatCard key={index} {...card} />
           </Grid>
         ))}
-        <Grid xs={12} md={4} lg={3}>
+        <Grid xs={12} sm={6} md={3} lg={3}>
           <HighlightedCard />
         </Grid>
       </Grid>

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

@@ -3,90 +3,58 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 
 import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import MuiToolbar from '@mui/material/Toolbar';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
+
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
+import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
+
 import ToggleColorMode from './ToggleColorMode';
 import SideNav from './SideNav';
 import MenuButton from './MenuButton';
-import NavbarBreadcrumbs from './NavbarBreadcrumbs';
 import OptionsMenu from './OptionsMenu';
+import Search from './Search';
 
 const Toolbar = styled(MuiToolbar)({
-  maxWidth: 1538,
   width: '100%',
-  padding: '16px 16px 0 16px',
+  padding: '12px',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'start',
   justifyContent: 'center',
   gap: '12px',
   flexShrink: 0,
-  backdropFilter: 'blur(24px)',
   '& .MuiTabs-flexContainer': {
     gap: '8px',
     p: '8px',
     pb: 0,
   },
 });
 
-function a11yProps(index, selectedIndex) {
-  return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
-    'aria-selected': selectedIndex === index,
-    role: 'tab',
-  };
-}
-
-function TabPanel(props) {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {/* This would be replaced when the content content of other tabs is added */}
-      {value === index && <div />}
-    </div>
-  );
-}
-
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.number.isRequired,
-  value: PropTypes.number.isRequired,
-};
-
 function Navbar({ mode, toggleColorMode }) {
   const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState(0);
 
   const toggleDrawer = (newOpen) => () => {
     setOpen(newOpen);
   };
 
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
   return (
     <AppBar
       position="fixed"
       sx={(theme) => ({
         boxShadow: 0,
-        bgcolor: 'transparent',
+        bgcolor: 'background.default',
         backgroundImage: 'none',
         alignItems: 'center',
-        borderBottom: '1px solid',
-        borderColor: theme.palette.divider,
+        outline: '1px solid',
+        outlineColor: theme.palette.divider,
+        zIndex: theme.zIndex.drawer - 1,
+        left: { xs: 0, md: 240 },
+        width: { xs: '100dvw', md: `calc(100% - 240px)` },
+        maxHeight: 64,
       })}
     >
       <Toolbar variant="regular">
@@ -99,10 +67,18 @@ function Navbar({ mode, toggleColorMode }) {
             flexGrow: 1,
             width: '100%',
             display: { xs: 'none', md: 'flex' },
+            maxWidth: { sm: '100%', md: '1500px' },
           }}
         >
-          <NavbarBreadcrumbs />
+          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
+            <CustomIcon />
+            <Typography variant="h5" component="h1" color="text.primary">
+              Dashboard
+            </Typography>
+          </Stack>
+
           <Stack direction="row" sx={{ gap: 1 }}>
+            <Search />
             <MenuButton showBadge aria-label="Open notifications">
               <NotificationsRoundedIcon />
             </MenuButton>
@@ -120,7 +96,12 @@ function Navbar({ mode, toggleColorMode }) {
             display: { sm: 'flex', md: 'none' },
           }}
         >
-          <NavbarBreadcrumbs />
+          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
+            <CustomIcon />
+            <Typography variant="h4" component="h1" color="text.primary">
+              Dashboard
+            </Typography>
+          </Stack>
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>
@@ -131,21 +112,7 @@ function Navbar({ mode, toggleColorMode }) {
             toggleColorMode={toggleColorMode}
           />
         </Stack>
-        <Tabs value={value} onChange={handleChange} aria-label="navbar tabs">
-          <Tab label="Home" {...a11yProps(0, value)} />
-          <Tab label="Analytics" {...a11yProps(1, value)} />
-          <Tab label="Clients" {...a11yProps(2, value)} />
-        </Tabs>
       </Toolbar>
-      <TabPanel value={value} index={0}>
-        Home Content
-      </TabPanel>
-      <TabPanel value={value} index={1}>
-        Analytics Content
-      </TabPanel>
-      <TabPanel value={value} index={2}>
-        Clients Content
-      </TabPanel>
     </AppBar>
   );
 }
@@ -156,3 +123,27 @@ Navbar.propTypes = {
 };
 
 export default Navbar;
+
+export function CustomIcon() {
+  return (
+    <Box
+      sx={{
+        width: '1.5rem',
+        height: '1.5rem',
+        bgcolor: 'black',
+        borderRadius: '999px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundImage:
+          'linear-gradient(135deg, hsl(210, 98%, 60%) 0%, hsl(210, 100%, 35%) 100%)',
+        color: 'hsla(210, 100%, 95%, 0.9)',
+        border: '1px solid',
+        borderColor: 'hsl(210, 100%, 55%)',
+        boxShadow: 'inset 0 2px 5px rgba(255, 255, 255, 0.3)',
+      }}
+    >
+      <DashboardRoundedIcon color="inherit" sx={{ width: '1rem' }} />
+    </Box>
+  );
+}

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

@@ -2,23 +2,28 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Breadcrumbs from '@mui/material/Breadcrumbs';
-import { SitemarkIcon } from '../internals/components/CustomIcons';
+import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 
 const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => ({
+  margin: theme.spacing(1, 0),
   '& .MuiBreadcrumbs-separator': {
     color: theme.palette.action.disabled,
+    margin: 1,
   },
   '& .MuiBreadcrumbs-ol': {
-    alignItems: 'normal',
+    alignItems: 'center',
   },
 }));
 
 export default function NavbarBreadcrumbs() {
   return (
-    <StyledBreadcrumbs aria-label="breadcrumb">
-      <SitemarkIcon />
-      <Typography sx={{ fontWeight: 'medium', color: 'text.primary' }}>
-        Project (Production)
+    <StyledBreadcrumbs
+      aria-label="breadcrumb"
+      separator={<NavigateNextRoundedIcon fontSize="small" />}
+    >
+      <Typography variant="body1">Dashboard</Typography>
+      <Typography variant="body1" fontWeight={600} sx={{ color: 'text.primary' }}>
+        Home
       </Typography>
     </StyledBreadcrumbs>
   );