Merge pull request #141 from unb-mds/mudancaHome

Novos Componentes e Dashboard Interativo na Guia de Pesquisa

backend/src/services/tendersMonthService.js

@@ -9,11 +9,12 @@ async function getTendersByMonth(start, end) {
     const { data, error } = await supabase
         .from('tendersmonth')
         .select('*')
-        .gte('year', startYear)
-        .lte('year', endYear)
-        .gte('month', startMonth)
-        .lte('month', endMonth);
-
+        .or(
+          `and(year.eq.${startYear},month.gte.${startMonth}),` +
+          `and(year.gt.${startYear},year.lt.${endYear}),` +
+          `and(year.eq.${endYear},month.lte.${endMonth})`
+        );
+
     if (error) {
         throw new Error(error.message);
     }
@@ -23,5 +24,4 @@ async function getTendersByMonth(start, end) {
 
 module.exports = {
     getTendersByMonth,
-};
-
+};

docs/Como executar/Front-end/Testes unitários/Testes do Componente Filtro.md

@@ -2,43 +2,25 @@
 
 ## Descrição Geral
 
-Este conjunto de testes foi desenvolvido para verificar o comportamento e a renderização correta do componente `Filtro` no projeto. A abordagem adotada utiliza a biblioteca `@testing-library/react` e `Jest` para renderizar o componente e validar os elementos visíveis na interface de usuário, garantindo que todos os elementos essenciais estejam presentes e corretamente configurados.
+Este conjunto de testes foi desenvolvido para verificar o comportamento e a renderização correta do componente `Filtro` no projeto. A abordagem adotada utiliza a biblioteca `@testing-library/react` e `Jest` para renderizar o componente e validar os elementos visíveis na interface do usuário, garantindo que todos os elementos essenciais estejam presentes e configurados corretamente. Além disso, o mock de funções de API e de gráficos foi implementado para isolar o componente e testar seu comportamento de forma independente.
 
-### Casos de Teste
+## Casos de Teste
 
-#### Renderização do Componente Filtro
+### 1. Renderização e Interação com o Componente Filtro
 
-1. **Objetivo**: Verificar se o componente `Filtro` é renderizado corretamente com todos os seus elementos principais.
-2. **Teste**:
-    - Renderizar o componente `Filtro`.
-    - Verificar se o título com o texto "Pesquise por cidade, período e tema" está presente no documento.
-    - Verificar se o seletor de cidades está presente com a opção "Selecione uma cidade".
+**Objetivo:** Verificar se o componente `Filtro` é renderizado corretamente, com todos os seus elementos principais, e interage corretamente com os selecionadores de data.
 
-#### Manipulação da Seleção de Cidade
+**Teste:**
 
-1. **Objetivo**: Garantir que a seleção de uma cidade no campo de entrada é manipulada corretamente.
-2. **Teste**:
-    - Renderizar o componente `Filtro`.
-    - Simular a seleção de uma cidade do seletor de cidades.
-    - Verificar se a cidade selecionada é refletida no campo de entrada.
-
-#### Manipulação de Seleção de Datas Inicial e Final
-
-1. **Objetivo**: Testar a funcionalidade de seleção de datas e garantir que as datas inicial e final são manipuladas corretamente.
-2. **Teste**:
-    - Renderizar o componente `Filtro`.
-    - Simular a seleção de uma data inicial com o valor "01 / 2023".
-    - Simular a seleção de uma data final com o valor "12 / 2023".
-    - Verificar se os campos de entrada para "Data Inicial" e "Data final" contêm os valores selecionados.
-
-#### Verificação dos Gráficos
-
-1. **Objetivo**: Garantir que os gráficos são renderizados corretamente após a seleção de dados.
-2. **Teste**:
-    - Renderizar o componente `Filtro`.
-    - Verificar se os gráficos para "Valor Empenhado", "Valor Liquidado" e "Valor Pago" estão presentes no documento.
-    - Verificar se o número de gráficos renderizados corresponde ao esperado (três gráficos).
+- Renderizar o componente `Filtro`.
+- Verificar se o título com o texto "Pesquise por período" está presente no documento.
+- Verificar se os campos de data inicial e final estão presentes.
+- Simular a seleção de uma data inicial com o valor "01/2023".
+- Simular a seleção de uma data final com o valor "12/2023".
+- Verificar se a função `fettchYearAndMonthTender` foi chamada após a seleção das datas.
+- Verificar se os valores totais ("Total Empenhado", "Total Liquidado", "Total Pago") são exibidos no documento.
+- Verificar se os gráficos são renderizados corretamente, garantindo que o mock de gráficos está presente e o número de gráficos renderizados corresponde ao esperado (dois gráficos).
 
 ## Considerações Finais
 
-Esses testes garantem que o componente `Filtro` está sendo renderizado corretamente e que os elementos principais estão presentes com o conteúdo esperado. Além disso, verificam se as funcionalidades básicas, como a manipulação de entradas e a seleção de datas, estão funcionando conforme o esperado. Estes testes são essenciais para assegurar que o componente se comporta conforme projetado em diversos cenários de uso.
+Os testes garantem que o componente `Filtro` é renderizado corretamente, com os elementos essenciais presentes, e que as funcionalidades básicas, como a manipulação das seleções de data e a exibição de gráficos, estão funcionando conforme o esperado. A utilização de mocks para funções de API e gráficos assegura que o teste seja executado de maneira isolada, focando exclusivamente no comportamento do componente.

front/src/app/globals.css

@@ -59,6 +59,23 @@
     color: #FFFFFF; /* Texto branco */
 }
 
+/* Estilo para linhas do gráfico */
+.high-contrast .chart-line-emp-enhanced,
+.high-contrast .chart-line-liquidated,
+.high-contrast .chart-line-paid {
+    stroke: #FFFFFF; /* Linha branca para manter contraste */
+}
+
+/* Estilo para a legenda do gráfico */
+.high-contrast .chart-legend-item {
+    color: #FFD700; /* Cor dourada para itens da legenda */
+}
+
+/* Estilo para explicações do gráfico */
+.high-contrast .chart-explanation {
+    color: #FFD700; /* Cor dourada para explicações */
+}
+
 /* Estilo para aumentar o tamanho da fonte */
 .font-lg {
     font-size: 1.25rem; /* Tamanho da fonte aumentado */
@@ -68,3 +85,22 @@
 .font-original {
     font-size: 1rem; /* Tamanho da fonte original */
 }
+
+/* Força a aplicação da cor vermelha */
+.swiper-button-next,
+.swiper-button-prev {
+    color: #ED1C24 !important;
+}
+/* styles.css or a relevant CSS file */
+.legend-color-red {
+    background-color: #ED1C24 !important;
+  }
+
+  .legend-color-orange {
+    background-color: #F19C28 !important;
+  }
+
+  .legend-color-green {
+    background-color: #2FB551 !important;
+  }
+

front/src/app/page.tsx

@@ -1,25 +1,23 @@
 "use client";
 
-import { Search, MapPin, CalendarClock, MoveRight } from "lucide-react";
+import { Search, MapPin, CalendarClock, MoveRight } from "lucide-react"; 
 import Busca from "@/components/Busca";
 import dynamic from 'next/dynamic';
 import Slider from "@/components/Slider";
 import Pilares from "@/components/Pilares";
-
-const Grafico = dynamic(() => import('@/components/Grafico'), { ssr: false });
+import Mensagem from "@/components/Mensagem";
+import Grafico from '@/components/Grafico';
 
 export default function Home() {
   return (
     <main className="bg-primary-gray dark:bg-neutral-900 flex flex-col items-center min-h-screen gap-10 p-12">
-      <div className="container font-sans">
-        <Slider />
-        <Pilares />
-      </div>
-      <div className="container w-full h-auto bg-primary-white dark:bg-neutral-800 rounded-lg">
-        {/* Conteúdo adicional pode ir aqui */}
-      </div>
+      <Mensagem />
+      <Slider />
       <Grafico />
       <Busca />
+      <div className="container font-sans mb-5">
+        <Pilares />
+      </div> 
     </main>
   );
 }

front/src/components/Busca.tsx

@@ -5,21 +5,21 @@ import Link from 'next/link';
 
 const Busca = () => {
   return (
-    <div className="flex bg-primary-gray dark:bg-neutral-900 p-6">
+    <div className="flex flex-col lg:flex-row items-center justify-center bg-primary-gray dark:bg-neutral-900 p-6">
       <Image
-        className="lg:ml-10 sm:-ml-10 -ml-12 lg:h-auto lg:w-auto lg:mt-2 sm:h-60 sm:w-48 mt-16"
+        className="lg:ml-10 lg:h-auto lg:w-auto sm:h-48 sm:w-48 h-32 w-32 mt-4 lg:mt-0"
         src={Lupa1}
         alt='Lupa1'
       />
-      <div>
-        <h1 className="text-azul-busca dark:text-primary-white font-DMsans mt-20 ml-4 lg:text-4xl sm:text-3xl text-xl">
-          <strong>Faça sua busca <br /> filtrada</strong>:
-          <p className="text-neutral-700 dark:text-neutral-300 lg:text-2xl sm:text-xl text-sm">
-            Veja os dados para cada município do Estado de <br /> Minas Gerais
-          </p>
+      <div className="mt-6 lg:mt-0 lg:ml-8 text-center lg:text-left">
+        <h1 className="text-azul-busca dark:text-primary-white font-DMsans lg:text-4xl sm:text-3xl text-2xl">
+          <strong>Faça sua busca <br className="hidden sm:block" /> filtrada</strong>:
         </h1>
+        <p className="text-neutral-700 dark:text-neutral-300 lg:text-2xl sm:text-xl text-sm mt-2">
+          Veja os dados para cada município do Estado de <br className="hidden sm:block" /> Minas Gerais
+        </p>
         <Link href="/Pesquisa">
-          <button className="flex flex-row items-center gap-2 md:justify-start justify-center bg-primary-red text-white rounded-lg ml-4 mt-8 lg:px-8 lg:py-4 sm:px-6 sm:py-4 px-2 py-1">
+          <button className="flex flex-row items-center gap-2 justify-center bg-primary-red text-white rounded-lg mt-6 lg:px-8 lg:py-4 sm:px-6 sm:py-4 px-4 py-2 mx-auto lg:mx-0">
             Buscar
             <MoveRight className="w-6 h-6" color="#fff" />
           </button>