Merge pull request from /feature/transparencia

Feature/transparencia

src/components/ModulosEducacionais_big.tsx

@@ -14,18 +14,21 @@ import Star from "../assets/feather/star.svg";
 const ModulosEducacionais_big = () => {
   // const [modulosBigCategoria, setmodulosBigCategoria] = useState("")
   const [modulosBigPage, setModulosBigPage] = useState(1);
-  const [modulosBigCategoria, setModulosBigCategoria] =
-    useState("Módulo de extensão");
+  const [modulosBigCategoria, setModulosBigCategoria] = useState("Módulo de extensão");
+  const [totalCount, setTotalCount] = useState('');
 
   const fetchModulosBig = async (
     modulosBigPage: number,
     modulosBigCategoria: string
   ) => {
     const response = await fetch(
       `http://0.0.0.0:3004/cursos?cateroria=${modulosBigCategoria}&_page=${modulosBigPage}&_limit=9`
-    );
-    const data = await response.json();
-    return data;
+      );
+      const data = await response.json();
+      const totalCountNumber: any = response.headers.get('X-Total-Count')
+      setTotalCount(totalCountNumber)
+      return data;
+
   };
 
   const { isLoading, error, data, isFetching } = useQuery({
@@ -53,18 +56,78 @@ const ModulosEducacionais_big = () => {
       <section className="modulosBig">
         <h3>Módulos Educacionais</h3>
         <div className="modulosBig-categorias">
-          <button onClick={() => {setModulosBigCategoria("Covid 19");}}>Covid 19</button>
-          <button onClick={() => {setModulosBigCategoria("Síflis e outras ist");}}>Síflis e outras ist</button>
-          <button onClick={() => {setModulosBigCategoria("Especialização");}}>Especialização</button>
-          <button onClick={() => {setModulosBigCategoria("Preceptoria");}}>Preceptoria</button>
-          <button onClick={() => {setModulosBigCategoria("Doenças raras");}}>Doenças raras</button>
-          <button onClick={() => {setModulosBigCategoria("WebPalestras");}}>WebPalestras</button>
-          <button onClick={() => {setModulosBigCategoria("Sistema prisional");}}>Sistema prisional</button>
-          <button onClick={() => {setModulosBigCategoria("OPAS");}}>OPAS</button>
-          <button onClick={() => {setModulosBigCategoria("Módulo de extensão");}}>Módulo de extensão</button>
-          <button onClick={() => {setModulosBigCategoria("Acessibilidade");}}>Acessibilidade</button>
+          <button
+            onClick={() => {
+              setModulosBigCategoria("Covid 19");
+            }}
+          >
+            Covid 19
+          </button>
+          <button
+            onClick={() => {
+              setModulosBigCategoria("Síflis e outras ist");
+            }}
+          >
+            Síflis e outras ist
+          </button>
+          <button
+            onClick={() => {
+              setModulosBigCategoria("Especialização");
+            }}
+          >
+            Especialização
+          </button>
+          <button
+            onClick={() => {
+              setModulosBigCategoria("Preceptoria");
+            }}
+          >
+            Preceptoria
+          </button>
+          <button
+            onClick={() => {
+              setModulosBigCategoria("Doenças raras");
+            }}
+          >
+            Doenças raras
+          </button>
+          <button
+            onClick={() => {
+              setModulosBigCategoria("WebPalestras");
+            }}
+          >
+            WebPalestras
+          </button>
+          <button
+            onClick={() => {
+              setModulosBigCategoria("Sistema prisional");
+            }}
+          >
+            Sistema prisional
+          </button>
+          <button
+            onClick={() => {
+              setModulosBigCategoria("OPAS");
+            }}
+          >
+            OPAS
+          </button>
+          <button
+            onClick={() => {
+              setModulosBigCategoria("Módulo de extensão");
+            }}
+          >
+            Módulo de extensão
+          </button>
+          <button
+            onClick={() => {
+              setModulosBigCategoria("Acessibilidade");
+            }}
+          >
+            Acessibilidade
+          </button>
         </div>
-        {/* <span className="modulosBig-resultados">9 de {data.lenght} resultados</span> */}
+        <span className="modulosBig-resultados">9 de {totalCount} resultados</span>
         <ol className="modulosBig-container">
           {data?.map((data: any) => {
             return (

src/components/Parceiros_big.tsx

@@ -8,12 +8,15 @@ import "../style/components/Parceiros_big.scss";
 
 const Parceiros_big = () => {
   const [page, setPage] = useState(1);
+  const [totalCount, setTotalCount] = useState("");
 
   const fetchParceiros = async (page = 1) => {
     const response = await fetch(
       `http://0.0.0.0:3004/parceiros?_page=${page}&_limit=9`
     );
     const data = await response.json();
+    const totalCountNumber: any = response.headers.get("X-Total-Count");
+    setTotalCount(totalCountNumber);
     return data;
   };
 
@@ -41,7 +44,9 @@ const Parceiros_big = () => {
     <>
       <section className="parceiros">
         <h2 className="parceiros-cabecalho">Nossos parceiros</h2>
-        <span className="parceiros-resultados">9 de # resultados</span>
+        <span className="parceiros-resultados">
+          9 de {totalCount} resultados
+        </span>
         <ol className="parceiros-lista">
           {data?.map((data: any) => {
             return (

src/components/Tranparencia_DadosGerais.tsx

@@ -0,0 +1,72 @@
+// import React from 'react'";
+import { useQuery } from "@tanstack/react-query";
+
+import Users from "../assets/feather/clock.svg";
+import CheckSquare from "../assets/feather/check-square.svg";
+import Play from "../assets/feather/play.svg";
+import Award from "../assets/feather/award.svg";
+import DollarSign from "../assets/feather/dollar-sign.svg";
+import UserCheck from "../assets/feather/user-check.svg";
+
+function Tranparencia_DadosGerais() {
+  const fetchTransparencia = async () => {
+    const response = await fetch(`http://0.0.0.0:3004/transparecia`);
+    const data = await response.json();
+    return data;
+  };
+  // isLoading isFetching error
+  const { data } = useQuery({
+    queryKey: ["queryTransparencia"],
+    queryFn: () => fetchTransparencia(),
+  });
+
+  return (
+    <section className="dados-gerais">
+      <h2>Dados Gerais</h2>
+      <div>
+        <span>
+          <img src={Users} />
+          <p>Total de usuários registrados</p>
+        </span>
+        <span>{data?.dados_gerais.usuarios_registrados}</span>
+      </div>
+      <div>
+        <span>
+          <img src={CheckSquare} />
+          <p>Inscrições realizadas</p>
+        </span>
+        <span>{data?.dados_gerais.incricoes_realizadas}</span>
+      </div>
+      <div>
+        <span>
+          <img src={Play} />
+          <p>Cursos ativos</p>
+        </span>
+        <span>{data?.dados_gerais.cursos_ativos}</span>
+      </div>
+      <div>
+        <span>
+          <img src={Award} />
+          <p>Direito á Certificação</p>
+        </span>
+        <span>{data?.dados_gerais.direito_certificacao}</span>
+      </div>
+      <div>
+        <span>
+          <img src={DollarSign} />
+          <p>Investimento médio por curso</p>
+        </span>
+        <span>{data?.dados_gerais.investimento_medio_curso}</span>
+      </div>
+      <div>
+        <span>
+          <img src={UserCheck} />
+          <p>Investimento médio por aluno</p>
+        </span>
+        <span>{data?.dados_gerais.investimento_medio_aluno}</span>
+      </div>
+    </section>
+  );
+}
+
+export default Tranparencia_DadosGerais;

src/components/Transparencia_UsuariosPorCurso.tsx

@@ -0,0 +1,9 @@
+// import React from 'react'
+
+function Transparencia_UsuariosPorCurso() {
+  return (
+    <section>Transparencia_UsuariosPorCurso</section>
+  )
+}
+
+export default Transparencia_UsuariosPorCurso

src/components/Transparencia_UsuarisoPorEstado.tsx

@@ -0,0 +1,9 @@
+// import React from 'react'
+
+function Transparencia_UsuarisoPorEstado() {
+  return (
+    <section>Transparencia_UsuarisoPorEstado</section>
+  )
+}
+
+export default Transparencia_UsuarisoPorEstado

src/main.tsx

@@ -6,6 +6,7 @@ import App from "./App.tsx";
 import Home from "./routes/Home.tsx";
 import Sobre from "./routes/Sobre.tsx";
 import Cursos from "./routes/Cursos.tsx";
+import Modulo from "./routes/Modulo.tsx";
 import Parceiros from "./routes/Parceiros.tsx";
 import Transparencia from "./routes/Transparencia.tsx";
 import Contato from "./routes/Contato.tsx";
@@ -29,6 +30,10 @@ const router = createBrowserRouter([
         path: "/AVASUS/cursos",
         element: <Cursos />,
       },
+      {
+        path: "/AVASUS/cursos/:id",
+        element: <Modulo />,
+      },
       {
         path: "/AVASUS/parceiros",
         element: <Parceiros />,

src/routes/Modulos.tsx → src/routes/Modulo.tsx

@@ -2,15 +2,15 @@ import MainHeader from "../components/MainHeader";
 
 import Footer from "../components/Footer";
 
-const Modulos = () => {
+const Modulo = () => {
   return (
     <main>
       <MainHeader />
-      <h1>Modulos</h1>
+      <h1>Modulo</h1>
       <Footer />
     </main>
   );
   };
 
-  export default Modulos;
+  export default Modulo;
 

src/routes/Transparencia.tsx

@@ -1,12 +1,18 @@
 import MainHeader from "../components/MainHeader";
 
+import Tranparencia_DadosGerais from "../components/Tranparencia_DadosGerais";
+import Transparencia_UsuariosPorCurso from "../components/Transparencia_UsuariosPorCurso";
+import Transparencia_UsuarisoPorEstado from "../components/Transparencia_UsuarisoPorEstado";
+
 import Footer from "../components/Footer";
 
 const Transparencia = () => {
   return (
     <main>
       <MainHeader />
-      <h1>Transparencia</h1>
+      <Tranparencia_DadosGerais />
+      <Transparencia_UsuariosPorCurso />
+      <Transparencia_UsuarisoPorEstado />
       <Footer />
     </main>
   );