Add card to every user, with status and count time

added Filter to online, offline and not present

frontend/src/components/TicketsManager/index.js

@@ -124,7 +124,8 @@ const TicketsManager = () => {
   let searchTimeout;
 
   const handleSearch = (e) => {
-    const searchedTerm = e.target.value.toLowerCase();
+    const searchedTerm = e.target.value.toLowerCase().trim();
+    console.log(searchedTerm)
 
     clearTimeout(searchTimeout);
 
@@ -274,7 +275,7 @@ const TicketsManager = () => {
         </Tabs>
         <Paper className={classes.ticketsWrapper}>
           <TicketsList
-            status="open"
+            status={"open"}
             showAll={showAllTickets}
             selectedQueueIds={selectedQueueIds}
             updateCount={(val) => setOpenCount(val)}
@@ -285,7 +286,7 @@ const TicketsManager = () => {
             selectedQueueIds={selectedQueueIds}
             updateCount={(val) => setPendingCount(val)}
             style={applyPanelStyle("pending")}
-          />
+          />  
         </Paper>
       </TabPanel>
       <TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>

frontend/src/pages/Dashboard/Title.js

@@ -1,10 +1,10 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 
-const Title = props => {
+const Title = ({children}) => {
 	return (
 		<Typography component="h2" variant="h6" color="primary" gutterBottom>
-			{props.children}
+			{children}
 		</Typography>
 	);
 };

frontend/src/pages/Dashboard/index.js

@@ -1,134 +1,460 @@
-import React, { useContext } from "react"
+import React, { useContext, useReducer, useEffect, useState } from "react";
 
-import Paper from "@material-ui/core/Paper"
+import Paper from "@material-ui/core/Paper";
-import Container from "@material-ui/core/Container"
+import Container from "@material-ui/core/Container";
-import Grid from "@material-ui/core/Grid"
+import Grid from "@material-ui/core/Grid";
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
+import CardActions from "@mui/material/CardActions";
+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 useTickets from "../../hooks/useTickets"
+import useTickets from "../../hooks/useTickets";
 
 import { AuthContext } from "../../context/Auth/AuthContext";
 
 import { i18n } from "../../translate/i18n";
 
-import Chart from "./Chart"
+import Chart from "./Chart";
+
+import openSocket from "socket.io-client";
+
+import api from "../../services/api";
 
 import { Can } from "../../components/Can";
 
-const useStyles = makeStyles(theme => ({
+import { Button } from "@material-ui/core";
-	container: {
+
-		paddingTop: theme.spacing(4),
+const useStyles = makeStyles((theme) => ({
-		paddingBottom: theme.spacing(4),
+  container: {
-	},
+    paddingTop: theme.spacing(4),
-	fixedHeightPaper: {
+    paddingBottom: theme.spacing(4),
-		padding: theme.spacing(2),
+  },
-		display: "flex",
+  fixedHeightPaper: {
-		overflow: "auto",
+    padding: theme.spacing(2),
-		flexDirection: "column",
+    display: "flex",
-		height: 240,
+    overflow: "auto",
-	},
+    flexDirection: "column",
-	customFixedHeightPaper: {
+    height: 240,
-		padding: theme.spacing(2),
+  },
-		display: "flex",
+  customFixedHeightPaper: {
-		overflow: "auto",
+    padding: theme.spacing(2),
-		flexDirection: "column",
+    display: "flex",
-		height: 120,
+    overflow: "auto",
-	},
+    flexDirection: "column",
-	customFixedHeightPaperLg: {
+    height: 120,
-		padding: theme.spacing(2),
+  },
-		display: "flex",
+  customFixedHeightPaperLg: {
-		overflow: "auto",
+    padding: theme.spacing(2),
-		flexDirection: "column",
+    display: "flex",
-		height: "100%",
+    overflow: "auto",
-	},
+    flexDirection: "column",
-}))
+    height: "100%",
+  },
+  cardPaperFix: {
+    textTransform: "capitalize",
+    padding: theme.spacing(2),
+    paddingBottom: theme.spacing(4),
+    height: "500px",
+    overflowY: "scroll",
+  },
+  cardStyleFix: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "left",
+    alignItems: "center",
+    gap: "32px",
+  },
+  logginBtn: {
+    position: "absolute",
+    bottom: "21px",
+    right: "21px",
+    fontSize: "12px",
+  },
+}));
+
+const reducer = (state, action) => {
+  if (action.type === "DELETE_USER_STATUS") {
+    const userId = action.payload;
+
+    const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`);
+
+    if (userIndex !== -1) {
+      state.splice(userIndex, 1);
+    }
+
+    return [...state];
+  }
+
+  if (action.type === "LOAD_QUERY") {
+    const queries = action.payload;
+    const newQueries = [];
+
+    queries.forEach((query) => {
+      const queryIndex = state.findIndex((q) => q.id === query.id);
+
+      if (queryIndex !== -1) {
+        state[queryIndex] = query;
+      } else {
+        newQueries.push(query);
+      }
+    });
+
+    return [...state, ...newQueries];
+  }
+
+  if (action.type === "UPDATE_STATUS_ONLINE") {
+    let onlineUser = action.payload;
+    let index = -1;
+
+    let onlySumOpenClosed = false;
+
+    if (onlineUser.sumOpen || onlineUser.sumClosed) {
+      index = state.findIndex(
+        (e) =>
+          (onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) ||
+          (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId)
+      );
+
+      onlySumOpenClosed = true;
+    } else {
+      index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`);
+    }
+
+    if (index !== -1) {
+      if (!onlySumOpenClosed) {
+        if (!("statusOnline" in state[index])) {
+          state[index].statusOnline = onlineUser;
+        } else if ("statusOnline" in state[index]) {
+          state[index].statusOnline["status"] = onlineUser.status;
+        }
+      }
+
+      if ("onlineTime" in onlineUser) {
+        if ("sumOnlineTime" in state[index]) {
+          state[index].sumOnlineTime["sum"] = onlineUser.onlineTime.split(" ")[1];
+        } else if (!("sumOnlineTime" in state[index])) {
+          state[index].sumOnlineTime = {
+            userId: onlineUser.userId,
+            sum: onlineUser.onlineTime.split(" ")[1],
+          };
+        }
+      }
+
+      if (onlineUser.sumOpen) {
+        if ("sumOpen" in state[index]) {
+          state[index].sumOpen["count"] = onlineUser.sumOpen.count;
+        } else if (!("sumOpen" in state[index])) {
+          state[index].sumOpen = onlineUser.sumOpen;
+        }
+      }
+
+      if (onlineUser.sumClosed) {
+        if ("sumClosed" in state[index]) {
+          state[index].sumClosed["count"] = onlineUser.sumClosed.count;
+        } else if (!("sumClosed" in state[index])) {
+          state[index].sumClosed = onlineUser.sumClosed;
+        }
+      }
+    }
+    return [...state];
+  }
+
+  if (action.type === "RESET") {
+    return [];
+  }
+};
 
 const Dashboard = () => {
-	const classes = useStyles()
+  const classes = useStyles();
+  const [usersOnlineInfo, dispatch] = useReducer(reducer, []);
+  const [filterStatus, setFilterStatus] = useState(null);
+  const { user } = useContext(AuthContext);
+  var userQueueIds = [];
 
-	const { user } = useContext(AuthContext);
+  if (user.queues && user.queues.length > 0) {
-	var userQueueIds = [];
+    userQueueIds = user.queues.map((q) => q.id);
+  }
 
-	if (user.queues && user.queues.length > 0) {
+  const GetTickets = (status, showAll, withUnreadMessages, unlimited) => {
-		userQueueIds = user.queues.map(q => q.id);
+    const { tickets } = useTickets({
-	}
+      status: status,
+      showAll: showAll,
+      withUnreadMessages: withUnreadMessages,
+      queueIds: JSON.stringify(userQueueIds),
+      unlimited: unlimited,
+    });
+    return tickets.length;
+  };
 
-	const GetTickets = (status, showAll, withUnreadMessages, unlimited) => {
+  useEffect(() => {
+    dispatch({ type: "RESET" });
+  }, []);
 
-		const { tickets } = useTickets({
+  const handleLogouOnlineUser = async (userId) => {
-			status: status,
+    try {
-			showAll: showAll,
+      await api.get(`/users/logout/${userId}`);
-			withUnreadMessages: withUnreadMessages,
+      //toast.success(("Desloged!"));
-			queueIds: JSON.stringify(userQueueIds),
+      //handleDeleteRows(scheduleId)
-			unlimited: unlimited
+    } catch (err) {
-		});
+      // toastError(err);
-		return tickets.length;
+    }
-	}
+  };
 
-	return ( 
+  useEffect(() => {
+    //setLoading(true);
 
-		<Can
+    const delayDebounceFn = setTimeout(() => {
-			role={user.profile}
+      // setLoading(true);
-			perform="dashboard-view:show"
+      const fetchQueries = async () => {
-			yes={() => (
+        try {
-				<div>
+          let date = new Date().toLocaleDateString("pt-BR").split("/");
-					<Container maxWidth="lg" className={classes.container}>
+          let dateToday = `${date[2]}-${date[1]}-${date[0]}`;
-						<Grid container spacing={3}>
-							<Grid item xs={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={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={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 item xs={12}>
-								<Paper className={classes.fixedHeightPaper}>
-									<Chart />
-								</Paper>
-							</Grid>
-						</Grid>
-					</Container>
-				</div>
-			)}
-		/>
-				 
-		
 
+          const dataQuery = await api.get("/reports/user/services", {
+            params: { userId: null, startDate: dateToday, endDate: dateToday },
+          });
+          dispatch({ type: "RESET" });
+          dispatch({ type: "LOAD_QUERY", payload: dataQuery.data });
 
+          //console.log()
+        } catch (err) {
+          console.log(err);
+        }
+      };
 
+      fetchQueries();
+    }, 500);
+    return () => clearTimeout(delayDebounceFn);
+  }, []);
 
-		/**/
+  useEffect(() => {
-	)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
-}
 
-export default Dashboard
+    socket.on("onlineStatus", (data) => {
+      if (data.action === "logout" || data.action === "update") {
+        dispatch({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime });
+      } else if (data.action === "delete") {
+        dispatch({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime });
+      }
+    });
+
+    socket.on("user", (data) => {
+      if (data.action === "delete") {
+        // console.log(' entrou no delete user: ', data)
+        dispatch({ type: "DELETE_USER", payload: +data.userId });
+      }
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+  const handleFilterChange = (event) => {
+    setFilterStatus(event.target.value);
+  };
+
+  return (
+    <Can
+      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}>
+            <Paper className={classes.cardPaperFix}>
+              <Grid container justifyContent="space-between">
+                <Grid item>
+                  <Typography
+                    component="h3"
+                    variant="h6"
+                    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 item>
+                  <Box sx={{ minWidth: 120, marginBottom: 2 }}>
+                    <FormControl fullWidth>
+                      <InputLabel id="demo-simple-select-label">Status</InputLabel>
+                      <Select
+                        labelId="demo-simple-select-label"
+                        id="demo-simple-select"
+                        value={filterStatus}
+                        label="Status"
+                        onChange={handleFilterChange}
+                      >
+                        <MenuItem value={null}>-Online/Offline-</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;
+                    })
+                    .map((user, index) => (
+                      <Grid
+                        item
+                        xs={12}
+                        sm={6}
+                        md={6}
+                        lg={3}
+                        key={index}
+                        style={{ position: "relative" }}
+                      >
+                        <Card variant="outlined">
+                          <CardHeader
+                            avatar={
+                              <Avatar
+                                sx={
+                                  user.statusOnline && user.statusOnline.status === "online"
+                                    ? { backgroundColor: "green" }
+                                    : { backgroundColor: "red" }
+                                }
+                                aria-label="recipe"
+                              >
+                                {user.name[0].toUpperCase()}
+                              </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>
+          </Container>
+          <Container maxWidth="lg" className={classes.container}>
+            <Grid container className={classes.cardStyleFix}>
+              <Grid item xs={12}>
+                <Paper className={classes.fixedHeightPaper}>
+                  <Chart />
+                </Paper>
+              </Grid>
+            </Grid>
+          </Container>
+        </div>
+      )}
+    />
+
+    /**/
+  );
+};
+
+export default Dashboard;