Merge pull request #7 from RenatoDiGiacomo/old/dashboard

Old/dashboard

frontend/src/pages/Dashboard/index.js

@@ -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,7 @@ 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 +185,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 +272,9 @@ const Dashboard = () => {
   const handleFilterChange = (event) => {
     setFilterStatus(event.target.value);
   };
+  const handlesearch = (event) => {
+    setSearch(event.target.value.toLowerCase());
+  };
 
   return (
     <Can
@@ -313,9 +323,58 @@ const Dashboard = () => {
             </Grid>
           </Container>
           <Container maxWidth="lg" className={classes.container}>
-            <Paper className={classes.cardPaperFix}>
+            <Grid container spacing={3}>
-              <Grid container justifyContent="space-between">
+              <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"
@@ -334,18 +393,25 @@ const Dashboard = () => {
                     </Tooltip>
                   </Typography>
                 </Grid>
-                <Grid item>
+                <Grid item sx={8} width="100%">
-                  <Box sx={{ minWidth: 120, marginBottom: 2 }}>
+                  <Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
-                    <FormControl fullWidth>
+                    <TextField
-                      <InputLabel id="demo-simple-select-label">Status</InputLabel>
+                      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"
+                        labelId="status"
-                        id="demo-simple-select"
+                        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 +429,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 +446,27 @@ const Dashboard = () => {
                           <CardHeader
                             avatar={
                               <Avatar
-                                sx={
+                                style={{
-                                  user.statusOnline && user.statusOnline.status === "online"
+                                  backgroundColor: user.statusOnline
-                                    ? { backgroundColor: "green" }
+                                    ? user.statusOnline.status === "online"
-                                    : { backgroundColor: "red" }
+                                      ? "green"
-                                }
+                                      : user.statusOnline.status === "offline"
-                                aria-label="recipe"
+                                      ? "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={