adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Criado uma seperação por contexto dos dados

pull/16/head
Renato Di Giacomo 2022-08-03 11:10:08 -03:00
parent 2c36265156
commit 101a638a1e
1 changed files with 305 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
frontend/src/pages/Dashboard/index.js
View File

@ -68,6 +68,13 @@ const useStyles = makeStyles((theme) => ({
flexDirection: "column", flexDirection: "column",
height: "100%", height: "100%",
}, },
containerPaperFix: {
textTransform: "capitalize",
padding: theme.spacing(2),
paddingBottom: theme.spacing(4),
height: "auto",
overflowY: "hidden",
},
cardPaperFix: { cardPaperFix: {
textTransform: "capitalize", textTransform: "capitalize",
padding: theme.spacing(2), padding: theme.spacing(2),
@ -281,11 +288,35 @@ const Dashboard = () => {
role={user.profile} role={user.profile}
perform="dashboard-view:show" perform="dashboard-view:show"
yes={() => ( yes={() => (
<div>
<Container maxWidth="lg" className={classes.container}> <Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Paper className={classes.containerPaperFix} sx={12}>
<Grid item sx={4}>
<Typography
component="h1"
variant="h4"
color="primary"
style={{ marginBottom: "16px" }}
>
tickets
<Tooltip
title={`Os dados informados abaixo é baseado na data: ${new Date().toLocaleDateString()}`}
color="primary"
TransitionComponent={Zoom}
>
<IconButton>
<Info />
</IconButton>
</Tooltip>
</Typography>
</Grid>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12} sm={6} md={6} lg={4}> <Grid item xs={12} sm={6} md={6} lg={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}> <Paper
className={classes.customFixedHeightPaper}
style={{ overflow: "hidden" }}
variant="outlined"
>
<Typography component="h3" variant="h6" color="primary" paragraph> <Typography component="h3" variant="h6" color="primary" paragraph>
{i18n.t("dashboard.messages.inAttendance.title")} {i18n.t("dashboard.messages.inAttendance.title")}
</Typography> </Typography>
@ -297,7 +328,11 @@ const Dashboard = () => {
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12} sm={6} md={6} lg={4}> <Grid item xs={12} sm={6} md={6} lg={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}> <Paper
className={classes.customFixedHeightPaper}
style={{ overflow: "hidden" }}
variant="outlined"
>
<Typography component="h3" variant="h6" color="primary" paragraph> <Typography component="h3" variant="h6" color="primary" paragraph>
{i18n.t("dashboard.messages.waiting.title")} {i18n.t("dashboard.messages.waiting.title")}
</Typography> </Typography>
@ -309,7 +344,11 @@ const Dashboard = () => {
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12} sm={6} md={6} lg={4}> <Grid item xs={12} sm={6} md={6} lg={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}> <Paper
className={classes.customFixedHeightPaper}
style={{ overflow: "hidden" }}
variant="outlined"
>
<Typography component="h3" variant="h6" color="primary" paragraph> <Typography component="h3" variant="h6" color="primary" paragraph>
{i18n.t("dashboard.messages.closed.title")} {i18n.t("dashboard.messages.closed.title")}
</Typography> </Typography>
@ -320,64 +359,18 @@ const Dashboard = () => {
</Grid> </Grid>
</Paper> </Paper>
</Grid> </Grid>
</Grid> <Grid item xs={12}>
</Container> <Paper className={classes.fixedHeightPaper} variant="outlined">
<Container maxWidth="lg" className={classes.container}> <Chart />
<Grid container spacing={3}>
<Grid item xs={12} sm={6} md={6} lg={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
<Typography component="h3" variant="h6" color="primary" paragraph>
Total de Agentes
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{usersOnlineInfo.length}
</Typography>
</Grid>
</Paper>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
<Typography component="h3" variant="h6" color="primary" paragraph>
Online
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{
usersOnlineInfo.filter(
(status) => status.statusOnline && status.statusOnline.status === "online"
).length
}
</Typography>
</Grid>
</Paper>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
<Typography component="h3" variant="h6" color="primary" paragraph>
Offline
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{
usersOnlineInfo.filter(
(status) =>
status.statusOnline || status.statusOnline.status === "offline"
).length
}
</Typography>
</Grid>
</Paper> </Paper>
</Grid> </Grid>
</Grid> </Grid>
</Container> </Paper>
<Container maxWidth="lg" className={classes.container}> <Paper className={classes.containerPaperFix} style={{marginTop:"21px"}} sx={12}>
<Paper className={classes.cardPaperFix}>
<Grid container sx={12} justifyContent="space-between">
<Grid item sx={4}> <Grid item sx={4}>
<Typography <Typography
component="h3" component="h1"
variant="h6" variant="h4"
color="primary" color="primary"
style={{ marginBottom: "16px" }} style={{ marginBottom: "16px" }}
> >
@ -393,6 +386,78 @@ const Dashboard = () => {
</Tooltip> </Tooltip>
</Typography> </Typography>
</Grid> </Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6} md={6} lg={4}>
<Paper
className={classes.customFixedHeightPaper}
style={{ overflow: "hidden" }}
variant="outlined"
>
<Typography component="h3" variant="h6" color="primary" paragraph>
Total de Agentes
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{usersOnlineInfo.length}
</Typography>
</Grid>
</Paper>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={4}>
<Paper
className={classes.customFixedHeightPaper}
style={{ overflow: "hidden" }}
variant="outlined"
>
<Typography component="h3" variant="h6" color="primary" paragraph>
Online
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{
usersOnlineInfo.filter(
(status) =>
status.statusOnline && status.statusOnline.status === "online"
).length
}
</Typography>
</Grid>
</Paper>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={4}>
<Paper
className={classes.customFixedHeightPaper}
style={{ overflow: "hidden" }}
variant="outlined"
>
<Typography component="h3" variant="h6" color="primary" paragraph>
Offline
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{
usersOnlineInfo.filter(
(status) =>
!status.statusOnline || status.statusOnline.status === "offline"
).length
}
</Typography>
</Grid>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.cardPaperFix} sx={12} variant="outlined">
<Grid container sx={12} justifyContent="space-between">
<Grid item sx={4}>
<Typography
component="h4"
variant="h6"
color="primary"
style={{ marginBottom: "16px" }}
>
Lista de Usuários
</Typography>
</Grid>
<Grid item sx={8} width="100%"> <Grid item sx={8} width="100%">
<Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}> <Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
<TextField <TextField
@ -487,7 +552,9 @@ const Dashboard = () => {
<Typography variant="h6" component="h1" color="textPrimary"> <Typography variant="h6" component="h1" color="textPrimary">
Finalizado: Finalizado:
<Typography component="p" color="textPrimary" paragraph> <Typography component="p" color="textPrimary" paragraph>
{user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0} {user.sumClosed && user.sumClosed.count
? user.sumClosed.count
: 0}
</Typography> </Typography>
</Typography> </Typography>
@ -521,17 +588,11 @@ const Dashboard = () => {
))} ))}
</Grid> </Grid>
</Paper> </Paper>
</Container> </Grid>
<Container maxWidth="lg" className={classes.container}> </Grid>
<Grid container className={classes.cardStyleFix}>
<Grid item xs={12}>
<Paper className={classes.fixedHeightPaper}>
<Chart />
</Paper> </Paper>
</Grid> </Grid>
</Grid>
</Container> </Container>
</div>
)} )}
/> />