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

New concept dashboard. 

users card modify

and create a new camp grid to online offline
pull/16/head
Renato Di Giacomo 2022-08-02 18:07:19 -03:00
parent debffebb1a
commit a5ac537373
1 changed files with 101 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,12 +13,17 @@ import Avatar from "@mui/material/Avatar";
import Tooltip from "@mui/material/Tooltip";
import Zoom from "@mui/material/Zoom";
import IconButton from "@mui/material/IconButton";
import Info from "@material-ui/icons/Info";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Info from "@material-ui/icons/Info";
import CancelIcon from "@material-ui/icons/Cancel";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
import useTickets from "../../hooks/useTickets";
@ -35,6 +40,8 @@ import api from "../../services/api";
import { Can } from "../../components/Can";
import { Button } from "@material-ui/core";
import { id } from "date-fns/locale";
const useStyles = makeStyles((theme) => ({
container: {
@ -179,6 +186,7 @@ const reducer = (state, action) => {
const Dashboard = () => {
const classes = useStyles();
const [usersOnlineInfo, dispatch] = useReducer(reducer, []);
const [search, setSearch] = useState("");
const [filterStatus, setFilterStatus] = useState(null);
const { user } = useContext(AuthContext);
var userQueueIds = [];
@ -265,6 +273,9 @@ const Dashboard = () => {
const handleFilterChange = (event) => {
setFilterStatus(event.target.value);
};
const handlesearch = (event) => {
setSearch(event.target.value.toLowerCase());
};
return (
<Can
@ -313,9 +324,59 @@ const Dashboard = () => {
</Grid>
</Container>
<Container maxWidth="lg" className={classes.container}>
<Paper className={classes.cardPaperFix}>
<Grid container justifyContent="space-between">
<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" || status.statusOnline)
).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"
@ -334,18 +395,25 @@ const Dashboard = () => {
</Tooltip>
</Typography>
</Grid>
<Grid item>
<Box sx={{ minWidth: 120, marginBottom: 2 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Status</InputLabel>
<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="demo-simple-select-label"
id="demo-simple-select"
labelId="status"
id="status"
value={filterStatus}
label="Status"
onChange={handleFilterChange}
>
<MenuItem value={null}>-Online/Offline-</MenuItem>
<MenuItem value={null}>Todos</MenuItem>
<MenuItem value={"online"}>Online</MenuItem>
<MenuItem value={"offline"}>Offline</MenuItem>
<MenuItem value={"not"}>Não entrou</MenuItem>
@ -363,6 +431,9 @@ const Dashboard = () => {
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
@ -377,14 +448,27 @@ const Dashboard = () => {
<CardHeader
avatar={
<Avatar
sx={
user.statusOnline && user.statusOnline.status === "online"
? { backgroundColor: "green" }
: { backgroundColor: "red" }
}
aria-label="recipe"
style={{
backgroundColor: user.statusOnline
? user.statusOnline.status === "online"
? "green"
: user.statusOnline.status === "offline"
? "red"
: "black"
: "grey",
}}
>
{user.name[0].toUpperCase()}
{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={