From 2e75350284df9cc61163e15f79d3d51779a4862a Mon Sep 17 00:00:00 2001
From: VnszinN <vinicius.saidy@gmail.com>
Date: Mon, 18 Aug 2025 00:26:59 -0300
Subject: [PATCH 1/6] fix: adjust modal responsiviness / feat: add toast when
 exceeding max value

---
 .../src/pages/depositos/depositos.module.scss | 148 +++++--
 frontend/src/pages/depositos/index.jsx        | 399 ++++++++++--------
 2 files changed, 343 insertions(+), 204 deletions(-)

diff --git a/frontend/src/pages/depositos/depositos.module.scss b/frontend/src/pages/depositos/depositos.module.scss
index 652702d..5d85556 100644
--- a/frontend/src/pages/depositos/depositos.module.scss
+++ b/frontend/src/pages/depositos/depositos.module.scss
@@ -1,5 +1,6 @@
 .body {
     min-height: 75dvh;
+
     h1 {
         margin: 5% 0% 0% 3%;
     }
@@ -11,7 +12,7 @@
     justify-content: center;
     align-items: center;
     margin-top: 7%;
-    
+
     p {
         margin: auto;
         color: black;
@@ -22,7 +23,11 @@
     padding-top: 5%;
 }
 
-.infoSection p, .btnRegisterDeposit, .modalBody label, .modalImagePreviewContainer p, .modalSubmit {
+.infoSection p,
+.btnRegisterDeposit,
+.modalBody label,
+.modalImagePreviewContainer p,
+.modalSubmit {
     font-family: 'Tankindred', sans-serif;
 }
 
@@ -34,7 +39,8 @@
     width: 40%;
 }
 
-.btnRegisterDeposit, .pointFullError {
+.btnRegisterDeposit,
+.pointFullError {
     margin: 5% 0% 3% 0%;
 }
 
@@ -53,9 +59,9 @@
     border-radius: 10px;
     background-color: #F1F1F1;
     padding: 20px;
-    position: absolute; 
-    top: 50%; 
-    left: 50%; 
+    position: absolute;
+    top: 50%;
+    left: 50%;
     transform: translate(-50%, -50%);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
 }
@@ -130,45 +136,113 @@
     margin-top: 2%;
 }
 
+@media(max-width:1340px) {
+    .modalBody {
+        width: 50%;
+        padding: 3%
+    }
+
+    .modalClose {
+        margin-bottom: -9%;
+    }
+}
+
+@media(max-width:1115px) {
+    .modalForm label {
+        font-size: 17px;
+    }
+
+    .modalForm div label {
+        font-size: 15px;
+    }
+
+}
+
+@media (max-width: 1035px) {
+    .infoSection {
+        max-width: 100%;
+        padding: 2% 5%;
+        margin-top: 4%;
+    }
+
+    .modalSubmit {
+        display: flex;
+        text-align: center;
+        justify-content: center;
+        margin-right: 5%;
+        font-size: 80%;
+        min-width: 25px;
+        padding: 2%;
+    }
+}
+
+@media(max-width:870px) {
+    .modalForm div label {
+        font-size: 13px;
+    }
+
+}
+
 @media (max-width: 768px) {
-  .modalBody {
-    width: 90%;
-    padding: 15px;
-  }
+    .modalBody {
+        width: 80%;
+        padding: 5% 5%;
+        justify-content: center;
+        align-items: center;
+    }
 
-  .modalInputSpongeAmount {
-    width: 100%;
-    font-size: 1rem;
-  }
+    .modalForm {
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+    }
 
-  .modalLabelInputImage {
-    width: 100%;
-    height: 20dvh;
-    font-size: 0.9rem;
-  }
+    .modalForm div label {
+        min-width: 90%;
+    }
 
-  .modalImagePreviewContainer {
-    width: 100%;
+    .modalForm div {
+        min-width: 70%;
+    }
 
-    img {
-      max-width: 80%;
+    .modalInputSpongeAmount {
+        margin-left: 0%;
+        width: 100%;
+        font-size: 1rem;
     }
 
-    button {
-      font-size: 0.9rem;
-      padding: 2%;
+    .modalLabelInputImage {
+        width: 100%;
+        height: 20dvh;
+        font-size: 0.9rem;
     }
-  }
 
-  .modalSubmit {
-    width: 100%;
-    font-size: 1rem;
-    padding: 10px;
-  }
+    .modalInputImage {
+        width: 90%;
+    }
 
-  .modalForm label,
-  .modalImagePreviewContainer p {
-    font-size: 1rem;
-    text-align: center;
-  }
+    .modalImagePreviewContainer {
+        width: 100%;
+
+        img {
+            max-width: 80%;
+        }
+
+        button {
+            font-size: 0.9rem;
+            padding: 2%;
+        }
+    }
+
+    .modalSubmit {
+        display: flex;
+        width: 50%;
+        margin-left: 5%;
+        font-size: 1rem;
+    }
 }
+
+.modalForm label,
+.modalImagePreviewContainer p {
+    font-size: 1rem;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/depositos/index.jsx b/frontend/src/pages/depositos/index.jsx
index 4819731..de04757 100644
--- a/frontend/src/pages/depositos/index.jsx
+++ b/frontend/src/pages/depositos/index.jsx
@@ -2,182 +2,247 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import Header from "../../components/Header";
 import Footer from "../../components/Footer";
-import depositos from './depositos.module.scss'
+import depositos from "./depositos.module.scss";
 import { MdClose } from "react-icons/md";
-import api from "../../api.js"
-import { toast } from "react-toastify"
+import api from "../../api.js";
+import { toast } from "react-toastify";
 import { useLocation } from "react-router-dom";
 
 const Depositos = () => {
-
-    const { id: idUrl } = useParams();
-    const loc = useLocation();
-
-    let id = null;
-
-    if (loc.state?.id) {
-        id = loc.state.id; // prioridade para o que veio no state
-    } else {
-        id = idUrl; // se não tiver no state, pega da URL
-    }
-
-    console.log(id)
-    
-    const [pointData, setPointData] = useState({
-        name: "",
-        location: "",
-        amountSponges: 0,
-        capacitySponges: 0,
-        isInactive: 0
-    })
-    const [depositAmount, setDepositAmount] = useState(0);
-    const [, setImageURL] = useState("");
-    const [preview, setPreview] = useState(null);
-    const [imageFile, setImageFile] = useState(null); // arquivo real
-    const [modalRegisterDeposit, setModalRegisterDeposit] = useState(false);
-
-    const nav = useNavigate();
-
-    const handleClose = () => {
-        setImageURL(null);
-        setPreview(null);
-        setDepositAmount(0);
-        setModalRegisterDeposit(false);
-    }
-
-    const handleImageUpload = (event) => {
-        const file = event.target.files[0];
-        if (file) {
-            setImageFile(file); // guarda o arquivo real
-            setPreview(URL.createObjectURL(file)); // gera preview
-        }
-    }
-
-    const handleImageDeletion = () => {
-        setPreview(null);
-        setImageURL(null);
-    }
-
-    async function getCollectionPointData() {
-        try {
-            let req = await api.get(`/collectionPoint/${id}`);
-
-            if(req.status == 200) {
-                setPointData({
-                    name: req.data.name,
-                    location: req.data.location,
-                    amountSponges: req.data.amountSponges,
-                    capacitySponges: req.data.capacitySponges,
-                    isInactive: req.data.isInactive
-                })
-            }
-        } catch(error) {
-            
-            console.log(error);
-            if(error.response){
-                setTimeout(()=>{
-                toast.error(error.response.data.message);
-                },1000);
-            }else{
-                setTimeout(()=>{
-                toast.error('Servidor não respondeu. Verifique sua conexão ou tente mais tarde.');
-                },1000);
-            }
-        }
+  const { id: idUrl } = useParams();
+  const loc = useLocation();
+
+  let id = null;
+
+  if (loc.state?.id) {
+    id = loc.state.id; // prioridade para o que veio no state
+  } else {
+    id = idUrl; // se não tiver no state, pega da URL
+  }
+
+  console.log(id);
+
+  const [pointData, setPointData] = useState({
+    name: "",
+    location: "",
+    amountSponges: 0,
+    capacitySponges: 0,
+    isInactive: 0,
+  });
+  const [depositAmount, setDepositAmount] = useState(0);
+  const [, setImageURL] = useState("");
+  const [preview, setPreview] = useState(null);
+  const [imageFile, setImageFile] = useState(null); // arquivo real
+  const [modalRegisterDeposit, setModalRegisterDeposit] = useState(false);
+
+  const nav = useNavigate();
+
+  const handleClose = () => {
+    setImageURL(null);
+    setPreview(null);
+    setDepositAmount(0);
+    setModalRegisterDeposit(false);
+  };
+
+  const handleImageUpload = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      setImageFile(file); // guarda o arquivo real
+      setPreview(URL.createObjectURL(file)); // gera preview
     }
-
-    const handleSubmit = () => {
-        if(depositAmount >= 1) {
-            registerDeposit();
-        } else toast.error("Insira um valor de depósito válido!")
+  };
+
+  const handleImageDeletion = () => {
+    setPreview(null);
+    setImageURL(null);
+  };
+
+  async function getCollectionPointData() {
+    try {
+      let req = await api.get(`/collectionPoint/${id}`);
+
+      if (req.status == 200) {
+        setPointData({
+          name: req.data.name,
+          location: req.data.location,
+          amountSponges: req.data.amountSponges,
+          capacitySponges: req.data.capacitySponges,
+          isInactive: req.data.isInactive,
+        });
+      }
+    } catch (error) {
+      console.log(error);
+      if (error.response) {
+        setTimeout(() => {
+          toast.error(error.response.data.message);
+        }, 1000);
+      } else {
+        setTimeout(() => {
+          toast.error(
+            "Servidor não respondeu. Verifique sua conexão ou tente mais tarde."
+          );
+        }, 1000);
+      }
     }
-
-    async function registerDeposit() {  
-        const formData = new FormData();
-        formData.append("depositData", JSON.stringify({ amountSponges: depositAmount }));
-        formData.append('comprovante', imageFile);
-
-        try {
-            
-            let req = await api.post(`/deposit/${id}`, formData );
-
-                if(req.status == 201){
-                    toast.success("Depósito registrado com sucesso!");
-                    setTimeout(() => {  
-                        nav('/home');
-                    }, 2000)
-                }
-        } catch(error) {
-            if(error.response){
-                setTimeout(()=>{
-                toast.error(error.response.data.message);
-            },1000);
-            }else{
-                setTimeout(()=>{
-                toast.error('Servidor não respondeu. Verifique sua conexão ou tente mais tarde.');
-            },1000);
-            }
-            
-        }
+  }
+
+  const handleSubmit = () => {
+    if (depositAmount >= 1) {
+      registerDeposit();
+    } else toast.error("Insira um valor de depósito válido!");
+  };
+
+  async function registerDeposit() {
+    const formData = new FormData();
+    formData.append(
+      "depositData",
+      JSON.stringify({ amountSponges: depositAmount })
+    );
+    formData.append("comprovante", imageFile);
+
+    try {
+      let req = await api.post(`/deposit/${id}`, formData);
+
+      if (req.status == 201) {
+        toast.success("Depósito registrado com sucesso!");
+        setTimeout(() => {
+          nav("/home");
+        }, 2000);
+      }
+    } catch (error) {
+      if (error.response) {
+        setTimeout(() => {
+          toast.error(error.response.data.message);
+        }, 1000);
+      } else {
+        setTimeout(() => {
+          toast.error(
+            "Servidor não respondeu. Verifique sua conexão ou tente mais tarde."
+          );
+        }, 1000);
+      }
     }
-
-    useEffect(() => {
-        getCollectionPointData();
-    },[])
-
-    return (
-        <>
-        <Header/>
-        <div className={depositos.body}>
-            <h1>Ponto de Coleta: {pointData.name}</h1>
-            <section className={depositos.infoSection}>
+  }
+
+  const validDigits = (text) => {
+    return text.replace(/[^0-9,]/g, "");
+  };
+
+  useEffect(() => {
+    getCollectionPointData();
+  }, []);
+
+  return (
+    <>
+      <Header />
+      <div className={depositos.body}>
+        <h1>Ponto de Coleta: {pointData.name}</h1>
+        <section className={depositos.infoSection}>
+          <div>
+            <p>Este ponto de coleta está localizado em {pointData.location}.</p>
+            <p>
+              Obs: Lembre-se de conferir se este é realmente o ponto de coleta
+              que você está.
+            </p>
+
+            <p className={depositos.status}>
+              Situação: {pointData.isInactive ? "Inativo" : "Ativo"}
+            </p>
+          </div>
+
+          {pointData.amountSponges == pointData.capacitySponges ? (
+            <p className={depositos.pointFullError}>
+              Este ponto de coleta está cheio!
+            </p>
+          ) : (
+            <button
+              className={depositos.btnRegisterDeposit}
+              onClick={() => setModalRegisterDeposit(true)}
+            >
+              Registrar Depósito
+            </button>
+          )}
+        </section>
+      </div>
+
+      {modalRegisterDeposit && (
+        <div className={depositos.modalOverlay}>
+          <div className={depositos.modalBody}>
+            <form className={depositos.modalForm}>
+              <button
+                type="button"
+                className={depositos.modalClose}
+                onClick={() => handleClose()}
+              >
+                <MdClose color="black" size={25} />
+              </button>
+
+              <label>Quantidade de esponjas:</label>
+              <input
+                className={depositos.modalInputSpongeAmount}
+                type="text"
+                inputMode="numeric"
+                value={depositAmount}
+                placeholder="Mínimo de 1 unidade"
+                onChange={(event) => {
+                  const num = validDigits(event.target.value);
+                  const maxValue =
+                    pointData.capacitySponges - pointData.amountSponges;
+
+                  if (num > maxValue) {
+                    // setDepositAmount(maxValue);
+                    toast.error(
+                      "Depósito inválido, pois ultrapassará o limite de esponjas."
+                    );
+                  } else {
+                    setDepositAmount(num);
+                  }
+                }}
+              ></input>
+              <label>Comprovante de depósito: (opcional)</label>
+              {preview ? (
+                <div className={depositos.modalImagePreviewContainer}>
+                  <p>Pré-visualização: </p>
+                  <img src={preview} alt="Pré-visualização" />
+
+                  <button type="button" onClick={() => handleImageDeletion()}>
+                    Excluir
+                  </button>
+                </div>
+              ) : (
                 <div>
-                    <p>Este ponto de coleta está localizado em {pointData.location}.</p>
-                    <p>Obs: Lembre-se de conferir se este é realmente o ponto de coleta que você está.</p>
-
-                    <p className={depositos.status}>Situação: {pointData.isInactive ? "Inativo" : "Ativo"}</p>
+                  <label
+                    htmlFor="inputImage"
+                    className={depositos.modalLabelInputImage}
+                  >
+                    Insira sua imagem aqui!
+                  </label>
+                  <input
+                    className={depositos.modalInputImage}
+                    type="file"
+                    id="inputImage"
+                    accept="image/*"
+                    capture="environment"
+                    onChange={(event) => handleImageUpload(event)}
+                  ></input>
                 </div>
-
-                {pointData.amountSponges == pointData.capacitySponges ? (
-                    <p className={depositos.pointFullError}>Este ponto de coleta está cheio!</p>
-                ) : (
-                    <button className={depositos.btnRegisterDeposit} onClick={() => setModalRegisterDeposit(true)}>Registrar Depósito</button>
-                )}
-            </section>
+              )}
+
+              <button
+                className={depositos.modalSubmit}
+                type="button"
+                onClick={() => handleSubmit()}
+              >
+                Enviar
+              </button>
+            </form>
+          </div>
         </div>
+      )}
 
-        {modalRegisterDeposit &&
-            <div className={depositos.modalOverlay}>
-                <div className={depositos.modalBody}>
-                    <form className={depositos.modalForm}>
-                        <button type="button" className={depositos.modalClose} onClick={() => handleClose()}><MdClose color="black" size={25}/></button>
-
-                        <label>Quantidade de esponjas:</label>
-                        <input className={depositos.modalInputSpongeAmount} type="number" min="1" max={pointData.capacitySponges - pointData.amountSponges} onChange={(event) => setDepositAmount(event.target.value)}></input>
-                        <label>Comprovante de depósito: (opcional)</label>
-                        {preview ? (
-                            <div className={depositos.modalImagePreviewContainer}>
-                                <p>Pré-visualização: </p>
-                                <img src={preview} alt="Pré-visualização"/>
-
-                                <button type="button" onClick={() => handleImageDeletion()}>Excluir</button>
-                            </div>
-                        ) : (
-                            <div>
-                                <label htmlFor="inputImage" className={depositos.modalLabelInputImage}>Insira sua imagem aqui!</label>
-                                <input className={depositos.modalInputImage} type="file" id="inputImage" accept="image/*" capture="environment" onChange={(event) => handleImageUpload(event)}></input>
-                            </div>
-                        )}
-
-                        <button className={depositos.modalSubmit} type="button" onClick={() => handleSubmit()}>Enviar</button>
-                    </form>
-                </div>
-            </div>
-        }
-
-        <Footer/>
-        </>
-    )
-}
+      <Footer />
+    </>
+  );
+};
 
-export default Depositos;
\ No newline at end of file
+export default Depositos;

From 5b0d6f324ce2f7c8f7330dc2605aa9690baca5e8 Mon Sep 17 00:00:00 2001
From: VnszinN <vinicius.saidy@gmail.com>
Date: Mon, 18 Aug 2025 00:55:20 -0300
Subject: [PATCH 2/6] feat: list schelduled events at main page / fix: adjust
 CrowndfundingCard's properties

---
 .../CrowndfundindCard/CrowndfundingCard.jsx   | 169 ++++--
 frontend/src/pages/principal_Interna/Home.jsx | 500 ++++++++++--------
 2 files changed, 403 insertions(+), 266 deletions(-)

diff --git a/frontend/src/components/CrowndfundindCard/CrowndfundingCard.jsx b/frontend/src/components/CrowndfundindCard/CrowndfundingCard.jsx
index 64e56be..faf988f 100644
--- a/frontend/src/components/CrowndfundindCard/CrowndfundingCard.jsx
+++ b/frontend/src/components/CrowndfundindCard/CrowndfundingCard.jsx
@@ -1,57 +1,130 @@
 import React from "react";
-import cardStyle from "./CrowndfundingCard.module.scss"
+import cardStyle from "./CrowndfundingCard.module.scss";
 import { PiStarFill } from "react-icons/pi";
 import { FaCalendarDays } from "react-icons/fa6";
 import { AiFillCloseSquare } from "react-icons/ai";
-import { FaUsers, FaMinusSquare,FaWindowClose,FaStar   } from "react-icons/fa";
+import { FaUsers, FaMinusSquare, FaWindowClose, FaStar } from "react-icons/fa";
 import { MdAccessTimeFilled, MdLocationOn } from "react-icons/md";
 
-function CrowndfundingCard(props){
+function CrowndfundingCard({
+  crownd,
+  name,
+  location,
+  date,
+  hour,
+  state,
+  meetingpoint,
+  estimatedDuration,
+}) {
+  let status =
+    state === "presente"
+      ? "presente"
+      : state === "analise"
+      ? "em_analise"
+      : "faltou";
 
-    let status = props.state === "presente" ? "presente" :
-        props.state === "analise" 
-        ? "em_analise" 
-        : "faltou";
-    return(
-        <>{ props.crownd ? 
-            <div className={cardStyle.container}>
-                <h1 className={cardStyle.titulo}>{props.num} esponjas</h1>
-                <div className={cardStyle.info}>
-                    <span className={cardStyle.infoSpan} > <MdLocationOn className={cardStyle.icon} /> {props.place}</span>
-                    <span className={cardStyle.infoSpan} > <FaCalendarDays className={cardStyle.icon} /> {props.date}</span>
-                    <span className={cardStyle.infoSpan} > <MdAccessTimeFilled className={cardStyle.icon} /> {props.hour}</span>
-                </div>
-                <FaUsers className={cardStyle.iconCard} />
-            </div>
-            :
-            <div className={`${cardStyle.container2} ${status === "presente" ? cardStyle.container_presente
-                : status === "em_analise" ? cardStyle.container_em_analise : cardStyle.container_faltou}`}>
-                <h1 className={`${status === "presente" ? cardStyle.titulo
-                        : cardStyle.titulo2}`}>{props.nome}</h1>
-                <div className={cardStyle.info}>
-                    <span className={`${status === "presente" ? cardStyle.infoSpan
-                        : cardStyle.infoSpan2}`} > <MdLocationOn className={`${status === "presente" ? cardStyle.presente
-                        : status === "em_analise" ? cardStyle.em_analise : cardStyle.faltou}`}/> {props.place}</span>
-                    <span className={`${status === "presente" ? cardStyle.infoSpan
-                        : cardStyle.infoSpan2}`} > <FaCalendarDays className={`${status === "presente" ? cardStyle.presente
-                        : status === "em_analise" ? cardStyle.em_analise : cardStyle.faltou}`}/> {props.date}</span>
-                    <span className={`${status === "presente" ? cardStyle.infoSpan
-                        : cardStyle.infoSpan2}`} > <MdAccessTimeFilled className={`${status === "presente" ? cardStyle.presente
-                        : status === "em_analise" ? cardStyle.em_analise : cardStyle.faltou}`}/> {props.duration}</span>
-                </div>
-                {
-                    status === "presente" ?
-                    <FaStar  className={cardStyle.iconCardStar} />
-                    : status === "em_analise" ?
-                    <FaMinusSquare  className={cardStyle.iconCard2}/>
-                    : <FaWindowClose className={cardStyle.iconCard2} />
-
-                }
-                
-            </div>
-        }
-        </>
-    )
+  return (
+    <>
+      {crownd ? (
+        <div className={cardStyle.container}>
+          <h1 className={cardStyle.titulo}>{name}</h1>
+          <div className={cardStyle.info}>
+            <span className={cardStyle.infoSpan}>
+              {" "}
+              <MdLocationOn className={cardStyle.icon} /> {location}
+            </span>
+            <span className={cardStyle.infoSpan}>
+              {" "}
+              <FaCalendarDays className={cardStyle.icon} /> {date}
+            </span>
+            <span className={cardStyle.infoSpan}>
+              {" "}
+              <MdAccessTimeFilled className={cardStyle.icon} /> {hour}
+            </span>
+          </div>
+          <FaUsers className={cardStyle.iconCard} />
+        </div>
+      ) : (
+        <div
+          className={`${cardStyle.container2} ${
+            status === "presente"
+              ? cardStyle.container_presente
+              : status === "em_analise"
+              ? cardStyle.container_em_analise
+              : cardStyle.container_faltou
+          }`}
+        >
+          <h1
+            className={`${
+              status === "presente" ? cardStyle.titulo : cardStyle.titulo2
+            }`}
+          >
+            {name}
+          </h1>
+          <div className={cardStyle.info}>
+            <span
+              className={`${
+                status === "presente" ? cardStyle.infoSpan : cardStyle.infoSpan2
+              }`}
+            >
+              {" "}
+              <MdLocationOn
+                className={`${
+                  status === "presente"
+                    ? cardStyle.presente
+                    : status === "em_analise"
+                    ? cardStyle.em_analise
+                    : cardStyle.faltou
+                }`}
+              />{" "}
+              {location}
+            </span>
+            <span
+              className={`${
+                status === "presente" ? cardStyle.infoSpan : cardStyle.infoSpan2
+              }`}
+            >
+              {" "}
+              <FaCalendarDays
+                className={`${
+                  status === "presente"
+                    ? cardStyle.presente
+                    : status === "em_analise"
+                    ? cardStyle.em_analise
+                    : cardStyle.faltou
+                }`}
+              />{" "}
+              {date}
+            </span>
+            <span
+              className={`${
+                status === "presente" ? cardStyle.infoSpan : cardStyle.infoSpan2
+              }`}
+            >
+              {" "}
+              <MdAccessTimeFilled
+                className={`${
+                  status === "presente"
+                    ? cardStyle.presente
+                    : status === "em_analise"
+                    ? cardStyle.em_analise
+                    : cardStyle.faltou
+                }`}
+              />{" "}
+              {estimatedDuration}
+            </span>
+          </div>
+          {status === "presente" ? (
+            <FaStar className={cardStyle.iconCardStar} />
+          ) : status === "em_analise" ? (
+            <FaMinusSquare className={cardStyle.iconCard2} />
+          ) : (
+            <FaWindowClose className={cardStyle.iconCard2} />
+          )}
+        </div>
+      )}
+    </>
+  );
 }
 
-export default CrowndfundingCard;
\ No newline at end of file
+export default CrowndfundingCard;
diff --git a/frontend/src/pages/principal_Interna/Home.jsx b/frontend/src/pages/principal_Interna/Home.jsx
index 8264d5c..1b43df6 100644
--- a/frontend/src/pages/principal_Interna/Home.jsx
+++ b/frontend/src/pages/principal_Interna/Home.jsx
@@ -14,16 +14,22 @@ import { toast } from "react-toastify";
 import { UserContext } from "../../components/Context/userContext";
 
 function Home() {
+  //Condicional para o conteúdo a ser apresentado
   const [esponge, setEsponge] = useState(false);
   const [muti, setMuti] = useState(false);
-  const [adress, setAdress] = useState({ street: '', lat: '', long: '' });
+  //info do mapa
+  const [adress, setAdress] = useState({ street: "", lat: "", long: "" });
+
+  //Informações de pontos, doações e mutirões
   const [point, setPoint] = useState([]);
   const [donations, setDonations] = useState([]);
+  const [events, setEvents] = useState([]);
+
   const { client, token } = useContext(UserContext);
   const [showAllDonations, setShowAllDonations] = useState(false);
   const [showAllPoints, setShowAllPoints] = useState(false);
 
-  const coletaSectionRef = useRef(null);  
+  const coletaSectionRef = useRef(null);
 
   function changePageEsponge(e) {
     e.preventDefault();
@@ -31,7 +37,7 @@ function Home() {
     setMuti(false);
     setTimeout(() => {
       coletaSectionRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, 100); 
+    }, 100);
   }
 
   /*function changePageMuti(e) {
@@ -39,99 +45,115 @@ function Home() {
     setEsponge(false);
     setMuti(true);
   }
+*/
 
-  const dados = [
-    {
-      idx: 1,
-      num: 20,
-      place: "Rua Gen. Canabarro - Maracanã",
-      date: "19/03/2025",
-      hour: "14:35",
-      state: "presente",
-    },
-    {
-      idx: 2,
-      num: 20,
-      place: "Rua Sambaetiba - Padre Miguel, n44",
-      date: "19/03/2025",
-      hour: "14:35",
-      state: "analise"
-    },
-    {
-      idx: 3,
-      num: 20,
-      place: "Norte Shopping",
-      date: "19/03/2025",
-      hour: "14:35",
-      state: "presente"
-    },
-    {
-      idx: 4,
-      num: 20,
-      place: "Rua Canabarro, n100",
-      date: "19/03/2025",
-      hour: "14:35",
-      state: "faltou"
-    },
-  ];*/
-
+  async function getEventsSchelduled() {
+    try {
+      const req = await api.get("/events/scheduled");
+      if (req.status === 200) {
+        setEvents(req.data);
+      }
+    } catch (e) {
+      if (e.response) {
+        setTimeout(() => {
+          toast.error(err.response.data.message);
+        }, 1000);
+      } else {
+        setTimeout(() => {
+          toast.error(
+            "Servidor não respondeu. Verifique sua conexão ou tente mais tarde."
+          );
+        }, 1000);
+      }
+    }
+  }
   async function dadosDeps() {
     try {
       const req = await api.get("/deposits");
-      
+
       if (req.status === 200) {
         setDonations(req.data);
       }
     } catch (err) {
-      if(err.response){
-        if(err.response.status === 404){
+      if (err.response) {
+        if (err.response.status === 404) {
           setTimeout(() => {
             //toast.info("Você ainda não fez nenhum depósito. Que tal começar agora e ajudar o planeta 🌍 ♻️", { autoClose: 3000 });
-        }, 1000);
-        }else{
+          }, 1000);
+        } else {
           setTimeout(() => {
             toast.error(err.response.data.message);
-        }, 1000);
+          }, 1000);
         }
-      }else{
+      } else {
         setTimeout(() => {
-          toast.error('Servidor não respondeu. Verifique sua conexão ou tente mais tarde.');
+          toast.error(
+            "Servidor não respondeu. Verifique sua conexão ou tente mais tarde."
+          );
         }, 1000);
       }
-      
     }
   }
 
   async function getColectData() {
     try {
-      const req = await api.get('/collectionPoints');
+      const req = await api.get("/collectionPoints");
+      console.log(await api.get("/collectionPoints"));
       setPoint(req.data);
     } catch (error) {
-      if(error.response){
-        if(error.response.status === 404){
+      if (error.response) {
+        if (error.response.status === 404) {
           //se o usuario nao tiver dados de coleta ele não mostra nada no toast
-        }else{
+        } else {
           setTimeout(() => {
             toast.error(error.response.data.message);
-        }, 1000);
+          }, 1000);
         }
-        
-
-      }else{
+      } else {
         setTimeout(() => {
-          toast.error('Servidor não respondeu. Verifique sua conexão ou tente mais tarde.');
+          toast.error(
+            "Servidor não respondeu. Verifique sua conexão ou tente mais tarde."
+          );
         }, 1000);
       }
     }
+    console.log(point);
   }
 
   useEffect(() => {
-    if(token){
+    if (token) {
       getColectData();
       dadosDeps();
+      getEventsSchelduled();
     }
   }, [token]);
 
+  const convertDate = (date) => {
+    const dateUTC = new Date(date);
+    dateUTC.setHours(dateUTC.getHours() + 3);
+
+    // Data no horário de Brasília
+    const brasiliaDate = dateUTC.toLocaleDateString("pt-BR", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      timeZone: "America/Sao_Paulo",
+    });
+
+    // Hora no horário de Brasília
+    const hour = dateUTC.toLocaleTimeString("pt-BR", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+      timeZone: "America/Sao_Paulo",
+    });
+    return { brasiliaDate, hour };
+  };
+  const parseDate = (str) => {
+    const [dia, mes, ano] = str.split("/");
+    return new Date(`${ano}-${mes}-${dia}`);
+  };
+
   return (
     <>
       <Header />
@@ -140,103 +162,114 @@ function Home() {
       </section>
       <img src="./Ondinhas.svg" className="separador" alt="Separador" />
       <section className="escolhas-section">
-        <h1 className="escolha-titulo"> Escolha o que deseja fazer a seguir:</h1>
+        <h1 className="escolha-titulo">
+          {" "}
+          Escolha o que deseja fazer a seguir:
+        </h1>
         <div className="escolha-buttons">
-          <button className="opcao1-escolha" onClick={changePageEsponge}> Depositar esponjas</button>
-          <button className="opcao2-escolha" onClick={()=>{toast.info("Tente novamente em breve!")}}> Participar de multirões</button>
+          <button className="opcao1-escolha" onClick={changePageEsponge}>
+            {" "}
+            Depositar esponjas
+          </button>
+          <button
+            className="opcao2-escolha"
+            onClick={() => {
+              toast.info("Tente novamente em breve!");
+            }}
+          >
+            {" "}
+            Participar de multirões
+          </button>
         </div>
       </section>
 
       {esponge && (
         <>
-        <section className="sectionCards">
-          <h1 className="sectionCards-titulo">Minhas doações recentes</h1>
-          <Grid2
-            container
-            rowSpacing={{ xs: 2, sm: 5, md: 10 }}
-            columnSpacing={{ xs: 1, sm: 5, md: 10 }}
-          >
-            {donations?.deposits?.length > 0 ? (
-              <>
-                {(showAllDonations
-                  ? donations.deposits
-                  : donations.deposits.slice(0, 4)
-                ).map((dado) => {
-                
-                const dateUTC = new Date(dado.created_at);
-
-                // Data no horário de Brasília
-                const brasiliaDate = dateUTC.toLocaleDateString('pt-BR', {
-                  day: '2-digit',
-                  month: '2-digit',
-                  year: 'numeric',
-                  timeZone: 'America/Sao_Paulo',
-                });
-
-                // Hora no horário de Brasília
-                const hour = dateUTC.toLocaleTimeString('pt-BR', {
-                  hour: '2-digit',
-                  minute: '2-digit',
-                  hour12: false,
-                  timeZone: 'America/Sao_Paulo'
-                });
-
-                const location = point.find((p) => p.id === dado.collectionPointId);
+          <section className="sectionCards">
+            <h1 className="sectionCards-titulo">Minhas doações recentes</h1>
+            <Grid2
+              container
+              rowSpacing={{ xs: 2, sm: 5, md: 10 }}
+              columnSpacing={{ xs: 1, sm: 5, md: 10 }}
+            >
+              {donations?.deposits?.length > 0 ? (
+                <>
+                  {(showAllDonations
+                    ? donations.deposits
+                    : donations.deposits.slice(0, 4)
+                  ).map((dado) => {
+                    const { brasiliaDate, hour } = convertDate(dado.created_at);
+
+                    const location = point.find(
+                      (p) => p.id === dado.collectionPointId
+                    );
+
+                    return (
+                      <DonationCard
+                        key={dado.id}
+                        donate={true}
+                        num={dado.amountSponges}
+                        state={dado.status}
+                        image={dado.imageURL}
+                        place={
+                          location
+                            ? location.location
+                            : "Endereço não disponível"
+                        }
+                        date={brasiliaDate}
+                        hour={hour}
+                      />
+                    );
+                  })}
+                </>
+              ) : (
+                <p>Nenhuma doação encontrada.</p>
+              )}
+            </Grid2>
 
-                  return (
-                    <DonationCard
-                      key={dado.id}
-                      donate={true}
-                      num={dado.amountSponges}
-                      state={dado.status}
-                      image={dado.imageURL}
-                      place={location ? location.location : "Endereço não disponível"}
-                      date={brasiliaDate}
-                      hour={hour}
-                    />
-                  );
-                })}
-              </>
-            ) : (
-              <p>Nenhuma doação encontrada.</p>
+            {donations?.deposits?.length > 4 && (
+              <div className="ver-mais-wrapper">
+                <button
+                  className="ver-mais-btn"
+                  onClick={() => setShowAllDonations(!showAllDonations)}
+                >
+                  {showAllDonations ? "Ver menos" : "Ver tudo"}
+                </button>
+              </div>
             )}
-          </Grid2>
-
-          {donations?.deposits?.length > 4 && (
-            <div className="ver-mais-wrapper">
-              <button className="ver-mais-btn" onClick={() => setShowAllDonations(!showAllDonations)}>
-                {showAllDonations ? "Ver menos" : "Ver tudo"}
-              </button>
-            </div>
-          )}
-        </section>
-
-
-        <section ref={coletaSectionRef} className="sectionCards">
-          <h1 className="sectionCards-titulo">Pontos de Coleta</h1>
-          <Grid2 container rowSpacing={{ xs: 2, sm: 5, md: 10 }} columnSpacing={{ xs: 1, sm: 5, md: 10 }}>
-            {(showAllPoints ? point : point.slice(0, 4)).map((dado) => (
-              <DonationCard
-                key={dado.id}
-                id={dado.id}
-                nome={dado.name}
-                place={dado.location}
-                state={dado.isInactive}
-                setLocation={setAdress}
-                open={true}
-              />
-            ))}
-          </Grid2>
+          </section>
 
-          {point.length > 4 && (
-            <div className="ver-mais-wrapper">
-              <button className="ver-mais-btn" onClick={() => setShowAllPoints(!showAllPoints)}>
-                {showAllPoints ? "Ver menos" : "Ver tudo"}
-              </button>
-            </div>
-          )}
-        </section>
+          <section ref={coletaSectionRef} className="sectionCards">
+            <h1 className="sectionCards-titulo">Pontos de Coleta</h1>
+            <Grid2
+              container
+              rowSpacing={{ xs: 2, sm: 5, md: 10 }}
+              columnSpacing={{ xs: 1, sm: 5, md: 10 }}
+            >
+              {(showAllPoints ? point : point.slice(0, 4)).map((dado) => (
+                <DonationCard
+                  key={dado.id}
+                  id={dado.id}
+                  nome={dado.name}
+                  place={dado.location}
+                  state={dado.isInactive}
+                  setLocation={setAdress}
+                  open={true}
+                />
+              ))}
+            </Grid2>
 
+            {point.length > 4 && (
+              <div className="ver-mais-wrapper">
+                <button
+                  className="ver-mais-btn"
+                  onClick={() => setShowAllPoints(!showAllPoints)}
+                >
+                  {showAllPoints ? "Ver menos" : "Ver tudo"}
+                </button>
+              </div>
+            )}
+          </section>
 
           <section id="map" className="section_map">
             <Mapa location={adress} />
@@ -244,25 +277,44 @@ function Home() {
         </>
       )}
 
-      {/**
-       * 
-       *       {muti && (
+      {muti && (
         <>
-          <section className="sectionCards">
+          {/* <section className="sectionCards">
             <h1 className="sectionCards-titulo"> Minhas Inscrições</h1>
             <Grid2 container rowSpacing={{ xs: 2, sm: 5, md: 10 }} columnSpacing={{ xs: 1, sm: 5, md: 10 }}>
               {dados.map((dado) => (
                 <CrowndfundingCard key={dado.idx} state={dado.state} nome={dado.num} place={dado.place} date={dado.date} duration={dado.hour} />
               ))}
             </Grid2>
-          </section>
+          </section> */}
 
           <section className="sectionCards">
             <h1 className="sectionCards-titulo"> Próximos mutirões</h1>
-            <Grid2 container rowSpacing={{ xs: 2, sm: 5, md: 10 }} columnSpacing={{ xs: 1, sm: 5, md: 10 }}>
-              {dados.map((dado) => (
-                <CrowndfundingCard key={dado.idx} crownd={true} num={dado.num} place={dado.place} date={dado.date} hour={dado.hour} />
-              ))}
+            <Grid2
+              container
+              rowSpacing={{ xs: 2, sm: 5, md: 10 }}
+              columnSpacing={{ xs: 1, sm: 5, md: 10 }}
+            >
+              {events
+                ?.sort((a, b) => {
+                  const tzA = new Date(a.date);
+                  const tzB = new Date(b.date);
+                  return tzA - tzB;
+                })
+                .map((evento) => {
+                  const { brasiliaDate, hour } = convertDate(evento.date);
+
+                  return (
+                    <CrowndfundingCard
+                      key={evento.id}
+                      crownd={true}
+                      name={evento.name}
+                      location={evento.location}
+                      date={brasiliaDate}
+                      hour={hour}
+                    />
+                  );
+                })}
             </Grid2>
           </section>
 
@@ -272,77 +324,89 @@ function Home() {
         </>
       )}
 
-       */}
       {!esponge && !muti && (
         <>
-        <section className="sectionCards">
-          <h1 className="sectionCards-titulo">Minhas doações recentes</h1>
-              <Grid2
-                container
-                rowSpacing={{ xs: 2, sm: 5, md: 10 }}
-                columnSpacing={{ xs: 1, sm: 5, md: 10 }}
-              >
-                {donations?.deposits?.length > 0 ? (
-                  <>
-                    {(showAllDonations
-                      ? donations.deposits
-                      : donations.deposits.slice(0, 4)
-                    ).map((dado) => {
-                      const dateUTC = new Date(dado.created_at);
-
-                      // Data no horário de Brasília
-                      const brasiliaDate = dateUTC.toLocaleDateString('pt-BR', {
-                        day: '2-digit',
-                        month: '2-digit',
-                        year: 'numeric',
-                        timeZone: 'America/Sao_Paulo',
-                      });
-
-                      // Hora no horário de Brasília
-                      const hour = dateUTC.toLocaleTimeString('pt-BR', {
-                        hour: '2-digit',
-                        minute: '2-digit',
-                        hour12: false,
-                        timeZone: 'America/Sao_Paulo'
-                      });
-                      const location = point.find((p) => p.id === dado.collectionPointId);
-                      return (
-                        <DonationCard
-                          key={dado.id}
-                          donate={true}
-                          num={dado.amountSponges}
-                          state={dado.status}
-                          image={dado.imageURL}
-                          place={location ? location.location : "Endereço não disponível"}
-                          date={brasiliaDate}
-                          hour={hour}
-                        />
-                      );
-                    })}
-                  </>
-                ) : (
-                  <p>Nenhuma doação encontrada.</p>
-                )}
-              </Grid2>
-
-          {donations?.deposits?.length > 4 && (
-            <div className="ver-mais-wrapper">
-              <button className="ver-mais-btn" onClick={() => setShowAllDonations(!showAllDonations)}>
-                {showAllDonations ? "Ver menos" : "Ver tudo"}
-              </button>
-            </div>
-          )}
-        </section>
+          <section className="sectionCards">
+            <h1 className="sectionCards-titulo">Minhas doações recentes</h1>
+            <Grid2
+              container
+              rowSpacing={{ xs: 2, sm: 5, md: 10 }}
+              columnSpacing={{ xs: 1, sm: 5, md: 10 }}
+            >
+              {donations?.deposits?.length > 0 ? (
+                <>
+                  {(showAllDonations
+                    ? donations.deposits
+                    : donations.deposits.slice(0, 4)
+                  ).map((dado) => {
+                    const { brasiliaDate, hour } = convertDate(dado.created_at);
+                    const location = point.find(
+                      (p) => p.id === dado.collectionPointId
+                    );
+                    return (
+                      <DonationCard
+                        key={dado.id}
+                        donate={true}
+                        num={dado.amountSponges}
+                        state={dado.status}
+                        image={dado.imageURL}
+                        place={
+                          location
+                            ? location.location
+                            : "Endereço não disponível"
+                        }
+                        date={brasiliaDate}
+                        hour={hour}
+                      />
+                    );
+                  })}
+                </>
+              ) : (
+                <p>Nenhuma doação encontrada.</p>
+              )}
+            </Grid2>
 
+            {donations?.deposits?.length > 4 && (
+              <div className="ver-mais-wrapper">
+                <button
+                  className="ver-mais-btn"
+                  onClick={() => setShowAllDonations(!showAllDonations)}
+                >
+                  {showAllDonations ? "Ver menos" : "Ver tudo"}
+                </button>
+              </div>
+            )}
+          </section>
 
-          {/**<section className="sectionCards">
+          <section className="sectionCards">
             <h1 className="sectionCards-titulo"> Próximos mutirões</h1>
-            <Grid2 container rowSpacing={{ xs: 2, sm: 5, md: 10 }} columnSpacing={{ xs: 1, sm: 5, md: 10 }}>
-              {dados.map((dado) => (
-                <CrowndfundingCard key={dado.idx} crownd={true} num={dado.num} place={dado.place} date={dado.date} hour={dado.hour} />
-              ))}
+            <Grid2
+              container
+              rowSpacing={{ xs: 2, sm: 5, md: 10 }}
+              columnSpacing={{ xs: 1, sm: 5, md: 10 }}
+            >
+              {events
+                ?.sort((a, b) => {
+                  const tzA = new Date(a.date).getTime();
+                  const tzB = new Date(b.date).getTime();
+                  return tzA - tzB;
+                })
+                .map((evento) => {
+                  const { brasiliaDate, hour } = convertDate(evento.date);
+
+                  return (
+                    <CrowndfundingCard
+                      key={evento.id}
+                      crownd={true}
+                      name={evento.name}
+                      location={evento.location}
+                      date={brasiliaDate}
+                      hour={hour}
+                    />
+                  );
+                })}
             </Grid2>
-          </section> */}
+          </section>
         </>
       )}
 

From 2807cb7e1c018d3e7b6efbf24c1cb1aa5e1f3829 Mon Sep 17 00:00:00 2001
From: VnszinN <vinicius.saidy@gmail.com>
Date: Tue, 19 Aug 2025 23:02:32 -0300
Subject: [PATCH 3/6] feat: display schelduled events in calendar

---
 frontend/src/components/Calendar/Calendar.jsx | 374 ++++++++++--------
 frontend/src/pages/principal_Interna/Home.jsx |  17 +-
 2 files changed, 205 insertions(+), 186 deletions(-)

diff --git a/frontend/src/components/Calendar/Calendar.jsx b/frontend/src/components/Calendar/Calendar.jsx
index 9e50333..0b83655 100644
--- a/frontend/src/components/Calendar/Calendar.jsx
+++ b/frontend/src/components/Calendar/Calendar.jsx
@@ -1,197 +1,221 @@
-import React,{useState, useEffect} from "react";
-import { Calendar, dateFnsLocalizer, momentLocalizer } from 'react-big-calendar';
-import { format, parse, startOfWeek, getDay} from 'date-fns';
-import ptBR from 'date-fns/locale/pt-BR';
+import React, { useState, useEffect } from "react";
+import {
+  Calendar,
+  dateFnsLocalizer,
+  momentLocalizer,
+} from "react-big-calendar";
+import { format, parse, startOfWeek, getDay } from "date-fns";
+import ptBR from "date-fns/locale/pt-BR";
 import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
 import "react-big-calendar/lib/css/react-big-calendar.css";
 import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
-import './Calendar.scss';
-import moment from 'moment';
-import 'moment/locale/pt-br';
-
+import "./Calendar.scss";
+import moment from "moment";
+import "moment/locale/pt-br";
 
 const DragAndDropCalendar = withDragAndDrop(Calendar);
 
-
 const locales = {
-    'pt-BR': ptBR, 
-  };
+  "pt-BR": ptBR,
+};
 
 const localizer = dateFnsLocalizer({
-    format,
-    parse,
-    startOfWeek: () => startOfWeek(new Date(), { locale: ptBR }),
-    getDay,
-    locales,
-  });
+  format,
+  parse,
+  startOfWeek: () => startOfWeek(new Date(), { locale: ptBR }),
+  getDay,
+  locales,
+});
+
+function Calendario({ eventos }) {
+  const events = eventos.map((evento) => {
+    const [strData, strHora] = evento.date.split("T");
+    const [year, month, day] = strData.split("-").map(Number);
+    const [hour, minute] = strHora.split(":").map(Number);
+
+    const dateStart = new Date(year, month - 1, day, hour, minute);
+
+    // Cálculo da duração em horas:minutos
+    const [durHour, durMin] = evento.estimatedDuration.split(":").map(Number);
 
+    const dateEnd = new Date(dateStart);
+    dateEnd.setHours(dateEnd.getHours() + durHour);
+    dateEnd.setMinutes(dateEnd.getMinutes() + durMin);
 
-function Calendario(){
+    const color = ["#2ECC71", "#3498DB", "#1ABC9C", "#A569BD"];
 
-    const [eventos, setEventos] = useState([{
-        id:1,
-        title: "Mutirão das esponjas",
-        start: new Date(2025,2,26,10,0),
-        end: new Date(2025,2,26,15,0),
-        desc: "Primeiro mutirão",
-        color: "#195D39",
-        tipo: "Atividade",
+    let idx = Math.floor(Math.random() * color.length);
+
+    return {
+      title: evento.name,
+      start: dateStart,
+      end: dateEnd,
+      desc: `Localização: ${evento.location}`,
+      // color: "#195D39",
+      color: color[idx],
+    };
+  });
+
+  const eventStyle = (e) => ({
+    style: {
+      backgroundColor: e.color,
     },
-    {
-        id:2,
-        title: "Esponjas do bob",
-        start: new Date(2025,2,26,10,0),
-        end: new Date(2025,2,26,15,0),
-        desc: "Segundo mutirão",
-        color: "#195D39",
-        tipo: "Atividade",
-    }
-    ])
-
-    const eventStyle = (e) => ({
-        style:{
-            backgroundColor: e.color
-        },
-    })
-    const [viewAtual, setViewAtual] = useState('month');
-    const [dataAtual, setDataAtual] = useState(new Date());
-    
-     // Força sincronização com a view inicial
+  });
+  const [viewAtual, setViewAtual] = useState("month");
+  const [dataAtual, setDataAtual] = useState(new Date());
+
+  // Força sincronização com a view inicial
   useEffect(() => {
-    setViewAtual('month');
+    setViewAtual("month");
   }, []);
 
-    return(
-        <div className="calendario">
-            <DragAndDropCalendar
-            culture="pt-BR"
-            defaultDate={moment().toDate()}
-            view={viewAtual}
-            onView={setViewAtual}
-            date={dataAtual}
-            onNavigate={setDataAtual}
-            // onNavigate={(novaData) => setDataAtual(novaData)}
-            // defaultView='month'
-            events={eventos}
-            startAccessor="start"
-            endAccessor="end"
-            localizer={localizer}
-            resizable
-            components={{
-                toolbar: props => (
-                    <CustomTollbar
-                      {...props}
-                      viewAtual={viewAtual}
-                      setViewAtual={setViewAtual}
-                      dataAtual={dataAtual}
-                      setDataAtual={setDataAtual}
-                    />
-                  )
-            }}
-            className="calendar"
-            eventPropGetter={eventStyle}
+  return (
+    <div className="calendario">
+      <DragAndDropCalendar
+        culture="pt-BR"
+        defaultDate={moment().toDate()}
+        view={viewAtual}
+        onView={setViewAtual}
+        date={dataAtual}
+        onNavigate={setDataAtual}
+        // onNavigate={(novaData) => setDataAtual(novaData)}
+        // defaultView='month'
+        events={events}
+        startAccessor="start"
+        endAccessor="end"
+        localizer={localizer}
+        resizable
+        components={{
+          toolbar: (props) => (
+            <CustomTollbar
+              {...props}
+              viewAtual={viewAtual}
+              setViewAtual={setViewAtual}
+              dataAtual={dataAtual}
+              setDataAtual={setDataAtual}
             />
-        </div>
-    )
-
+          ),
+        }}
+        className="calendar"
+        eventPropGetter={eventStyle}
+      />
+    </div>
+  );
 }
 
-const CustomTollbar = ({label, views, viewAtual,  setViewAtual, onNavigate, dataAtual, setDataAtual}) => {
-    const [itemText, setItemText]= useState('Mês');
-    const viewsItem= [
-        { label: "Mês", value: views[0]},
-        { label: "Semana", value: views[1]},
-        { label: "Dia", value: views[2]},
-        { label: "Agenda",value: views[3]}
-    ]
-
-    const handleViewChange = (view) => {
-        setViewAtual(view);
-        const selected = viewsItem.find(v => v.value === view);
-        setItemText(selected ? selected.label : '');
-      };
-    
-      useEffect(() => {
-        const selected = viewsItem.find(v => v.value === viewAtual);
-        setItemText(selected ? selected.label : '');
-      }, [viewAtual]);
-
-      const getUnidade = () => {
-        switch (viewAtual) {
-          case "month":
-            return "month";
-          case "week":
-            return "week";
-          case "day":
-          case "agenda":
-            return "day";
-          default:
-            return "month";
-        }
-      };
-    
-      const handleNavigate = (action) => {
-        const current = moment(dataAtual);
-        let novaData;
-    
-        switch (action) {
-          case "TODAY":
-            novaData = new Date();
-            break;
-          case "PREV":
-            novaData = current.subtract(1, getUnidade()).toDate();
-            break;
-          case "NEXT":
-            novaData = current.add(1, getUnidade()).toDate();
-            break;
-          default:
-            novaData = dataAtual;
-        }
-    
-        setDataAtual(novaData);
-      };
-    
-    
-      return (
-        <div className="toolbar-container">
-          <h1 className="mesAno">{label}</h1>
-          <div className="dirtop">
-            <div className="dropdown">
-              <button className="btn btn-secondary dropdown-toggle"
-                type="button"
-                id="dropdownMenuButton"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                {itemText}
-              </button>
-              <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                {viewsItem.map((view, index) => (
-                  <li key={index}>
-                    <button className="dropdown-item" onClick={() => handleViewChange(view.value)}>
-                      {view.label}
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            </div>
-            <div className="toolbar-navigation" style={{ marginLeft: "15px" }}>
-              <button
-                className="btn btn-secondary btn-ls mr-2 border-0"
-                onClick={() => handleNavigate('TODAY')}
-              >Hoje</button>
-              <button
-                className="btn btn-sm mr-2 text-secondary"
-                onClick={() => handleNavigate('PREV')}
-              ><i className="bi bi-caret-left"></i></button>
-              <button
-                className="btn btn-sm mr-2 text-secondary"
-                onClick={() => handleNavigate('NEXT')}
-              ><i className="bi bi-caret-right"></i></button>
-            </div>
-          </div>
+const CustomTollbar = ({
+  label,
+  views,
+  viewAtual,
+  setViewAtual,
+  onNavigate,
+  dataAtual,
+  setDataAtual,
+}) => {
+  const [itemText, setItemText] = useState("Mês");
+  const viewsItem = [
+    { label: "Mês", value: views[0] },
+    { label: "Semana", value: views[1] },
+    { label: "Dia", value: views[2] },
+    { label: "Agenda", value: views[3] },
+  ];
+
+  const handleViewChange = (view) => {
+    setViewAtual(view);
+    const selected = viewsItem.find((v) => v.value === view);
+    setItemText(selected ? selected.label : "");
+  };
+
+  useEffect(() => {
+    const selected = viewsItem.find((v) => v.value === viewAtual);
+    setItemText(selected ? selected.label : "");
+  }, [viewAtual]);
+
+  const getUnidade = () => {
+    switch (viewAtual) {
+      case "month":
+        return "month";
+      case "week":
+        return "week";
+      case "day":
+      case "agenda":
+        return "day";
+      default:
+        return "month";
+    }
+  };
+
+  const handleNavigate = (action) => {
+    const current = moment(dataAtual);
+    let novaData;
+
+    switch (action) {
+      case "TODAY":
+        novaData = new Date();
+        break;
+      case "PREV":
+        novaData = current.subtract(1, getUnidade()).toDate();
+        break;
+      case "NEXT":
+        novaData = current.add(1, getUnidade()).toDate();
+        break;
+      default:
+        novaData = dataAtual;
+    }
+
+    setDataAtual(novaData);
+  };
+
+  return (
+    <div className="toolbar-container">
+      <h1 className="mesAno">{label}</h1>
+      <div className="dirtop">
+        <div className="dropdown">
+          <button
+            className="btn btn-secondary dropdown-toggle"
+            type="button"
+            id="dropdownMenuButton"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+          >
+            {itemText}
+          </button>
+          <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            {viewsItem.map((view, index) => (
+              <li key={index}>
+                <button
+                  className="dropdown-item"
+                  onClick={() => handleViewChange(view.value)}
+                >
+                  {view.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="toolbar-navigation" style={{ marginLeft: "15px" }}>
+          <button
+            className="btn btn-secondary btn-ls mr-2 border-0"
+            onClick={() => handleNavigate("TODAY")}
+          >
+            Hoje
+          </button>
+          <button
+            className="btn btn-sm mr-2 text-secondary"
+            onClick={() => handleNavigate("PREV")}
+          >
+            <i className="bi bi-caret-left"></i>
+          </button>
+          <button
+            className="btn btn-sm mr-2 text-secondary"
+            onClick={() => handleNavigate("NEXT")}
+          >
+            <i className="bi bi-caret-right"></i>
+          </button>
         </div>
-      );
+      </div>
+    </div>
+  );
 };
 
-export default Calendario
\ No newline at end of file
+export default Calendario;
diff --git a/frontend/src/pages/principal_Interna/Home.jsx b/frontend/src/pages/principal_Interna/Home.jsx
index 1b43df6..cb90586 100644
--- a/frontend/src/pages/principal_Interna/Home.jsx
+++ b/frontend/src/pages/principal_Interna/Home.jsx
@@ -40,12 +40,11 @@ function Home() {
     }, 100);
   }
 
-  /*function changePageMuti(e) {
+  function changePageMuti(e) {
     e.preventDefault();
     setEsponge(false);
     setMuti(true);
   }
-*/
 
   async function getEventsSchelduled() {
     try {
@@ -149,11 +148,6 @@ function Home() {
     });
     return { brasiliaDate, hour };
   };
-  const parseDate = (str) => {
-    const [dia, mes, ano] = str.split("/");
-    return new Date(`${ano}-${mes}-${dia}`);
-  };
-
   return (
     <>
       <Header />
@@ -173,9 +167,10 @@ function Home() {
           </button>
           <button
             className="opcao2-escolha"
-            onClick={() => {
-              toast.info("Tente novamente em breve!");
-            }}
+            // onClick={() => {
+            //   toast.info("Tente novamente em breve!");
+            // }}
+            onClick={changePageMuti}
           >
             {" "}
             Participar de multirões
@@ -319,7 +314,7 @@ function Home() {
           </section>
 
           <section className="section_calendar">
-            <Calendar />
+            <Calendar eventos={events} />
           </section>
         </>
       )}

From 7dc48977eec0d452c5a098fd6014038cffa22181 Mon Sep 17 00:00:00 2001
From: VnszinN <vinicius.saidy@gmail.com>
Date: Wed, 20 Aug 2025 10:46:12 -0300
Subject: [PATCH 4/6] style: adjust calendar responsiveness

---
 frontend/src/components/Calendar/Calendar.jsx |   9 +-
 .../src/components/Calendar/Calendar.scss     | 135 +++++++++++++-----
 2 files changed, 110 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/Calendar/Calendar.jsx b/frontend/src/components/Calendar/Calendar.jsx
index 0b83655..4a05645 100644
--- a/frontend/src/components/Calendar/Calendar.jsx
+++ b/frontend/src/components/Calendar/Calendar.jsx
@@ -168,7 +168,9 @@ const CustomTollbar = ({
 
   return (
     <div className="toolbar-container">
-      <h1 className="mesAno">{label}</h1>
+      <h1 className="mesAno">
+        {label.charAt(0).toUpperCase() + label.slice(1)}
+      </h1>
       <div className="dirtop">
         <div className="dropdown">
           <button
@@ -193,20 +195,23 @@ const CustomTollbar = ({
             ))}
           </ul>
         </div>
-        <div className="toolbar-navigation" style={{ marginLeft: "15px" }}>
+        <div className="toolbar-navigation" style={{ marginLeft: "10%" }}>
           <button
+            id="today_config"
             className="btn btn-secondary btn-ls mr-2 border-0"
             onClick={() => handleNavigate("TODAY")}
           >
             Hoje
           </button>
           <button
+            id="prev_config"
             className="btn btn-sm mr-2 text-secondary"
             onClick={() => handleNavigate("PREV")}
           >
             <i className="bi bi-caret-left"></i>
           </button>
           <button
+            id="next_config"
             className="btn btn-sm mr-2 text-secondary"
             onClick={() => handleNavigate("NEXT")}
           >
diff --git a/frontend/src/components/Calendar/Calendar.scss b/frontend/src/components/Calendar/Calendar.scss
index e7bdb6d..b8b29dd 100644
--- a/frontend/src/components/Calendar/Calendar.scss
+++ b/frontend/src/components/Calendar/Calendar.scss
@@ -1,10 +1,11 @@
-.calendario{
+.calendario {
     height: 90vh;
     width: 100vw;
     // background-color: #262626;
     margin-bottom: 5%;
 }
-.calendar{
+
+.calendar {
     margin: 5% 5%;
     padding: 1%;
     // height: 60vh;
@@ -14,96 +15,101 @@
     border-radius: 4px;
 }
 
-.calendar button{
+.calendar button {
     // color:#c2c2c2;
 }
+
 /*header modificado*/
-.toolbar-container{
+.toolbar-container {
     display: flex;
     height: 12vh;
     align-items: center;
     padding-left: 50px;
 }
-.mesAno{
+
+.mesAno {
     width: 50%;
     color: #f3f3f3;
     justify-content: flex-start;
 }
-.dirtop{
+
+.dirtop {
     width: 50%;
     justify-content: end;
     display: flex;
     align-items: center;
     padding-left: 5%;
 }
-.rbc-toolbar{
+
+.rbc-toolbar {
     height: 10vh;
     color: #bbb;
     font-size: 20px;
 }
 
-.rbc-btn-group > button{
+.rbc-btn-group>button {
     border: 0;
 }
 
-.rbc-toolbar button{
-    color:#cecece;
+.rbc-toolbar button {
+    color: #cecece;
     border: 1px solid #cccccc4f;
 }
 
-.rbc-toolbar button:active, 
-.rbc-toolbar button.rbc-active{
+.rbc-toolbar button:active,
+.rbc-toolbar button.rbc-active {
     background-color: #565656;
-    border-color:#bbbb
+    border-color: #bbbb
 }
 
 /*Corpo*/
 /*linhas*/
 
-.rbc-month-view{
+.rbc-month-view {
     border-color: #eeeeee5f;
 }
-.rbc-month-row + .rbc-month-row {
+
+.rbc-month-row+.rbc-month-row {
     border-color: #dddddd73;
 }
 
-.rbc-day-bg + .rbc-day-bg{
+.rbc-day-bg+.rbc-day-bg {
     border-color: #dddddd73;
 }
 
 /*Mês*/
 
-.rbc-header{
-    color:#eeeeeeee;
+.rbc-header {
+    color: #eeeeeeee;
     border-color: #dddddd73;
 }
 
-.rbc-header + .rbc-header{
+.rbc-header+.rbc-header {
     border-top: 0px;
     border-left: 0px;
     border-right: 0px;
     border-color: #dddddd73;
 }
 
-.rbc-off-range-bg{
-    background-color: #313131; 
+.rbc-off-range-bg {
+    background-color: #313131;
 }
 
-.rbc-today{
+.rbc-today {
     background-color: #1a1a1a;
 }
 
-.rbc-button-link{
+.rbc-button-link {
     margin: 2px;
     font-size: 15px;
     color: #eeeeeee5;
 }
 
-.rbc-off-range .rbc-button-link{
+.rbc-off-range .rbc-button-link {
     color: #eeeeee37;
 }
 
-.rbc-now .rbc-button-link{
+.rbc-now .rbc-button-link {
     background-color: #B1E3FA;
     color: #114C6D;
     border-radius: 2px;
@@ -112,28 +118,93 @@
     font-size: 16px;
 }
 
-.rbc-time-content, .rbc-time-content > .rbc-day-slot, 
-.rbc-timeslot-group, .rbc-time-slot{
+.rbc-time-content,
+.rbc-time-content>.rbc-day-slot,
+.rbc-timeslot-group,
+.rbc-time-slot {
     color: #bbb;
     border-color: #b0b0b036;
 }
 
-.rbc-day-slot .rbc-time-slot{
-    border-top:1px solid #c8c8c80a;
+.rbc-day-slot .rbc-time-slot {
+    border-top: 1px solid #c8c8c80a;
 }
 
 /*Agenda*/
 
-.rbc-agenda-content, .rbc-agenda-view{
+.rbc-agenda-content,
+.rbc-agenda-view {
     color: #aaa;
 }
 
-.rbc-agenda-date-cell, .rbc-agenda-time-cell{
+.rbc-agenda-date-cell,
+.rbc-agenda-time-cell {
     background-color: #262626;
 }
 
-.rbc-agenda-event-cell{
+.rbc-agenda-event-cell {
     border-radius: 20px;
     font-weight: bold;
     color: #e0e0e0;
 }
+
+.dropdown {
+    width: 30%;
+}
+
+.dropdown button {
+    width: 100%;
+}
+
+.toolbar-navigation {
+    width: 50%;
+    display: flex;
+    gap: 2%;
+}
+
+#today_config {
+    width: 60%;
+}
+
+#prev_config,
+#next_config {
+    width: 20%;
+}
+
+@media(max-width:760px) {
+    .dropdown {
+        width: 40%;
+    }
+
+    .toolbar-navigation {
+        margin-right: 5%;
+    }
+
+}
+
+@media(max-width:580px) {
+    .mesAno {
+        font-size: 20px;
+    }
+
+    .dropdown {
+        width: 50%;
+    }
+
+    .toolbar-navigation {
+
+        margin-right: 7%;
+    }
+
+}
+
+@media(max-width:580px) {
+    .mesAno {
+        position: relative;
+        left: -10%;
+    }
+
+    .dirtop {
+        width: 80%;
+    }
+}
\ No newline at end of file

From b05152496cc0aa172be9b449442c8db5f18bfcef Mon Sep 17 00:00:00 2001
From: dynorph <erickmsilva19@gmail.com>
Date: Wed, 20 Aug 2025 16:22:49 -0300
Subject: [PATCH 5/6] fix: restoring original event color on calendar,
 refactor: removing unnecessary code

---
 frontend/src/components/Calendar/Calendar.jsx | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Calendar/Calendar.jsx b/frontend/src/components/Calendar/Calendar.jsx
index 4a05645..5de0ddf 100644
--- a/frontend/src/components/Calendar/Calendar.jsx
+++ b/frontend/src/components/Calendar/Calendar.jsx
@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import {
   Calendar,
   dateFnsLocalizer,
-  momentLocalizer,
 } from "react-big-calendar";
 import { format, parse, startOfWeek, getDay } from "date-fns";
 import ptBR from "date-fns/locale/pt-BR";
@@ -35,24 +34,18 @@ function Calendario({ eventos }) {
 
     const dateStart = new Date(year, month - 1, day, hour, minute);
 
-    // Cálculo da duração em horas:minutos
     const [durHour, durMin] = evento.estimatedDuration.split(":").map(Number);
 
     const dateEnd = new Date(dateStart);
     dateEnd.setHours(dateEnd.getHours() + durHour);
     dateEnd.setMinutes(dateEnd.getMinutes() + durMin);
 
-    const color = ["#2ECC71", "#3498DB", "#1ABC9C", "#A569BD"];
-
-    let idx = Math.floor(Math.random() * color.length);
-
     return {
       title: evento.name,
       start: dateStart,
       end: dateEnd,
       desc: `Localização: ${evento.location}`,
-      // color: "#195D39",
-      color: color[idx],
+      color: "#195D39"
     };
   });
 
@@ -64,7 +57,6 @@ function Calendario({ eventos }) {
   const [viewAtual, setViewAtual] = useState("month");
   const [dataAtual, setDataAtual] = useState(new Date());
 
-  // Força sincronização com a view inicial
   useEffect(() => {
     setViewAtual("month");
   }, []);
@@ -108,7 +100,6 @@ const CustomTollbar = ({
   views,
   viewAtual,
   setViewAtual,
-  onNavigate,
   dataAtual,
   setDataAtual,
 }) => {

From 4b2143eed8c8b1373908a7a6e737038fc0c381e1 Mon Sep 17 00:00:00 2001
From: dynorph <erickmsilva19@gmail.com>
Date: Wed, 20 Aug 2025 17:00:28 -0300
Subject: [PATCH 6/6] refactor: clearer variable and function names, simpler
 toast error response logic

---
 frontend/src/pages/principal_Interna/Home.jsx | 102 +++++++-----------
 1 file changed, 37 insertions(+), 65 deletions(-)

diff --git a/frontend/src/pages/principal_Interna/Home.jsx b/frontend/src/pages/principal_Interna/Home.jsx
index cb90586..1fce3ec 100644
--- a/frontend/src/pages/principal_Interna/Home.jsx
+++ b/frontend/src/pages/principal_Interna/Home.jsx
@@ -14,39 +14,35 @@ import { toast } from "react-toastify";
 import { UserContext } from "../../components/Context/userContext";
 
 function Home() {
-  //Condicional para o conteúdo a ser apresentado
-  const [esponge, setEsponge] = useState(false);
-  const [muti, setMuti] = useState(false);
-  //info do mapa
-  const [adress, setAdress] = useState({ street: "", lat: "", long: "" });
-
-  //Informações de pontos, doações e mutirões
-  const [point, setPoint] = useState([]);
+  const [pointSection, setPointSection] = useState(false);
+  const [eventSection, setEventSection] = useState(false);
+  const [mapAddress, setMapAddress] = useState({ street: "", lat: "", long: "" });
+  const [points, setPoints] = useState([]);
   const [donations, setDonations] = useState([]);
   const [events, setEvents] = useState([]);
-
-  const { client, token } = useContext(UserContext);
   const [showAllDonations, setShowAllDonations] = useState(false);
   const [showAllPoints, setShowAllPoints] = useState(false);
 
+  const { client, token } = useContext(UserContext);
+
   const coletaSectionRef = useRef(null);
 
-  function changePageEsponge(e) {
+  function changePagePoint(e) {
     e.preventDefault();
-    setEsponge(true);
-    setMuti(false);
+    setPointSection(true);
+    setEventSection(false);
     setTimeout(() => {
       coletaSectionRef.current?.scrollIntoView({ behavior: "smooth" });
     }, 100);
   }
 
-  function changePageMuti(e) {
+  function changePageEvent(e) {
     e.preventDefault();
-    setEsponge(false);
-    setMuti(true);
+    setPointSection(false);
+    setEventSection(true);
   }
 
-  async function getEventsSchelduled() {
+  async function getScheduledEvents() {
     try {
       const req = await api.get("/events/scheduled");
       if (req.status === 200) {
@@ -66,7 +62,7 @@ function Home() {
       }
     }
   }
-  async function dadosDeps() {
+  async function getDeposits() {
     try {
       const req = await api.get("/deposits");
 
@@ -74,56 +70,32 @@ function Home() {
         setDonations(req.data);
       }
     } catch (err) {
-      if (err.response) {
-        if (err.response.status === 404) {
-          setTimeout(() => {
-            //toast.info("Você ainda não fez nenhum depósito. Que tal começar agora e ajudar o planeta 🌍 ♻️", { autoClose: 3000 });
-          }, 1000);
-        } else {
-          setTimeout(() => {
-            toast.error(err.response.data.message);
-          }, 1000);
-        }
-      } else {
-        setTimeout(() => {
-          toast.error(
-            "Servidor não respondeu. Verifique sua conexão ou tente mais tarde."
-          );
-        }, 1000);
+      if(!(err.response.status === 404)) {
+        toast.error(err.response?.data?.message || "Servidor não respondeu. Verifique sua conexão ou tente mais tarde.")
+        console.log(err);
       }
     }
   }
 
-  async function getColectData() {
+  async function getCollectionPoints() {
     try {
       const req = await api.get("/collectionPoints");
       console.log(await api.get("/collectionPoints"));
-      setPoint(req.data);
+      setPoints(req.data);
     } catch (error) {
-      if (error.response) {
-        if (error.response.status === 404) {
-          //se o usuario nao tiver dados de coleta ele não mostra nada no toast
-        } else {
-          setTimeout(() => {
-            toast.error(error.response.data.message);
-          }, 1000);
-        }
-      } else {
-        setTimeout(() => {
-          toast.error(
-            "Servidor não respondeu. Verifique sua conexão ou tente mais tarde."
-          );
-        }, 1000);
+      if(!(error.response.status === 404)) {
+        toast.error(error.response?.data?.message || "Servidor não respondeu. Verifique sua conexão ou tente mais tarde.");
+        console.log(error);
       }
     }
-    console.log(point);
+    console.log(points);
   }
 
   useEffect(() => {
     if (token) {
-      getColectData();
-      dadosDeps();
-      getEventsSchelduled();
+      getCollectionPoints();
+      getDeposits();
+      getScheduledEvents();
     }
   }, [token]);
 
@@ -161,7 +133,7 @@ function Home() {
           Escolha o que deseja fazer a seguir:
         </h1>
         <div className="escolha-buttons">
-          <button className="opcao1-escolha" onClick={changePageEsponge}>
+          <button className="opcao1-escolha" onClick={changePagePoint}>
             {" "}
             Depositar esponjas
           </button>
@@ -170,7 +142,7 @@ function Home() {
             // onClick={() => {
             //   toast.info("Tente novamente em breve!");
             // }}
-            onClick={changePageMuti}
+            onClick={changePageEvent}
           >
             {" "}
             Participar de multirões
@@ -178,7 +150,7 @@ function Home() {
         </div>
       </section>
 
-      {esponge && (
+      {pointSection && (
         <>
           <section className="sectionCards">
             <h1 className="sectionCards-titulo">Minhas doações recentes</h1>
@@ -195,7 +167,7 @@ function Home() {
                   ).map((dado) => {
                     const { brasiliaDate, hour } = convertDate(dado.created_at);
 
-                    const location = point.find(
+                    const location = points.find(
                       (p) => p.id === dado.collectionPointId
                     );
 
@@ -241,20 +213,20 @@ function Home() {
               rowSpacing={{ xs: 2, sm: 5, md: 10 }}
               columnSpacing={{ xs: 1, sm: 5, md: 10 }}
             >
-              {(showAllPoints ? point : point.slice(0, 4)).map((dado) => (
+              {(showAllPoints ? points : points.slice(0, 4)).map((dado) => (
                 <DonationCard
                   key={dado.id}
                   id={dado.id}
                   nome={dado.name}
                   place={dado.location}
                   state={dado.isInactive}
-                  setLocation={setAdress}
+                  setLocation={setMapAddress}
                   open={true}
                 />
               ))}
             </Grid2>
 
-            {point.length > 4 && (
+            {points.length > 4 && (
               <div className="ver-mais-wrapper">
                 <button
                   className="ver-mais-btn"
@@ -267,12 +239,12 @@ function Home() {
           </section>
 
           <section id="map" className="section_map">
-            <Mapa location={adress} />
+            <Mapa location={mapAddress} />
           </section>
         </>
       )}
 
-      {muti && (
+      {eventSection && (
         <>
           {/* <section className="sectionCards">
             <h1 className="sectionCards-titulo"> Minhas Inscrições</h1>
@@ -319,7 +291,7 @@ function Home() {
         </>
       )}
 
-      {!esponge && !muti && (
+      {!pointSection && !eventSection && (
         <>
           <section className="sectionCards">
             <h1 className="sectionCards-titulo">Minhas doações recentes</h1>
@@ -335,7 +307,7 @@ function Home() {
                     : donations.deposits.slice(0, 4)
                   ).map((dado) => {
                     const { brasiliaDate, hour } = convertDate(dado.created_at);
-                    const location = point.find(
+                    const location = points.find(
                       (p) => p.id === dado.collectionPointId
                     );
                     return (