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

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,257 +288,311 @@ 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}>
<Grid container spacing={3}> <Paper className={classes.containerPaperFix} sx={12}>
<Grid item xs={12} sm={6} md={6} lg={4}> <Grid item sx={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}> <Typography
<Typography component="h3" variant="h6" color="primary" paragraph> component="h1"
{i18n.t("dashboard.messages.inAttendance.title")} variant="h4"
</Typography> color="primary"
<Grid item> style={{ marginBottom: "16px" }}
<Typography component="h1" variant="h4"> >
{GetTickets("open", "true", "false", "true")} tickets
</Typography> <Tooltip
</Grid> title={`Os dados informados abaixo é baseado na data: ${new Date().toLocaleDateString()}`}
</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>
{i18n.t("dashboard.messages.waiting.title")}
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("pending", "true", "false", "true")}
</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>
{i18n.t("dashboard.messages.closed.title")}
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("closed", "true", "false", "true")}
</Typography>
</Grid>
</Paper>
</Grid>
</Grid>
</Container>
<Container maxWidth="lg" className={classes.container}>
<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>
</Grid>
</Grid>
</Container>
<Container maxWidth="lg" className={classes.container}>
<Paper className={classes.cardPaperFix}>
<Grid container sx={12} justifyContent="space-between">
<Grid item sx={4}>
<Typography
component="h3"
variant="h6"
color="primary" color="primary"
style={{ marginBottom: "16px" }} TransitionComponent={Zoom}
> >
Usuários <IconButton>
<Tooltip <Info />
title={`Os dados informados abaixo é baseado na data: ${new Date().toLocaleDateString()}`} </IconButton>
color="primary" </Tooltip>
TransitionComponent={Zoom} </Typography>
>
<IconButton>
<Info />
</IconButton>
</Tooltip>
</Typography>
</Grid>
<Grid item sx={8} width="100%">
<Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
<TextField
id="outlined-basic"
label="Usuário"
variant="standard"
value={search}
onChange={handlesearch}
/>
<FormControl fullWidth variant="standard">
<InputLabel id="status">Status</InputLabel>
<Select
labelId="status"
id="status"
value={filterStatus}
label="Status"
onChange={handleFilterChange}
>
<MenuItem value={null}>Todos</MenuItem>
<MenuItem value={"online"}>Online</MenuItem>
<MenuItem value={"offline"}>Offline</MenuItem>
<MenuItem value={"not"}>Não entrou</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
</Grid> </Grid>
<Grid container spacing={3}> <Grid container spacing={3}>
{usersOnlineInfo && <Grid item xs={12} sm={6} md={6} lg={4}>
usersOnlineInfo <Paper
.filter((e) => { className={classes.customFixedHeightPaper}
if (filterStatus === null) return e; style={{ overflow: "hidden" }}
if (filterStatus === "not") return !e.statusOnline; variant="outlined"
return e.statusOnline && e.statusOnline.status === filterStatus; >
}) <Typography component="h3" variant="h6" color="primary" paragraph>
.filter((e) => { {i18n.t("dashboard.messages.inAttendance.title")}
return e.name.toLowerCase().includes(search); </Typography>
}) <Grid item>
.map((user, index) => ( <Typography component="h1" variant="h4">
<Grid {GetTickets("open", "true", "false", "true")}
item </Typography>
xs={12} </Grid>
sm={6} </Paper>
md={6} </Grid>
lg={3} <Grid item xs={12} sm={6} md={6} lg={4}>
key={index} <Paper
style={{ position: "relative" }} className={classes.customFixedHeightPaper}
> style={{ overflow: "hidden" }}
<Card variant="outlined"> variant="outlined"
<CardHeader >
avatar={ <Typography component="h3" variant="h6" color="primary" paragraph>
<Avatar {i18n.t("dashboard.messages.waiting.title")}
style={{ </Typography>
backgroundColor: user.statusOnline <Grid item>
? user.statusOnline.status === "online" <Typography component="h1" variant="h4">
? "green" {GetTickets("pending", "true", "false", "true")}
: user.statusOnline.status === "offline" </Typography>
? "red" </Grid>
: "black" </Paper>
: "grey", </Grid>
}} <Grid item xs={12} sm={6} md={6} lg={4}>
> <Paper
{user.statusOnline ? ( className={classes.customFixedHeightPaper}
user.statusOnline.status === "online" ? ( style={{ overflow: "hidden" }}
<CheckCircleIcon style={{ color: "white" }} /> variant="outlined"
) : user.statusOnline.status === "offline" ? ( >
<CancelIcon style={{ color: "white" }} /> <Typography component="h3" variant="h6" color="primary" paragraph>
) : ( {i18n.t("dashboard.messages.closed.title")}
<ErrorIcon style={{ color: "yellow" }} /> </Typography>
) <Grid item>
) : ( <Typography component="h1" variant="h4">
<RemoveCircleIcon style={{ color: "black" }} /> {GetTickets("closed", "true", "false", "true")}
)} </Typography>
</Avatar> </Grid>
} </Paper>
title={ </Grid>
<Typography variant="h5" component="div"> <Grid item xs={12}>
{user.name} <Paper className={classes.fixedHeightPaper} variant="outlined">
</Typography> <Chart />
} </Paper>
/> </Grid>
<CardContent>
<Typography variant="h6" component="h1" color="textPrimary">
Em atendimento:
<Typography component="p" color="textPrimary" paragraph>
{user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0}
</Typography>
</Typography>
<Typography variant="h6" component="h1" color="textPrimary">
Finalizado:
<Typography component="p" color="textPrimary" paragraph>
{user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0}
</Typography>
</Typography>
<Typography variant="h6" component="h1" color="textPrimary">
Tempo online:
<Typography component="p" color="textPrimary" paragraph>
{user.sumOnlineTime && user.sumOnlineTime.sum
? user.sumOnlineTime.sum
: "Não entrou Hoje"}
</Typography>
</Typography>
</CardContent>
<CardActions>
{user.statusOnline &&
user.statusOnline.status === "online" &&
user.statusOnline && (
<Button
className={classes.logginBtn}
variant="contained"
color="primary"
onClick={(e) => {
handleLogouOnlineUser(user.id);
}}
>
{"Deslogar"}
</Button>
)}
</CardActions>
</Card>
</Grid>
))}
</Grid> </Grid>
</Paper> </Paper>
</Container> <Paper className={classes.containerPaperFix} style={{marginTop:"21px"}} sx={12}>
<Container maxWidth="lg" className={classes.container}> <Grid item sx={4}>
<Grid container className={classes.cardStyleFix}> <Typography
<Grid item xs={12}> component="h1"
<Paper className={classes.fixedHeightPaper}> variant="h4"
<Chart /> color="primary"
</Paper> style={{ marginBottom: "16px" }}
>
Usuários
<Tooltip
title={`Os dados informados abaixo é baseado na data: ${new Date().toLocaleDateString()}`}
color="primary"
TransitionComponent={Zoom}
>
<IconButton>
<Info />
</IconButton>
</Tooltip>
</Typography>
</Grid> </Grid>
</Grid> <Grid container spacing={3}>
</Container> <Grid item xs={12} sm={6} md={6} lg={4}>
</div> <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%">
<Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
<TextField
id="outlined-basic"
label="Usuário"
variant="standard"
value={search}
onChange={handlesearch}
/>
<FormControl fullWidth variant="standard">
<InputLabel id="status">Status</InputLabel>
<Select
labelId="status"
id="status"
value={filterStatus}
label="Status"
onChange={handleFilterChange}
>
<MenuItem value={null}>Todos</MenuItem>
<MenuItem value={"online"}>Online</MenuItem>
<MenuItem value={"offline"}>Offline</MenuItem>
<MenuItem value={"not"}>Não entrou</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
</Grid>
<Grid container spacing={3}>
{usersOnlineInfo &&
usersOnlineInfo
.filter((e) => {
if (filterStatus === null) return e;
if (filterStatus === "not") return !e.statusOnline;
return e.statusOnline && e.statusOnline.status === filterStatus;
})
.filter((e) => {
return e.name.toLowerCase().includes(search);
})
.map((user, index) => (
<Grid
item
xs={12}
sm={6}
md={6}
lg={3}
key={index}
style={{ position: "relative" }}
>
<Card variant="outlined">
<CardHeader
avatar={
<Avatar
style={{
backgroundColor: user.statusOnline
? user.statusOnline.status === "online"
? "green"
: user.statusOnline.status === "offline"
? "red"
: "black"
: "grey",
}}
>
{user.statusOnline ? (
user.statusOnline.status === "online" ? (
<CheckCircleIcon style={{ color: "white" }} />
) : user.statusOnline.status === "offline" ? (
<CancelIcon style={{ color: "white" }} />
) : (
<ErrorIcon style={{ color: "yellow" }} />
)
) : (
<RemoveCircleIcon style={{ color: "black" }} />
)}
</Avatar>
}
title={
<Typography variant="h5" component="div">
{user.name}
</Typography>
}
/>
<CardContent>
<Typography variant="h6" component="h1" color="textPrimary">
Em atendimento:
<Typography component="p" color="textPrimary" paragraph>
{user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0}
</Typography>
</Typography>
<Typography variant="h6" component="h1" color="textPrimary">
Finalizado:
<Typography component="p" color="textPrimary" paragraph>
{user.sumClosed && user.sumClosed.count
? user.sumClosed.count
: 0}
</Typography>
</Typography>
<Typography variant="h6" component="h1" color="textPrimary">
Tempo online:
<Typography component="p" color="textPrimary" paragraph>
{user.sumOnlineTime && user.sumOnlineTime.sum
? user.sumOnlineTime.sum
: "Não entrou Hoje"}
</Typography>
</Typography>
</CardContent>
<CardActions>
{user.statusOnline &&
user.statusOnline.status === "online" &&
user.statusOnline && (
<Button
className={classes.logginBtn}
variant="contained"
color="primary"
onClick={(e) => {
handleLogouOnlineUser(user.id);
}}
>
{"Deslogar"}
</Button>
)}
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
</Container>
)} )}
/> />