это код  Dashboard
<code>
const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
  zIndex: theme.zIndex.drawer + 1,
  transition: theme.transitions.create(['width', 'margin'], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  ...(open && {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
}));


const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
  ({ theme, open }) => ({
    '& .MuiDrawer-paper': {
      position: 'relative',
      whiteSpace: 'nowrap',
      width: drawerWidth,
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
      boxSizing: 'border-box',
      ...(!open && {
        overflowX: 'hidden',
        transition: theme.transitions.create('width', {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen,
        }),
        width: theme.spacing(7),
        [theme.breakpoints.up('sm')]: {
          width: theme.spacing(9),
        },
      }),
    },
  }),
);



const defaultTheme = createTheme();

export default function Dashboard() {
  const navigate = useNavigate();
  const location = useLocation();
  const [open, setOpen] = React.useState(true);
  const toggleDrawer = () => {
    setOpen(!open);
  };
  const [showActsTable, setShowActsTable] = useState(false);
 
  const [showSupportPage, setShowSupportPage] = useState(false);
  const handleShowSupportPage = () => {
    setShowSupportPage(!showSupportPage);
  };
  const handleShowActsTable = () => {
    setShowActsTable(!showActsTable);
    if(location.pathname !== '/dashboard/acts') {
      navigate('/dashboard/acts');
    }
  };



 

  return (
    <ThemeProvider theme={defaultTheme}>
      <Box sx={{ display: 'flex'}}>
        <CssBaseline />
        <AppBar position="absolute" open={open}>
          <Toolbar
            sx={{
              pr: '24px', 
            }}
          >
            <IconButton
              edge="start"
              color="inherit"
              aria-label="open drawer"
              onClick={toggleDrawer}
              sx={{
                marginRight: '36px',
                ...(open && { display: 'none' }),
              }}
            >
              <MenuIcon />
            </IconButton>
            <Typography
              component="h1"
              variant="h6"
              color="inherit"
              noWrap
              sx={{ flexGrow: 1 }}
            >
              Logo
            </Typography>
          </Toolbar>
        </AppBar>
        <Drawer variant="permanent" open={open}>
          <Toolbar
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              px: [1],
            }}
          >
            <IconButton onClick={toggleDrawer} >
              <ChevronLeftIcon />
            </IconButton >
          </Toolbar>
          <Divider />
          <List component="nav" >
            <MainListItems 
            
              onToggleActsTable = {handleShowActsTable}
              onToggleSupportPage = {handleShowSupportPage}/>
            <Divider sx={{ my: 1 }} />
          </List>
        </Drawer>
        <Box
          component="main"
          sx={{
            backgroundColor: (theme) =>
              theme.palette.mode === 'light'
                ? theme.palette.grey[100]
                : theme.palette.grey[900],
            flexGrow: 1,
            height: '100vh',
            overflow: 'auto',
          }}
        >
          <Toolbar />
          
          {showSupportPage ? <SupportPage /> : null}
          {showActsTable ? <ActsPage /> : null}
          
         
        </Box>
      </Box>
    </ThemeProvider>
  );
}
</code>
в него отдельно подключен MainListItems
<code>
export default function MainListItems({ onToggleActsTable, onToggleSupportPage }) {
  const navigate = useNavigate();
  const location = useLocation();

  const handleShowActsTable = () => {
    onToggleActsTable();
    if(location.pathname !== '/dashboard/acts') {
      navigate('/dashboard/acts');
    }
  }
  
  const handleShowSupportPage = () => {
    onToggleSupportPage();
    if(location.pathname !== '/dashboard/support') {
      navigate('/dashboard/support');
    }
  }
  return (
    <>
      <ListItem onClick={handleShowActsTable}>
        <ListItemButton>
          <ListItemIcon>
            <DashboardIcon />
          </ListItemIcon>
          <ListItemText primary="Акти порушень" />
        </ListItemButton>
      </ListItem>
      <ListItemButton>
        <ListItemIcon>
          <WarningAmberIcon />
        </ListItemIcon>
        <ListItemText primary="Протерміновані акти" />
      </ListItemButton>
      <ListItemButton>
        <ListItemIcon>
          <BarChartIcon />
        </ListItemIcon>
        <ListItemText primary="Звітність" />
      </ListItemButton>
      <ListItem onClick={handleShowSupportPage}>
        <ListItemButton>
          <ListItemIcon>
            <SupportAgentIcon />
          </ListItemIcon>
          <ListItemText primary="Тех підтримка" />
        </ListItemButton>
      </ListItem>
      <ListItemButton>
        <ListItemIcon>
          <TextSnippetIcon />
        </ListItemIcon>
        <ListItemText primary="Внутрішні документі" />
      </ListItemButton>
      <ListItemButton>
        <ListItemIcon>
          <LogoutIcon />
        </ListItemIcon>
        <ListItemText primary="Вихід" />
      </ListItemButton>
    </>
  );
}
</code>
вот код SupportPage
<code>
export default function  SupportPage  ({ user })  {
  const [openSnackbarOk, setOpenSnackbarOk] = useState(false)
  const handleSnackbarCloseOk = () => {
    setOpenSnackbarOk(false)
  }
  const handleSnackbarCloseError = () => {
    setOpenSnackbarError(false)
  }
  const [openSnackbarError, setOpenSnackbarError] = useState(false)

  const [actNumber, setActNumber] = useState(null)
  const { feedback } = useFeedback({
    onFeedbackSuccess: (data) => {
      console.log(data)
      setOpenSnackbarOk(true)
    }, onError: (error) => {
      setOpenSnackbarError(true)
    }
  })

  // eslint-disable-next-line no-unused-vars
  const [isSubmitting, setIsSubmitting] = useState(false)
  const formik = useFormik({
    initialValues: {
      message: '', feedback: ' ', act_number: null
    },
    
    onSubmit: async (values) => {
      setIsSubmitting(true);
    
      try {
        const data = {
          message: values.message,
          feedback: values.feedback,
          act_number: values.act_number,
        };
    
        // Отправляем запрос на сервер с данными
        const response = await feedback({ data });
    
        // Ваш код обработки успешного ответа
    
        setIsSubmitting(false);
      } catch (error) {
        // Ваш код обработки ошибки
        setIsSubmitting(false);
      }
    },
    
  })

  

  const { query } = useGetActs()
  if (query && query.isLoading) {
    return <Loading />
  }
  if (query && query.error) {
    return <ErrorLoad error={query.error} />
  }
  return (<Container sx={{
      height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', p: 0
    }}>
      <Box
        sx={{
          marginTop: 3, display: 'flex', flexDirection: 'column', alignItems: 'center'
        }}
      >
        <Snackbar open={openSnackbarOk} autoHideDuration={6000} onClose={handleSnackbarCloseOk}>
          <Alert onClose={handleSnackbarCloseOk} severity='success' sx={{
            position: 'fixed', top: '10%', left: '40%'
          }}>
            Вітаємо! Ви успішно відправили повідомлення.
          </Alert>
        </Snackbar>
        <Snackbar open={openSnackbarError} autoHideDuration={6000} onClose={handleSnackbarCloseError}>
          <Alert onClose={handleSnackbarCloseError} severity='error' sx={{
            position: 'fixed', top: '10%', left: '45%'
          }}>
            Помилка, спробуйте ще раз.
          </Alert>
        </Snackbar>

        <Typography component='h1' variant='h5'>
          Зворотній зв'язок
        </Typography>
        <Box component='form' onSubmit={formik.handleSubmit}>
          <TextField
            margin='normal'
            required
            fullWidth
            name='message'
            id='message'
            label='Введіть  повідомлення'
            type='text'
            autoComplete='Ваше повідомлення'
            helperText={formik.errors.message}
            value={formik.values.message}
            onChange={formik.handleChange}
          />
          <TextField
            margin='normal'
            required
            fullWidth
            name='feedback'
            label='Пропозиції та зауваження'
            type='text'
            id='feedback'
            autoComplete='Пропозиції та зауваження'
            value={formik.values.feedback}
            onChange={formik.handleChange}
          />
          {user ? <Autocomplete
            id='act_number'
            fullWidth
            options={query.data.data}
            getOptionLabel={(option) => option.act_number}
            onChange={(event, newValue) => {
              setActNumber(newValue)
              formik.setFieldValue('act_number', newValue.act_number)
            }}
            renderInput={(params) => <TextField {...params} label='Номер акту' />}
          /> : null}
          {actNumber ? <Typography component='h1' variant='h5' sx={{ mt: 4 }}>
            Обраний акт №
            {actNumber && actNumber.act_number}
          </Typography> : null}
          <Button
            type='submit'
            fullWidth
            variant='contained'
            sx={{ mt: 3, mb: 2 }}
          >
            Відправити
          </Button>
          
        </Box>
      </Box>
    </Container>
    )
}

</code>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.