Mais informaçoes no dashboard

frontend/src/pages/Dashboard/index.js

@@ -1,11 +1,18 @@
-import React from "react";
+import React, { useContext } 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 Chart from "./Chart";
+import useTickets from "../../hooks/useTickets"
+
+import { AuthContext } from "../../context/Auth/AuthContext";
+
+import { i18n } from "../../translate/i18n";
+
+import Chart from "./Chart"
 
 const useStyles = makeStyles(theme => ({
 	container: {
@@ -19,14 +26,80 @@ const useStyles = makeStyles(theme => ({
 		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 Dashboard = () => {
-	const classes = useStyles();
+	const classes = useStyles()
+
+	const { user } = useContext(AuthContext);
+
+	const userQueueIds = user.queues.map(q => q.id);
+
+	const GetTickets = (status, showAll, withUnreadMessages) => {
+
+		const { tickets } = useTickets({ 
+			status: status, 
+			showAll: showAll, 
+			withUnreadMessages: withUnreadMessages, 
+			queueIds: JSON.stringify(userQueueIds)
+		});
+		return tickets.length;
+	}
+
 	return (
 		<div>
 			<Container maxWidth="lg" className={classes.container}>
 				<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")}
+								</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")}
+								</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")}
+								</Typography>
+							</Grid>
+						</Paper>
+					</Grid>
 					<Grid item xs={12}>
 						<Paper className={classes.fixedHeightPaper}>
 							<Chart />
@@ -35,7 +108,7 @@ const Dashboard = () => {
 				</Grid>
 			</Container>
 		</div>
-	);
-};
+	)
+}
 
-export default Dashboard;
+export default Dashboard

frontend/src/translate/languages/en.js

@@ -39,6 +39,17 @@ const messages = {
             title: "Tickets today: ",
           },
         },
+        messages: {
+          inAttendance: {
+            title: "In Service"
+          },
+          waiting: {
+            title: "Waiting"
+          },
+          closed: {
+            title: "Closed"
+          }
+        }
       },
       connections: {
         title: "Connections",

frontend/src/translate/languages/es.js

@@ -40,6 +40,17 @@ const messages = {
             title: "Tickets hoy: ",
           },
         },
+        messages: {
+          inAttendance: {
+            title: "En servicio"
+          },
+          waiting: {
+            title: "Esperando"
+          },
+          closed: {
+            title: "Finalizado"
+          }
+        }
       },
       connections: {
         title: "Conexiones",

frontend/src/translate/languages/pt.js

@@ -39,6 +39,17 @@ const messages = {
             title: "Tickets hoje: ",
           },
         },
+        messages: {
+          inAttendance: {
+            title: "Em Atendimento"
+          },
+          waiting: {
+            title: "Aguardando"
+          },
+          closed: {
+            title: "Finalizado"
+          }
+        }
       },
       connections: {
         title: "Conexões",