это код 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>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.