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/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js
index 7644f45..f13183e 100644
--- a/frontend/src/pages/Dashboard/index.js
+++ b/frontend/src/pages/Dashboard/index.js
@@ -5,25 +5,10 @@ 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 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 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 Info from "@material-ui/icons/Info";
-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 useTickets from "../../hooks/useTickets";
@@ -38,9 +23,8 @@ import openSocket from "socket.io-client";
import api from "../../services/api";
import { Can } from "../../components/Can";
-
-import { Button } from "@material-ui/core";
-import { id } from "date-fns/locale";
+import CardUser from "../../components/DashboardUser/CardUser";
+import TableUser from "../../components/DashboardUser/TableUser";
const useStyles = makeStyles((theme) => ({
container: {
@@ -68,12 +52,20 @@ const useStyles = makeStyles((theme) => ({
flexDirection: "column",
height: "100%",
},
- cardPaperFix: {
+ containerPaperFix: {
+ width: "100%",
textTransform: "capitalize",
padding: theme.spacing(2),
paddingBottom: theme.spacing(4),
- height: "500px",
- overflowY: "scroll",
+ 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",
@@ -88,6 +80,29 @@ const useStyles = makeStyles((theme) => ({
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) => {
@@ -185,8 +200,6 @@ const reducer = (state, action) => {
const Dashboard = () => {
const classes = useStyles();
const [usersOnlineInfo, dispatch] = useReducer(reducer, []);
- const [search, setSearch] = useState("");
- const [filterStatus, setFilterStatus] = useState(null);
const { user } = useContext(AuthContext);
var userQueueIds = [];
@@ -269,269 +282,185 @@ const Dashboard = () => {
};
}, []);
- const handleFilterChange = (event) => {
- setFilterStatus(event.target.value);
- };
- const handlesearch = (event) => {
- setSearch(event.target.value.toLowerCase());
- };
-
return (
(
-
-
-
-
-
-
- {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")}
-
-
-
-
-
-
-
-
-
-
-
- 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
- }
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ tickets
+
- 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);
- })
- .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 && (
-
- )}
-
-
-
- ))}
+
+
+
+ {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
+
+
+
+
+
+
-
-
-