diff --git a/frontend/src/components/DashboardUser/CardUser.jsx b/frontend/src/components/DashboardUser/CardUser.jsx new file mode 100644 index 0000000..eea89d1 --- /dev/null +++ b/frontend/src/components/DashboardUser/CardUser.jsx @@ -0,0 +1,193 @@ +import React from "react"; + +import Paper from "@material-ui/core/Paper"; +import Grid from "@material-ui/core/Grid"; +import Typography from "@material-ui/core/Typography"; + +import Avatar from "@mui/material/Avatar"; +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 { Button } from "@material-ui/core"; +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 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"; + +const CardUser = ({ classes, usersOnlineInfo, logout }) => { + const [search, setSearch] = React.useState(""); + + const [filterStatus, setFilterStatus] = React.useState(null); + + const handleFilterChange = (event) => { + setFilterStatus(event.target.value); + }; + const handlesearch = (event) => { + setSearch(event.target.value.toLowerCase()); + }; + + return ( + + + + + + Lista de Usuários + + + + + + + Status + + + + + + + + {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); + }) + .sort((a) => { + if (a.statusOnline) { + if (a.statusOnline.status === "online") { + return -1; + } + return 0; + } + return 0; + }) + .map((user, index) => ( + + + + {user.statusOnline ? ( + user.statusOnline.status === "online" ? ( + + ) : user.statusOnline.status === "offline" ? ( + + ) : ( + + ) + ) : ( + + )} + + } + title={ + + {user.name} + + } + /> + + + + Em atendimento: + + {user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0} + + + + + Finalizado: + + {user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0} + + + + + Tempo online: + + {user.sumOnlineTime && user.sumOnlineTime.sum + ? user.sumOnlineTime.sum + : "Não entrou Hoje"} + + + + + {user.statusOnline && + user.statusOnline.status === "online" && + user.statusOnline && ( + + )} + + + + ))} + + + + ); +}; + +export default CardUser; diff --git a/frontend/src/components/DashboardUser/TableUser.jsx b/frontend/src/components/DashboardUser/TableUser.jsx new file mode 100644 index 0000000..3229925 --- /dev/null +++ b/frontend/src/components/DashboardUser/TableUser.jsx @@ -0,0 +1,167 @@ +import React from "react"; + +import Select from "@mui/material/Select"; +import TextField from "@mui/material/TextField"; +import Typography from "@material-ui/core/Typography"; +import Grid from "@material-ui/core/Grid"; + +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableContainer from "@material-ui/core/TableContainer"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; +import Paper from "@material-ui/core/Paper"; +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 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 PowerSettingsNewIcon from "@material-ui/icons/PowerSettingsNew"; + +const TableUser = ({ classes, usersOnlineInfo, logout }) => { + const [search, setSearch] = React.useState(""); + const [filterStatus, setFilterStatus] = React.useState(null); + + const handleFilterChange = (event) => { + setFilterStatus(event.target.value); + }; + const handlesearch = (event) => { + setSearch(event.target.value.toLowerCase()); + }; + + return ( + + + + + + Lista de Usuários + + + + + + + Status + + + + + + + + + + + + Status + Nome + Em Atendimento + Finalizado(s) + Tempo Online + Ações + + + + + {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); + }) + .sort((a) => { + if (a.statusOnline) { + if (a.statusOnline.status === "online") { + return -1; + } + return 0; + } + return 0; + }) + .map((user, index) => ( + + + {user.statusOnline ? ( + user.statusOnline.status === "online" ? ( + + ) : user.statusOnline.status === "offline" ? ( + + ) : ( + + ) + ) : ( + + )} + + {user.name} + + + {user.sumOpen ? user.sumOpen.count : "0"} + + + + + {user.sumClosed ? user.sumClosed.count : "0"} + + + + {user.sumOnlineTime ? user.sumOnlineTime.sum : "Não entrou"} + + + {user.statusOnline && user.statusOnline.status === "online" ? ( + { + logout(user.id); + }} + /> + ) : ( + + )} + + + ))} + +
+ + + + + ); +}; + +export default TableUser; diff --git a/frontend/src/components/TicketsManager/index.js b/frontend/src/components/TicketsManager/index.js index 2da1d18..3190905 100644 --- a/frontend/src/components/TicketsManager/index.js +++ b/frontend/src/components/TicketsManager/index.js @@ -124,7 +124,7 @@ const TicketsManager = () => { let searchTimeout; const handleSearch = (e) => { - const searchedTerm = e.target.value.toLowerCase(); + const searchedTerm = e.target.value.toLowerCase().trim(); clearTimeout(searchTimeout); @@ -274,7 +274,7 @@ const TicketsManager = () => { setOpenCount(val)} @@ -285,7 +285,7 @@ const TicketsManager = () => { selectedQueueIds={selectedQueueIds} updateCount={(val) => setPendingCount(val)} style={applyPanelStyle("pending")} - /> + /> diff --git a/frontend/src/layout/MainListItems.js b/frontend/src/layout/MainListItems.js index c524b76..6f505d4 100644 --- a/frontend/src/layout/MainListItems.js +++ b/frontend/src/layout/MainListItems.js @@ -9,8 +9,8 @@ import Divider from "@material-ui/core/Divider"; 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 ReportOutlinedIcon from "@material-ui/icons/ReportOutlined"; +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) => ( - - )), + () => React.forwardRef((itemProps, ref) => ), [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 ( -
- - + //Solicitado pelo Adriano: Click no LinkItem e fechar o menu! +
setDrawerOpen(false)}> { primary={i18n.t("mainDrawer.listItems.contacts")} icon={} /> - } - /> + } /> { yes={() => ( <> - - {i18n.t("mainDrawer.listItems.administration")} - + {i18n.t("mainDrawer.listItems.administration")} { } /> - } - /> - - } - /> + } /> + } /> ( - } - /> - )} + role={user.profile} + perform="settings-view:show" + yes={() => ( + } + /> + )} /> - - )} /> diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js index ce410d0..dc9dccb 100644 --- a/frontend/src/layout/index.js +++ b/frontend/src/layout/index.js @@ -185,7 +185,7 @@ const LoggedInLayout = ({ children }) => {
- + diff --git a/frontend/src/pages/Dashboard/Title.js b/frontend/src/pages/Dashboard/Title.js index 8fa5dad..9dbb8b8 100644 --- a/frontend/src/pages/Dashboard/Title.js +++ b/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 ( - {props.children} + {children} ); }; diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js index e89ab22..866be85 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -1,56 +1,205 @@ -import React, { useContext, useReducer, useEffect, useState } from "react" +import React, { useContext, useReducer, useEffect, useState } from "react"; -import Paper from "@material-ui/core/Paper" -import Container from "@material-ui/core/Container" -import Grid from "@material-ui/core/Grid" -import { makeStyles } from "@material-ui/core/styles" +import Paper from "@material-ui/core/Paper"; +import Container from "@material-ui/core/Container"; +import Grid from "@material-ui/core/Grid"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; +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 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 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"; -import { Button } from "@material-ui/core"; +const useStyles = makeStyles((theme) => ({ + container: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4), + }, + fixedHeightPaper: { + padding: theme.spacing(2), + display: "flex", + overflow: "auto", + flexDirection: "column", + height: 240, + }, + customFixedHeightPaper: { + padding: theme.spacing(2), + display: "flex", + overflow: "auto", + flexDirection: "column", + height: 120, + }, + customFixedHeightPaperLg: { + padding: theme.spacing(2), + display: "flex", + overflow: "auto", + flexDirection: "column", + height: "100%", + }, + containerPaperFix: { + width: "100%", + textTransform: "capitalize", + padding: theme.spacing(2), + paddingBottom: theme.spacing(4), + height: "auto", + overflowY: "hidden", + }, + cardPaperFix: { + textTransform: "capitalize", + paddingLeft: theme.spacing(4), + paddingRight: theme.spacing(4), + height: window.innerWidth <= 992 ? "500px" : "auto", + overflowY: "hidden", + }, + cardStyleFix: { + display: "flex", + flexDirection: "row", + justifyContent: "left", + alignItems: "center", + gap: "32px", + }, + logginBtn: { + position: "absolute", + bottom: "21px", + right: "21px", + fontSize: "12px", + }, + tableRowHead: { + backgroundColor: "lightgrey", + }, + tableRowBody: { + textAlign: "center", + " &:nth-child(even)": { + backgroundColor: "#f7f7f7", + }, + }, + tableCounterOpen: { + color: "white", + backgroundColor: "green", + width: "25px", + textAlign: "center", + borderRadius: "5px", + }, + tableCounterClosed: { + color: "white", + backgroundColor: "red", + width: "25px", + textAlign: "center", + borderRadius: "5px", + }, +})); -const useStyles = makeStyles(theme => ({ - container: { - paddingTop: theme.spacing(4), - paddingBottom: theme.spacing(4), - }, - fixedHeightPaper: { - padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column", - height: 240, - }, - customFixedHeightPaper: { - padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column", - height: 120, - }, - customFixedHeightPaperLg: { - padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column", - height: "100%", - }, -})) +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 reducer = (state, action) => { @@ -199,382 +348,274 @@ const reducer = (state, action) => { const Dashboard = () => { - const classes = useStyles() - const [usersOnlineInfo, dispatch] = useReducer(reducer, []) - - const [open, setOpen] = useState(0) - const [closed, setClosed] = useState(0) - const [pending, setPending] = useState(0) - - const { user } = useContext(AuthContext); - // var userQueueIds = []; - - // if (user.queues && user.queues.length > 0) { - // 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 - // }); - // 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('xxx REPORT 2 dataQuery : ', 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("ticket", (data) => { - // console.log('OK') - // }); - - socket.on("onlineStatus", (data) => { - - if (data.action === "logout" || (data.action === "update")) { - - // console.log('>>>>>>> data.userOnlineTime: ', data.userOnlineTime) - - - 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(); - }; - - - }, []); - - - useEffect(() => { - - const delayDebounceFn = setTimeout(() => { - - const fetchQueries = async () => { - - try { - - let date = new Date().toLocaleDateString('pt-BR').split('/') - let dateToday = `${date[2]}-${date[1]}-${date[0]}` - - const _open = await api.get("/tickets/count", { params: { status: 'open', date: dateToday } }); - const _closed = await api.get("/tickets/count", { params: { status: 'closed', date: dateToday } }); - const _pending = await api.get("/tickets/count", { params: { status: 'pending', date: dateToday } }); - - setOpen(_open.data.count) - setClosed(_closed.data.count) - setPending(_pending.data.count) - - - } catch (err) { - console.log(err); - } - }; - - fetchQueries(); - - }, 500); - return () => clearTimeout(delayDebounceFn); - - }, [usersOnlineInfo]); - - - - - return ( - - ( -
- - - - - - - {i18n.t("dashboard.messages.inAttendance.title")} - - - - {/* {GetTickets("open", "true", "false", "true")} */} - {open} - - - - - - - - {i18n.t("dashboard.messages.waiting.title")} - - - - {/* {GetTickets("pending", "true", "false", "true")} */} - {pending} - - - - - - - - {i18n.t("dashboard.messages.closed.title")} - - - - {/* {GetTickets("closed", "true", "false", "true")} */} - {closed} - - - - - - - - - - - - {'Total online'} - - - - {usersOnlineInfo && - usersOnlineInfo.filter((user) => user.statusOnline && user.statusOnline.status === 'online').length - } - - - - - - - - {'Total offline'} - - - - {usersOnlineInfo && - usersOnlineInfo.filter((user) => !user.statusOnline || user.statusOnline.status === 'offline').length - } - - - - - - - - - - - - - - - - - - - - - {usersOnlineInfo && - - usersOnlineInfo.map((userInfo, index) => ( - - // {option.label} - - - <> - {userInfo.statusOnline && - - - - - - - {userInfo.name} - - - - - {userInfo.statusOnline && - userInfo.statusOnline.status - } - - - - Em atendimento: {userInfo.sumOpen && userInfo.sumOpen.count} - - - - Finalizado: {userInfo.sumClosed && userInfo.sumClosed.count} - - - - Tempo online: {userInfo.sumOnlineTime && userInfo.sumOnlineTime.sum} - - - -
- -
Em atendimento(open/closed) por fila, conversas iniciadas pelos clientes:
- - - {userInfo.openClosedInQueue && - - userInfo.openClosedInQueue.map((info, index) => ( - <> - - {info.name}: OPEN {info.countOpen} | CLOSED {info.countClosed} - - - )) - - } - -
- -
- -
Em atendimento(open/closed) sem fila, conversas iniciadas por atendentes:
- - {userInfo.openClosedOutQueue && - - - SEM FILA: OPEN {userInfo.openClosedOutQueue.countOpen} | CLOSED {userInfo.openClosedOutQueue.countClosed} - - - } - -
- - - {userInfo.statusOnline && userInfo.statusOnline.status === "online" && - - userInfo.statusOnline && - - - - - - - - } - - - - - - - - } - - - - )) - } - - - - - -
- )} - /> - - - - - - - /**/ - ) -} - -export default Dashboard + const classes = useStyles(); + const [usersOnlineInfo, dispatch] = useReducer(reducer, []); + const { user } = useContext(AuthContext); + var userQueueIds = []; + + if (user.queues && user.queues.length > 0) { + 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, + }); + 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(); + }; + }, []); + + return ( + ( + + + + + + tickets + + + + + + + + + + + + {i18n.t("dashboard.messages.inAttendance.title")} + + + + {GetTickets("open", "true", "false", "true")} + + + + + + + + {i18n.t("dashboard.messages.waiting.title")} + + + + {GetTickets("pending", "true", "false", "true")} + + + + + + + + {i18n.t("dashboard.messages.closed.title")} + + + + {GetTickets("closed", "true", "false", "true")} + + + + + + + + + + + + + + + Usuários + + + + + + + + + + + + Total de Agentes + + + + {usersOnlineInfo.length} + + + + + + + + Online + + + + { + usersOnlineInfo.filter( + (status) => + status.statusOnline && status.statusOnline.status === "online" + ).length + } + + + + + + + + Offline + + + + { + usersOnlineInfo.filter( + (status) => + !status.statusOnline || status.statusOnline.status === "offline" + ).length + } + + + + + {window.innerWidth <= 992 ? ( + + ) : ( + + )} + + + + + )} + /> + + /**/ + ); +}; + +export default Dashboard;