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..1624748 --- /dev/null +++ b/frontend/src/components/DashboardUser/TableUser.jsx @@ -0,0 +1,208 @@ +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()); + }; + + console.log(usersOnlineInfo); + + return ( + + + + + + Lista de Usuários + + + + + + + Status + + + + + + + + + + + + Nome + Em Atendimento/Finalizado(s) + Por Fila abertos + Por Fila Fechados + 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"} + +
+ + + +
+ 0 + 0 + 0 + 0 + 0 +
+ + + +
+ 0 + 0 + 0 + 0 + 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 29d59e7..36c84a7 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -1,139 +1,177 @@ -import React, { useContext, useReducer, useEffect, useState } from "react" +import React, { useContext, useReducer, useEffect } 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 { 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%", - }, -})) - - - +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 reducer = (state, action) => { + if (action.type === "DELETE_USER_STATUS") { + const userId = action.payload; - if (action.type === "DELETE_USER_STATUS") { + const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`); - const userId = action.payload; + if (userIndex !== -1) { + state.splice(userIndex, 1); + } - const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`); + return [...state]; + } - if (userIndex !== -1) { - state.splice(userIndex, 1); - } + if (action.type === "LOAD_QUERY") { + const queries = action.payload; + const newQueries = []; - return [...state]; - } + 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 === 'LOAD_QUERY') { + if (action.type === "UPDATE_STATUS_ONLINE") { + let onlineUser = action.payload; + let index = -1; - const queries = action.payload - const newQueries = [] + let onlySumOpenClosed = false; - queries.forEach((query) => { + if (onlineUser.sumOpen || onlineUser.sumClosed) { + index = state.findIndex( + (e) => + (onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) || + (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId) + ); - const queryIndex = state.findIndex((q) => q.id === query.id) + onlySumOpenClosed = true; + } else { + index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`); + } - if (queryIndex !== -1) { - state[queryIndex] = query - } - else { - newQueries.push(query) - } + 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; + } + } - }) - - 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 ("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], + }; + } + } } @@ -166,37 +204,19 @@ const reducer = (state, action) => { if(onlineUser.openClosedInQueue){ state[index].openClosedInQueue = onlineUser.openClosedInQueue } - if(onlineUser.openClosedOutQueue){ - state[index].openClosedOutQueue = onlineUser.openClosedOutQueue - } - - - - // if(onlineUser.closedTicketByUserIn){ - // state[index].closedTicketByUserIn = onlineUser.closedTicketByUserIn - // } - // if(onlineUser.closedTicketByUserOut){ - // state[index].closedTicketByUserOut = onlineUser.closedTicketByUserOut - // } - // if(onlineUser.openTicketByUserIn){ - // state[index].openTicketByUserIn = onlineUser.openTicketByUserIn - // } - // if(onlineUser.openTicketByUserOut){ - // state[index].openTicketByUserOut = onlineUser.openTicketByUserOut - // } - - } - return [...state] - - } - - if (action.type === "RESET") { - return []; - } - -} + if (onlineUser.openClosedOutQueue) { + state[index].openClosedOutQueue = onlineUser.openClosedOutQueue; + } + + } + return [...state]; + } + if (action.type === "RESET") { + return []; + } +}; const Dashboard = () => { const classes = useStyles() @@ -207,26 +227,7 @@ const Dashboard = () => { const [pending, setPending] = useState(0) const { user } = useContext(AuthContext); - - const [ticketStatusChange, setStatus] = useState() - - // 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(() => { @@ -364,225 +365,190 @@ const Dashboard = () => { + 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 ? ( + + ) : ( + + )} + + + + + )} + /> - 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