queues fixed

create a new vision o queue list
Remove card responsive

frontend/src/components/DashboardUser/TableUser.jsx

@@ -17,6 +17,9 @@ import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 
+import Tooltip from "@mui/material/Tooltip";
+import Zoom from "@mui/material/Zoom";
+
 import CancelIcon from "@material-ui/icons/Cancel";
 import CheckCircleIcon from "@material-ui/icons/CheckCircle";
 import ErrorIcon from "@material-ui/icons/Error";
@@ -34,8 +37,6 @@ const TableUser = ({ classes, usersOnlineInfo, logout }) => {
     setSearch(event.target.value.toLowerCase());
   };
 
-  console.log(usersOnlineInfo);
-
   return (
     <Grid item xs={12}>
       <Paper className={classes.cardPaperFix} sx={12} variant="outlined">
@@ -153,11 +154,20 @@ const TableUser = ({ classes, usersOnlineInfo, logout }) => {
                               gap: "12px",
                             }}
                           >
-                            <Typography title="Cobrança">0</Typography>
+                            {!user.openClosedInQueue ? (
-                            <Typography>0</Typography>
+                              <Typography>Sem fila</Typography>
-                            <Typography>0</Typography>
+                            ) : (
-                            <Typography>0</Typography>
+                              user.openClosedInQueue.map((queue) => (
-                            <Typography>0</Typography>
+                                <Typography
+                                  key={queue.queueId}
+                                  className={classes.tableQueues}
+                                  title={queue.name}
+                                  style={{ backgroundColor: queue.color }}
+                                >
+                                  {queue.countOpen}
+                                </Typography>
+                              ))
+                            )}
                           </div>
                         </TableCell>
 
@@ -170,11 +180,29 @@ const TableUser = ({ classes, usersOnlineInfo, logout }) => {
                               gap: "12px",
                             }}
                           >
-                            <Typography title="Cobrança">0</Typography>
+                            <div
-                            <Typography>0</Typography>
+                              style={{
-                            <Typography>0</Typography>
+                                display: "flex",
-                            <Typography>0</Typography>
+                                flexWrap: "wrap",
-                            <Typography>0</Typography>
+                                alignItems: "center",
+                                gap: "12px",
+                              }}
+                            >
+                              {!user.openClosedInQueue ? (
+                                <Typography>Sem fila</Typography>
+                              ) : (
+                                user.openClosedInQueue.map((queue) => (
+                                  <Typography
+                                    key={queue.queueId}
+                                    className={classes.tableQueues}
+                                    title={queue.name}
+                                    style={{ backgroundColor: queue.color }}
+                                  >
+                                    {queue.countClosed}
+                                  </Typography>
+                                ))
+                              )}
+                            </div>
                           </div>
                         </TableCell>
                         <TableCell>

frontend/src/pages/Dashboard/index.js

@@ -10,20 +10,13 @@ import Zoom from "@mui/material/Zoom";
 import IconButton from "@mui/material/IconButton";
 import Info from "@material-ui/icons/Info";
 
-import useTickets from "../../hooks/useTickets";
-
 import { AuthContext } from "../../context/Auth/AuthContext";
-
 import { i18n } from "../../translate/i18n";
-
 import Chart from "./Chart";
-
 import openSocket from "socket.io-client";
-
 import api from "../../services/api";
 
 import { Can } from "../../components/Can";
-import CardUser from "../../components/DashboardUser/CardUser";
 import TableUser from "../../components/DashboardUser/TableUser";
 
 const useStyles = makeStyles((theme) => ({
@@ -103,6 +96,12 @@ const useStyles = makeStyles((theme) => ({
     textAlign: "center",
     borderRadius: "5px",
   },
+  tableQueues: {
+    color: "white",
+    width: "25px",
+    textAlign: "center",
+    borderRadius: "5px",
+  },
 }));
 
 const reducer = (state, action) => {
@@ -175,20 +174,16 @@ const reducer = (state, action) => {
 
       if (onlineUser.sumOpen) {
         if ("sumOpen" in state[index]) {
-          // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1  | state[index].sumOpen["count"]: ', state[index].sumOpen['count'], '  |  onlineUser.sumOpen.count: ', onlineUser.sumOpen.count)
           state[index].sumOpen["count"] = onlineUser.sumOpen.count;
         } else if (!("sumOpen" in state[index])) {
-          // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
           state[index].sumOpen = onlineUser.sumOpen;
         }
       }
 
       if (onlineUser.sumClosed) {
         if ("sumClosed" in state[index]) {
-          // console.log(' >>>>>>>>>>>>>>>>>> sumClosed 1  | state[index].sumClosed["count"]: ', state[index].sumClosed['count'], '  |  onlineUser.sumClosed.count: ', onlineUser.sumClosed.count)
           state[index].sumClosed["count"] = onlineUser.sumClosed.count;
         } else if (!("sumClosed" in state[index])) {
-          // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
           state[index].sumClosed = onlineUser.sumClosed;
         }
       }
@@ -247,10 +242,6 @@ const Dashboard = () => {
           });
           dispatch({ type: "RESET" });
           dispatch({ type: "LOAD_QUERY", payload: dataQuery.data });
-
-          console.log("xxx REPORT 2 dataQuery : ", dataQuery.data);
-
-          //console.log()
         } catch (err) {
           console.log(err);
         }
@@ -265,8 +256,6 @@ const Dashboard = () => {
     const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
     socket.on("ticketStatus", (data) => {
-      // console.log('data: ',data)
-
       if (data.action === "update") {
         setStatus(data.ticketStatus.status);
       }
@@ -284,7 +273,6 @@ const Dashboard = () => {
 
     socket.on("user", (data) => {
       if (data.action === "delete") {
-        // console.log(' entrou no delete user: ', data)
         dispatch({ type: "DELETE_USER", payload: +data.userId });
       }
     });
@@ -402,7 +390,7 @@ const Dashboard = () => {
                 </Grid>
                 <Grid item xs={12}>
                   <Paper className={classes.fixedHeightPaper} variant="outlined">
-                    <Chart />
+                    <Chart allTickets={usersOnlineInfo} />
                   </Paper>
                 </Grid>
               </Grid>
@@ -486,27 +474,18 @@ const Dashboard = () => {
                     </Grid>
                   </Paper>
                 </Grid>
-                {window.innerWidth <= 992 ? (
+
-                  <CardUser
+                <TableUser
-                    classes={classes}
+                  classes={classes}
-                    usersOnlineInfo={usersOnlineInfo}
+                  usersOnlineInfo={usersOnlineInfo}
-                    logout={handleLogouOnlineUser}
+                  logout={handleLogouOnlineUser}
-                  />
+                />
-                ) : (
-                  <TableUser
-                    classes={classes}
-                    usersOnlineInfo={usersOnlineInfo}
-                    logout={handleLogouOnlineUser}
-                  />
-                )}
               </Grid>
             </Paper>
           </Grid>
         </Container>
       )}
     />
-
-    /**/
   );
 };