diff --git a/backend/src/controllers/WhatsAppSessionController.ts b/backend/src/controllers/WhatsAppSessionController.ts index aa9d9b7..6e82a7c 100644 --- a/backend/src/controllers/WhatsAppSessionController.ts +++ b/backend/src/controllers/WhatsAppSessionController.ts @@ -7,7 +7,7 @@ import UpdateWhatsAppService from "../services/WhatsappService/UpdateWhatsAppSer import { restartWhatsSession } from "../helpers/RestartWhatsSession"; -import path from 'path'; +import path from 'path'; // import { WWebJsw } from "../../WWebJS/session-bd_40" @@ -37,7 +37,7 @@ const update = async (req: Request, res: Response): Promise => { const restart = async (req: Request, res: Response): Promise => { - + const { whatsappId } = req.params; console.log('FROM REQUEST WHATSAPP ID: ', whatsappId) @@ -58,9 +58,9 @@ const remove = async (req: Request, res: Response): Promise => { const wbot = getWbot(whatsapp.id); console.log( - 'Desconectou s whatsapp.id: ', whatsapp.id, - ' | PATH TO DELETE',path.join(process.cwd(),'.wwebjs_auth', `session-bd_${whatsapp.id}`) - ) + 'Desconectou s whatsapp.id: ', whatsapp.id, + ' | PATH TO DELETE', path.join(process.cwd(), '.wwebjs_auth', `session-bd_${whatsapp.id}`) + ) //removeDir(path.join(process.cwd(),'.wwebjs_auth', `session-bd_${whatsapp.id}`)) diff --git a/backend/src/libs/wbot.ts b/backend/src/libs/wbot.ts index ffe26fc..13beb70 100644 --- a/backend/src/libs/wbot.ts +++ b/backend/src/libs/wbot.ts @@ -46,8 +46,6 @@ const syncUnreadMessages = async (wbot: Session) => { export const initWbot = async (whatsapp: Whatsapp): Promise => { return new Promise((resolve, reject) => { try { - - const io = getIO(); const sessionName = whatsapp.name; let sessionCfg; @@ -55,8 +53,6 @@ export const initWbot = async (whatsapp: Whatsapp): Promise => { if (whatsapp && whatsapp.session) { sessionCfg = JSON.parse(whatsapp.session); } - - //NOVA OPÇÃO MD const wbot: Session = new Client({ session: sessionCfg, authStrategy: new LocalAuth({ clientId: 'bd_' + whatsapp.id }), @@ -85,7 +81,7 @@ export const initWbot = async (whatsapp: Whatsapp): Promise => { wbot.on("qr", async qr => { - + if (!backupSession.includes(whatsapp.id)) { backupSession.push(whatsapp.id) } @@ -163,16 +159,16 @@ export const initWbot = async (whatsapp: Whatsapp): Promise => { await syncUnreadMessages(wbot); resolve(wbot); - + console.log(`>>>>>>>>>>>>>>>>>>>>>>>>>.. BACKUP SESSION whatsapp.id ${whatsapp.id} | backupSession: ${backupSession}`) - const whatsIndex = backupSession.findIndex((id:number) => id === +whatsapp.id); + const whatsIndex = backupSession.findIndex((id: number) => id === +whatsapp.id); console.log(' whatsIndex: ', whatsIndex) - + if (whatsIndex !== -1) { backupSession.splice(whatsIndex, 1); diff --git a/frontend/src/assets/icons/UserModal/perfil.svg b/frontend/src/assets/icons/UserModal/perfil.svg new file mode 100644 index 0000000..38d19d4 --- /dev/null +++ b/frontend/src/assets/icons/UserModal/perfil.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/UserModal/signoff.svg b/frontend/src/assets/icons/UserModal/signoff.svg new file mode 100644 index 0000000..ab8c0cd --- /dev/null +++ b/frontend/src/assets/icons/UserModal/signoff.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/src/components/Base/BTN/Btn.jsx b/frontend/src/components/Base/BTN/Btn.jsx new file mode 100644 index 0000000..9755fa4 --- /dev/null +++ b/frontend/src/components/Base/BTN/Btn.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import BtnBaseStyled from "./Btn.styled"; + +const BtnComponent = ({ text, bgcolor, fontcolor,...props }) => { + return ( + + {text} + + ); +}; + +export default BtnComponent; diff --git a/frontend/src/components/Base/BTN/Btn.styled.jsx b/frontend/src/components/Base/BTN/Btn.styled.jsx new file mode 100644 index 0000000..9773520 --- /dev/null +++ b/frontend/src/components/Base/BTN/Btn.styled.jsx @@ -0,0 +1,24 @@ +import styled from "styled-components"; + +const BtnBaseStyled = styled.button` + cursor: pointer; + border: 1px solid ${({ bgcolor }) => bgcolor}; + background-color: ${({ bgcolor }) => bgcolor}; + color: ${({ fontcolor }) => fontcolor}; + padding: 6px 16px 3px; + border-radius: 5px; + margin: 12px 0; + font-size: 18px; + font-family: "Helvetica55"; + vertical-align: baseline; + transition: all 0.2s linear; + &:hover { + border: 1px solid ${({ bgcolor }) => bgcolor}; + color: ${({ bgcolor }) => bgcolor}; + background-color: ${({ fontcolor }) => fontcolor}; + transition: all 0.2s linear; + } +`; + +export default BtnBaseStyled; + diff --git a/frontend/src/components/Base/ContainerLogin.jsx b/frontend/src/components/Base/ContainerLogin/ContainerLogin.jsx similarity index 100% rename from frontend/src/components/Base/ContainerLogin.jsx rename to frontend/src/components/Base/ContainerLogin/ContainerLogin.jsx diff --git a/frontend/src/components/Base/ContainerLogin.style.jsx b/frontend/src/components/Base/ContainerLogin/ContainerLogin.style.jsx similarity index 100% rename from frontend/src/components/Base/ContainerLogin.style.jsx rename to frontend/src/components/Base/ContainerLogin/ContainerLogin.style.jsx diff --git a/frontend/src/components/Base/Form/FormComponent.jsx b/frontend/src/components/Base/Form/FormComponent.jsx new file mode 100644 index 0000000..b3f5ae0 --- /dev/null +++ b/frontend/src/components/Base/Form/FormComponent.jsx @@ -0,0 +1,10 @@ +import React from "react"; +import FormComponentStyled from "./FormComponent.style"; + + +const FormComponent = ({ children, ...props }) => { + return {children}; +}; + +export default FormComponent; + diff --git a/frontend/src/components/Base/Form/FormComponent.style.jsx b/frontend/src/components/Base/Form/FormComponent.style.jsx new file mode 100644 index 0000000..737f157 --- /dev/null +++ b/frontend/src/components/Base/Form/FormComponent.style.jsx @@ -0,0 +1,10 @@ +import styled from "styled-components"; + +const FormComponentStyled = styled.form` + display: flex; + width: 100%; + flex-direction: column; + align-items: flex-start; +`; + +export default FormComponentStyled; diff --git a/frontend/src/components/Base/Form/Input/InputComponent.jsx b/frontend/src/components/Base/Form/Input/InputComponent.jsx new file mode 100644 index 0000000..1116aea --- /dev/null +++ b/frontend/src/components/Base/Form/Input/InputComponent.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import LabelComponent from "../Label/LabelComponent"; +import { InputComponentStyled, InputContainerStyled } from "./InputComponent.style"; + +const InputComponent = ({ type, id, label, ...props }) => { + return ( + + + + + ); +}; + +export default InputComponent; + diff --git a/frontend/src/components/Base/Form/Input/InputComponent.style.jsx b/frontend/src/components/Base/Form/Input/InputComponent.style.jsx new file mode 100644 index 0000000..3ef411b --- /dev/null +++ b/frontend/src/components/Base/Form/Input/InputComponent.style.jsx @@ -0,0 +1,28 @@ +import styled from "styled-components"; +import { color } from "../../../../style/varibles"; + +const InputComponentStyled = styled.input` + background-color: ${color.pricinpal.grisOscuro}; + padding: 12px; + font-size: 14px; + font-family: "Helvetica85"; + color: ${color.pricinpal.blanco}; + border: 2px solid ${color.pricinpal.blanco}; + border-radius: 5px; + ::placeholder { + color: ${color.gradient.placeholder}; + } + &:focus { + outline: none; + } +`; + +const InputContainerStyled = styled.div` +width: 100%; + display: flex; + flex-direction: column; + margin: 12px 0; +`; + +export {InputComponentStyled,InputContainerStyled}; + diff --git a/frontend/src/components/Base/Form/Label/LabelComponent.jsx b/frontend/src/components/Base/Form/Label/LabelComponent.jsx new file mode 100644 index 0000000..e5a34ae --- /dev/null +++ b/frontend/src/components/Base/Form/Label/LabelComponent.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import LabelComponentStyled from "./LabelComponent.style" + + +const LabelComponent = ({label,forhtml}) => { + return ( + {label} + ) +} + +export default LabelComponent \ No newline at end of file diff --git a/frontend/src/components/Base/Form/Label/LabelComponent.style.jsx b/frontend/src/components/Base/Form/Label/LabelComponent.style.jsx new file mode 100644 index 0000000..8ce2670 --- /dev/null +++ b/frontend/src/components/Base/Form/Label/LabelComponent.style.jsx @@ -0,0 +1,14 @@ +import styled from "styled-components"; +import { color } from "../../../../style/varibles"; + +const LabelComponentStyled = styled.label` + color: ${color.pricinpal.blanco}; + text-align: left; + font-size: 16px; + font-family: "Helvetica85"; + text-transform: uppercase; + margin: 6px 0; +`; + +export default LabelComponentStyled; + diff --git a/frontend/src/components/Base/MainContainer.jsx b/frontend/src/components/Base/MainContainer.jsx deleted file mode 100644 index a9c9dbf..0000000 --- a/frontend/src/components/Base/MainContainer.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; -import PageTitle from "../PageTitle/PageTitle"; - -import MainContainerStyled, { ContentContainer, TitleContainer } from "./MainContainer.style"; - -const MainContainer = ({ children }) => { - return ( - - - - - {children} - - ); -}; - -export default MainContainer; - diff --git a/frontend/src/components/Base/MainContainer/MainContainer.jsx b/frontend/src/components/Base/MainContainer/MainContainer.jsx new file mode 100644 index 0000000..b8bb60d --- /dev/null +++ b/frontend/src/components/Base/MainContainer/MainContainer.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import PageTitle from "../../PageTitle/PageTitle"; + + +import MainContainerStyled, { + TitleContainerStyled, + ContentContainerStyled, +} from "./MainContainer.style"; + +const MainContainer = ({ children }) => { + return ( + + + + + {children} + + ); +}; + +export default MainContainer; + diff --git a/frontend/src/components/Base/MainContainer.style.jsx b/frontend/src/components/Base/MainContainer/MainContainer.style.jsx similarity index 58% rename from frontend/src/components/Base/MainContainer.style.jsx rename to frontend/src/components/Base/MainContainer/MainContainer.style.jsx index 0ca3664..b2e7437 100644 --- a/frontend/src/components/Base/MainContainer.style.jsx +++ b/frontend/src/components/Base/MainContainer/MainContainer.style.jsx @@ -1,6 +1,6 @@ import styled from "styled-components"; -const MainContainer = styled.main` +const MainContainerStyled = styled.main` padding-left: 97px; padding-top: 26px; margin-right: 16px; @@ -10,17 +10,17 @@ const MainContainer = styled.main` align-items: flex-end; height: 96vh; `; -const TitleContainer = styled.div` +const TitleContainerStyled = styled.div` width: 100%; `; -const ContentContainer = styled.div` +const ContentContainerStyled = styled.div` width: 100%; height: 100vh; overflow: hidden; margin-top: 16px; `; -export default MainContainer; +export default MainContainerStyled; -export { TitleContainer, ContentContainer }; +export { TitleContainerStyled, ContentContainerStyled }; diff --git a/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx b/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx new file mode 100644 index 0000000..0f8d424 --- /dev/null +++ b/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx @@ -0,0 +1,39 @@ +import React from "react"; +import BtnComponent from "../Base/BTN/Btn"; + +import { + ConfirmationModalStyled, + ModalOverlayStyled, + ModalConfirmationBtns, +} from "./ConfirmationModal.style"; + +import { color } from "../../style/varibles"; + +const ConfirmationModal = ({ children, title, modal, click }) => { + const { handleModal, handleLogout } = click; + return ( + + +

{title}

+

{children}

+ + + + + + + ); +}; + +export default ConfirmationModal; + diff --git a/frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx b/frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx new file mode 100644 index 0000000..ceec6d9 --- /dev/null +++ b/frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx @@ -0,0 +1,45 @@ +import styled from "styled-components"; +import { color } from "../../style/varibles"; + +const ModalOverlayStyled = styled.div` + display: ${({modal}) => (modal ? "flex" : "none")}; + position: absolute; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; + background-color: #00000050; + z-index: 9999; + top: 0; + right: 0; +`; + +const ConfirmationModalStyled = styled.div` + position: relative; + display: flex; + flex-direction: column; + margin: 0 auto; + padding: 16px; + justify-content: center; + text-align: center; + z-index: 10000; + border-radius: 5px; + background-color: ${color.pricinpal.grisOscuro}; + width: 50%; + h1 { + margin: 16px 0; + } + p { + font-size: 18px; + margin: 16px 0; + } +`; + +const ModalConfirmationBtns = styled.div` + display: flex; + flex-direction: row; + justify-content: space-evenly; +`; + +export { ConfirmationModalStyled, ModalOverlayStyled, ModalConfirmationBtns }; + diff --git a/frontend/src/components/Menu/MenuComponent.jsx b/frontend/src/components/Menu/MenuComponent.jsx index c4cb2fb..047aedc 100644 --- a/frontend/src/components/Menu/MenuComponent.jsx +++ b/frontend/src/components/Menu/MenuComponent.jsx @@ -61,7 +61,7 @@ const MenuComponent = () => { } text="Tickets" to="/tickets" hover={hover} /> - } text="Contatos" to="contacts" hover={hover} /> + } text="Contatos" to="/contacts" hover={hover} /> } text="Lembretes" to="/schedulesReminder" hover={hover} /> } text="Respostas" to="" hover={hover} /> diff --git a/frontend/src/components/PageTitle/PageTitle.jsx b/frontend/src/components/PageTitle/PageTitle.jsx index 2e355be..6ba57c1 100644 --- a/frontend/src/components/PageTitle/PageTitle.jsx +++ b/frontend/src/components/PageTitle/PageTitle.jsx @@ -1,17 +1,22 @@ import React from "react"; import { PageTitleStyled } from "./PageTitle.style"; + import UserBtn from "./UserBtn/UserBtn"; import { AuthContext } from "../../context/Auth/AuthContext"; - -import logo from "../../assets/images/Logo.png" +import logo from "../../assets/images/Logo.png"; const PageTitle = () => { + const [modal, setModal] = React.useState(false); const { user } = React.useContext(AuthContext); + + const handleModal = () => { + setModal(!modal); + }; return (

PageTitle

- + ); }; diff --git a/frontend/src/components/PageTitle/PageTitle.style.jsx b/frontend/src/components/PageTitle/PageTitle.style.jsx index ee7511d..3847e9c 100644 --- a/frontend/src/components/PageTitle/PageTitle.style.jsx +++ b/frontend/src/components/PageTitle/PageTitle.style.jsx @@ -17,11 +17,12 @@ const UserBtnStyled = styled.button` border: none; border-radius: 5px; font-family: "Helvetica55"; - letter-spacing: .5px; + letter-spacing: 0.5px; font-size: 14px; text-transform: capitalize; align-items: center; - img{ + cursor: pointer; + img { background-color: white; width: 24px; height: 24px; @@ -29,6 +30,39 @@ const UserBtnStyled = styled.button` border-radius: 50%; margin-right: 12px; } - `; +`; + +const UserModalStyled = styled.div` + display: ${({ modal }) => (modal ? "flex" : "none")}; + position: absolute; + background-color: white; + padding: 12px; + right: 2rem; + top: 5.5rem; + border-radius: 5px; + box-shadow: ${color.shadow.dark} ${color.gradient.bgOpacity}; +`; + +const UserModalListStyled = styled.ul` + display: flex; + flex-direction: column; +`; + +const UserModalItemStyled = styled.li` + display: flex; + justify-content: left; + color: ${color.pricinpal.grisOscuro}; + margin: 6px 0; + cursor: pointer; + svg { + margin-right: 12px; + } +`; +export { + PageTitleStyled, + UserBtnStyled, + UserModalStyled, + UserModalListStyled, + UserModalItemStyled, +}; -export { PageTitleStyled, UserBtnStyled }; diff --git a/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx b/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx index 301241e..8296bde 100644 --- a/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx +++ b/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx @@ -1,12 +1,39 @@ import React from "react"; -import { UserBtnStyled } from "../PageTitle.style"; +import { UserBtnStyled, UserModalStyled, UserModalListStyled } from "../PageTitle.style"; + +import { AuthContext } from "../../../context/Auth/AuthContext"; +import UserItem from "./UserItem"; + +import { ReactComponent as Perfil } from "../../../assets/icons/UserModal/perfil.svg"; +import { ReactComponent as Signoff } from "../../../assets/icons/UserModal/signoff.svg"; +import ConfirmationModal from "../../ConfirmationModal/ConfirmationModal"; +import UserModal from "../../UserModal/UserModal"; + +const UserBtn = ({ user, img, modal, modalSet }) => { + const [modalConfirm, setModalConfirm] = React.useState(false); + const { handleLogout } = React.useContext(AuthContext); + + const handleModal = () => { + setModalConfirm(!modalConfirm); + }; -const UserBtn = ({ user, img }) => { return ( - - {user - Bem Vindo, {user ? user.name : null} - + <> + + {user + Bem Vindo, {user ? user.name : null} + + + + } /> + } onClick={handleModal} /> + + + + + Deseja Sair do sistema? + + ); }; diff --git a/frontend/src/components/PageTitle/UserBtn/UserItem.jsx b/frontend/src/components/PageTitle/UserBtn/UserItem.jsx new file mode 100644 index 0000000..e243ad9 --- /dev/null +++ b/frontend/src/components/PageTitle/UserBtn/UserItem.jsx @@ -0,0 +1,14 @@ +import React from "react"; +import { UserModalItemStyled } from "../PageTitle.style"; + +const UserItem = ({ icon, title, onClick }) => { + return ( + + {icon} + {title} + + ); +}; + +export default UserItem; + diff --git a/frontend/src/components/UserModal/UserModal.jsx b/frontend/src/components/UserModal/UserModal.jsx new file mode 100644 index 0000000..3c55f1c --- /dev/null +++ b/frontend/src/components/UserModal/UserModal.jsx @@ -0,0 +1,43 @@ +import React from "react"; +import { ModalOverlayStyled, UserModalStyled, UserBtns } from "./UserModal.style"; + +import api from "../../services/api"; +import { AuthContext } from "../../context/Auth/AuthContext"; +import { Can } from "../Can"; +import BtnComponent from "../Base/BTN/Btn"; + +import FormComponent from "../Base/Form/FormComponent"; +import InputComponent from "../Base/Form/Input/InputComponent"; + +const style = { + width: "100%", + justifyContent: "flex-start", + display: "flex", + flexDirection: "column", + alignItems: "center", +} + +const UserModal = () => { + return ( + + +
+

Imagem

+

Desc

+
+ + + + + + + + + + + + ); +}; + +export default UserModal; + diff --git a/frontend/src/components/UserModal/UserModal.style.jsx b/frontend/src/components/UserModal/UserModal.style.jsx new file mode 100644 index 0000000..1cd8e9c --- /dev/null +++ b/frontend/src/components/UserModal/UserModal.style.jsx @@ -0,0 +1,34 @@ +import styled from "styled-components"; +import { color } from "../../style/varibles"; + +const ModalOverlayStyled = styled.div` + /* display: ${({ modal }) => (modal ? "flex" : "none")}; */ + display: flex; + position: absolute; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; + background-color: #00000050; + z-index: 9999; + top: 0; + right: 0; +`; +const UserModalStyled = styled.div` + position: relative; + display: flex; + flex-direction: row; + margin: 0 auto; + padding: 12px; + z-index: 10000; + border-radius: 5px; + background-color: ${color.pricinpal.grisOscuro}; + width: 50%; +`; +const UserBtns = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +`; +export { ModalOverlayStyled, UserModalStyled,UserBtns }; + diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js index b52d238..bf1bdec 100644 --- a/frontend/src/layout/index.js +++ b/frontend/src/layout/index.js @@ -1,18 +1,18 @@ import React from "react"; import Loading from "../components/LoadingScreen/Loading"; -import MainContainer from "../components/Base/MainContainer"; +import MainContainer from "../components/Base/MainContainer/MainContainer"; import { AuthContext } from "../context/Auth/AuthContext"; import { i18n } from "../translate/i18n"; import MenuComponent from "../components/Menu/MenuComponent"; const LoggedInLayout = ({ children }) => { const { handleLogout, loading, isAuth } = React.useContext(AuthContext); - const { user } = React.useContext(AuthContext); - const logout = (e) => { handleLogout(); }; + const { user } = React.useContext(AuthContext); + if (loading) { return ; diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js index e61095d..217eb3f 100644 --- a/frontend/src/pages/Login/index.js +++ b/frontend/src/pages/Login/index.js @@ -2,7 +2,7 @@ import React from "react"; import { AuthContext } from "../../context/Auth/AuthContext"; import { i18n } from "../../translate/i18n"; -import ContainerLogin from "../../components/Base/ContainerLogin"; +import ContainerLogin from "../../components/Base/ContainerLogin/ContainerLogin"; import VideoComponent from "../../components/VideoTag/VideoComponent"; import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm"; import Company from "../../components/LoginComponents/CompanyLogo/Company"; diff --git a/frontend/src/style/varibles.jsx b/frontend/src/style/varibles.jsx index cf09298..ecf66e6 100644 --- a/frontend/src/style/varibles.jsx +++ b/frontend/src/style/varibles.jsx @@ -50,7 +50,11 @@ export const color = { warning: "#FFC700" }, gradient:{ - bgOpacity:"#212F3CD8" + bgOpacity:"#212F3CD8", + placeholder:"#ffffff83" + }, + shadow:{ + dark:"2px 2px 4px 2px" } };