From a5ac5373732809524d6bf777caf01c32aeb0fc8a Mon Sep 17 00:00:00 2001
From: Renato Di Giacomo <renato_di_giacomo@hotmail.com>
Date: Tue, 2 Aug 2022 18:07:19 -0300
Subject: [PATCH 1/5] New concept dashboard.

users card modify

and create a new camp grid to online offline
---
 frontend/src/pages/Dashboard/index.js | 118 ++++++++++++++++++++++----
 1 file changed, 101 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js
index 5c56b77..ffb32a1 100644
--- a/frontend/src/pages/Dashboard/index.js
+++ b/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,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
@@ -312,10 +323,60 @@ const Dashboard = () => {
               </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" || status.statusOnline)
+                        ).length
+                      }
+                    </Typography>
+                  </Grid>
+                </Paper>
+              </Grid>
+            </Grid>
+          </Container>
           <Container maxWidth="lg" className={classes.container}>
             <Paper className={classes.cardPaperFix}>
-              <Grid container justifyContent="space-between">
-                <Grid item>
+              <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={

From 0ea0c2e11bf5c01cffccf40436cdd2da2fd64e67 Mon Sep 17 00:00:00 2001
From: Renato Di Giacomo <renato_di_giacomo@hotmail.com>
Date: Wed, 3 Aug 2022 09:59:21 -0300
Subject: [PATCH 2/5] Fixed user offline count

---
 frontend/src/pages/Dashboard/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js
index ffb32a1..7644f45 100644
--- a/frontend/src/pages/Dashboard/index.js
+++ b/frontend/src/pages/Dashboard/index.js
@@ -42,7 +42,6 @@ import { Can } from "../../components/Can";
 import { Button } from "@material-ui/core";
 import { id } from "date-fns/locale";
 
-
 const useStyles = makeStyles((theme) => ({
   container: {
     paddingTop: theme.spacing(4),
@@ -363,8 +362,7 @@ const Dashboard = () => {
                       {
                         usersOnlineInfo.filter(
                           (status) =>
-                            status.statusOnline &&
-                            (status.statusOnline.status === "offline" || status.statusOnline)
+                            status.statusOnline || status.statusOnline.status === "offline"
                         ).length
                       }
                     </Typography>

From 101a638a1e0be7f492adc30e2d9b9724dd64296f Mon Sep 17 00:00:00 2001
From: Renato Di Giacomo <renato_di_giacomo@hotmail.com>
Date: Wed, 3 Aug 2022 11:10:08 -0300
Subject: [PATCH 3/5] =?UTF-8?q?Criado=20uma=20sepera=C3=A7=C3=A3o=20por=20?=
 =?UTF-8?q?contexto=20dos=20dados?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/Dashboard/index.js | 549 ++++++++++++++------------
 1 file changed, 305 insertions(+), 244 deletions(-)

diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js
index 7644f45..e84af02 100644
--- a/frontend/src/pages/Dashboard/index.js
+++ b/frontend/src/pages/Dashboard/index.js
@@ -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>
       )}
     />
 

From f2724330192f3ce9d2dcc0ab87a08ca0e5a8c80f Mon Sep 17 00:00:00 2001
From: Renato Di Giacomo <renato_di_giacomo@hotmail.com>
Date: Wed, 3 Aug 2022 14:11:40 -0300
Subject: [PATCH 4/5] update user list

---
 frontend/src/pages/Dashboard/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js
index e84af02..6f9c9cf 100644
--- a/frontend/src/pages/Dashboard/index.js
+++ b/frontend/src/pages/Dashboard/index.js
@@ -69,6 +69,7 @@ const useStyles = makeStyles((theme) => ({
     height: "100%",
   },
   containerPaperFix: {
+    width: "100%",
     textTransform: "capitalize",
     padding: theme.spacing(2),
     paddingBottom: theme.spacing(4),
@@ -366,7 +367,7 @@ const Dashboard = () => {
                 </Grid>
               </Grid>
             </Paper>
-            <Paper className={classes.containerPaperFix} style={{marginTop:"21px"}} sx={12}>
+            <Paper className={classes.containerPaperFix} style={{ marginTop: "21px" }} sx={12}>
               <Grid item sx={4}>
                 <Typography
                   component="h1"

From 832694a311b4c36e0578d005ad3e2684262f8bf1 Mon Sep 17 00:00:00 2001
From: Renato Di Giacomo <renato_di_giacomo@hotmail.com>
Date: Wed, 3 Aug 2022 14:33:08 -0300
Subject: [PATCH 5/5] update dashboard

created a sort by online status
---
 frontend/src/pages/Dashboard/index.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js
index 6f9c9cf..b931f5e 100644
--- a/frontend/src/pages/Dashboard/index.js
+++ b/frontend/src/pages/Dashboard/index.js
@@ -497,7 +497,15 @@ const Dashboard = () => {
                           })
                           .filter((e) => {
                             return e.name.toLowerCase().includes(search);
-                          })
+                          }).sort((a) => {
+                                if (a.statusOnline) {
+                                  if (a.statusOnline.status === "online") {
+                                    return -1;
+                                  }
+                                  return 0;
+                                }
+                                return 0;
+                              })
                           .map((user, index) => (
                             <Grid
                               item