feat: simple dashboard with current day tickets

frontend/src/pages/Dashboard/Chart.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from "react";
+import { useTheme } from "@material-ui/core/styles";
+import {
+	BarChart,
+	CartesianGrid,
+	Bar,
+	XAxis,
+	YAxis,
+	Label,
+	ResponsiveContainer,
+} from "recharts";
+import { startOfHour, parseISO, format } from "date-fns";
+
+import Title from "./Title";
+import api from "../../services/api";
+
+const Chart = () => {
+	const theme = useTheme();
+
+	const [tickets, setTickets] = useState([]);
+	const [chartData, setChartData] = useState([
+		{ time: "08:00", amount: 0 },
+		{ time: "09:00", amount: 0 },
+		{ time: "10:00", amount: 0 },
+		{ time: "11:00", amount: 0 },
+		{ time: "12:00", amount: 0 },
+		{ time: "13:00", amount: 0 },
+		{ time: "14:00", amount: 0 },
+		{ time: "15:00", amount: 0 },
+		{ time: "16:00", amount: 0 },
+		{ time: "17:00", amount: 0 },
+		{ time: "18:00", amount: 0 },
+		{ time: "19:00", amount: 0 },
+	]);
+
+	useEffect(() => {
+		const feathTickets = async () => {
+			try {
+				const res = await api.get("/tickets", {
+					params: { date: new Date().toISOString() },
+				});
+				let ticketsData = res.data;
+				setTickets(ticketsData);
+				setChartData(prevState => {
+					let aux = [...prevState];
+
+					aux.map(a => {
+						ticketsData.forEach(ticket => {
+							if (
+								format(startOfHour(parseISO(ticket.createdAt)), "HH:mm") ===
+								a.time
+							) {
+								return a.amount++;
+							} else {
+								return a;
+							}
+						});
+						return a;
+					});
+
+					return aux;
+				});
+			} catch (err) {
+				console.log(err);
+			}
+		};
+		feathTickets();
+	}, []);
+
+	return (
+		<React.Fragment>
+			<Title>{`Tickets hoje: ${tickets.length}`}</Title>
+			<ResponsiveContainer>
+				<BarChart
+					data={chartData}
+					width={730}
+					height={250}
+					margin={{
+						top: 16,
+						right: 16,
+						bottom: 0,
+						left: 24,
+					}}
+				>
+					<CartesianGrid strokeDasharray="3 3" />
+					<XAxis dataKey="time" stroke={theme.palette.text.secondary} />
+					<YAxis stroke={theme.palette.text.secondary}>
+						<Label
+							angle={270}
+							position="left"
+							style={{ textAnchor: "middle", fill: theme.palette.text.primary }}
+						>
+							Tickets
+						</Label>
+					</YAxis>
+					<Bar
+						// type="monotone"
+						dataKey="amount"
+						fill={theme.palette.primary.main}
+						// stroke={theme.palette.primary.main}
+						// dot={false}
+					/>
+				</BarChart>
+			</ResponsiveContainer>
+		</React.Fragment>
+	);
+};
+
+export default Chart;

frontend/src/pages/Dashboard/Title.js

@@ -0,0 +1,10 @@
+import React from "react";
+import Typography from "@material-ui/core/Typography";
+
+export default function Title(props) {
+	return (
+		<Typography component="h2" variant="h6" color="primary" gutterBottom>
+			{props.children}
+		</Typography>
+	);
+}

frontend/src/pages/Dashboard/index.js

@@ -1,13 +1,39 @@
 import React 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 Chart from "./Chart";
+
+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,
+	},
+}));
 
 const Dashboard = () => {
+	const classes = useStyles();
 	return (
 		<div>
-			<Paper variant="outlined" style={{ margin: 50 }}>
-				teste
-			</Paper>
+			<Container maxWidth="lg" className={classes.container}>
+				<Grid container spacing={3}>
+					<Grid item xs={12}>
+						<Paper className={classes.fixedHeightPaper}>
+							<Chart />
+						</Paper>
+					</Grid>
+				</Grid>
+			</Container>
 		</div>
 	);
 };