Novo dashboard

rtenorioh · Oct 28, 2024 · 92c2391 · 92c2391
1 parent d4b65bf
commit 92c2391
Show file tree

Hide file tree

Showing 13 changed files with 1,049 additions and 215 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
+    "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
@@ -38,7 +38,7 @@
     "react-scripts": "3.4.3",
     "react-tagcloud": "^2.3.3",
     "react-toastify": "^6.0.9",
-    "recharts": "^2.0.2",
+    "recharts": "^2.13.0",
     "socket.io-client": "^3.0.5",
     "use-sound": "^2.0.1",
     "yup": "^0.32.8"
@@ -58,4 +58,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,17 +1,17 @@
-import React, { useState, useEffect } from "react";
-import Routes from "./routes";
+import React, { useEffect, useState } from "react";
 import "react-toastify/dist/ReactToastify.css";
+import Routes from "./routes";
 
-import { createTheme, ThemeProvider } from "@material-ui/core/styles";
 import { ptBR } from "@material-ui/core/locale";
+import { createTheme, ThemeProvider } from "@material-ui/core/styles";
 
 import { CssBaseline } from "@material-ui/core";
 
-import api from "./services/api";
 import toastError from "./errors/toastError";
+import api from "./services/api";
 
-import lightBackground from "./assets/wa-background-light.png";
 import darkBackground from "./assets/wa-background-dark.jpg";
+import lightBackground from "./assets/wa-background-light.png";
 import { system } from "./config.json";
 
 const App = () => {
@@ -35,8 +35,12 @@ const App = () => {
         toolbar: { main: system.color.lightTheme.toolbar.background || "#6B62FE" },
         menuItens: { main: system.color.lightTheme.menuItens || "#ffffff" },
         sub: { main: system.color.lightTheme.sub || "#ffffff" },
-        toolbarIcon: { main: system.color.lightTheme.toolbarIcon || "#ffffff"},
+        toolbarIcon: { main: system.color.lightTheme.toolbarIcon || "#ffffff" },
         divide: { main: system.color.lightTheme.divide || "#E0E0E0" },
+        background: {
+          default: system.color.lightTheme.palette.background.default || "#ffffff",
+          paper: system.color.lightTheme.palette.background.paper || "#eeeeee",
+        },
       },
       backgroundImage: `url(${lightBackground})`,
     },
@@ -70,7 +74,7 @@ const App = () => {
         toolbar: { main: system.color.darkTheme.toolbar.background || "#52d869" },
         menuItens: { main: system.color.darkTheme.menuItens || "#181d22" },
         sub: { main: system.color.darkTheme.sub || "#181d22" },
-        toolbarIcon: { main: system.color.darkTheme.toolbarIcon || "#181d22"},
+        toolbarIcon: { main: system.color.darkTheme.toolbarIcon || "#181d22" },
         divide: { main: system.color.darkTheme.divide || "#080d14" },
         background: {
           default: system.color.darkTheme.palette.background.default || "#080d14",

diff --git a/frontend/src/hooks/useTickets/index.js b/frontend/src/hooks/useTickets/index.js
@@ -1,7 +1,6 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { getHoursCloseTicketsAuto } from "../../config";
 import toastError from "../../errors/toastError";
-
 import api from "../../services/api";
 
 const useTickets = ({
@@ -17,11 +16,23 @@ const useTickets = ({
     const [hasMore, setHasMore] = useState(false);
     const [tickets, setTickets] = useState([]);
     const [count, setCount] = useState(0);
+    const [ticketsByUser, setTicketsByUser] = useState({});
+    const [ticketsByConnection, setTicketsByConnection] = useState({});
+    const [newContactsByDay, setNewContactsByDay] = useState({});
+    const [contactsWithTicketsByDay, setContactsWithTicketsByDay] = useState([]);
+
+    const formatDateToDDMMYYYY = (date) => {
+        const d = new Date(date);
+        const day = String(d.getDate()).padStart(2, '0');
+        const month = String(d.getMonth() + 1).padStart(2, '0');
+        const year = d.getFullYear();
+        return `${day}-${month}-${year}`;
+    };
 
     useEffect(() => {
         setLoading(true);
         const delayDebounceFn = setTimeout(() => {
-            const fetchTickets = async() => {
+            const fetchTickets = async () => {
                 try {
                     const { data } = await api.get("/tickets", {
                         params: {
@@ -33,45 +44,110 @@ const useTickets = ({
                             queueIds,
                             withUnreadMessages,
                         },
-                    })
-                    setTickets(data.tickets)
+                    });
+                    setTickets(data.tickets);
+
+                    const contactsByDay = data.tickets.reduce((acc, ticket) => {
+                        const contactName = ticket.contact?.name || "Contato desconhecido";
+                        const createdAtDate = new Date(ticket.createdAt).toLocaleDateString();
+
+                        if (!acc[createdAtDate]) {
+                            acc[createdAtDate] = new Set();
+                        }
+                        acc[createdAtDate].add(contactName);
+
+                        return acc;
+                    }, {});
+
+                    const contactsWithTicketsByDay = Object.entries(contactsByDay).map(
+                        ([date, contacts]) => ({
+                            date,
+                            count: contacts.size,
+                        })
+                    );
+
+                    setContactsWithTicketsByDay(contactsWithTicketsByDay);
+
+                    const contactsPerDay = data.tickets.reduce((acc, ticket) => {
+                        const createdDate = new Date(ticket.createdAt).toLocaleDateString();
+                        acc[createdDate] = acc[createdDate] ? acc[createdDate] + 1 : 1;
+                        return acc;
+                    }, {});
+                    setNewContactsByDay(contactsPerDay);
 
-                    let horasFecharAutomaticamente = getHoursCloseTicketsAuto(); 
+                    const ticketsCountByConnection = data.tickets.reduce((acc, ticket) => {
+                        const connectionName = ticket.whatsapp?.name || "Conexão desconhecida";
+                        const createdDate = formatDateToDDMMYYYY(ticket.createdAt);
 
-                    if (status === "open" && horasFecharAutomaticamente && horasFecharAutomaticamente !== "" &&
-                        horasFecharAutomaticamente !== "0" && Number(horasFecharAutomaticamente) > 0) {
+                        if (!acc[connectionName]) {
+                            acc[connectionName] = {};
+                        }
 
-                        let dataLimite = new Date()
-                        dataLimite.setHours(dataLimite.getHours() - Number(horasFecharAutomaticamente))
+                        if (!acc[connectionName][createdDate]) {
+                            acc[connectionName][createdDate] = 0;
+                        }
+
+                        acc[connectionName][createdDate] += 1;
+
+                        return acc;
+                    }, {});
+
+                    setTicketsByConnection(ticketsCountByConnection);
+
+                    const ticketsCountByUser = data.tickets.reduce((acc, ticket) => {
+                        const userID = ticket.userId;
+                        const createdDate = new Date(ticket.createdAt).toISOString().split("T")[0];
+
+                        if (!acc[userID]) {
+                            acc[userID] = {};
+                        }
+
+                        acc[userID][createdDate] = acc[userID][createdDate] ? acc[userID][createdDate] + 1 : 1;
+
+                        return acc;
+                    }, {});
+
+                    setTicketsByUser(ticketsCountByUser);
+
+                    let horasFecharAutomaticamente = getHoursCloseTicketsAuto();
+                    if (
+                        status === "open" &&
+                        horasFecharAutomaticamente &&
+                        horasFecharAutomaticamente !== "" &&
+                        horasFecharAutomaticamente !== "0" &&
+                        Number(horasFecharAutomaticamente) > 0
+                    ) {
+                        let dataLimite = new Date();
+                        dataLimite.setHours(dataLimite.getHours() - Number(horasFecharAutomaticamente));
 
                         data.tickets.forEach(ticket => {
                             if (ticket.status !== "closed") {
-                                let dataUltimaInteracaoChamado = new Date(ticket.updatedAt)
+                                let dataUltimaInteracaoChamado = new Date(ticket.updatedAt);
                                 if (dataUltimaInteracaoChamado < dataLimite)
-                                    closeTicket(ticket)
+                                    closeTicket(ticket);
                             }
-                        })
+                        });
                     }
 
-                    setHasMore(data.hasMore)
-                    setCount(data.count)
-                    setLoading(false)
+                    setHasMore(data.hasMore);
+                    setCount(data.count);
+                    setLoading(false);
                 } catch (err) {
-                    setLoading(false)
-                    toastError(err)
+                    setLoading(false);
+                    toastError(err);
                 }
-            }
+            };
 
-            const closeTicket = async(ticket) => {
+            const closeTicket = async (ticket) => {
                 await api.put(`/tickets/${ticket.id}`, {
                     status: "closed",
                     userId: ticket.userId || null,
-                })
-            }
+                });
+            };
 
-            fetchTickets()
-        }, 500)
-        return () => clearTimeout(delayDebounceFn)
+            fetchTickets();
+        }, 500);
+        return () => clearTimeout(delayDebounceFn);
     }, [
         searchParam,
         pageNumber,
@@ -80,9 +156,19 @@ const useTickets = ({
         showAll,
         queueIds,
         withUnreadMessages,
-    ])
+    ]);
 
-    return { tickets, loading, hasMore, count };
+    return {
+        tickets,
+        loading,
+        hasMore,
+        count,
+        ticketsByUser,
+        ticketsByConnection,
+        formatDateToDDMMYYYY,
+        newContactsByDay,
+        contactsWithTicketsByDay,
+    };
 };
 
 export default useTickets;