Criado uma seperação por contexto dos dados
Renato Di Giacomo
parent
2c36265156
commit
101a638a1e
|
|
@ -68,6 +68,13 @@ const useStyles = makeStyles((theme) => ({
|
|||
flexDirection: "column",
|
||||
height: "100%",
|
||||
},
|
||||
containerPaperFix: {
|
||||
textTransform: "capitalize",
|
||||
padding: theme.spacing(2),
|
||||
paddingBottom: theme.spacing(4),
|
||||
height: "auto",
|
||||
overflowY: "hidden",
|
||||
},
|
||||
cardPaperFix: {
|
||||
textTransform: "capitalize",
|
||||
padding: theme.spacing(2),
|
||||
|
|
@ -281,257 +288,311 @@ const Dashboard = () => {
|
|||
role={user.profile}
|
||||
perform="dashboard-view:show"
|
||||
yes={() => (
|
||||
<div>
|
||||
<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>
|
||||
{i18n.t("dashboard.messages.inAttendance.title")}
|
||||
</Typography>
|
||||
<Grid item>
|
||||
<Typography component="h1" variant="h4">
|
||||
{GetTickets("open", "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.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"
|
||||
<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"
|
||||
style={{ marginBottom: "16px" }}
|
||||
TransitionComponent={Zoom}
|
||||
>
|
||||
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 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>
|
||||
<IconButton>
|
||||
<Info />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Typography>
|
||||
</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 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>
|
||||
{i18n.t("dashboard.messages.inAttendance.title")}
|
||||
</Typography>
|
||||
<Grid item>
|
||||
<Typography component="h1" variant="h4">
|
||||
{GetTickets("open", "true", "false", "true")}
|
||||
</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>
|
||||
{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" }}
|
||||
variant="outlined"
|
||||
>
|
||||
<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 item xs={12}>
|
||||
<Paper className={classes.fixedHeightPaper} variant="outlined">
|
||||
<Chart />
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Container>
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container className={classes.cardStyleFix}>
|
||||
<Grid item xs={12}>
|
||||
<Paper className={classes.fixedHeightPaper}>
|
||||
<Chart />
|
||||
</Paper>
|
||||
<Paper className={classes.containerPaperFix} style={{marginTop:"21px"}} sx={12}>
|
||||
<Grid item sx={4}>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h4"
|
||||
color="primary"
|
||||
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>
|
||||
</Container>
|
||||
</div>
|
||||
<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%">
|
||||
<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>
|
||||
)}
|
||||
/>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue