actualizar

frontend/src/App.js

@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from "react";
+
+import "react-toastify/dist/ReactToastify.css";
+import { QueryClient, QueryClientProvider } from "react-query";
+
+import {enUS, ptBR, esES} from "@material-ui/core/locale";
+import { createTheme, ThemeProvider } from "@material-ui/core/styles";
+import { useMediaQuery } from "@material-ui/core";
+import ColorModeContext from "./layout/themeContext";
+import { SocketContext, SocketManager } from './context/Socket/SocketContext';
+
+import Routes from "./routes";
+
+const queryClient = new QueryClient();
+
+const App = () => {
+    const [locale, setLocale] = useState();
+
+    const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    const preferredTheme = window.localStorage.getItem("preferredTheme");
+    const [mode, setMode] = useState(preferredTheme ? preferredTheme : prefersDarkMode ? "dark" : "light");
+
+    const colorMode = React.useMemo(
+        () => ({
+            toggleColorMode: () => {
+                setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+            },
+        }),
+        []
+    );
+
+    const theme = createTheme(
+        {
+            scrollbarStyles: {
+                "&::-webkit-scrollbar": {
+                    width: '8px',
+                    height: '8px',
+                },
+                "&::-webkit-scrollbar-thumb": {
+                    boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
+                    backgroundColor: "#682EE3",
+                },
+            },
+            scrollbarStylesSoft: {
+                "&::-webkit-scrollbar": {
+                    width: "8px",
+                },
+                "&::-webkit-scrollbar-thumb": {
+                    backgroundColor: mode === "light" ? "#F3F3F3" : "#333333",
+                },
+            },
+            palette: {
+                type: mode,
+                primary: { main: mode === "light" ? "#682EE3" : "#FFFFFF" },
+                textPrimary: mode === "light" ? "#682EE3" : "#FFFFFF",
+                borderPrimary: mode === "light" ? "#682EE3" : "#FFFFFF",
+                dark: { main: mode === "light" ? "#333333" : "#F3F3F3" },
+                light: { main: mode === "light" ? "#F3F3F3" : "#333333" },
+                tabHeaderBackground: mode === "light" ? "#EEE" : "#666",
+                optionsBackground: mode === "light" ? "#fafafa" : "#333",
+				options: mode === "light" ? "#fafafa" : "#666",
+				fontecor: mode === "light" ? "#128c7e" : "#fff",
+                fancyBackground: mode === "light" ? "#fafafa" : "#333",
+				bordabox: mode === "light" ? "#eee" : "#333",
+				newmessagebox: mode === "light" ? "#eee" : "#333",
+				inputdigita: mode === "light" ? "#fff" : "#666",
+				contactdrawer: mode === "light" ? "#fff" : "#666",
+				announcements: mode === "light" ? "#ededed" : "#333",
+				login: mode === "light" ? "#fff" : "#1C1C1C",
+				announcementspopover: mode === "light" ? "#fff" : "#666",
+				chatlist: mode === "light" ? "#eee" : "#666",
+				boxlist: mode === "light" ? "#ededed" : "#666",
+				boxchatlist: mode === "light" ? "#ededed" : "#333",
+                total: mode === "light" ? "#fff" : "#222",
+                messageIcons: mode === "light" ? "grey" : "#F3F3F3",
+                inputBackground: mode === "light" ? "#FFFFFF" : "#333",
+                barraSuperior: mode === "light" ? "linear-gradient(to right, #682EE3, #682EE3 , #682EE3)" : "#666",
+				boxticket: mode === "light" ? "#EEE" : "#666",
+				campaigntab: mode === "light" ? "#ededed" : "#666",
+				mediainput: mode === "light" ? "#ededed" : "#1c1c1c",
+            },
+            mode,
+        },
+        locale
+    );
+
+    useEffect(() => {
+        const i18nlocale = localStorage.getItem("i18nextLng");
+        const browserLocale = i18nlocale?.substring(0, 2) ?? 'pt';
+
+        if (browserLocale === "pt"){
+            setLocale(ptBR);
+        }else if( browserLocale === "en" ) {
+            setLocale(enUS)
+        }else if( browserLocale === "es" )
+            setLocale(esES)
+
+    }, []);
+
+    useEffect(() => {
+        window.localStorage.setItem("preferredTheme", mode);
+    }, [mode]);
+
+
+
+    return (
+        <ColorModeContext.Provider value={{ colorMode }}>
+            <ThemeProvider theme={theme}>
+                <QueryClientProvider client={queryClient}>
+                  <SocketContext.Provider value={SocketManager}>
+                      <Routes />
+                  </SocketContext.Provider>
+                </QueryClientProvider>
+            </ThemeProvider>
+        </ColorModeContext.Provider>
+    );
+};
+
+export default App;

frontend/src/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import CssBaseline from "@material-ui/core/CssBaseline";
+
+import App from "./App";
+
+ReactDOM.render(
+	<CssBaseline>
+		<App />
+	</CssBaseline>,
+	document.getElementById("root")
+);
+
+// ReactDOM.render(
+// 	<React.StrictMode>
+// 		<CssBaseline>
+// 			<App />
+// 		</CssBaseline>,
+//   </React.StrictMode>
+
+// 	document.getElementById("root")
+// );

frontend/src/rules.js

@@ -0,0 +1,22 @@
+const rules = {
+	user: {
+		static: [],
+	},
+
+	admin: {
+		static: [
+			"dashboard:view",
+			"drawer-admin-items:view",
+			"tickets-manager:showall",
+			"user-modal:editProfile",
+			"user-modal:editQueues",
+			"ticket-options:deleteTicket",
+			"contacts-page:deleteContact",
+			"connections-page:actionButtons",
+			"connections-page:addConnection",
+			"connections-page:editOrDeleteConnection"
+		],
+	},
+};
+
+export default rules;