Merge pull request #16 from RenatoDiGiacomo/old/dashboard

Old/dashboard

frontend/src/pages/Dashboard/index.js

@@ -13,12 +13,17 @@ 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 Info from "@material-ui/icons/Info";
 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";
 
@@ -35,6 +40,7 @@ import api from "../../services/api";
 import { Can } from "../../components/Can";
 
 import { Button } from "@material-ui/core";
+import { id } from "date-fns/locale";
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -62,6 +68,14 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "column",
     height: "100%",
   },
+  containerPaperFix: {
+    width: "100%",
+    textTransform: "capitalize",
+    padding: theme.spacing(2),
+    paddingBottom: theme.spacing(4),
+    height: "auto",
+    overflowY: "hidden",
+  },
   cardPaperFix: {
     textTransform: "capitalize",
     padding: theme.spacing(2),
@@ -179,6 +193,7 @@ 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 = [];
@@ -265,17 +280,44 @@ const Dashboard = () => {
   const handleFilterChange = (event) => {
     setFilterStatus(event.target.value);
   };
+  const handlesearch = (event) => {
+    setSearch(event.target.value.toLowerCase());
+  };
 
   return (
     <Can
       role={user.profile}
       perform="dashboard-view:show"
       yes={() => (
-        <div>
         <Container maxWidth="lg" className={classes.container}>
+          <Grid container spacing={3}>
+            <Paper className={classes.containerPaperFix} sx={12}>
+              <Grid item sx={4}>
+                <Typography
+                  component="h1"
+                  variant="h4"
+                  color="primary"
+                  style={{ marginBottom: "16px" }}
+                >
+                  tickets
+                  <Tooltip
+                    title={`Os dados informados abaixo é baseado na data: ${new Date().toLocaleDateString()}`}
+                    color="primary"
+                    TransitionComponent={Zoom}
+                  >
+                    <IconButton>
+                      <Info />
+                    </IconButton>
+                  </Tooltip>
+                </Typography>
+              </Grid>
               <Grid container spacing={3}>
                 <Grid item xs={12} sm={6} md={6} lg={4}>
-                <Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
+                  <Paper
+                    className={classes.customFixedHeightPaper}
+                    style={{ overflow: "hidden" }}
+                    variant="outlined"
+                  >
                     <Typography component="h3" variant="h6" color="primary" paragraph>
                       {i18n.t("dashboard.messages.inAttendance.title")}
                     </Typography>
@@ -287,7 +329,11 @@ const Dashboard = () => {
                   </Paper>
                 </Grid>
                 <Grid item xs={12} sm={6} md={6} lg={4}>
-                <Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
+                  <Paper
+                    className={classes.customFixedHeightPaper}
+                    style={{ overflow: "hidden" }}
+                    variant="outlined"
+                  >
                     <Typography component="h3" variant="h6" color="primary" paragraph>
                       {i18n.t("dashboard.messages.waiting.title")}
                     </Typography>
@@ -299,7 +345,11 @@ const Dashboard = () => {
                   </Paper>
                 </Grid>
                 <Grid item xs={12} sm={6} md={6} lg={4}>
-                <Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
+                  <Paper
+                    className={classes.customFixedHeightPaper}
+                    style={{ overflow: "hidden" }}
+                    variant="outlined"
+                  >
                     <Typography component="h3" variant="h6" color="primary" paragraph>
                       {i18n.t("dashboard.messages.closed.title")}
                     </Typography>
@@ -310,15 +360,18 @@ const Dashboard = () => {
                     </Grid>
                   </Paper>
                 </Grid>
+                <Grid item xs={12}>
+                  <Paper className={classes.fixedHeightPaper} variant="outlined">
+                    <Chart />
+                  </Paper>
                 </Grid>
-          </Container>
+              </Grid>
-          <Container maxWidth="lg" className={classes.container}>
+            </Paper>
-            <Paper className={classes.cardPaperFix}>
+            <Paper className={classes.containerPaperFix} style={{ marginTop: "21px" }} sx={12}>
-              <Grid container justifyContent="space-between">
+              <Grid item sx={4}>
-                <Grid item>
                 <Typography
-                    component="h3"
+                  component="h1"
-                    variant="h6"
+                  variant="h4"
                   color="primary"
                   style={{ marginBottom: "16px" }}
                 >
@@ -334,18 +387,97 @@ const Dashboard = () => {
                   </Tooltip>
                 </Typography>
               </Grid>
+              <Grid container spacing={3}>
+                <Grid item xs={12} sm={6} md={6} lg={4}>
+                  <Paper
+                    className={classes.customFixedHeightPaper}
+                    style={{ overflow: "hidden" }}
+                    variant="outlined"
+                  >
+                    <Typography component="h3" variant="h6" color="primary" paragraph>
+                      Total de Agentes
+                    </Typography>
                     <Grid item>
-                  <Box sx={{ minWidth: 120, marginBottom: 2 }}>
+                      <Typography component="h1" variant="h4">
-                    <FormControl fullWidth>
+                        {usersOnlineInfo.length}
-                      <InputLabel id="demo-simple-select-label">Status</InputLabel>
+                      </Typography>
+                    </Grid>
+                  </Paper>
+                </Grid>
+                <Grid item xs={12} sm={6} md={6} lg={4}>
+                  <Paper
+                    className={classes.customFixedHeightPaper}
+                    style={{ overflow: "hidden" }}
+                    variant="outlined"
+                  >
+                    <Typography component="h3" variant="h6" color="primary" paragraph>
+                      Online
+                    </Typography>
+                    <Grid item>
+                      <Typography component="h1" variant="h4">
+                        {
+                          usersOnlineInfo.filter(
+                            (status) =>
+                              status.statusOnline && status.statusOnline.status === "online"
+                          ).length
+                        }
+                      </Typography>
+                    </Grid>
+                  </Paper>
+                </Grid>
+                <Grid item xs={12} sm={6} md={6} lg={4}>
+                  <Paper
+                    className={classes.customFixedHeightPaper}
+                    style={{ overflow: "hidden" }}
+                    variant="outlined"
+                  >
+                    <Typography component="h3" variant="h6" color="primary" paragraph>
+                      Offline
+                    </Typography>
+                    <Grid item>
+                      <Typography component="h1" variant="h4">
+                        {
+                          usersOnlineInfo.filter(
+                            (status) =>
+                              !status.statusOnline || status.statusOnline.status === "offline"
+                          ).length
+                        }
+                      </Typography>
+                    </Grid>
+                  </Paper>
+                </Grid>
+                <Grid item xs={12}>
+                  <Paper className={classes.cardPaperFix} sx={12} variant="outlined">
+                    <Grid container sx={12} justifyContent="space-between">
+                      <Grid item sx={4}>
+                        <Typography
+                          component="h4"
+                          variant="h6"
+                          color="primary"
+                          style={{ marginBottom: "16px" }}
+                        >
+                          Lista de Usuários
+                        </Typography>
+                      </Grid>
+                      <Grid item sx={8} width="100%">
+                        <Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
+                          <TextField
+                            id="outlined-basic"
+                            label="Usuário"
+                            variant="standard"
+                            value={search}
+                            onChange={handlesearch}
+                          />
+                          <FormControl fullWidth variant="standard">
+                            <InputLabel id="status">Status</InputLabel>
                             <Select
-                        labelId="demo-simple-select-label"
+                              labelId="status"
-                        id="demo-simple-select"
+                              id="status"
                               value={filterStatus}
                               label="Status"
                               onChange={handleFilterChange}
                             >
-                        <MenuItem value={null}>-Online/Offline-</MenuItem>
+                              <MenuItem value={null}>Todos</MenuItem>
                               <MenuItem value={"online"}>Online</MenuItem>
                               <MenuItem value={"offline"}>Offline</MenuItem>
                               <MenuItem value={"not"}>Não entrou</MenuItem>
@@ -363,6 +495,17 @@ const Dashboard = () => {
                             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) => (
                             <Grid
                               item
@@ -377,14 +520,27 @@ const Dashboard = () => {
                                 <CardHeader
                                   avatar={
                                     <Avatar
-                                sx={
+                                      style={{
-                                  user.statusOnline && user.statusOnline.status === "online"
+                                        backgroundColor: user.statusOnline
-                                    ? { backgroundColor: "green" }
+                                          ? user.statusOnline.status === "online"
-                                    : { backgroundColor: "red" }
+                                            ? "green"
-                                }
+                                            : user.statusOnline.status === "offline"
-                                aria-label="recipe"
+                                            ? "red"
+                                            : "black"
+                                          : "grey",
+                                      }}
                                     >
-                                {user.name[0].toUpperCase()}
+                                      {user.statusOnline ? (
+                                        user.statusOnline.status === "online" ? (
+                                          <CheckCircleIcon style={{ color: "white" }} />
+                                        ) : user.statusOnline.status === "offline" ? (
+                                          <CancelIcon style={{ color: "white" }} />
+                                        ) : (
+                                          <ErrorIcon style={{ color: "yellow" }} />
+                                        )
+                                      ) : (
+                                        <RemoveCircleIcon style={{ color: "black" }} />
+                                      )}
                                     </Avatar>
                                   }
                                   title={
@@ -405,7 +561,9 @@ const Dashboard = () => {
                                   <Typography variant="h6" component="h1" color="textPrimary">
                                     Finalizado:
                                     <Typography component="p" color="textPrimary" paragraph>
-                                {user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0}
+                                      {user.sumClosed && user.sumClosed.count
+                                        ? user.sumClosed.count
+                                        : 0}
                                     </Typography>
                                   </Typography>
 
@@ -439,17 +597,11 @@ const Dashboard = () => {
                           ))}
                     </Grid>
                   </Paper>
-          </Container>
+                </Grid>
-          <Container maxWidth="lg" className={classes.container}>
+              </Grid>
-            <Grid container className={classes.cardStyleFix}>
-              <Grid item xs={12}>
-                <Paper className={classes.fixedHeightPaper}>
-                  <Chart />
             </Paper>
           </Grid>
-            </Grid>
         </Container>
-        </div>
       )}
     />