Merge pull request #15 from RenatoDiGiacomo/old/main

Old/main

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)}

frontend/src/layout/MainListItems.js

@@ -10,7 +10,7 @@ import { Badge } from "@material-ui/core";
 import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined";
 
 import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined";
-import SendOutlined from '@material-ui/icons/SendOutlined';
+import SendOutlined from "@material-ui/icons/SendOutlined";
 
 //import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined";
 
@@ -32,10 +32,7 @@ function ListItemLink(props) {
   const { icon, primary, to, className } = props;
 
   const renderLink = React.useMemo(
-    () =>
+    () => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
-      React.forwardRef((itemProps, ref) => (
-        <RouterLink to={to} ref={ref} {...itemProps} />
-      )),
     [to]
   );
 
@@ -50,7 +47,7 @@ function ListItemLink(props) {
 }
 
 const MainListItems = (props) => {
-  const { drawerClose } = props;
+  const { drawerClose, setDrawerOpen, drawerOpen } = props;
   const { whatsApps } = useContext(WhatsAppsContext);
   const { user } = useContext(AuthContext);
   const [connectionWarning, setConnectionWarning] = useState(false);
@@ -78,9 +75,8 @@ const MainListItems = (props) => {
   }, [whatsApps]);
 
   return (
-    <div onClick={drawerClose}>
+    //Solicitado pelo Adriano: Click no LinkItem e fechar o menu!
-     
+    <div onClick={() => setDrawerOpen(false)}>
-      
       <ListItemLink
         to="/tickets"
         primary={i18n.t("mainDrawer.listItems.tickets")}
@@ -92,11 +88,7 @@ const MainListItems = (props) => {
         primary={i18n.t("mainDrawer.listItems.contacts")}
         icon={<ContactPhoneOutlinedIcon />}
       />
-       <ListItemLink
+      <ListItemLink to="/schedulesReminder" primary="Lembretes" icon={<SendOutlined />} />
-        to="/schedulesReminder"
-        primary="Lembretes"
-        icon={<SendOutlined />}
-      />
       <ListItemLink
         to="/quickAnswers"
         primary={i18n.t("mainDrawer.listItems.quickAnswers")}
@@ -108,9 +100,7 @@ const MainListItems = (props) => {
         yes={() => (
           <>
             <Divider />
-            <ListSubheader inset>
+            <ListSubheader inset>{i18n.t("mainDrawer.listItems.administration")}</ListSubheader>
-              {i18n.t("mainDrawer.listItems.administration")}
-            </ListSubheader>
             <ListItemLink
               to="/users"
               primary={i18n.t("mainDrawer.listItems.users")}
@@ -132,18 +122,9 @@ const MainListItems = (props) => {
               }
             />
 
-            <ListItemLink
+            <ListItemLink to="/" primary="Dashboard" icon={<DashboardOutlinedIcon />} />
-                    to="/"
-                    primary="Dashboard"
-                    icon={<DashboardOutlinedIcon />}
-            />
-
-            <ListItemLink
-                    to="/report"
-                    primary="Relatório"
-                    icon={<ReportOutlinedIcon />}
-            />
 
+            <ListItemLink to="/report" primary="Relatório" icon={<ReportOutlinedIcon />} />
 
             <Can
               role={user.profile}
@@ -156,8 +137,6 @@ const MainListItems = (props) => {
                 />
               )}
             />
-
-            
           </>
         )}
       />

frontend/src/layout/index.js

@@ -185,7 +185,7 @@ const LoggedInLayout = ({ children }) => {
         </div>
         <Divider />
         <List>
-          <MainListItems drawerClose={drawerClose} />
+          <MainListItems drawerClose={drawerClose} setDrawerOpen={setDrawerOpen} drawerOpen={drawerOpen} />
         </List>
         <Divider />
       </Drawer>

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,22 +1,42 @@
-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";
+
+const useStyles = makeStyles((theme) => ({
   container: {
     paddingTop: theme.spacing(4),
     paddingBottom: theme.spacing(4),
@@ -42,32 +62,211 @@ const useStyles = makeStyles(theme => ({
     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 = [];
 
   if (user.queues && user.queues.length > 0) {
-		userQueueIds = user.queues.map(q => q.id);
+    userQueueIds = user.queues.map((q) => q.id);
   }
 
   const GetTickets = (status, showAll, withUnreadMessages, unlimited) => {
-
     const { tickets } = useTickets({
       status: status,
       showAll: showAll,
       withUnreadMessages: withUnreadMessages,
       queueIds: JSON.stringify(userQueueIds),
-			unlimited: unlimited
+      unlimited: unlimited,
     });
     return tickets.length;
+  };
+
+  useEffect(() => {
+    dispatch({ type: "RESET" });
+  }, []);
+
+  const handleLogouOnlineUser = async (userId) => {
+    try {
+      await api.get(`/users/logout/${userId}`);
+      //toast.success(("Desloged!"));
+      //handleDeleteRows(scheduleId)
+    } catch (err) {
+      // toastError(err);
     }
+  };
+
+  useEffect(() => {
+    //setLoading(true);
+
+    const delayDebounceFn = setTimeout(() => {
+      // setLoading(true);
+      const fetchQueries = async () => {
+        try {
+          let date = new Date().toLocaleDateString("pt-BR").split("/");
+          let dateToday = `${date[2]}-${date[1]}-${date[0]}`;
+
+          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);
+
+    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"
@@ -75,7 +274,7 @@ const Dashboard = () => {
         <div>
           <Container maxWidth="lg" className={classes.container}>
             <Grid container spacing={3}>
-							<Grid item xs={4}>
+              <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")}
@@ -87,7 +286,7 @@ const Dashboard = () => {
                   </Grid>
                 </Paper>
               </Grid>
-							<Grid item xs={4}>
+              <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")}
@@ -99,7 +298,7 @@ const Dashboard = () => {
                   </Grid>
                 </Paper>
               </Grid>
-							<Grid item xs={4}>
+              <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")}
@@ -111,6 +310,138 @@ const Dashboard = () => {
                   </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 />
@@ -122,13 +453,8 @@ const Dashboard = () => {
       )}
     />
 
-		
-
-
-
-
     /**/
-	)
+  );
-}
+};
 
-export default Dashboard
+export default Dashboard;