From 5a91da9ddfecf87a5bebe3132d74f5abeeff6789 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Tue, 27 Aug 2024 14:15:05 -0300
Subject: [PATCH 01/31] feat: adicionando componente Mensagem para a Home

---
 front/src/app/page.tsx            | 12 ++++++-----
 front/src/components/Mensagem.tsx | 36 +++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 front/src/components/Mensagem.tsx

diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
index 861a558..282eaaf 100644
--- a/front/src/app/page.tsx
+++ b/front/src/app/page.tsx
@@ -1,25 +1,27 @@
 "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";
+import Mensagem from "@/components/Mensagem";
 
 const Grafico = dynamic(() => import('@/components/Grafico'), { ssr: false });
 
 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>
+      <Mensagem />
       <div className="container w-full h-auto bg-primary-white dark:bg-neutral-800 rounded-lg">
         {/* Conteúdo adicional pode ir aqui */}
       </div>
       <Grafico />
       <Busca />
+      <div className="container font-sans">
+        <Slider />
+        <Pilares />
+      </div>
     </main>
   );
 }
diff --git a/front/src/components/Mensagem.tsx b/front/src/components/Mensagem.tsx
new file mode 100644
index 0000000..8acd00f
--- /dev/null
+++ b/front/src/components/Mensagem.tsx
@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+
+const Mensagem = () => {
+    const [currentText, setCurrentText] = useState(0);
+
+    const texts = [
+        "Simplificando o acesso aos investimentos culturais pelo estado",
+        "Facilitando a visualização de dados culturais",
+        "Promovendo a transparência nos gastos culturais",
+        "Aprimorando o acesso à cultura em Minas Gerais"
+    ];
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCurrentText((prevText) => (prevText + 1) % texts.length);
+        }, 3000);
+
+        return () => clearInterval(interval); 
+    }, [texts.length]);
+
+    return (
+        <div className="container w-full h-auto flex flex-row justify-center items-center">
+            <div className="w-1/2 pr-4 text-right">
+                <p className="font-Dmsans text-4xl text-neutral-700">
+                    <strong>Dados oficiais das despesas da Secretaria de Estado de Cultura de Minas Gerais</strong>
+                </p>
+            </div>
+            <div className="border-l border-neutral-700 h-80 mx-20"></div>
+            <div className="w-1/2 pl-4">
+                <p className="font-DMsans text-neutral-700 text-3xl">{texts[currentText]}</p>
+            </div>
+        </div>    
+    );
+}
+
+export default Mensagem;

From fd99d0e963753ef056af6b6fb4a74e9b6267b614 Mon Sep 17 00:00:00 2001
From: Mateushqms <mateushqms@gmail.com>
Date: Thu, 29 Aug 2024 16:34:24 -0300
Subject: [PATCH 02/31] feat: Adicionando o novo modelo de grafico

---
 front/src/app/Pesquisa/page.tsx    |   2 +
 front/src/components/Dashboard.tsx | 237 +++++++++++++++++++++++++++++
 2 files changed, 239 insertions(+)
 create mode 100644 front/src/components/Dashboard.tsx

diff --git a/front/src/app/Pesquisa/page.tsx b/front/src/app/Pesquisa/page.tsx
index 89760b4..5936172 100644
--- a/front/src/app/Pesquisa/page.tsx
+++ b/front/src/app/Pesquisa/page.tsx
@@ -1,9 +1,11 @@
 import Filtro from "@/components/Filtro";
+import Dashboard from '@/components/Dashboard';
 
 export default function Pesquisa() {
     return (
         <main className="bg-primary-gray dark:bg-neutral-900 flex flex-col items-center min-h-screen gap-10 p-12">
             <Filtro />
+            <Dashboard/>
         </main>
     )
 }
\ No newline at end of file
diff --git a/front/src/components/Dashboard.tsx b/front/src/components/Dashboard.tsx
new file mode 100644
index 0000000..7b97829
--- /dev/null
+++ b/front/src/components/Dashboard.tsx
@@ -0,0 +1,237 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import ApexCharts from 'react-apexcharts';
+import { ApexOptions } from 'apexcharts';
+import { CalendarClock, MoveLeft, MoveRight } from 'lucide-react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { ptBR } from 'date-fns/locale';
+
+interface Dados {
+  id: number;
+  committed_value: number;
+  liquidated_value: number;
+  paid_value: number;
+  year: number;
+  month: number;
+}
+
+const DashboardWithFilter: React.FC = () => {
+  const [data, setData] = useState<Dados[]>([]);
+  const [lineChartSeries, setLineChartSeries] = useState<any>([]);
+  const [pieChartSeries, setPieChartSeries] = useState<number[]>([]);
+  const [totalSales, setTotalSales] = useState<number>(0);
+  const [totalRevenue, setTotalRevenue] = useState<number>(0);
+  const [totalUsers, setTotalUsers] = useState<number>(0);
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const fetchData = async (startDate: Date | null, endDate: Date | null) => {
+    if (!startDate || !endDate) return;
+
+    try {
+      const startMonth = (startDate.getMonth() + 1).toString().padStart(2, '0');
+      const startYear = startDate.getFullYear().toString();
+      const endMonth = (endDate.getMonth() + 1).toString().padStart(2, '0');
+      const endYear = endDate.getFullYear().toString();
+
+      const response = await fetch(`http://localhost:5000/tenders?start=${startYear}${startMonth}&end=${endYear}${endMonth}`);
+      const data: Dados[] = await response.json();
+      setData(data);
+
+      const committedValues = data.map(item => item.committed_value);
+      const liquidatedValues = data.map(item => item.liquidated_value);
+      const paidValues = data.map(item => item.paid_value);
+
+      setLineChartSeries([
+        { name: 'Valor Empenhado', data: committedValues },
+        { name: 'Valor Liquidado', data: liquidatedValues },
+        { name: 'Valor Pago', data: paidValues }
+      ]);
+
+      const totalCommitted = data.reduce((acc, item) => acc + item.committed_value, 0);
+      const totalLiquidated = data.reduce((acc, item) => acc + item.liquidated_value, 0);
+      const totalPaid = data.reduce((acc, item) => acc + item.paid_value, 0);
+
+      setPieChartSeries([totalCommitted, totalLiquidated, totalPaid]);
+      setTotalSales(totalCommitted);
+      setTotalRevenue(totalLiquidated);
+      setTotalUsers(totalPaid);
+
+      setErrorMessage(null);
+    } catch (error) {
+      console.error('Erro ao buscar dados:', error);
+      setErrorMessage('Erro ao buscar dados.');
+    }
+  };
+
+  useEffect(() => {
+    fetchData(startDate, endDate);
+  }, [startDate, endDate]);
+
+  const renderCustomHeader = ({
+    date,
+    decreaseYear,
+    increaseYear,
+  }: {
+    date: Date;
+    decreaseYear: () => void;
+    increaseYear: () => void;
+  }) => {
+    const months = [
+      'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
+      'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
+    ];
+    return (
+      <div className="flex justify-between items-center py-2 px-4 rounded-md">
+        <button onClick={decreaseYear} className="p-2 rounded-md">
+          <MoveLeft />
+        </button>
+        <span className="text-sm md:text-lg font-DMsans">
+          {months[date.getMonth()]} de {date.getFullYear()}
+        </span>
+        <button onClick={increaseYear} className="p-2 rounded-md">
+          <MoveRight />
+        </button>
+      </div>
+    );
+  };
+
+  const handleStartDateChange = (date: Date | null) => {
+    if (date && endDate && date > endDate) {
+      setEndDate(date);
+    }
+    setStartDate(date);
+  };
+
+  const handleEndDateChange = (date: Date | null) => {
+    if (date && startDate && date < startDate) {
+      setEndDate(startDate);
+    } else {
+      setEndDate(date);
+    }
+  };
+
+  const lineChartOptions: ApexOptions = {
+    chart: {
+      type: 'line',
+    },
+    title: {
+      text: 'Valores',
+      align: 'center'
+    },
+    xaxis: {
+      categories: data.map(item => `${item.year}-${String(item.month).padStart(2, '0')}`)
+    },
+    yaxis: {
+      title: {
+        text: 'Valores'
+      },
+      labels: {
+        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
+      }
+    },
+    colors: ['#ED1C24', '#F19C28', '#2FB551']
+  };
+
+  const pieChartOptions: ApexOptions = {
+    chart: {
+      type: 'pie',
+    },
+    title: {
+      text: 'Distribuição de valores',
+      align: 'center'
+    },
+    labels: ['Valor Empenhado', 'Valor Liquidado', 'Valor Pago'],
+    tooltip: {
+      y: {
+        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
+      }
+    },
+    colors: ['#ED1C24', '#F19C28', '#2FB551'],
+    legend: {
+      position: 'bottom',
+    }
+  };
+
+  return (
+    <div className="container">
+      <div className="mb-10">
+        <div className="container bg-primary-white dark:bg-neutral-800 border rounded-lg flex flex-col items-center justify-center lg:p-12 p-8">
+          <h1 className="text-neutral-700 dark:text-primary-white font-DMsans text-lg lg:text-4xl xl:text-5xl text-center mb-[50px]">
+            Pesquise por período
+          </h1>
+          <ul className="flex lg:flex-row w-full justify-center flex-col gap-4">
+            <li className="relative flex items-center">
+              <CalendarClock className="w-6 h-6" color="#ED1C24" />
+              <DatePicker
+                selected={startDate}
+                onChange={handleStartDateChange}
+                dateFormat="MM / yyyy"
+                showMonthYearPicker
+                renderCustomHeader={renderCustomHeader}
+                maxDate={new Date(2024, 11, 31)}
+                className="w-full px-4 py-2 focus:outline-none bg-transparent text-xs md:text-base dark:text-neutral-300"
+                placeholderText="Data Inicial"
+                locale={ptBR}
+              />
+              <span className="px-2"><MoveRight className="size-3 md:size-auto dark:text-neutral-300" /></span>
+              <DatePicker
+                selected={endDate}
+                onChange={handleEndDateChange}
+                dateFormat="MM / yyyy"
+                showMonthYearPicker
+                renderCustomHeader={renderCustomHeader}
+                minDate={startDate ?? undefined}
+                maxDate={new Date(2024, 11, 31)}
+                className="w-full px-4 py-2 focus:outline-none bg-transparent text-xs md:text-base dark:text-neutral-300"
+                placeholderText="Data final"
+                locale={ptBR}
+              />
+              <div className="border-b border-neutral-700 dark:border-neutral-400 absolute left-0 right-0 bottom-0"></div>
+            </li>
+          </ul>
+        </div>
+
+
+
+        <div className="flex lg:justify-center md:justify-center flex-wrap gap-2 mb-6 mt-6">
+          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
+            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Empenhado</h3>
+            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalSales.toLocaleString()}</p>
+          </div>
+          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
+            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Liquidado</h3>
+            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalRevenue.toLocaleString()}</p>
+          </div>
+          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
+            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Pago</h3>
+            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalUsers.toLocaleString()}</p>
+          </div>
+        </div>
+        <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 bg-white">
+          <div className="w-full md:w-1/2">
+            <ApexCharts
+              options={lineChartOptions}
+              series={lineChartSeries}
+              type="line"
+              height={350}
+            />
+          </div>
+          <div className="w-full md:w-1/2">
+            <ApexCharts
+              options={pieChartOptions}
+              series={pieChartSeries}
+              type="pie"
+              height={350}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardWithFilter;
\ No newline at end of file

From cf877ad13d8803732a44a0acedb7ca517dcffec8 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Thu, 29 Aug 2024 18:40:53 -0300
Subject: [PATCH 03/31] =?UTF-8?q?feat:=20adicionando=20requisi=C3=A7=C3=A3?=
 =?UTF-8?q?o=20=C3=A0=20API=20para=20obter=20despesas=20anuais?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/package-lock.json   |  7 ++++---
 front/src/app/page.tsx    |  6 +-----
 front/src/services/api.ts | 32 ++++++++++++++++++++++++++++----
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/front/package-lock.json b/front/package-lock.json
index f8a3487..bc5159d 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -10542,9 +10542,10 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
index 282eaaf..f5cdae4 100644
--- a/front/src/app/page.tsx
+++ b/front/src/app/page.tsx
@@ -6,16 +6,12 @@ import dynamic from 'next/dynamic';
 import Slider from "@/components/Slider";
 import Pilares from "@/components/Pilares";
 import Mensagem from "@/components/Mensagem";
-
-const Grafico = dynamic(() => import('@/components/Grafico'), { ssr: false });
+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">
       <Mensagem />
-      <div className="container w-full h-auto bg-primary-white dark:bg-neutral-800 rounded-lg">
-        {/* Conteúdo adicional pode ir aqui */}
-      </div>
       <Grafico />
       <Busca />
       <div className="container font-sans">
diff --git a/front/src/services/api.ts b/front/src/services/api.ts
index 596babf..6891b7a 100644
--- a/front/src/services/api.ts
+++ b/front/src/services/api.ts
@@ -14,7 +14,7 @@ export const fetchCities = async () => {
     const response = await axios.get('http://localhost:5000/cities');
     return response.data;
   } catch (error) {
-    console.error('Erro ao buscar cidades:', error);
+    console.error('Error fetching cities:', error);
     throw error;
   }
 };
@@ -24,13 +24,37 @@ export const fetchUnits = async () => {
     const response = await axios.get('http://localhost:5000/units');
     return response.data;
   } catch (error) {
-    console.error('Erro ao buscar cidades:', error);
+    console.error('Error fetching units:', error);
     throw error;
   }
 };
 
+export const fetchYearlyTendersData = async () => {
+    try {
+        const requests = [];
+        for (let year = 2002; year <= 2023; year++) {
+            requests.push(axios.get(`http://localhost:5000/tenders/year?year=${year}`));
+        }
+        const responses = await Promise.all(requests);
+        return responses.flatMap((response) => response.data);
+    } catch (error) {
+        console.error('Erro ao buscar dados anuais:', error);
+        return [];
+    }
+};
+
+export const fetchYearTender = async (year: number) => {
+    try {
+        const response = await axios.get(`http://localhost:5000/tenders/year?year=${year}`);
+        return response.data;
+    } catch (error) {
+        console.error('Error fetching year tender data:', error);
+        return [];
+    }
+}
+
 export const searchLicitacoes = async (params: SearchParams) => {
-  const { startYear, startMonth, endYear, endMonth, cityId, unitId} = params;
+  const { startYear, startMonth, endYear, endMonth, cityId, unitId } = params;
   
   const url = `http://localhost:5000/tenders?start=${startYear}${startMonth}&end=${endYear}${endMonth}&city=${cityId}`;
   
@@ -38,7 +62,7 @@ export const searchLicitacoes = async (params: SearchParams) => {
     const response = await axios.get(url);
     return response.data;
   } catch (error) {
-    console.error('Erro ao buscar licitações:', error);
+    console.error('Error searching tenders:', error);
     throw error;
   }
 };

From 051747e32fbc32c30a907bd21fd0459ef5210480 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Thu, 29 Aug 2024 18:41:50 -0300
Subject: [PATCH 04/31] chore: Adicionando acessibilidade ao componente
 mensagem e diminuindo o tempo de clock

---
 front/src/components/Mensagem.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/front/src/components/Mensagem.tsx b/front/src/components/Mensagem.tsx
index 8acd00f..38843e5 100644
--- a/front/src/components/Mensagem.tsx
+++ b/front/src/components/Mensagem.tsx
@@ -13,7 +13,7 @@ const Mensagem = () => {
     useEffect(() => {
         const interval = setInterval(() => {
             setCurrentText((prevText) => (prevText + 1) % texts.length);
-        }, 3000);
+        }, 2000);
 
         return () => clearInterval(interval); 
     }, [texts.length]);
@@ -21,13 +21,13 @@ const Mensagem = () => {
     return (
         <div className="container w-full h-auto flex flex-row justify-center items-center">
             <div className="w-1/2 pr-4 text-right">
-                <p className="font-Dmsans text-4xl text-neutral-700">
+                <p className="font-Dmsans text-2xl md:text-3xl lg:text-4xl text-neutral-700 dark:text-neutral-300">
                     <strong>Dados oficiais das despesas da Secretaria de Estado de Cultura de Minas Gerais</strong>
                 </p>
             </div>
-            <div className="border-l border-neutral-700 h-80 mx-20"></div>
+            <div className="border-l border-neutral-700 dark:border-neutral-300 h-80 xl mx-10 2xl:mx-20"></div>
             <div className="w-1/2 pl-4">
-                <p className="font-DMsans text-neutral-700 text-3xl">{texts[currentText]}</p>
+                <p className="font-DMsans text-neutral-700 dark:text-neutral-300 text-xl md:text-2xl lg:text-3xl">{texts[currentText]}</p>
             </div>
         </div>    
     );

From 75f0343d61c5b3743fd76a7f784d8aae4e5df879 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Thu, 29 Aug 2024 18:45:05 -0300
Subject: [PATCH 05/31] =?UTF-8?q?feat:=20adicionando=20gr=C3=A1fico=20de?=
 =?UTF-8?q?=20linha=20para=20despesas=20de=202002=20a=202023=20com=20dados?=
 =?UTF-8?q?=20da=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/Grafico.tsx | 290 +++++++++++++++----------------
 1 file changed, 138 insertions(+), 152 deletions(-)

diff --git a/front/src/components/Grafico.tsx b/front/src/components/Grafico.tsx
index 99a3bc5..8d80b01 100644
--- a/front/src/components/Grafico.tsx
+++ b/front/src/components/Grafico.tsx
@@ -1,165 +1,151 @@
-"use client";
-
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
+import { fetchYearlyTendersData } from '../services/api';
 import { ApexOptions } from 'apexcharts';
 
-const ApexCharts = dynamic(() => import('react-apexcharts'), { ssr: false });
+const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
+interface Dados {
+  year: number;
+  committed_value: number;
+  liquidated_value: number;
+  paid_value: number;
+}
 
 const Grafico: React.FC = () => {
-    const [isClient, setIsClient] = useState(false);
-    const isHighContrastMode = document.documentElement.classList.contains('high-contrast');
-    const [chartOptions, setChartOptions] = useState<ApexOptions>({
-        chart: {
-            type: 'bar',
-            height: 500,
-            background: '#ffffff',
-            foreColor: '#000000',
-        },
-        plotOptions: {
-            bar: {
-                horizontal: false,
-                distributed: true,
-                barHeight: '100%',
-                colors: {
-                    ranges: [{
-                        from: 0,
-                        to: 500000,
-                        color: '#ED1C24'
-                    }],
-                }
-            }
-        },
-        xaxis: {
-            categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
-            type: 'category',
-            labels: {
-                style: {
-                    colors: '#000000'
-                }
-            }
-        },
-        yaxis: {
-            title: {
-                text: 'Valor',
-                style: {
-                    color: '#000000'
-                }
-            },
-            labels: {
-                style: {
-                    colors: '#000000'
-                }
-            }
-        },
-        legend: {
-            show: false,
-        },
-        responsive: [
-            {
-                breakpoint: 1025,
-                options: {
-                    chart: {
-                        height: 424,
-                        width: 800,
-                    }
-                }
-            },
-            {
-                breakpoint: 640,
-                options: {
-                    chart: {
-                        height: 200,
-                        width: 310,
-                    }
-                }
-            },
-            {
-                breakpoint: 769,
-                options: {
-                    chart: {
-                        height: 424,
-                        width: 700
-                    }
-                }
-            }
-        ],
-        theme: {
-            mode: 'light', // Modo padrão inicial
-            palette: 'palette1',
-        },
-    });
+  const [series, setSeries] = useState<any[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-    const series = [{
-        name: 'Valor gasto',
-        data: [20000, 300000, 65000, 100000, 200000, 200000, 20000, 30000, 20000, 75000, 300000, 200000]
-    }];
+  const fetchData = async () => {
+    try {
+      const data = await fetchYearlyTendersData();
+      console.log('API Response:', data);
+      
+      if (Array.isArray(data) && data.length > 0) {
+        const series = [
+          {
+            name: 'Valor Empenhado',
+            data: data.map((item) => ({
+              x: new Date(item.year, 0, 1).toISOString(),
+              y: item.committed_value || 0
+            })),
+          },
+          {
+            name: 'Valor Liquidado',
+            data: data.map((item) => ({
+              x: new Date(item.year, 0, 1).toISOString(),
+              y: item.liquidated_value || 0
+            })),
+          },
+          {
+            name: 'Valor Pago',
+            data: data.map((item) => ({
+              x: new Date(item.year, 0, 1).toISOString(),
+              y: item.paid_value || 0
+            })),
+          },
+        ];
 
-    useEffect(() => {
-        setIsClient(true);
+        console.log('Series Data Transformada:', series);
 
-        const root = document.documentElement;
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.attributeName === "class") {
-                    const isDarkMode = root.classList.contains('dark');
-                    const isHighContrastMode = root.classList.contains('high-contrast'); // Verifica o modo de alto contraste
-                    setChartOptions((prevOptions) => ({
-                        ...prevOptions,
-                        chart: {
-                            ...prevOptions.chart,
-                            background: isHighContrastMode ? '#000000' : isDarkMode ? '#1f1f1f' : '#ffffff',
-                            foreColor: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
-                        },
-                        xaxis: {
-                            ...prevOptions.xaxis,
-                            labels: {
-                                style: {
-                                    colors: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000'
-                                }
-                            }
-                        },
-                        yaxis: {
-                            ...prevOptions.yaxis,
-                            labels: {
-                                style: {
-                                    colors: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000'
-                                }
-                            },
-                            title: {
-                                style: {
-                                    color: isDarkMode ? '#e5e7eb' : '#000000'
-                                }
-                            }
-                        },
-                        theme: {
-                            mode: isDarkMode ? 'dark' : 'light',
-                        }
-                    }));
-                }
-            });
-        });
+        setSeries(series);
+        setErrorMessage(null);
+      } else {
+        console.error('Dados inválidos retornados pela API.');
+        setErrorMessage('Dados inválidos retornados pela API.');
+      }
+    } catch (error) {
+      console.error('Erro ao buscar dados para o gráfico:', error);
+      setErrorMessage('Erro ao buscar dados para o gráfico.');
+    }
+  };
 
-        observer.observe(root, { attributes: true });
+  useEffect(() => {
+    fetchData();
+  }, []);
 
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
+  const options: ApexOptions = {
+    chart: {
+      type: 'line',
+      height: 600,
+      zoom: {
+        enabled: true,
+        type: 'x',
+        zoomedArea: {
+          fill: {
+            color: '#90CAF9',
+            opacity: 0.4
+          }
+        }
+      },
+      toolbar: {
+        tools: {
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true
+        },
+        autoSelected: 'pan' // Garantir que a ferramenta 'pan' seja selecionada inicialmente
+      }
+    },
+    colors: ['#F19C28', '#ED1C24', '#2FB551'],
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth'
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        opacityFrom: 0.6,
+        opacityTo: 0.8,
+      }
+    },
+    legend: {
+      position: 'top',
+      horizontalAlign: 'center'
+    },
+    xaxis: {
+      type: 'datetime',
+      labels: {
+        format: 'yyyy',
+      },
+      tickAmount: 10,
+      min: new Date(2014, 0, 1).getTime(),
+      max: new Date(2023, 0, 1).getTime(),
+    },
+    yaxis: {
+      labels: {
+        style: {
+          fontSize: '14px',
+        },
+        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
+      },
+      tickAmount: 4,
+      min: 5000000, // Define o valor mínimo do eixo y como 25 milhões
+    },
+    tooltip: {
+      x: {
+        format: 'yyyy'
+      },
+    },
+  };
 
-    return (
-        <>
-            {isClient && (
-                <ApexCharts
-                    options={chartOptions}
-                    series={series}
-                    type='bar'
-                    width={1200}
-                    height={424}
-                />
-            )}
-        </>
-    );
-}
+  return (
+    <div className='w-full p-4'>
+      <h1 className='text-2xl font-bold mb-4 mt-16 text-center text-neutral-700'>
+        Despesas em Cultura em Minas Gerais ao Longo dos Anos (2002-2023)
+      </h1>
+      {errorMessage && <p className='text-red-500'>{errorMessage}</p>}
+      <ReactApexChart 
+        options={options} 
+        series={series} 
+        type="line" 
+        height={500} 
+      />
+    </div>
+  );
+};
 
 export default Grafico;

From dfba35e07f7d9d30f018386fd9e9bb0e29c0c5d2 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Thu, 29 Aug 2024 18:51:21 -0300
Subject: [PATCH 06/31] =?UTF-8?q?fix:=20arrumando=20o=20formato=20em=20rea?=
 =?UTF-8?q?is=20dos=20n=C3=BAmeros=20do=20gr=C3=A1fico,=20erro=20de=20rend?=
 =?UTF-8?q?eriza=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/Grafico.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/front/src/components/Grafico.tsx b/front/src/components/Grafico.tsx
index 8d80b01..7239ee7 100644
--- a/front/src/components/Grafico.tsx
+++ b/front/src/components/Grafico.tsx
@@ -120,7 +120,12 @@ const Grafico: React.FC = () => {
         style: {
           fontSize: '14px',
         },
-        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
+        formatter: (value: number) => {
+          if (typeof value === 'number') {
+            return `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`;
+          }
+          return 'R$ 0,00'; // Valor padrão se `value` não for um número
+        }
       },
       tickAmount: 4,
       min: 5000000, // Define o valor mínimo do eixo y como 25 milhões

From cd4b1404af57fa4a7f0b1812112cbbfe997e6a00 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Thu, 29 Aug 2024 21:36:30 -0300
Subject: [PATCH 07/31] =?UTF-8?q?chore:=20responsividade=20do=20gr=C3=A1fi?=
 =?UTF-8?q?co=20e=20adicionando=20legenda=20explicativa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/Grafico.tsx | 115 +++++++++++++++++++++++++++----
 front/src/components/Header.tsx  |   2 +-
 2 files changed, 101 insertions(+), 16 deletions(-)

diff --git a/front/src/components/Grafico.tsx b/front/src/components/Grafico.tsx
index 7239ee7..304fe76 100644
--- a/front/src/components/Grafico.tsx
+++ b/front/src/components/Grafico.tsx
@@ -85,8 +85,9 @@ const Grafico: React.FC = () => {
           pan: true,
           reset: true
         },
-        autoSelected: 'pan' // Garantir que a ferramenta 'pan' seja selecionada inicialmente
-      }
+        autoSelected: 'pan' 
+      },
+      background: '#fff', // Fundo branco
     },
     colors: ['#F19C28', '#ED1C24', '#2FB551'],
     dataLabels: {
@@ -104,12 +105,16 @@ const Grafico: React.FC = () => {
     },
     legend: {
       position: 'top',
-      horizontalAlign: 'center'
+      horizontalAlign: 'center',
+      fontSize: '14px', // Tamanho padrão da fonte da legenda
     },
     xaxis: {
       type: 'datetime',
       labels: {
         format: 'yyyy',
+        style: {
+          fontSize: '12px', // Tamanho padrão da fonte do eixo X
+        },
       },
       tickAmount: 10,
       min: new Date(2014, 0, 1).getTime(),
@@ -118,38 +123,118 @@ const Grafico: React.FC = () => {
     yaxis: {
       labels: {
         style: {
-          fontSize: '14px',
+          fontSize: '14px', // Tamanho padrão da fonte do eixo Y
         },
         formatter: (value: number) => {
           if (typeof value === 'number') {
             return `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`;
           }
-          return 'R$ 0,00'; // Valor padrão se `value` não for um número
+          return 'R$ 0,00';
         }
       },
       tickAmount: 4,
-      min: 5000000, // Define o valor mínimo do eixo y como 25 milhões
+      min: 5000000,
     },
     tooltip: {
       x: {
-        format: 'yyyy'
+        format: 'DESPESA DE yyyy'
+        
       },
     },
+    responsive: [
+      {
+        breakpoint: 768, // Ajustes abaixo de 768px
+        options: {
+          chart: {
+            height: 400, // Reduzir a altura do gráfico em telas menores
+          },
+          legend: {
+            position: 'bottom',
+            horizontalAlign: 'center',
+            fontSize: '10px', // Reduzir tamanho da fonte da legenda
+          },
+          xaxis: {
+            labels: {
+              style: {
+                fontSize: '10px', // Reduzir tamanho da fonte do eixo X
+              },
+            },
+          },
+          yaxis: {
+            labels: {
+              style: {
+                fontSize: '6px', // Tamanho padrão da fonte do eixo Y
+              },
+              formatter: (value: number) => {
+                if (typeof value === 'number') {
+                  return `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`;
+                }
+                return 'R$ 0,00';
+              }
+            },
+            tickAmount: 3,
+          },
+        }
+      },
+      {
+        breakpoint: 480, 
+        options: {
+          chart: {
+            height: 300, 
+          },
+          legend: {
+            fontSize: '8px', 
+          },
+          xaxis: {
+            labels: {
+              style: {
+                fontSize: '8px', 
+              },
+            },
+          },
+        }
+      }
+    ]
   };
 
   return (
-    <div className='w-full p-4'>
-      <h1 className='text-2xl font-bold mb-4 mt-16 text-center text-neutral-700'>
+    <div className="w-4/5 mx-auto mt-16">
+      <h1 className='text-2xl font-bold mb-4 text-center text-neutral-700'>
         Despesas em Cultura em Minas Gerais ao Longo dos Anos (2002-2023)
       </h1>
       {errorMessage && <p className='text-red-500'>{errorMessage}</p>}
-      <ReactApexChart 
-        options={options} 
-        series={series} 
-        type="line" 
-        height={500} 
-      />
+      <div>
+        <ReactApexChart 
+          options={options} 
+          series={series} 
+          type="line" 
+          height={600} 
+        />
+      </div>
+      <ul className="space-y-7 mt-8">
+        <li className="flex items-center gap-4 text-lg">
+          <div className="flex-shrink-0 w-8 h-8 bg-[#ED1C24] rounded-sm"></div>
+          <div className="text-neutral-700">
+            <strong>Valor Empenhado:</strong> Valor do orçamento reservado para fazer face a compromisso formalmente assumido com fornecedor ou credor.
+          </div>
+        </li>
+        <li className="flex items-center gap-4 text-lg">
+          <div className="flex-shrink-0 w-8 h-8 bg-[#F19C28] rounded-sm"></div>
+          <div className="text-neutral-700">
+            <strong>Valor Liquidado:</strong> Valor que o fornecedor ou credor tem direito a receber referente a produto ou serviço devidamente entregue.
+          </div>
+        </li>
+        <li className="flex items-center gap-4 text-lg">
+          <div className="flex-shrink-0 w-8 h-8 bg-[#2FB551] rounded-sm"></div>
+          <div className="text-neutral-700">
+            <strong>Valor Pago:</strong> Valor referente aos pagamentos efetuados através de movimentações bancárias, escriturais e apropriação contábil da despesa.
+          </div>
+        </li>
+      </ul>
     </div>
+
+
+
   );
 };
 
diff --git a/front/src/components/Header.tsx b/front/src/components/Header.tsx
index ede779a..f03fec1 100644
--- a/front/src/components/Header.tsx
+++ b/front/src/components/Header.tsx
@@ -64,7 +64,7 @@ export function Header() {
                 <nav className="hidden md:flex items-center text-lg lg:text-xl space-x-4 font-DMsans">
                     <Link className="text-neutral-700 dark:text-neutral-300 rounded-lg p-2" href="/">HOME</Link>
                     <Link className="text-neutral-700 dark:text-neutral-300 rounded-lg p-2" href="/Sobre">SOBRE</Link>
-                    <Link className="text-neutral-700 dark:text-neutral-300 rounded-xl p-2 bg-primary-red text-white" href="/Pesquisa">PESQUISA</Link>
+                    <Link className="text-neutral-700 dark:text-neutral-300 rounded-xl p-2 bg-primary-red" href="/Pesquisa">PESQUISA</Link>
                 </nav>
 
                 <div className="relative">

From f5184bea51468a274638d039d3f01e11e4e1a8c6 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Thu, 29 Aug 2024 21:39:58 -0300
Subject: [PATCH 08/31] =?UTF-8?q?fix:=20arrumando=20a=20cor=20do=20gr?=
 =?UTF-8?q?=C3=A1fico=20para=20corresponder=20com=20a=20legenda?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/Grafico.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/components/Grafico.tsx b/front/src/components/Grafico.tsx
index 304fe76..accc130 100644
--- a/front/src/components/Grafico.tsx
+++ b/front/src/components/Grafico.tsx
@@ -89,7 +89,7 @@ const Grafico: React.FC = () => {
       },
       background: '#fff', // Fundo branco
     },
-    colors: ['#F19C28', '#ED1C24', '#2FB551'],
+    colors: ['#ED1C24', '#F19C28', '#2FB551'],
     dataLabels: {
       enabled: false
     },

From d4f96a73d870f96818cf1d4e10b88256e218eac6 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Thu, 29 Aug 2024 23:59:31 -0300
Subject: [PATCH 09/31] =?UTF-8?q?chore:=20deixando=20a=20guia=20home=20ace?=
 =?UTF-8?q?ss=C3=ADvel=20e=20atualizando=20os=20seus=20componentes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/app/globals.css        |  36 +++++
 front/src/app/page.tsx           |   7 +-
 front/src/components/Grafico.tsx | 221 ++++++++++++++++++-------------
 front/src/components/Header.tsx  |   2 +-
 front/src/components/Slider.tsx  |  16 +--
 5 files changed, 177 insertions(+), 105 deletions(-)

diff --git a/front/src/app/globals.css b/front/src/app/globals.css
index 745952f..cd891e5 100644
--- a/front/src/app/globals.css
+++ b/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;
+  }
+  
\ No newline at end of file
diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
index f5cdae4..8960c47 100644
--- a/front/src/app/page.tsx
+++ b/front/src/app/page.tsx
@@ -12,12 +12,11 @@ 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">
       <Mensagem />
-      <Grafico />
-      <Busca />
       <div className="container font-sans">
         <Slider />
-        <Pilares />
-      </div>
+      </div>  
+      <Grafico />
+      <Busca />
     </main>
   );
 }
diff --git a/front/src/components/Grafico.tsx b/front/src/components/Grafico.tsx
index accc130..9c24893 100644
--- a/front/src/components/Grafico.tsx
+++ b/front/src/components/Grafico.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { fetchYearlyTendersData } from '../services/api';
 import { ApexOptions } from 'apexcharts';
+import { Info } from 'lucide-react'; // Import icon from lucide-react
 
 const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
@@ -15,56 +16,7 @@ interface Dados {
 const Grafico: React.FC = () => {
   const [series, setSeries] = useState<any[]>([]);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
-  const fetchData = async () => {
-    try {
-      const data = await fetchYearlyTendersData();
-      console.log('API Response:', data);
-      
-      if (Array.isArray(data) && data.length > 0) {
-        const series = [
-          {
-            name: 'Valor Empenhado',
-            data: data.map((item) => ({
-              x: new Date(item.year, 0, 1).toISOString(),
-              y: item.committed_value || 0
-            })),
-          },
-          {
-            name: 'Valor Liquidado',
-            data: data.map((item) => ({
-              x: new Date(item.year, 0, 1).toISOString(),
-              y: item.liquidated_value || 0
-            })),
-          },
-          {
-            name: 'Valor Pago',
-            data: data.map((item) => ({
-              x: new Date(item.year, 0, 1).toISOString(),
-              y: item.paid_value || 0
-            })),
-          },
-        ];
-
-        console.log('Series Data Transformada:', series);
-
-        setSeries(series);
-        setErrorMessage(null);
-      } else {
-        console.error('Dados inválidos retornados pela API.');
-        setErrorMessage('Dados inválidos retornados pela API.');
-      }
-    } catch (error) {
-      console.error('Erro ao buscar dados para o gráfico:', error);
-      setErrorMessage('Erro ao buscar dados para o gráfico.');
-    }
-  };
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const options: ApexOptions = {
+  const [chartOptions, setChartOptions] = useState<ApexOptions>({
     chart: {
       type: 'line',
       height: 600,
@@ -85,9 +37,9 @@ const Grafico: React.FC = () => {
           pan: true,
           reset: true
         },
-        autoSelected: 'pan' 
+        autoSelected: 'pan'
       },
-      background: '#fff', // Fundo branco
+      background: '#ffffff',
     },
     colors: ['#ED1C24', '#F19C28', '#2FB551'],
     dataLabels: {
@@ -106,14 +58,14 @@ const Grafico: React.FC = () => {
     legend: {
       position: 'top',
       horizontalAlign: 'center',
-      fontSize: '14px', // Tamanho padrão da fonte da legenda
+      fontSize: '14px',
     },
     xaxis: {
       type: 'datetime',
       labels: {
         format: 'yyyy',
         style: {
-          fontSize: '12px', // Tamanho padrão da fonte do eixo X
+          fontSize: '12px',
         },
       },
       tickAmount: 10,
@@ -123,14 +75,9 @@ const Grafico: React.FC = () => {
     yaxis: {
       labels: {
         style: {
-          fontSize: '14px', // Tamanho padrão da fonte do eixo Y
+          fontSize: '14px',
         },
-        formatter: (value: number) => {
-          if (typeof value === 'number') {
-            return `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`;
-          }
-          return 'R$ 0,00';
-        }
+        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
       },
       tickAmount: 4,
       min: 5000000,
@@ -138,74 +85,163 @@ const Grafico: React.FC = () => {
     tooltip: {
       x: {
         format: 'DESPESA DE yyyy'
-        
       },
     },
     responsive: [
       {
-        breakpoint: 768, // Ajustes abaixo de 768px
+        breakpoint: 768,
         options: {
           chart: {
-            height: 400, // Reduzir a altura do gráfico em telas menores
+            height: 400,
           },
           legend: {
             position: 'bottom',
             horizontalAlign: 'center',
-            fontSize: '10px', // Reduzir tamanho da fonte da legenda
+            fontSize: '10px',
           },
           xaxis: {
             labels: {
               style: {
-                fontSize: '10px', // Reduzir tamanho da fonte do eixo X
+                fontSize: '10px',
               },
             },
           },
           yaxis: {
             labels: {
               style: {
-                fontSize: '6px', // Tamanho padrão da fonte do eixo Y
+                fontSize: '6px',
               },
-              formatter: (value: number) => {
-                if (typeof value === 'number') {
-                  return `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`;
-                }
-                return 'R$ 0,00';
-              }
+              formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
             },
             tickAmount: 3,
           },
         }
       },
       {
-        breakpoint: 480, 
+        breakpoint: 480,
         options: {
           chart: {
-            height: 300, 
+            height: 300,
           },
           legend: {
-            fontSize: '8px', 
+            fontSize: '8px',
           },
           xaxis: {
             labels: {
               style: {
-                fontSize: '8px', 
+                fontSize: '8px',
               },
             },
           },
         }
       }
     ]
+  });
+
+  const updateChartOptionsForTheme = () => {
+    const isDarkMode = document.documentElement.classList.contains('dark');
+    const isHighContrastMode = document.documentElement.classList.contains('high-contrast');
+
+    setChartOptions((prevOptions) => ({
+      ...prevOptions,
+      chart: {
+        ...prevOptions.chart,
+        background: isHighContrastMode ? '#000000' : isDarkMode ? '#1f1f1f' : '#ffffff',
+        foreColor: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
+      },
+      xaxis: {
+        ...prevOptions.xaxis,
+        labels: {
+          style: {
+            colors: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
+          }
+        }
+      },
+      yaxis: {
+        ...prevOptions.yaxis,
+        labels: {
+          style: {
+            colors: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
+          },
+          formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
+        }
+      },
+      colors: isHighContrastMode ? ['#ED1C24', '#F19C28', '#2FB551'] : ['#ED1C24', '#F19C28', '#2FB551'],
+    }));
   };
 
+  useEffect(() => {
+    updateChartOptionsForTheme();
+
+    const observer = new MutationObserver(() => {
+      updateChartOptionsForTheme();
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      const data = await fetchYearlyTendersData();
+      console.log('API Response:', data);
+      
+      if (Array.isArray(data) && data.length > 0) {
+        const series = [
+          {
+            name: 'Valor Empenhado',
+            data: data.map((item) => ({
+              x: new Date(item.year, 0, 1).toISOString(),
+              y: item.committed_value || 0
+            })),
+          },
+          {
+            name: 'Valor Liquidado',
+            data: data.map((item) => ({
+              x: new Date(item.year, 0, 1).toISOString(),
+              y: item.liquidated_value || 0
+            })),
+          },
+          {
+            name: 'Valor Pago',
+            data: data.map((item) => ({
+              x: new Date(item.year, 0, 1).toISOString(),
+              y: item.paid_value || 0
+            })),
+          },
+        ];
+
+        console.log('Series Data Transformada:', series);
+
+        setSeries(series);
+        setErrorMessage(null);
+      } else {
+        console.error('Dados inválidos retornados pela API.');
+        setErrorMessage('Dados inválidos retornados pela API.');
+      }
+    } catch (error) {
+      console.error('Erro ao buscar dados para o gráfico:', error);
+      setErrorMessage('Erro ao buscar dados para o gráfico.');
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   return (
-    <div className="w-4/5 mx-auto mt-16">
-      <h1 className='text-2xl font-bold mb-4 text-center text-neutral-700'>
+    <div className="w-4/5 mx-auto mt-10">
+      <h1 className='text-3xl font-bold mb-4 text-center text-neutral-700 dark:text-neutral-300'>
         Despesas em Cultura em Minas Gerais ao Longo dos Anos (2002-2023)
       </h1>
       {errorMessage && <p className='text-red-500'>{errorMessage}</p>}
       <div>
         <ReactApexChart 
-          options={options} 
+          options={chartOptions} 
           series={series} 
           type="line" 
           height={600} 
@@ -213,28 +249,29 @@ const Grafico: React.FC = () => {
       </div>
       <ul className="space-y-7 mt-8">
         <li className="flex items-center gap-4 text-lg">
-          <div className="flex-shrink-0 w-8 h-8 bg-[#ED1C24] rounded-sm"></div>
-          <div className="text-neutral-700">
-            <strong>Valor Empenhado:</strong> Valor do orçamento reservado para fazer face a compromisso formalmente assumido com fornecedor ou credor.
+          <div className="flex-shrink-0 w-8 h-8 legend-color-red rounded-sm"></div>
+          <div className="text-neutral-700 dark:text-neutral-300 flex items-center gap-2">
+            <strong>Valor Empenhado:</strong>
+            <span>Valor do orçamento reservado para fazer face a compromisso formalmente assumido com fornecedor ou credor.</span>
           </div>
         </li>
         <li className="flex items-center gap-4 text-lg">
-          <div className="flex-shrink-0 w-8 h-8 bg-[#F19C28] rounded-sm"></div>
-          <div className="text-neutral-700">
-            <strong>Valor Liquidado:</strong> Valor que o fornecedor ou credor tem direito a receber referente a produto ou serviço devidamente entregue.
+          <div className="flex-shrink-0 w-8 h-8 legend-color-orange rounded-sm"></div>
+          <div className="text-neutral-700 dark:text-neutral-300 flex items-center gap-2">
+            <strong>Valor Liquidado:</strong>
+            <span>Valor que o fornecedor ou credor tem direito a receber referente a produto ou serviço devidamente entregue.</span>
           </div>
         </li>
         <li className="flex items-center gap-4 text-lg">
-          <div className="flex-shrink-0 w-8 h-8 bg-[#2FB551] rounded-sm"></div>
-          <div className="text-neutral-700">
-            <strong>Valor Pago:</strong> Valor referente aos pagamentos efetuados através de movimentações bancárias, escriturais e apropriação contábil da despesa.
+          <div className="flex-shrink-0 w-8 h-8 legend-color-green rounded-sm"></div>
+          <div className="text-neutral-700 dark:text-neutral-300 flex items-center gap-2">
+            <strong>Valor Pago:</strong>
+            <span>Valor referente aos pagamentos efetuados através de movimentações bancárias, escriturais e apropriação contábil da despesa.</span>
           </div>
         </li>
       </ul>
-    </div>
-
-
 
+    </div>
   );
 };
 
diff --git a/front/src/components/Header.tsx b/front/src/components/Header.tsx
index f03fec1..6456fec 100644
--- a/front/src/components/Header.tsx
+++ b/front/src/components/Header.tsx
@@ -64,7 +64,7 @@ export function Header() {
                 <nav className="hidden md:flex items-center text-lg lg:text-xl space-x-4 font-DMsans">
                     <Link className="text-neutral-700 dark:text-neutral-300 rounded-lg p-2" href="/">HOME</Link>
                     <Link className="text-neutral-700 dark:text-neutral-300 rounded-lg p-2" href="/Sobre">SOBRE</Link>
-                    <Link className="text-neutral-700 dark:text-neutral-300 rounded-xl p-2 bg-primary-red" href="/Pesquisa">PESQUISA</Link>
+                    <Link className="text-neutral-700 dark:text-neutral-300 rounded-xl p-2 bg-red-400" href="/Pesquisa">PESQUISA</Link>
                 </nav>
 
                 <div className="relative">
diff --git a/front/src/components/Slider.tsx b/front/src/components/Slider.tsx
index b063711..4ee6a9d 100644
--- a/front/src/components/Slider.tsx
+++ b/front/src/components/Slider.tsx
@@ -32,7 +32,7 @@ const Slider: React.FC = () => {
     }, []);
 
     return (
-        <div className="flex justify-center items-center mb-16 bg-primary-gray dark:bg-neutral-800">
+        <div className="relative flex justify-center items-center bg-primary-gray dark:bg-neutral-800">
             <Swiper
                 slidesPerView={1}
                 modules={[Navigation, Pagination, Autoplay]}
@@ -44,13 +44,13 @@ const Slider: React.FC = () => {
                 {data.map((item, index) => (
                     <SwiperSlide key={index}>
                         <a className="w-full h-96" href={`${site}${item.link}`} target='_blank'>
-                        <Image
-                            src={`${site}${item.image_url}`}
-                            alt="Slider"
-                            className="w-full object-cover h-96"
-                            width={1920}
-                            height={1080}
-                        />
+                            <Image
+                                src={`${site}${item.image_url}`}
+                                alt="Slider"
+                                className="w-full object-cover h-96"
+                                width={1920}
+                                height={1080}
+                            />
 
                             <div className="absolute bottom-0 w-full p-4 bg-black dark:bg-neutral-800 bg-opacity-30 text-white font-sans lg:text-4xl md:text-xl text-sm">
                                 <p className="text-center">{item.title}</p>

From dc3f821f955b8ffaa64e31ee1b4a84afb6d498d5 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Fri, 30 Aug 2024 00:04:23 -0300
Subject: [PATCH 10/31] style: alterando o background e text-color de uma guia
 da header

---
 front/src/components/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/components/Header.tsx b/front/src/components/Header.tsx
index 6456fec..382d0a9 100644
--- a/front/src/components/Header.tsx
+++ b/front/src/components/Header.tsx
@@ -64,7 +64,7 @@ export function Header() {
                 <nav className="hidden md:flex items-center text-lg lg:text-xl space-x-4 font-DMsans">
                     <Link className="text-neutral-700 dark:text-neutral-300 rounded-lg p-2" href="/">HOME</Link>
                     <Link className="text-neutral-700 dark:text-neutral-300 rounded-lg p-2" href="/Sobre">SOBRE</Link>
-                    <Link className="text-neutral-700 dark:text-neutral-300 rounded-xl p-2 bg-red-400" href="/Pesquisa">PESQUISA</Link>
+                    <Link className="text-white dark:text-neutral-300 rounded-xl p-2 bg-primary-red" href="/Pesquisa">PESQUISA</Link>
                 </nav>
 
                 <div className="relative">

From 2079cad7ee6a9b3054b6c65aa48d70d38642c466 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Fri, 30 Aug 2024 00:11:13 -0300
Subject: [PATCH 11/31] =?UTF-8?q?fix:=20arrumado=20bug=20que=20n=C3=A3o=20?=
 =?UTF-8?q?renderizava=20a=20guia=20corretamente=20com=20a=20ferramenta=20?=
 =?UTF-8?q?de=20acessibilidade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/Header.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/front/src/components/Header.tsx b/front/src/components/Header.tsx
index 382d0a9..4d9ccd3 100644
--- a/front/src/components/Header.tsx
+++ b/front/src/components/Header.tsx
@@ -14,11 +14,28 @@ export function Header() {
     const [accessibilityMenuOpen, setAccessibilityMenuOpen] = useState(false);
     const [keepMenuOpen, setKeepMenuOpen] = useState(false);
 
+    // Carrega as configurações do localStorage
+    useEffect(() => {
+        const savedDarkMode = localStorage.getItem('darkMode') === 'true';
+        const savedHighContrast = localStorage.getItem('highContrast') === 'true';
+        const savedFontSize = localStorage.getItem('fontSize') || 'text-base';
+        
+        setDarkMode(savedDarkMode);
+        setHighContrast(savedHighContrast);
+        setFontSize(savedFontSize);
+    }, []);
+
+    // Atualiza as configurações e aplica as classes
     useEffect(() => {
         document.documentElement.classList.toggle('dark', darkMode);
         document.documentElement.classList.toggle('high-contrast', highContrast);
         document.documentElement.classList.toggle('font-lg', fontSize === 'text-lg');
         document.documentElement.classList.toggle('font-original', fontSize === 'text-base');
+
+        // Salva as configurações no localStorage
+        localStorage.setItem('darkMode', darkMode.toString());
+        localStorage.setItem('highContrast', highContrast.toString());
+        localStorage.setItem('fontSize', fontSize);
     }, [darkMode, highContrast, fontSize]);
 
     const toggleNavbar = () => setIsOpen(!isOpen);

From 81aa56a77f85f51fbf23f0ab6dc18113fc859906 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Fri, 30 Aug 2024 01:34:33 -0300
Subject: [PATCH 12/31] style: responsividade dos componentes da Home

---
 front/src/components/Grafico.tsx  | 176 +++++++++++++++++++-----------
 front/src/components/Mensagem.tsx |  11 +-
 2 files changed, 117 insertions(+), 70 deletions(-)

diff --git a/front/src/components/Grafico.tsx b/front/src/components/Grafico.tsx
index 9c24893..5b68d9c 100644
--- a/front/src/components/Grafico.tsx
+++ b/front/src/components/Grafico.tsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { fetchYearlyTendersData } from '../services/api';
 import { ApexOptions } from 'apexcharts';
-import { Info } from 'lucide-react'; // Import icon from lucide-react
 
 const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
@@ -77,7 +76,7 @@ const Grafico: React.FC = () => {
         style: {
           fontSize: '14px',
         },
-        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
+        formatter: (value: number) => `R$ ${Number(value).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
       },
       tickAmount: 4,
       min: 5000000,
@@ -88,18 +87,41 @@ const Grafico: React.FC = () => {
       },
     },
     responsive: [
+      {
+        breakpoint: 1024,
+        options: {
+          xaxis: {
+            tickAmount: 5,
+            min: new Date(2016, 0, 1).getTime(),
+            max: new Date(2023, 0, 1).getTime(),
+            labels: {
+              style: {
+                fontSize: '10px',
+              },
+            },
+          },
+          yaxis: {
+            labels: {
+              style: {
+                fontSize: '12px',
+              },
+            },
+          },
+          legend: {
+            fontSize: '12px',
+          },
+        }
+      },
       {
         breakpoint: 768,
         options: {
           chart: {
             height: 400,
           },
-          legend: {
-            position: 'bottom',
-            horizontalAlign: 'center',
-            fontSize: '10px',
-          },
           xaxis: {
+            tickAmount: 3,
+            min: new Date(2018, 0, 1).getTime(),
+            max: new Date(2023, 0, 1).getTime(),
             labels: {
               style: {
                 fontSize: '10px',
@@ -109,11 +131,15 @@ const Grafico: React.FC = () => {
           yaxis: {
             labels: {
               style: {
-                fontSize: '6px',
+                fontSize: '10px',
               },
-              formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
+              formatter: (value: number) => `${(value / 1000000).toFixed(1)}M`, // Formato em milhões
             },
-            tickAmount: 3,
+          },
+          legend: {
+            position: 'bottom',
+            horizontalAlign: 'center',
+            fontSize: '10px',
           },
         }
       },
@@ -123,66 +149,86 @@ const Grafico: React.FC = () => {
           chart: {
             height: 300,
           },
-          legend: {
-            fontSize: '8px',
-          },
           xaxis: {
+            tickAmount: 2,
+            min: new Date(2020, 0, 1).getTime(),
+            max: new Date(2023, 0, 1).getTime(),
             labels: {
               style: {
                 fontSize: '8px',
               },
             },
           },
+          yaxis: {
+            labels: {
+              style: {
+                fontSize: '8px',
+              },
+              formatter: (value: number) => `${(value / 1000000).toFixed(1)}M`, // Formato em milhões
+            },
+          },
+          legend: {
+            fontSize: '8px',
+          },
         }
       }
     ]
   });
 
-  const updateChartOptionsForTheme = () => {
-    const isDarkMode = document.documentElement.classList.contains('dark');
-    const isHighContrastMode = document.documentElement.classList.contains('high-contrast');
-
-    setChartOptions((prevOptions) => ({
-      ...prevOptions,
-      chart: {
-        ...prevOptions.chart,
-        background: isHighContrastMode ? '#000000' : isDarkMode ? '#1f1f1f' : '#ffffff',
-        foreColor: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
-      },
-      xaxis: {
-        ...prevOptions.xaxis,
-        labels: {
-          style: {
-            colors: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
-          }
-        }
-      },
-      yaxis: {
-        ...prevOptions.yaxis,
-        labels: {
-          style: {
-            colors: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
-          },
-          formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
-        }
-      },
-      colors: isHighContrastMode ? ['#ED1C24', '#F19C28', '#2FB551'] : ['#ED1C24', '#F19C28', '#2FB551'],
-    }));
-  };
-
+  const isMobileScreen = () => window.innerWidth <= 768;
+  
   useEffect(() => {
+    const updateChartOptionsForTheme = () => {
+      const isDarkMode = document.documentElement.classList.contains('dark');
+      const isHighContrastMode = document.documentElement.classList.contains('high-contrast');
+  
+      setChartOptions((prevOptions) => ({
+        ...prevOptions,
+        chart: {
+          ...prevOptions.chart,
+          background: isHighContrastMode ? '#000000' : isDarkMode ? '#1f1f1f' : '#ffffff',
+          foreColor: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
+        },
+        xaxis: {
+          ...prevOptions.xaxis,
+          labels: {
+            style: {
+              colors: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
+            }
+          }
+        },
+        yaxis: {
+          ...prevOptions.yaxis,
+          labels: {
+            style: {
+              colors: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
+            },
+            formatter: (value: number) => isMobileScreen() 
+              ? `${(value / 1000000).toFixed(1)}M`
+              : `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
+          }
+        },
+        colors: isHighContrastMode ? ['#ED1C24', '#F19C28', '#2FB551'] : ['#ED1C24', '#F19C28', '#2FB551'],
+      }));
+    };
+  
     updateChartOptionsForTheme();
-
+  
     const observer = new MutationObserver(() => {
       updateChartOptionsForTheme();
     });
-
+  
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ['class']
     });
-
-    return () => observer.disconnect();
+  
+    window.addEventListener('resize', () => updateChartOptionsForTheme());
+  
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', () => updateChartOptionsForTheme());
+    };
   }, []);
 
   const fetchData = async () => {
@@ -214,9 +260,9 @@ const Grafico: React.FC = () => {
             })),
           },
         ];
-
+  
         console.log('Series Data Transformada:', series);
-
+  
         setSeries(series);
         setErrorMessage(null);
       } else {
@@ -228,6 +274,7 @@ const Grafico: React.FC = () => {
       setErrorMessage('Erro ao buscar dados para o gráfico.');
     }
   };
+  
 
   useEffect(() => {
     fetchData();
@@ -235,7 +282,7 @@ const Grafico: React.FC = () => {
 
   return (
     <div className="w-4/5 mx-auto mt-10">
-      <h1 className='text-3xl font-bold mb-4 text-center text-neutral-700 dark:text-neutral-300'>
+      <h1 className='text-lg md:text-xl lg:text-3xl font-bold mb-4 text-center text-neutral-700 dark:text-neutral-300'>
         Despesas em Cultura em Minas Gerais ao Longo dos Anos (2002-2023)
       </h1>
       {errorMessage && <p className='text-red-500'>{errorMessage}</p>}
@@ -248,29 +295,28 @@ const Grafico: React.FC = () => {
         />
       </div>
       <ul className="space-y-7 mt-8">
-        <li className="flex items-center gap-4 text-lg">
+        <li className="flex flex-wrap items-center gap-4 text-base lg:text-lg">
           <div className="flex-shrink-0 w-8 h-8 legend-color-red rounded-sm"></div>
-          <div className="text-neutral-700 dark:text-neutral-300 flex items-center gap-2">
-            <strong>Valor Empenhado:</strong>
-            <span>Valor do orçamento reservado para fazer face a compromisso formalmente assumido com fornecedor ou credor.</span>
+          <div className="text-neutral-700 dark:text-neutral-300 flex flex-1 flex-col md:flex-row items-start md:items-center gap-2">
+            <strong className="md:w-40 w-full">Valor Empenhado:</strong>
+            <span className="w-full md:w-auto">Valor do orçamento reservado para fazer face a compromisso formalmente assumido com fornecedor ou credor.</span>
           </div>
         </li>
-        <li className="flex items-center gap-4 text-lg">
+        <li className="flex flex-wrap items-center gap-4 text-base lg:text-lg">
           <div className="flex-shrink-0 w-8 h-8 legend-color-orange rounded-sm"></div>
-          <div className="text-neutral-700 dark:text-neutral-300 flex items-center gap-2">
-            <strong>Valor Liquidado:</strong>
-            <span>Valor que o fornecedor ou credor tem direito a receber referente a produto ou serviço devidamente entregue.</span>
+          <div className="text-neutral-700 dark:text-neutral-300 flex flex-1 flex-col md:flex-row items-start md:items-center gap-2">
+            <strong className="md:w-40 w-full">Valor Liquidado:</strong>
+            <span className="w-full md:w-auto">Valor que o fornecedor ou credor tem direito a receber referente a produto ou serviço devidamente entregue.</span>
           </div>
         </li>
-        <li className="flex items-center gap-4 text-lg">
+        <li className="flex flex-wrap items-center gap-4 text-base lg:text-lg">
           <div className="flex-shrink-0 w-8 h-8 legend-color-green rounded-sm"></div>
-          <div className="text-neutral-700 dark:text-neutral-300 flex items-center gap-2">
-            <strong>Valor Pago:</strong>
-            <span>Valor referente aos pagamentos efetuados através de movimentações bancárias, escriturais e apropriação contábil da despesa.</span>
+          <div className="text-neutral-700 dark:text-neutral-300 flex flex-1 flex-col md:flex-row items-start md:items-center gap-2">
+            <strong className="md:w-40 w-full">Valor Pago:</strong>
+            <span className="w-full md:w-auto">Valor referente aos pagamentos efetuados através de movimentações bancárias, escriturais e apropriação contábil da despesa.</span>
           </div>
         </li>
       </ul>
-
     </div>
   );
 };
diff --git a/front/src/components/Mensagem.tsx b/front/src/components/Mensagem.tsx
index 38843e5..f8a6231 100644
--- a/front/src/components/Mensagem.tsx
+++ b/front/src/components/Mensagem.tsx
@@ -4,7 +4,7 @@ const Mensagem = () => {
     const [currentText, setCurrentText] = useState(0);
 
     const texts = [
-        "Simplificando o acesso aos investimentos culturais pelo estado",
+        "Simplificando o acesso aos investimentos culturais",
         "Facilitando a visualização de dados culturais",
         "Promovendo a transparência nos gastos culturais",
         "Aprimorando o acesso à cultura em Minas Gerais"
@@ -19,14 +19,15 @@ const Mensagem = () => {
     }, [texts.length]);
 
     return (
-        <div className="container w-full h-auto flex flex-row justify-center items-center">
-            <div className="w-1/2 pr-4 text-right">
+        <div className="container w-full h-auto flex flex-col md:flex-row justify-center items-center">
+            <div className="w-full md:w-1/2 pb-5 md:pr-4 text-center md:text-right">
                 <p className="font-Dmsans text-2xl md:text-3xl lg:text-4xl text-neutral-700 dark:text-neutral-300">
                     <strong>Dados oficiais das despesas da Secretaria de Estado de Cultura de Minas Gerais</strong>
                 </p>
             </div>
-            <div className="border-l border-neutral-700 dark:border-neutral-300 h-80 xl mx-10 2xl:mx-20"></div>
-            <div className="w-1/2 pl-4">
+            <div className="border-t md:border-l border-neutral-700 dark:border-neutral-300 h-auto md:h-80 w-80 md:w-0 xl mx-4 md:mx-10 2xl:mx-20"></div>
+
+            <div className="w-full md:w-1/2 text-center md:text-left p-5 md:pl-4">
                 <p className="font-DMsans text-neutral-700 dark:text-neutral-300 text-xl md:text-2xl lg:text-3xl">{texts[currentText]}</p>
             </div>
         </div>    

From 3f25106d02230621572a86ad44b7286b8a703e78 Mon Sep 17 00:00:00 2001
From: Mateushqms <mateushqms@gmail.com>
Date: Sat, 31 Aug 2024 18:50:27 -0300
Subject: [PATCH 13/31] fix: Ajuste na logica do backend que fazia com que nao
 pegasse todos os meses na API

---
 backend/src/services/tendersMonthService.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/backend/src/services/tendersMonthService.js b/backend/src/services/tendersMonthService.js
index 185be54..1f25a3b 100644
--- a/backend/src/services/tendersMonthService.js
+++ b/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,
-};
-
+};
\ No newline at end of file

From dae0ab89cf3d1f79554c5c8b19c844aefa7e5cd9 Mon Sep 17 00:00:00 2001
From: Mateushqms <mateushqms@gmail.com>
Date: Sun, 1 Sep 2024 14:08:39 -0300
Subject: [PATCH 14/31] fix: Ajustando o Dashboard para puxar os dados da API
 pelo arquivo da API

---
 front/src/components/Dashboard.tsx | 22 +++++++++++-----------
 front/src/services/api.ts          |  8 +++-----
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/front/src/components/Dashboard.tsx b/front/src/components/Dashboard.tsx
index 7b97829..6c8a6f5 100644
--- a/front/src/components/Dashboard.tsx
+++ b/front/src/components/Dashboard.tsx
@@ -7,9 +7,9 @@ import { CalendarClock, MoveLeft, MoveRight } from 'lucide-react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { ptBR } from 'date-fns/locale';
+import { fettchYearAndMonthTender } from '../services/api';
 
 interface Dados {
-  id: number;
   committed_value: number;
   liquidated_value: number;
   paid_value: number;
@@ -17,7 +17,7 @@ interface Dados {
   month: number;
 }
 
-const DashboardWithFilter: React.FC = () => {
+const Dashboard: React.FC = () => {
   const [data, setData] = useState<Dados[]>([]);
   const [lineChartSeries, setLineChartSeries] = useState<any>([]);
   const [pieChartSeries, setPieChartSeries] = useState<number[]>([]);
@@ -37,13 +37,13 @@ const DashboardWithFilter: React.FC = () => {
       const endMonth = (endDate.getMonth() + 1).toString().padStart(2, '0');
       const endYear = endDate.getFullYear().toString();
 
-      const response = await fetch(`http://localhost:5000/tenders?start=${startYear}${startMonth}&end=${endYear}${endMonth}`);
-      const data: Dados[] = await response.json();
+      const data = await fettchYearAndMonthTender({ startYear, startMonth, endYear, endMonth });
       setData(data);
 
-      const committedValues = data.map(item => item.committed_value);
-      const liquidatedValues = data.map(item => item.liquidated_value);
-      const paidValues = data.map(item => item.paid_value);
+      const committedValues = data.map((item: Dados) => item.committed_value);
+      const liquidatedValues = data.map((item: Dados) => item.liquidated_value);
+      const paidValues = data.map((item: Dados) => item.paid_value);
+
 
       setLineChartSeries([
         { name: 'Valor Empenhado', data: committedValues },
@@ -51,9 +51,9 @@ const DashboardWithFilter: React.FC = () => {
         { name: 'Valor Pago', data: paidValues }
       ]);
 
-      const totalCommitted = data.reduce((acc, item) => acc + item.committed_value, 0);
-      const totalLiquidated = data.reduce((acc, item) => acc + item.liquidated_value, 0);
-      const totalPaid = data.reduce((acc, item) => acc + item.paid_value, 0);
+      const totalCommitted = data.reduce((acc: number, item: Dados) => acc + item.committed_value, 0);
+      const totalLiquidated = data.reduce((acc: number, item: Dados) => acc + item.liquidated_value, 0);
+      const totalPaid = data.reduce((acc: number, item: Dados) => acc + item.paid_value, 0);
 
       setPieChartSeries([totalCommitted, totalLiquidated, totalPaid]);
       setTotalSales(totalCommitted);
@@ -234,4 +234,4 @@ const DashboardWithFilter: React.FC = () => {
   );
 };
 
-export default DashboardWithFilter;
\ No newline at end of file
+export default Dashboard;
\ No newline at end of file
diff --git a/front/src/services/api.ts b/front/src/services/api.ts
index 6891b7a..642f65f 100644
--- a/front/src/services/api.ts
+++ b/front/src/services/api.ts
@@ -5,8 +5,6 @@ interface SearchParams {
   startMonth: string;
   endYear: string;
   endMonth: string;
-  cityId: number;
-  unitId: string;
 }
 
 export const fetchCities = async () => {
@@ -53,10 +51,10 @@ export const fetchYearTender = async (year: number) => {
     }
 }
 
-export const searchLicitacoes = async (params: SearchParams) => {
-  const { startYear, startMonth, endYear, endMonth, cityId, unitId } = params;
+export const fettchYearAndMonthTender = async (params: SearchParams) => {
+  const { startYear, startMonth, endYear, endMonth } = params;
   
-  const url = `http://localhost:5000/tenders?start=${startYear}${startMonth}&end=${endYear}${endMonth}&city=${cityId}`;
+  const url = `https://minas-cultura-api.onrender.com/tenders?start=${startYear}${startMonth}&end=${endYear}${endMonth}`;
   
   try {
     const response = await axios.get(url);

From 61f5cd8172ff82f3bec5cf5bf20d1cf28b94da8a Mon Sep 17 00:00:00 2001
From: Mateushqms <mateushqms@gmail.com>
Date: Sun, 1 Sep 2024 14:11:28 -0300
Subject: [PATCH 15/31] delete: exclundo os exports da api antiga

---
 front/src/services/api.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/front/src/services/api.ts b/front/src/services/api.ts
index 642f65f..715bef9 100644
--- a/front/src/services/api.ts
+++ b/front/src/services/api.ts
@@ -54,7 +54,7 @@ export const fetchYearTender = async (year: number) => {
 export const fettchYearAndMonthTender = async (params: SearchParams) => {
   const { startYear, startMonth, endYear, endMonth } = params;
   
-  const url = `https://minas-cultura-api.onrender.com/tenders?start=${startYear}${startMonth}&end=${endYear}${endMonth}`;
+  const url = `http://localhost:5000/tenders?start=${startYear}${startMonth}&end=${endYear}${endMonth}`;
   
   try {
     const response = await axios.get(url);
@@ -64,3 +64,17 @@ export const fettchYearAndMonthTender = async (params: SearchParams) => {
     throw error;
   }
 };
+/* pra quando a API remota estiver com a lógica certa
+export const fettchYearAndMonthTender = async (params: SearchParams) => {
+  const { startYear, startMonth, endYear, endMonth } = params;
+  
+  const url = `https://minas-cultura-api.onrender.com/tenders?start=${startYear}${startMonth}&end=${endYear}${endMonth}`;
+  
+  try {
+    const response = await axios.get(url);
+    return response.data;
+  } catch (error) {
+    console.error('Error searching tenders:', error);
+    throw error;
+  }
+};*/

From 015e0714100c87ec0b0d7fa547b54fe17c39cbfa Mon Sep 17 00:00:00 2001
From: Mateushqms <mateushqms@gmail.com>
Date: Sun, 1 Sep 2024 15:45:13 -0300
Subject: [PATCH 16/31] refactor: Substituicao do componente Dashboard para o
 componente Filtro

---
 front/src/app/Pesquisa/page.tsx |   2 -
 front/src/components/Filtro.tsx | 438 +++++++++++---------------------
 2 files changed, 155 insertions(+), 285 deletions(-)

diff --git a/front/src/app/Pesquisa/page.tsx b/front/src/app/Pesquisa/page.tsx
index 5936172..89760b4 100644
--- a/front/src/app/Pesquisa/page.tsx
+++ b/front/src/app/Pesquisa/page.tsx
@@ -1,11 +1,9 @@
 import Filtro from "@/components/Filtro";
-import Dashboard from '@/components/Dashboard';
 
 export default function Pesquisa() {
     return (
         <main className="bg-primary-gray dark:bg-neutral-900 flex flex-col items-center min-h-screen gap-10 p-12">
             <Filtro />
-            <Dashboard/>
         </main>
     )
 }
\ No newline at end of file
diff --git a/front/src/components/Filtro.tsx b/front/src/components/Filtro.tsx
index 77f8509..6c8a6f5 100644
--- a/front/src/components/Filtro.tsx
+++ b/front/src/components/Filtro.tsx
@@ -1,16 +1,15 @@
 'use client';
+
 import React, { useState, useEffect } from 'react';
-import Chart from 'react-apexcharts';
+import ApexCharts from 'react-apexcharts';
 import { ApexOptions } from 'apexcharts';
-import { fetchCities, fetchUnits, searchLicitacoes } from '../services/api';
-import { MapPin, CalendarClock, MoveLeft, MoveRight } from 'lucide-react';
+import { CalendarClock, MoveLeft, MoveRight } from 'lucide-react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { ptBR } from 'date-fns/locale';
+import { fettchYearAndMonthTender } from '../services/api';
 
-interface LicitacaoData {
-  administrative_unit_id: number;
-  city_id: number;
+interface Dados {
   committed_value: number;
   liquidated_value: number;
   paid_value: number;
@@ -18,138 +17,60 @@ interface LicitacaoData {
   month: number;
 }
 
-const Filtro: React.FC = () => {
-  const [selectedCityId, setSelectedCityId] = useState<number | null>(null);
-  const [selectedUnit, setSelectedUnit] = useState<string>('');
-  const [cities, setCities] = useState<{ id: number; name: string }[]>([]);
-  const [units, setUnits] = useState<{ id: number; name: string }[]>([]);
-  const [empenhadoSeries, setEmpenhadoSeries] = useState<ApexAxisChartSeries>([]);
-  const [liquidadoSeries, setLiquidadoSeries] = useState<ApexAxisChartSeries>([]);
-  const [pagoSeries, setPagoSeries] = useState<ApexAxisChartSeries>([]);
+const Dashboard: React.FC = () => {
+  const [data, setData] = useState<Dados[]>([]);
+  const [lineChartSeries, setLineChartSeries] = useState<any>([]);
+  const [pieChartSeries, setPieChartSeries] = useState<number[]>([]);
+  const [totalSales, setTotalSales] = useState<number>(0);
+  const [totalRevenue, setTotalRevenue] = useState<number>(0);
+  const [totalUsers, setTotalUsers] = useState<number>(0);
   const [startDate, setStartDate] = useState<Date | null>(null);
   const [endDate, setEndDate] = useState<Date | null>(null);
-  const [isClient, setIsClient] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const isHighContrastMode = document.documentElement.classList.contains('high-contrast');
-  const [chartOptions, setChartOptions] = useState<ApexOptions>({
-    chart: {
-      type: 'bar',
-      background: '#ffffff',
-    },
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        distributed: true,
-        barHeight: '100%',
-        colors: {
-          ranges: [{ from: 0, to: 5000000000, color: '#ED1C24' }],
-        },
-      },
-    },
-    xaxis: {
-      categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
-      type: 'category',
-    },
-    yaxis: {
-        labels: {
-          formatter: (value) => `R$ ${value.toLocaleString('pt-BR')}`, // Adiciona o símbolo R$ e formata os números
-        },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    
-    legend: {
-      show: false,
-    },
-    responsive: [
-      { breakpoint: 2500, options: { chart: { height: 200, width: 1200 } } },
-      { breakpoint: 1025, options: { chart: { height: 424, width: 800 } } },
-      { breakpoint: 640, options: { chart: { height: 200, width: 310 } } },
-      { breakpoint: 769, options: { chart: { height: 424, width: 700 } } },
-      
-    ],
-    theme: {
-      mode: 'light', // Default mode
-    },
-  });
-  useEffect(() => {
-    setIsClient(true);
-  
-    const root = document.documentElement;
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.attributeName === "class") {
-          const isDarkMode = root.classList.contains('dark');
-          const isHighContrastMode = root.classList.contains('high-contrast');
-  
-          setChartOptions((prevOptions) => ({
-            ...prevOptions,
-            chart: {
-              ...prevOptions.chart,
-              background: isHighContrastMode ? '#000000' : isDarkMode ? '#1f1f1f' : '#ffffff',
-              foreColor: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
-            },
-            xaxis: {
-              ...prevOptions.xaxis,
-              labels: {
-                style: {
-                  colors: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
-                }
-              }
-            },
-            yaxis: {
-              ...prevOptions.yaxis,
-              labels: {
-                style: {
-                  colors: isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000',
-                },
-                formatter: (value) => `R$ ${value.toLocaleString('pt-BR')}`, // Adiciona o símbolo R$ e formata os números
-              }
-            },
-            plotOptions: {
-              ...prevOptions.plotOptions,
-              bar: {
-                ...prevOptions.plotOptions?.bar ?? {},
-                colors: {
-                  ranges: [{
-                    from: 0,
-                    to: 5000000000,
-                    color: isHighContrastMode ? '#FFEA00' : isDarkMode ? '#ED1C24' : '#ED1C24',
-                  }]
-                }
-              }
-            }
-          }));
-        }
-      });
-    });
-  
-    observer.observe(root, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-  
-    return () => observer.disconnect();
-  }, []);
-  const loadCities = async () => {
-    try {
-      const cities = await fetchCities();
-      setCities(cities);
-    } catch (error) {
-      console.error('Erro ao buscar cidades:', error);
-    }
-  };
 
-  const loadUnits = async () => {
+  const fetchData = async (startDate: Date | null, endDate: Date | null) => {
+    if (!startDate || !endDate) return;
+
     try {
-      const units = await fetchUnits();
-      setUnits(units);
+      const startMonth = (startDate.getMonth() + 1).toString().padStart(2, '0');
+      const startYear = startDate.getFullYear().toString();
+      const endMonth = (endDate.getMonth() + 1).toString().padStart(2, '0');
+      const endYear = endDate.getFullYear().toString();
+
+      const data = await fettchYearAndMonthTender({ startYear, startMonth, endYear, endMonth });
+      setData(data);
+
+      const committedValues = data.map((item: Dados) => item.committed_value);
+      const liquidatedValues = data.map((item: Dados) => item.liquidated_value);
+      const paidValues = data.map((item: Dados) => item.paid_value);
+
+
+      setLineChartSeries([
+        { name: 'Valor Empenhado', data: committedValues },
+        { name: 'Valor Liquidado', data: liquidatedValues },
+        { name: 'Valor Pago', data: paidValues }
+      ]);
+
+      const totalCommitted = data.reduce((acc: number, item: Dados) => acc + item.committed_value, 0);
+      const totalLiquidated = data.reduce((acc: number, item: Dados) => acc + item.liquidated_value, 0);
+      const totalPaid = data.reduce((acc: number, item: Dados) => acc + item.paid_value, 0);
+
+      setPieChartSeries([totalCommitted, totalLiquidated, totalPaid]);
+      setTotalSales(totalCommitted);
+      setTotalRevenue(totalLiquidated);
+      setTotalUsers(totalPaid);
+
+      setErrorMessage(null);
     } catch (error) {
-      console.error('Erro ao buscar unidades:', error);
+      console.error('Erro ao buscar dados:', error);
+      setErrorMessage('Erro ao buscar dados.');
     }
   };
 
+  useEffect(() => {
+    fetchData(startDate, endDate);
+  }, [startDate, endDate]);
+
   const renderCustomHeader = ({
     date,
     decreaseYear,
@@ -193,173 +114,124 @@ const Filtro: React.FC = () => {
     }
   };
 
-  const fetchAndProcessData = async () => {
-    if (!selectedCityId) return;
-
-    try {
-      const startMonth = startDate ? (startDate.getMonth() + 1).toString().padStart(2, '0') : '';
-      const startYear = startDate ? startDate.getFullYear().toString() : '';
-      const endMonth = endDate ? (endDate.getMonth() + 1).toString().padStart(2, '0') : '';
-      const endYear = endDate ? endDate.getFullYear().toString() : '';
-
-      const data: LicitacaoData[] = await searchLicitacoes({
-        startYear,
-        startMonth,
-        endYear,
-        endMonth,
-        cityId: selectedCityId,
-        unitId: selectedUnit,
-      });
-
-      const empData: { [key: number]: number[] } = {};
-      const liquidData: { [key: number]: number[] } = {};
-      const pagoData: { [key: number]: number[] } = {};
-
-      const filteredData = selectedUnit
-        ? data.filter(item => item.administrative_unit_id === Number(selectedUnit))
-        : data;
-
-      filteredData.forEach((item: LicitacaoData) => {
-        const unitId = item.administrative_unit_id;
-        const month = item.month - 1;
-
-        if (!empData[unitId]) empData[unitId] = new Array(12).fill(0);
-        if (!liquidData[unitId]) liquidData[unitId] = new Array(12).fill(0);
-        if (!pagoData[unitId]) pagoData[unitId] = new Array(12).fill(0);
-
-        empData[unitId][month] += item.committed_value;
-        liquidData[unitId][month] += item.liquidated_value;
-        pagoData[unitId][month] += item.paid_value;
-      });
-
-      const empenhadoSeries: ApexAxisChartSeries = Object.keys(empData).map(key => ({
-        name: `Unidade ${key}`,
-        data: empData[parseInt(key)]
-      }));
-
-      const liquidadoSeries: ApexAxisChartSeries = Object.keys(liquidData).map(key => ({
-        name: `Unidade ${key}`,
-        data: liquidData[parseInt(key)]
-      }));
-
-      const pagoSeries: ApexAxisChartSeries = Object.keys(pagoData).map(key => ({
-        name: `Unidade ${key}`,
-        data: pagoData[parseInt(key)]
-      }));
-
-      setEmpenhadoSeries(empenhadoSeries);
-      setLiquidadoSeries(liquidadoSeries);
-      setPagoSeries(pagoSeries);
-      setErrorMessage(null);
-
-      
-    } catch (error) {
-      console.error('Erro ao buscar dados de licitações:', error);
-      setErrorMessage('Erro ao buscar dados de licitações.');
-    }
+  const lineChartOptions: ApexOptions = {
+    chart: {
+      type: 'line',
+    },
+    title: {
+      text: 'Valores',
+      align: 'center'
+    },
+    xaxis: {
+      categories: data.map(item => `${item.year}-${String(item.month).padStart(2, '0')}`)
+    },
+    yaxis: {
+      title: {
+        text: 'Valores'
+      },
+      labels: {
+        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
+      }
+    },
+    colors: ['#ED1C24', '#F19C28', '#2FB551']
   };
 
-  useEffect(() => {
-    loadCities();
-    loadUnits();
-  }, []);
-
-  useEffect(() => {
-    if (selectedCityId && startDate && endDate) {
-      fetchAndProcessData();
+  const pieChartOptions: ApexOptions = {
+    chart: {
+      type: 'pie',
+    },
+    title: {
+      text: 'Distribuição de valores',
+      align: 'center'
+    },
+    labels: ['Valor Empenhado', 'Valor Liquidado', 'Valor Pago'],
+    tooltip: {
+      y: {
+        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
+      }
+    },
+    colors: ['#ED1C24', '#F19C28', '#2FB551'],
+    legend: {
+      position: 'bottom',
     }
-  }, [selectedCityId, selectedUnit, startDate, endDate]);
-
+  };
 
   return (
-    <>
-      <div className="container bg-primary-white dark:bg-neutral-800 border rounded-lg flex flex-col items-center justify-center lg:p-12 p-8">
-        <h1 className="text-neutral-700 dark:text-primary-white font-DMsans text-lg lg:text-4xl xl:text-5xl text-center mb-[50px]">
-          Pesquise por cidade, período e tema
-        </h1>
-        <ul className="flex lg:flex-row w-full justify-center flex-col gap-4">
-          <li className="relative flex items-center">
-            <MapPin className="w-6 h-6" color="#ED1C24" />
-            <select
-              className="w-full px-4 py-2 focus:outline-none bg-transparent dark:text-neutral-300 dark:bg-neutral-800"
-              onChange={(e) => setSelectedCityId(Number(e.target.value))}
-            >
-              <option value="">Selecione uma cidade</option>
-              {cities.map((city: any) => (
-                <option key={city.id} value={city.id}>
-                  {city.name}
-                </option>
-              ))}
-            </select>
-            <div className="border-b border-neutral-700 dark:border-neutral-400 absolute left-0 right-0 bottom-0"></div>
-          </li>
-
-          {/*<li className="relative flex items-center">
-            <MapPin className="w-6 h-6" color="#ED1C24" />
-            <select
-              className="w-full px-4 py-2 focus:outline-none bg-transparent dark:text-neutral-300"
-              value={selectedUnit}
-              onChange={(e) => setSelectedUnit(e.target.value)}
-              disabled={!selectedCityId}
-            >
-              <option value="">Selecione uma unidade</option>
-              {units.map(unit => (
-                <option key={unit.id} value={unit.id}>{unit.name}</option>
-              ))}
-            </select>
-            <div className="border-b border-neutral-700 dark:border-neutral-400 absolute left-0 right-0 bottom-0"></div>
-          </li>*/}
+    <div className="container">
+      <div className="mb-10">
+        <div className="container bg-primary-white dark:bg-neutral-800 border rounded-lg flex flex-col items-center justify-center lg:p-12 p-8">
+          <h1 className="text-neutral-700 dark:text-primary-white font-DMsans text-lg lg:text-4xl xl:text-5xl text-center mb-[50px]">
+            Pesquise por período
+          </h1>
+          <ul className="flex lg:flex-row w-full justify-center flex-col gap-4">
+            <li className="relative flex items-center">
+              <CalendarClock className="w-6 h-6" color="#ED1C24" />
+              <DatePicker
+                selected={startDate}
+                onChange={handleStartDateChange}
+                dateFormat="MM / yyyy"
+                showMonthYearPicker
+                renderCustomHeader={renderCustomHeader}
+                maxDate={new Date(2024, 11, 31)}
+                className="w-full px-4 py-2 focus:outline-none bg-transparent text-xs md:text-base dark:text-neutral-300"
+                placeholderText="Data Inicial"
+                locale={ptBR}
+              />
+              <span className="px-2"><MoveRight className="size-3 md:size-auto dark:text-neutral-300" /></span>
+              <DatePicker
+                selected={endDate}
+                onChange={handleEndDateChange}
+                dateFormat="MM / yyyy"
+                showMonthYearPicker
+                renderCustomHeader={renderCustomHeader}
+                minDate={startDate ?? undefined}
+                maxDate={new Date(2024, 11, 31)}
+                className="w-full px-4 py-2 focus:outline-none bg-transparent text-xs md:text-base dark:text-neutral-300"
+                placeholderText="Data final"
+                locale={ptBR}
+              />
+              <div className="border-b border-neutral-700 dark:border-neutral-400 absolute left-0 right-0 bottom-0"></div>
+            </li>
+          </ul>
+        </div>
 
-          <li className="relative flex items-center">
-            <CalendarClock className="w-6 h-6" color="#ED1C24" />
-            <DatePicker
-              selected={startDate}
-              onChange={handleStartDateChange}
-              dateFormat="MM / yyyy"
-              showMonthYearPicker
-              renderCustomHeader={renderCustomHeader}
-              maxDate={new Date(2024, 11, 31)}
-              className="w-full px-4 py-2 focus:outline-none bg-transparent text-xs md:text-base dark:text-neutral-300"
-              placeholderText="Data Inicial"
-              locale={ptBR}
-            />
-            <span className="px-2"><MoveRight className="size-3 md:size-auto dark:text-neutral-300" /></span>
-            <DatePicker
-              selected={endDate}
-              onChange={handleEndDateChange}
-              dateFormat="MM / yyyy"
-              showMonthYearPicker
-              renderCustomHeader={renderCustomHeader}
-              minDate={startDate ?? undefined}
-              maxDate={new Date(2024, 11, 31)}
-              className="w-full px-4 py-2 focus:outline-none bg-transparent text-xs md:text-base dark:text-neutral-300"
-              placeholderText="Data final"
-              locale={ptBR}
-            />
-            <div className="border-b border-neutral-700 dark:border-neutral-400 absolute left-0 right-0 bottom-0"></div>
-          </li>
-        </ul>      
-      </div>
 
 
-      <div className="bg-primary-gray dark:bg-neutral-900">
-        <div className="flex flex-col items-center mx-auto">
-          <div>
-            <h2 className="flex dark:text-neutral-300 justify-center font-DMSans text-2xl mt-4 mb-2">Valor Empenhado</h2>
-            <Chart options={chartOptions} series={empenhadoSeries} type="bar" />
+        <div className="flex lg:justify-center md:justify-center flex-wrap gap-2 mb-6 mt-6">
+          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
+            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Empenhado</h3>
+            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalSales.toLocaleString()}</p>
+          </div>
+          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
+            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Liquidado</h3>
+            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalRevenue.toLocaleString()}</p>
           </div>
-          <div>
-            <h2 className="flex dark:text-neutral-300 justify-center font-DMSans text-2xl mt-2 mb-2">Valor Liquidado</h2>
-            <Chart options={chartOptions} series={liquidadoSeries} type="bar" />
+          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
+            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Pago</h3>
+            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalUsers.toLocaleString()}</p>
           </div>
-          <div>
-            <h2 className="flex justify-center dark:text-neutral-300 font-DMSans text-2xl mt-2 mb-2">Valor Pago</h2>
-            <Chart options={chartOptions} series={pagoSeries} type="bar" />
+        </div>
+        <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 bg-white">
+          <div className="w-full md:w-1/2">
+            <ApexCharts
+              options={lineChartOptions}
+              series={lineChartSeries}
+              type="line"
+              height={350}
+            />
+          </div>
+          <div className="w-full md:w-1/2">
+            <ApexCharts
+              options={pieChartOptions}
+              series={pieChartSeries}
+              type="pie"
+              height={350}
+            />
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
-export default Filtro;
\ No newline at end of file
+export default Dashboard;
\ No newline at end of file

From bc46ce745d9aa8beb4328473a43e8279e8f686c4 Mon Sep 17 00:00:00 2001
From: Mateushqms <mateushqms@gmail.com>
Date: Sun, 1 Sep 2024 15:45:48 -0300
Subject: [PATCH 17/31] test: Ajuste nos testes do componente Filtro

---
 front/src/testes/Filtro.test.jsx | 60 ++++++++++----------------------
 1 file changed, 18 insertions(+), 42 deletions(-)

diff --git a/front/src/testes/Filtro.test.jsx b/front/src/testes/Filtro.test.jsx
index b00965c..fefd71c 100644
--- a/front/src/testes/Filtro.test.jsx
+++ b/front/src/testes/Filtro.test.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import Filtro from '../components/Filtro';
-import { fetchCities, fetchUnits, searchLicitacoes } from '../services/api';
-import ApexCharts from 'react-apexcharts';
+import Dashboard from '../components/Dashboard';
+import { fettchYearAndMonthTender } from '../services/api';
 
 // Mock das funções de API
 jest.mock('../services/api');
@@ -15,66 +14,43 @@ jest.mock('react-apexcharts', () => {
   };
 });
 
-const mockCities = [
-  { id: 1, name: 'Cidade 1' },
-  { id: 2, name: 'Cidade 2' },
-];
-
-const mockUnits = [
-  { id: 1, name: 'Unidade 1' },
-  { id: 2, name: 'Unidade 2' },
-];
-
-const mockLicitacoes = [
+const mockData = [
   {
-    administrative_unit_id: 1,
-    city_id: 1,
     committed_value: 1000,
     liquidated_value: 800,
     paid_value: 600,
     year: 2023,
     month: 1,
   },
-  // Adicione mais dados conforme necessário
 ];
 
 beforeEach(() => {
-  fetchCities.mockResolvedValue(mockCities);
-  fetchUnits.mockResolvedValue(mockUnits);
-  searchLicitacoes.mockResolvedValue(mockLicitacoes);
+  fettchYearAndMonthTender.mockResolvedValue(mockData);
 });
 
-test('renders Filtro component', async () => {
-  render(<Filtro />);
+test('renders Dashboard component and interacts with date pickers', async () => {
+  render(<Dashboard />);
 
   // Verifica se o título está presente
-  expect(screen.getByText('Pesquise por cidade, período e tema')).toBeInTheDocument();
-
-  // Verifica se o seletor de cidades está presente
-  expect(screen.getByText('Selecione uma cidade')).toBeInTheDocument();
+  expect(screen.getByText('Pesquise por período')).toBeInTheDocument();
 
-  // Aguarda a carga das cidades
-  await waitFor(() => expect(fetchCities).toHaveBeenCalled());
-
-  // Simula a seleção de uma cidade
-  fireEvent.change(screen.getByRole('combobox'), { target: { value: '1' } });
-
-  // Verifica se a cidade foi selecionada
-  expect(screen.getByRole('combobox')).toHaveValue('1');
+  // Verifica se os campos de data inicial e final estão presentes
+  expect(screen.getByPlaceholderText('Data Inicial')).toBeInTheDocument();
+  expect(screen.getByPlaceholderText('Data final')).toBeInTheDocument();
 
   // Simula a seleção de datas
   fireEvent.change(screen.getByPlaceholderText('Data Inicial'), { target: { value: '01 / 2023' } });
   fireEvent.change(screen.getByPlaceholderText('Data final'), { target: { value: '12 / 2023' } });
 
-  // Aguarda a busca de licitações
-  await waitFor(() => expect(searchLicitacoes).toHaveBeenCalled());
+  // Aguarda a busca de dados
+  await waitFor(() => expect(fettchYearAndMonthTender).toHaveBeenCalled());
 
-  // Verifica se os gráficos são renderizados
-  expect(screen.getByText('Valor Empenhado')).toBeInTheDocument();
-  expect(screen.getByText('Valor Liquidado')).toBeInTheDocument();
-  expect(screen.getByText('Valor Pago')).toBeInTheDocument();
+  // Verifica se os valores totais são exibidos
+  expect(screen.getByText('Total Empenhado')).toBeInTheDocument();
+  expect(screen.getByText('Total Liquidado')).toBeInTheDocument();
+  expect(screen.getByText('Total Pago')).toBeInTheDocument();
 
-  // Verifica se há três gráficos renderizados
+  // Verifica se os gráficos são renderizados
   const charts = screen.getAllByTestId('mock-apexcharts');
-  expect(charts).toHaveLength(3);
+  expect(charts).toHaveLength(2); // O Dashboard tem dois gráficos
 });
\ No newline at end of file

From ca10707df403bd713b4c14d626259a42da5c069d Mon Sep 17 00:00:00 2001
From: Mateushqms <mateushqms@gmail.com>
Date: Sun, 1 Sep 2024 15:47:45 -0300
Subject: [PATCH 18/31] delete: Remocao do componente Dashboard

---
 front/src/components/Dashboard.tsx | 237 -----------------------------
 1 file changed, 237 deletions(-)
 delete mode 100644 front/src/components/Dashboard.tsx

diff --git a/front/src/components/Dashboard.tsx b/front/src/components/Dashboard.tsx
deleted file mode 100644
index 6c8a6f5..0000000
--- a/front/src/components/Dashboard.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import ApexCharts from 'react-apexcharts';
-import { ApexOptions } from 'apexcharts';
-import { CalendarClock, MoveLeft, MoveRight } from 'lucide-react';
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-import { ptBR } from 'date-fns/locale';
-import { fettchYearAndMonthTender } from '../services/api';
-
-interface Dados {
-  committed_value: number;
-  liquidated_value: number;
-  paid_value: number;
-  year: number;
-  month: number;
-}
-
-const Dashboard: React.FC = () => {
-  const [data, setData] = useState<Dados[]>([]);
-  const [lineChartSeries, setLineChartSeries] = useState<any>([]);
-  const [pieChartSeries, setPieChartSeries] = useState<number[]>([]);
-  const [totalSales, setTotalSales] = useState<number>(0);
-  const [totalRevenue, setTotalRevenue] = useState<number>(0);
-  const [totalUsers, setTotalUsers] = useState<number>(0);
-  const [startDate, setStartDate] = useState<Date | null>(null);
-  const [endDate, setEndDate] = useState<Date | null>(null);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
-  const fetchData = async (startDate: Date | null, endDate: Date | null) => {
-    if (!startDate || !endDate) return;
-
-    try {
-      const startMonth = (startDate.getMonth() + 1).toString().padStart(2, '0');
-      const startYear = startDate.getFullYear().toString();
-      const endMonth = (endDate.getMonth() + 1).toString().padStart(2, '0');
-      const endYear = endDate.getFullYear().toString();
-
-      const data = await fettchYearAndMonthTender({ startYear, startMonth, endYear, endMonth });
-      setData(data);
-
-      const committedValues = data.map((item: Dados) => item.committed_value);
-      const liquidatedValues = data.map((item: Dados) => item.liquidated_value);
-      const paidValues = data.map((item: Dados) => item.paid_value);
-
-
-      setLineChartSeries([
-        { name: 'Valor Empenhado', data: committedValues },
-        { name: 'Valor Liquidado', data: liquidatedValues },
-        { name: 'Valor Pago', data: paidValues }
-      ]);
-
-      const totalCommitted = data.reduce((acc: number, item: Dados) => acc + item.committed_value, 0);
-      const totalLiquidated = data.reduce((acc: number, item: Dados) => acc + item.liquidated_value, 0);
-      const totalPaid = data.reduce((acc: number, item: Dados) => acc + item.paid_value, 0);
-
-      setPieChartSeries([totalCommitted, totalLiquidated, totalPaid]);
-      setTotalSales(totalCommitted);
-      setTotalRevenue(totalLiquidated);
-      setTotalUsers(totalPaid);
-
-      setErrorMessage(null);
-    } catch (error) {
-      console.error('Erro ao buscar dados:', error);
-      setErrorMessage('Erro ao buscar dados.');
-    }
-  };
-
-  useEffect(() => {
-    fetchData(startDate, endDate);
-  }, [startDate, endDate]);
-
-  const renderCustomHeader = ({
-    date,
-    decreaseYear,
-    increaseYear,
-  }: {
-    date: Date;
-    decreaseYear: () => void;
-    increaseYear: () => void;
-  }) => {
-    const months = [
-      'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
-      'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
-    ];
-    return (
-      <div className="flex justify-between items-center py-2 px-4 rounded-md">
-        <button onClick={decreaseYear} className="p-2 rounded-md">
-          <MoveLeft />
-        </button>
-        <span className="text-sm md:text-lg font-DMsans">
-          {months[date.getMonth()]} de {date.getFullYear()}
-        </span>
-        <button onClick={increaseYear} className="p-2 rounded-md">
-          <MoveRight />
-        </button>
-      </div>
-    );
-  };
-
-  const handleStartDateChange = (date: Date | null) => {
-    if (date && endDate && date > endDate) {
-      setEndDate(date);
-    }
-    setStartDate(date);
-  };
-
-  const handleEndDateChange = (date: Date | null) => {
-    if (date && startDate && date < startDate) {
-      setEndDate(startDate);
-    } else {
-      setEndDate(date);
-    }
-  };
-
-  const lineChartOptions: ApexOptions = {
-    chart: {
-      type: 'line',
-    },
-    title: {
-      text: 'Valores',
-      align: 'center'
-    },
-    xaxis: {
-      categories: data.map(item => `${item.year}-${String(item.month).padStart(2, '0')}`)
-    },
-    yaxis: {
-      title: {
-        text: 'Valores'
-      },
-      labels: {
-        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
-      }
-    },
-    colors: ['#ED1C24', '#F19C28', '#2FB551']
-  };
-
-  const pieChartOptions: ApexOptions = {
-    chart: {
-      type: 'pie',
-    },
-    title: {
-      text: 'Distribuição de valores',
-      align: 'center'
-    },
-    labels: ['Valor Empenhado', 'Valor Liquidado', 'Valor Pago'],
-    tooltip: {
-      y: {
-        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
-      }
-    },
-    colors: ['#ED1C24', '#F19C28', '#2FB551'],
-    legend: {
-      position: 'bottom',
-    }
-  };
-
-  return (
-    <div className="container">
-      <div className="mb-10">
-        <div className="container bg-primary-white dark:bg-neutral-800 border rounded-lg flex flex-col items-center justify-center lg:p-12 p-8">
-          <h1 className="text-neutral-700 dark:text-primary-white font-DMsans text-lg lg:text-4xl xl:text-5xl text-center mb-[50px]">
-            Pesquise por período
-          </h1>
-          <ul className="flex lg:flex-row w-full justify-center flex-col gap-4">
-            <li className="relative flex items-center">
-              <CalendarClock className="w-6 h-6" color="#ED1C24" />
-              <DatePicker
-                selected={startDate}
-                onChange={handleStartDateChange}
-                dateFormat="MM / yyyy"
-                showMonthYearPicker
-                renderCustomHeader={renderCustomHeader}
-                maxDate={new Date(2024, 11, 31)}
-                className="w-full px-4 py-2 focus:outline-none bg-transparent text-xs md:text-base dark:text-neutral-300"
-                placeholderText="Data Inicial"
-                locale={ptBR}
-              />
-              <span className="px-2"><MoveRight className="size-3 md:size-auto dark:text-neutral-300" /></span>
-              <DatePicker
-                selected={endDate}
-                onChange={handleEndDateChange}
-                dateFormat="MM / yyyy"
-                showMonthYearPicker
-                renderCustomHeader={renderCustomHeader}
-                minDate={startDate ?? undefined}
-                maxDate={new Date(2024, 11, 31)}
-                className="w-full px-4 py-2 focus:outline-none bg-transparent text-xs md:text-base dark:text-neutral-300"
-                placeholderText="Data final"
-                locale={ptBR}
-              />
-              <div className="border-b border-neutral-700 dark:border-neutral-400 absolute left-0 right-0 bottom-0"></div>
-            </li>
-          </ul>
-        </div>
-
-
-
-        <div className="flex lg:justify-center md:justify-center flex-wrap gap-2 mb-6 mt-6">
-          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
-            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Empenhado</h3>
-            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalSales.toLocaleString()}</p>
-          </div>
-          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
-            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Liquidado</h3>
-            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalRevenue.toLocaleString()}</p>
-          </div>
-          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
-            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Pago</h3>
-            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalUsers.toLocaleString()}</p>
-          </div>
-        </div>
-        <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 bg-white">
-          <div className="w-full md:w-1/2">
-            <ApexCharts
-              options={lineChartOptions}
-              series={lineChartSeries}
-              type="line"
-              height={350}
-            />
-          </div>
-          <div className="w-full md:w-1/2">
-            <ApexCharts
-              options={pieChartOptions}
-              series={pieChartSeries}
-              type="pie"
-              height={350}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Dashboard;
\ No newline at end of file

From dd70e03be1126773e5381a1f6144b2ceb8477cb8 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Sun, 1 Sep 2024 16:47:15 -0300
Subject: [PATCH 19/31] chore: mudando texto do guia sobre e trabalhando
 responsividade

---
 front/src/app/page.tsx               |  7 ++--
 front/src/components/Grafico.tsx     | 16 ++++----
 front/src/components/Informacoes.tsx | 12 +++++-
 front/src/components/Integrantes.tsx |  2 +-
 front/src/components/Pilares.tsx     | 18 ++++-----
 front/src/components/Slider.tsx      | 59 ++++++++++++++++------------
 6 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
index 8960c47..2eb0581 100644
--- a/front/src/app/page.tsx
+++ b/front/src/app/page.tsx
@@ -12,11 +12,12 @@ 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">
       <Mensagem />
-      <div className="container font-sans">
-        <Slider />
-      </div>  
+      <Slider />
       <Grafico />
       <Busca />
+      <div className="container font-sans mb-5">
+        <Pilares />
+      </div> 
     </main>
   );
 }
diff --git a/front/src/components/Grafico.tsx b/front/src/components/Grafico.tsx
index 5b68d9c..91b4c73 100644
--- a/front/src/components/Grafico.tsx
+++ b/front/src/components/Grafico.tsx
@@ -282,8 +282,8 @@ const Grafico: React.FC = () => {
 
   return (
     <div className="w-4/5 mx-auto mt-10">
-      <h1 className='text-lg md:text-xl lg:text-3xl font-bold mb-4 text-center text-neutral-700 dark:text-neutral-300'>
-        Despesas em Cultura em Minas Gerais ao Longo dos Anos (2002-2023)
+      <h1 className='text-xl lg:text-3xl font-DMsans mb-4 text-center text-neutral-700 dark:text-neutral-300'>
+        <strong>Despesas em Cultura em Minas Gerais ao Longo dos Anos (2002-2023)</strong>
       </h1>
       {errorMessage && <p className='text-red-500'>{errorMessage}</p>}
       <div>
@@ -295,22 +295,22 @@ const Grafico: React.FC = () => {
         />
       </div>
       <ul className="space-y-7 mt-8">
-        <li className="flex flex-wrap items-center gap-4 text-base lg:text-lg">
-          <div className="flex-shrink-0 w-8 h-8 legend-color-red rounded-sm"></div>
+        <li className="flex flex-wrap items-center gap-4 text-sm md:text-base lg:text-lg">
+          <div className="flex-shrink-0 w-5 h-5 md:w-8 md:h-8 legend-color-red rounded-sm"></div>
           <div className="text-neutral-700 dark:text-neutral-300 flex flex-1 flex-col md:flex-row items-start md:items-center gap-2">
             <strong className="md:w-40 w-full">Valor Empenhado:</strong>
             <span className="w-full md:w-auto">Valor do orçamento reservado para fazer face a compromisso formalmente assumido com fornecedor ou credor.</span>
           </div>
         </li>
-        <li className="flex flex-wrap items-center gap-4 text-base lg:text-lg">
-          <div className="flex-shrink-0 w-8 h-8 legend-color-orange rounded-sm"></div>
+        <li className="flex flex-wrap items-center gap-4 text-sm md:text-base lg:text-lg">
+          <div className="flex-shrink-0 w-5 h-5 md:w-8 md:h-8 legend-color-orange rounded-sm"></div>
           <div className="text-neutral-700 dark:text-neutral-300 flex flex-1 flex-col md:flex-row items-start md:items-center gap-2">
             <strong className="md:w-40 w-full">Valor Liquidado:</strong>
             <span className="w-full md:w-auto">Valor que o fornecedor ou credor tem direito a receber referente a produto ou serviço devidamente entregue.</span>
           </div>
         </li>
-        <li className="flex flex-wrap items-center gap-4 text-base lg:text-lg">
-          <div className="flex-shrink-0 w-8 h-8 legend-color-green rounded-sm"></div>
+        <li className="flex flex-wrap items-center gap-4 text-sm md:text-base lg:text-lg">
+          <div className="flex-shrink-0 w-5 h-5 md:w-8 md:h-8 legend-color-green rounded-sm"></div>
           <div className="text-neutral-700 dark:text-neutral-300 flex flex-1 flex-col md:flex-row items-start md:items-center gap-2">
             <strong className="md:w-40 w-full">Valor Pago:</strong>
             <span className="w-full md:w-auto">Valor referente aos pagamentos efetuados através de movimentações bancárias, escriturais e apropriação contábil da despesa.</span>
diff --git a/front/src/components/Informacoes.tsx b/front/src/components/Informacoes.tsx
index b56d5a5..619b945 100644
--- a/front/src/components/Informacoes.tsx
+++ b/front/src/components/Informacoes.tsx
@@ -20,8 +20,16 @@ const Informacoes = () => {
                     <p className="text-neutral-700 dark:text-neutral-300 text-sm md:text-2xl 2xl:text-2xl font-DMsans font-regular text-justify leading-10">
                         Este é um projeto desenvolvido como parte da disciplina de <b>Métodos de Desenvolvimento de Software</b> (MDS) da 
                         Universidade de Brasília (UnB). O objetivo principal deste projeto é criar uma plataforma online para análise e 
-                        armazenamento de dados de licitações relacionadas aos gastos culturais apoiados pelo Governo Federal, utilizando a 
-                        plataforma e a API do Querido Diário.
+                        armazenamento de dados de licitações relacionadas aos gastos culturais apoiados pelo Governo Federal, utilizando 
+                        informações da Secretaria de Cultura do Estado de Minas Gerais.
+                    </p>
+                    <p> </p>
+                    <p className="text-neutral-700 dark:text-neutral-300 text-sm md:text-2xl 2xl:text-2xl font-DMsans font-regular text-justify leading-10">
+                        A plataforma permite aos usuários filtrar dados por um intervalo de tempo para obter informações de interesse, 
+                        além de oferecer um dashboard informativo que facilita a consulta e visualização dos dados. Adicionalmente, 
+                        a plataforma busca abranger a comunidade com funcionalidades como modo noturno, alto contraste e aumento de 
+                        fonte para melhorar a acessibilidade, além de permitir o acesso via dispositivos móveis, garantindo 
+                        disponibilidade em várias plataformas.
                     </p>
                 </div>
             </div>
diff --git a/front/src/components/Integrantes.tsx b/front/src/components/Integrantes.tsx
index 8f6036f..875505a 100644
--- a/front/src/components/Integrantes.tsx
+++ b/front/src/components/Integrantes.tsx
@@ -9,7 +9,7 @@ import Image from "next/image";
 const Integrantes = () => {
     return (
       <div>
-      <div className="bg-primary-gray dark:bg-neutral-900 flex sm:gap-10  justify-center max-w-auto ">
+      <div className="bg-primary-gray dark:bg-neutral-900 flex sm:gap-10 justify-center max-w-auto ">
         <div className="card w-[190px] h-[230px] mb-10 bg-gradient-to-b from-primary-red via-primary-red to-black rounded-lg pt-2 mx-2  font-inherit transition-transform transform hover:scale-110 hover:bg-gradient-to-b hover:from-primary-red hover:to-gray-800 sm:w-[190px] sm:h-[254px] ">
           <div className="card-border-top">
           </div>
diff --git a/front/src/components/Pilares.tsx b/front/src/components/Pilares.tsx
index 9d1672a..5739580 100644
--- a/front/src/components/Pilares.tsx
+++ b/front/src/components/Pilares.tsx
@@ -17,17 +17,17 @@ const Pilares = () => {
         A Secretaria de Cultura e Turismo do Estado de Minas Gerais:
       </h1>
       <div className="flex py-6 lg:gap-6 gap-2 justify-items-center">
-          <div className="w-full text-neutral-700 dark:text-neutral-300 bg-primary-white dark:bg-neutral-800 rounded-2xl text-center lg:p-8 p-2 ">
-            <h1 className="text-md lg:text-4xl md:text-2xl"> Deve preservar</h1>
-            <h2 className="text-xs lg:text-2xl md:text-xl"> o patrimônio cultural do estado de Minas gerais</h2>
+          <div className="gap-2 w-full text-neutral-700 dark:text-neutral-300 bg-primary-white dark:bg-neutral-800 rounded-2xl text-center lg:p-8 p-2 ">
+            <h1 className="text-sm lg:text-2xl md:text-xl"> Deve preservar</h1>
+            <h2 className="text-xs lg:text-xl md:text-lg"> patrimônio cultural do estado de Minas gerais</h2>
           </div>
-          <div className="w-full text-neutral-700 dark:text-neutral-300 bg-primary-white dark:bg-neutral-800 rounded-2xl text-center lg:p-8 p-2 ">
-            <h1 className="text-md lg:text-4xl md:text-2xl "> Deve promover</h1>
-            <h2 className="text-xs lg:text-2xl md:text-xl"> a acessibilidade e inclusão social à cultura</h2>
+          <div className="gap-2 w-full text-neutral-700 dark:text-neutral-300 bg-primary-white dark:bg-neutral-800 rounded-2xl text-center lg:p-8 p-2 ">
+            <h1 className="text-sm lg:text-2xl md:text-xl "> Deve promover</h1>
+            <h2 className="text-xs lg:text-xl md:text-lg"> acessibilidade e inclusão social à cultura</h2>
           </div>
-          <div className="w-full text-neutral-700 dark:text-neutral-300 bg-primary-white dark:bg-neutral-800 rounded-2xl text-center lg:p-8 p-2">
-            <h1 className="text-md lg:text-4xl md:text-2xl"> Deve fomentar</h1>
-            <h2 className="text-xs lg:text-2xl md:text-xl"> a produção artística da população</h2>
+          <div className="gap-2 w-full text-neutral-700 dark:text-neutral-300 bg-primary-white dark:bg-neutral-800 rounded-2xl text-center lg:p-8 p-2">
+            <h1 className="text-sm lg:text-2xl md:text-xl"> Deve fomentar</h1>
+            <h2 className="text-xs lg:text-xl md:text-lg"> produção artística da população</h2>
           </div>
       </div>
     </div>
diff --git a/front/src/components/Slider.tsx b/front/src/components/Slider.tsx
index 4ee6a9d..1cffac9 100644
--- a/front/src/components/Slider.tsx
+++ b/front/src/components/Slider.tsx
@@ -32,33 +32,40 @@ const Slider: React.FC = () => {
     }, []);
 
     return (
-        <div className="relative flex justify-center items-center bg-primary-gray dark:bg-neutral-800">
-            <Swiper
-                slidesPerView={1}
-                modules={[Navigation, Pagination, Autoplay]}
-                navigation={true}
-                pagination={{ clickable: true }}
-                autoplay={{ delay: 5000 }}
-                loop={true}
-            >
-                {data.map((item, index) => (
-                    <SwiperSlide key={index}>
-                        <a className="w-full h-96" href={`${site}${item.link}`} target='_blank'>
-                            <Image
-                                src={`${site}${item.image_url}`}
-                                alt="Slider"
-                                className="w-full object-cover h-96"
-                                width={1920}
-                                height={1080}
-                            />
+        <div className="container font-Dmsans">
+            <h1 className='font-DMsans text-center p-2 md:p-5 text-xl lg:text-3xl font-DMsans text-neutral-700 dark:text-neutral-300'>
+                <span>
+                    <strong>Notícias Recentes sobre Cultura em Minas Gerais</strong>
+                </span>
+            </h1>
+            <div className="relative flex justify-center items-center bg-primary-gray dark:bg-neutral-800">
+                <Swiper
+                    slidesPerView={1}
+                    modules={[Navigation, Pagination, Autoplay]}
+                    navigation={true}
+                    pagination={{ clickable: true }}
+                    autoplay={{ delay: 5000 }}
+                    loop={true}
+                >
+                    {data.map((item, index) => (
+                        <SwiperSlide key={index}>
+                            <a className="w-full h-96" href={`${site}${item.link}`} target='_blank'>
+                                <Image
+                                    src={`${site}${item.image_url}`}
+                                    alt="Slider"
+                                    className="w-full object-cover h-96"
+                                    width={1920}
+                                    height={1080}
+                                />
 
-                            <div className="absolute bottom-0 w-full p-4 bg-black dark:bg-neutral-800 bg-opacity-30 text-white font-sans lg:text-4xl md:text-xl text-sm">
-                                <p className="text-center">{item.title}</p>
-                            </div>
-                        </a>
-                    </SwiperSlide>
-                ))}
-            </Swiper>
+                                <div className="absolute bottom-0 w-full p-4 bg-black dark:bg-neutral-800 bg-opacity-30 text-white font-sans lg:text-4xl md:text-xl text-sm">
+                                    <p className="text-center">{item.title}</p>
+                                </div>
+                            </a>
+                        </SwiperSlide>
+                    ))}
+                </Swiper>
+            </div>
         </div>
     );
 };

From cc61b8e41ddc9a2e452d3612b29d84773dd168eb Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Sun, 1 Sep 2024 16:47:41 -0300
Subject: [PATCH 20/31] =?UTF-8?q?fix:=20atualizando=20endere=C3=A7o=20da?=
 =?UTF-8?q?=20requisi=C3=A7=C3=A3o=20do=20gr=C3=A1fico=20de=20anos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/services/api.ts | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/front/src/services/api.ts b/front/src/services/api.ts
index 6891b7a..6a05a93 100644
--- a/front/src/services/api.ts
+++ b/front/src/services/api.ts
@@ -33,7 +33,7 @@ export const fetchYearlyTendersData = async () => {
     try {
         const requests = [];
         for (let year = 2002; year <= 2023; year++) {
-            requests.push(axios.get(`http://localhost:5000/tenders/year?year=${year}`));
+            requests.push(axios.get(`https://minas-cultura-api.onrender.com/tenders/year?year=${year}`));
         }
         const responses = await Promise.all(requests);
         return responses.flatMap((response) => response.data);
@@ -43,16 +43,6 @@ export const fetchYearlyTendersData = async () => {
     }
 };
 
-export const fetchYearTender = async (year: number) => {
-    try {
-        const response = await axios.get(`http://localhost:5000/tenders/year?year=${year}`);
-        return response.data;
-    } catch (error) {
-        console.error('Error fetching year tender data:', error);
-        return [];
-    }
-}
-
 export const searchLicitacoes = async (params: SearchParams) => {
   const { startYear, startMonth, endYear, endMonth, cityId, unitId } = params;
   

From f6998b71f3d9aa1204f19d5780bba39007bc9c8b Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Sun, 1 Sep 2024 16:55:49 -0300
Subject: [PATCH 21/31] =?UTF-8?q?remove:=20fun=C3=A7=C3=A3o=20fetch=20Year?=
 =?UTF-8?q?lyTender?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/services/api.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/front/src/services/api.ts b/front/src/services/api.ts
index c837458..acc7a04 100644
--- a/front/src/services/api.ts
+++ b/front/src/services/api.ts
@@ -41,16 +41,6 @@ export const fetchYearlyTendersData = async () => {
     }
 };
 
-export const fetchYearTender = async (year: number) => {
-    try {
-        const response = await axios.get(`http://localhost:5000/tenders/year?year=${year}`);
-        return response.data;
-    } catch (error) {
-        console.error('Error fetching year tender data:', error);
-        return [];
-    }
-}
-
 export const fettchYearAndMonthTender = async (params: SearchParams) => {
   const { startYear, startMonth, endYear, endMonth } = params;
   

From c41eb37fb28dae48440b1484957be6296e825cc2 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Sun, 1 Sep 2024 18:00:48 -0300
Subject: [PATCH 22/31] =?UTF-8?q?feat:=20adicionando=20op=C3=A7=C3=B5es=20?=
 =?UTF-8?q?de=20acessibilidade=20no=20Filtro=20e=20refatorando=20gr=C3=A1f?=
 =?UTF-8?q?ico=20de=20linhas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/Filtro.tsx | 480 +++++++++++++++++++++++---------
 1 file changed, 345 insertions(+), 135 deletions(-)

diff --git a/front/src/components/Filtro.tsx b/front/src/components/Filtro.tsx
index 6c8a6f5..bf2c7e5 100644
--- a/front/src/components/Filtro.tsx
+++ b/front/src/components/Filtro.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import ApexCharts from 'react-apexcharts';
+import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { CalendarClock, MoveLeft, MoveRight } from 'lucide-react';
 import DatePicker from 'react-datepicker';
@@ -17,6 +17,8 @@ interface Dados {
   month: number;
 }
 
+const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
 const Dashboard: React.FC = () => {
   const [data, setData] = useState<Dados[]>([]);
   const [lineChartSeries, setLineChartSeries] = useState<any>([]);
@@ -28,6 +30,163 @@ const Dashboard: React.FC = () => {
   const [endDate, setEndDate] = useState<Date | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
+  // Inicialização dos estados dos gráficos com opções padrão
+  const [lineChartOptions, setLineChartOptions] = useState<ApexOptions>({
+    chart: {
+      type: 'line',
+      height: 350,
+      toolbar: {
+        show: true,
+      },
+      zoom: {
+        enabled: true,
+      },
+      animations: {
+        enabled: true,
+      },
+      background: '#ffffff',
+      foreColor: '#000000',
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 2,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    markers: {
+      size: 4,
+    },
+    xaxis: {
+      categories: [],
+      labels: {
+        style: {
+          fontSize: '12px',
+        },
+      },
+      tickAmount: 10,
+    },
+    yaxis: {
+      title: {
+        text: 'Valores',
+        style: {
+          fontSize: '14px',
+        },
+      },
+      labels: {
+        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
+        style: {
+          fontSize: '12px',
+        },
+      },
+    },
+    legend: {
+      position: 'top',
+      horizontalAlign: 'center',
+      fontSize: '14px',
+    },
+    tooltip: {
+      y: {
+        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
+      },
+    },
+    colors: ['#ED1C24', '#F19C28', '#2FB551'],
+    responsive: [
+      {
+        breakpoint: 1024,
+        options: {
+          xaxis: {
+            labels: {
+              style: {
+                fontSize: '10px',
+              },
+            },
+          },
+          yaxis: [
+            {
+              labels: {
+                style: {
+                  fontSize: '10px',
+                },
+              },
+            },
+          ],
+          legend: {
+            fontSize: '12px',
+          },
+        },
+      },
+      {
+        breakpoint: 768,
+        options: {
+          chart: {
+            height: 300,
+          },
+          xaxis: {
+            labels: {
+              style: {
+                fontSize: '8px',
+              },
+            },
+          },
+          yaxis: [
+            {
+              labels: {
+                style: {
+                  fontSize: '8px',
+                },
+              },
+            },
+          ],
+          legend: {
+            fontSize: '10px',
+          },
+        },
+      },
+    ],
+  });
+
+  const [pieChartOptions, setPieChartOptions] = useState<ApexOptions>({
+    chart: {
+      type: 'pie',
+      height: 350,
+      background: '#ffffff',
+      foreColor: '#000000',
+    },
+    labels: ['Valor Empenhado', 'Valor Liquidado', 'Valor Pago'],
+    legend: {
+      position: 'bottom',
+      fontSize: '14px',
+    },
+    tooltip: {
+      y: {
+        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`,
+      },
+    },
+    colors: ['#ED1C24', '#F19C28', '#2FB551'],
+    responsive: [
+      {
+        breakpoint: 1024,
+        options: {
+          legend: {
+            fontSize: '12px',
+          },
+        },
+      },
+      {
+        breakpoint: 768,
+        options: {
+          chart: {
+            height: 300,
+          },
+          legend: {
+            fontSize: '10px',
+          },
+        },
+      },
+    ],
+  });
+
   const fetchData = async (startDate: Date | null, endDate: Date | null) => {
     if (!startDate || !endDate) return;
 
@@ -37,30 +196,43 @@ const Dashboard: React.FC = () => {
       const endMonth = (endDate.getMonth() + 1).toString().padStart(2, '0');
       const endYear = endDate.getFullYear().toString();
 
-      const data = await fettchYearAndMonthTender({ startYear, startMonth, endYear, endMonth });
-      setData(data);
+      const fetchedData = await fettchYearAndMonthTender({ startYear, startMonth, endYear, endMonth });
+
+      if (Array.isArray(fetchedData) && fetchedData.length > 0) {
+        setData(fetchedData);
 
-      const committedValues = data.map((item: Dados) => item.committed_value);
-      const liquidatedValues = data.map((item: Dados) => item.liquidated_value);
-      const paidValues = data.map((item: Dados) => item.paid_value);
+        const categories = fetchedData.map(item => `${item.year}-${String(item.month).padStart(2, '0')}`);
+        const committedValues = fetchedData.map((item: Dados) => item.committed_value);
+        const liquidatedValues = fetchedData.map((item: Dados) => item.liquidated_value);
+        const paidValues = fetchedData.map((item: Dados) => item.paid_value);
 
+        setLineChartSeries([
+          { name: 'Valor Empenhado', data: committedValues },
+          { name: 'Valor Liquidado', data: liquidatedValues },
+          { name: 'Valor Pago', data: paidValues },
+        ]);
 
-      setLineChartSeries([
-        { name: 'Valor Empenhado', data: committedValues },
-        { name: 'Valor Liquidado', data: liquidatedValues },
-        { name: 'Valor Pago', data: paidValues }
-      ]);
+        setLineChartOptions(prevOptions => ({
+          ...prevOptions,
+          xaxis: {
+            ...prevOptions.xaxis,
+            categories,
+          },
+        }));
 
-      const totalCommitted = data.reduce((acc: number, item: Dados) => acc + item.committed_value, 0);
-      const totalLiquidated = data.reduce((acc: number, item: Dados) => acc + item.liquidated_value, 0);
-      const totalPaid = data.reduce((acc: number, item: Dados) => acc + item.paid_value, 0);
+        const totalCommitted = committedValues.reduce((acc, val) => acc + val, 0);
+        const totalLiquidated = liquidatedValues.reduce((acc, val) => acc + val, 0);
+        const totalPaid = paidValues.reduce((acc, val) => acc + val, 0);
 
-      setPieChartSeries([totalCommitted, totalLiquidated, totalPaid]);
-      setTotalSales(totalCommitted);
-      setTotalRevenue(totalLiquidated);
-      setTotalUsers(totalPaid);
+        setPieChartSeries([totalCommitted, totalLiquidated, totalPaid]);
+        setTotalSales(totalCommitted);
+        setTotalRevenue(totalLiquidated);
+        setTotalUsers(totalPaid);
 
-      setErrorMessage(null);
+        setErrorMessage(null);
+      } else {
+        setErrorMessage('Nenhum dado encontrado para o período selecionado.');
+      }
     } catch (error) {
       console.error('Erro ao buscar dados:', error);
       setErrorMessage('Erro ao buscar dados.');
@@ -71,28 +243,107 @@ const Dashboard: React.FC = () => {
     fetchData(startDate, endDate);
   }, [startDate, endDate]);
 
+  const updateChartOptionsForTheme = () => {
+    const isDarkMode = document.documentElement.classList.contains('dark');
+    const isHighContrastMode = document.documentElement.classList.contains('high-contrast');
+
+    const backgroundColor = isHighContrastMode ? '#000000' : isDarkMode ? '#1f1f1f' : '#ffffff';
+    const foreColor = isHighContrastMode ? '#FFFFFF' : isDarkMode ? '#e5e7eb' : '#000000';
+
+    setLineChartOptions(prevOptions => ({
+      ...prevOptions,
+      chart: {
+        ...prevOptions.chart,
+        background: backgroundColor,
+        foreColor: foreColor,
+      },
+      xaxis: {
+        ...prevOptions.xaxis,
+        labels: {
+          ...prevOptions.xaxis?.labels,
+          style: {
+            ...prevOptions.xaxis?.labels?.style,
+            colors: foreColor,
+          },
+        },
+      },
+      yaxis: {
+        ...prevOptions.yaxis,
+        labels: {
+          ...(Array.isArray(prevOptions.yaxis) ? {} : prevOptions.yaxis?.labels),
+          style: {
+            ...(Array.isArray(prevOptions.yaxis) ? {} : prevOptions.yaxis?.labels?.style),
+            colors: foreColor,
+          },
+        },
+      },
+      legend: {
+        ...prevOptions.legend,
+        labels: {
+          colors: foreColor,
+        },
+      },
+    }));
+
+    setPieChartOptions(prevOptions => ({
+      ...prevOptions,
+      chart: {
+        ...prevOptions.chart,
+        background: backgroundColor,
+        foreColor: foreColor,
+      },
+      legend: {
+        ...prevOptions.legend,
+        labels: {
+          colors: foreColor,
+        },
+      },
+    }));
+  };
+
+  useEffect(() => {
+    updateChartOptionsForTheme();
+
+    const observer = new MutationObserver(() => {
+      updateChartOptionsForTheme();
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
   const renderCustomHeader = ({
     date,
+    decreaseMonth,
+    increaseMonth,
     decreaseYear,
     increaseYear,
   }: {
     date: Date;
+    decreaseMonth: () => void;
+    increaseMonth: () => void;
     decreaseYear: () => void;
     increaseYear: () => void;
   }) => {
     const months = [
       'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
-      'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
+      'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro',
     ];
     return (
       <div className="flex justify-between items-center py-2 px-4 rounded-md">
-        <button onClick={decreaseYear} className="p-2 rounded-md">
+        <button onClick={decreaseYear} className="p-2 rounded-md" aria-label="Ano anterior">
           <MoveLeft />
         </button>
         <span className="text-sm md:text-lg font-DMsans">
           {months[date.getMonth()]} de {date.getFullYear()}
         </span>
-        <button onClick={increaseYear} className="p-2 rounded-md">
+        <button onClick={increaseYear} className="p-2 rounded-md" aria-label="Próximo ano">
           <MoveRight />
         </button>
       </div>
@@ -108,130 +359,89 @@ const Dashboard: React.FC = () => {
 
   const handleEndDateChange = (date: Date | null) => {
     if (date && startDate && date < startDate) {
-      setEndDate(startDate);
-    } else {
-      setEndDate(date);
-    }
-  };
-
-  const lineChartOptions: ApexOptions = {
-    chart: {
-      type: 'line',
-    },
-    title: {
-      text: 'Valores',
-      align: 'center'
-    },
-    xaxis: {
-      categories: data.map(item => `${item.year}-${String(item.month).padStart(2, '0')}`)
-    },
-    yaxis: {
-      title: {
-        text: 'Valores'
-      },
-      labels: {
-        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
-      }
-    },
-    colors: ['#ED1C24', '#F19C28', '#2FB551']
-  };
-
-  const pieChartOptions: ApexOptions = {
-    chart: {
-      type: 'pie',
-    },
-    title: {
-      text: 'Distribuição de valores',
-      align: 'center'
-    },
-    labels: ['Valor Empenhado', 'Valor Liquidado', 'Valor Pago'],
-    tooltip: {
-      y: {
-        formatter: (value: number) => `R$ ${value.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`
-      }
-    },
-    colors: ['#ED1C24', '#F19C28', '#2FB551'],
-    legend: {
-      position: 'bottom',
+      setStartDate(date);
     }
+    setEndDate(date);
   };
 
   return (
-    <div className="container">
-      <div className="mb-10">
-        <div className="container bg-primary-white dark:bg-neutral-800 border rounded-lg flex flex-col items-center justify-center lg:p-12 p-8">
-          <h1 className="text-neutral-700 dark:text-primary-white font-DMsans text-lg lg:text-4xl xl:text-5xl text-center mb-[50px]">
-            Pesquise por período
-          </h1>
-          <ul className="flex lg:flex-row w-full justify-center flex-col gap-4">
-            <li className="relative flex items-center">
-              <CalendarClock className="w-6 h-6" color="#ED1C24" />
-              <DatePicker
-                selected={startDate}
-                onChange={handleStartDateChange}
-                dateFormat="MM / yyyy"
-                showMonthYearPicker
-                renderCustomHeader={renderCustomHeader}
-                maxDate={new Date(2024, 11, 31)}
-                className="w-full px-4 py-2 focus:outline-none bg-transparent text-xs md:text-base dark:text-neutral-300"
-                placeholderText="Data Inicial"
-                locale={ptBR}
-              />
-              <span className="px-2"><MoveRight className="size-3 md:size-auto dark:text-neutral-300" /></span>
-              <DatePicker
-                selected={endDate}
-                onChange={handleEndDateChange}
-                dateFormat="MM / yyyy"
-                showMonthYearPicker
-                renderCustomHeader={renderCustomHeader}
-                minDate={startDate ?? undefined}
-                maxDate={new Date(2024, 11, 31)}
-                className="w-full px-4 py-2 focus:outline-none bg-transparent text-xs md:text-base dark:text-neutral-300"
-                placeholderText="Data final"
-                locale={ptBR}
-              />
-              <div className="border-b border-neutral-700 dark:border-neutral-400 absolute left-0 right-0 bottom-0"></div>
-            </li>
-          </ul>
-        </div>
-
-
-
-        <div className="flex lg:justify-center md:justify-center flex-wrap gap-2 mb-6 mt-6">
-          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
-            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Empenhado</h3>
-            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalSales.toLocaleString()}</p>
-          </div>
-          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
-            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Liquidado</h3>
-            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalRevenue.toLocaleString()}</p>
-          </div>
-          <div className="w-full sm:w-1/4 p-4 rounded-lg shadow-2xl bg-white">
-            <h3 className="lg:text-lg md:text-md text-sm flex justify-center">Total Pago</h3>
-            <p className="lg:text-2xl md:text-lg text-sm flex justify-center">R$ {totalUsers.toLocaleString()}</p>
-          </div>
-        </div>
-        <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 bg-white">
-          <div className="w-full md:w-1/2">
-            <ApexCharts
-              options={lineChartOptions}
-              series={lineChartSeries}
-              type="line"
-              height={350}
+    <div className="container mx-auto p-4">
+      <div className="bg-primary-white dark:bg-neutral-800 border rounded-lg flex flex-col items-center justify-center lg:p-12 p-8">
+        <h1 className="text-neutral-700 dark:text-primary-white font-DMsans text-lg lg:text-4xl xl:text-5xl text-center mb-8">
+          <strong>Pesquise por período</strong>
+        </h1>
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 w-full">
+          <div className="flex items-center gap-2">
+            <CalendarClock className="w-6 h-6 text-red-600" />
+            <DatePicker
+              selected={startDate}
+              onChange={handleStartDateChange}
+              dateFormat="MM/yyyy"
+              showMonthYearPicker
+              renderCustomHeader={renderCustomHeader}
+              maxDate={new Date(2024, 11, 31)}
+              className="w-32 px-4 py-2 focus:outline-none bg-transparent text-sm md:text-base dark:text-neutral-300 border-b border-neutral-700 dark:border-neutral-400"
+              placeholderText="Data Inicial"
+              locale={ptBR}
+              aria-label="Data inicial"
             />
           </div>
-          <div className="w-full md:w-1/2">
-            <ApexCharts
-              options={pieChartOptions}
-              series={pieChartSeries}
-              type="pie"
-              height={350}
+          <span className="text-neutral-700 dark:text-neutral-300">até</span>
+          <div className="flex items-center gap-2">
+            <CalendarClock className="w-6 h-6 text-red-600" />
+            <DatePicker
+              selected={endDate}
+              onChange={handleEndDateChange}
+              dateFormat="MM/yyyy"
+              showMonthYearPicker
+              renderCustomHeader={renderCustomHeader}
+              minDate={startDate ?? undefined}
+              maxDate={new Date(2024, 11, 31)}
+              className="w-32 px-4 py-2 focus:outline-none bg-transparent text-sm md:text-base dark:text-neutral-300 border-b border-neutral-700 dark:border-neutral-400"
+              placeholderText="Data Final"
+              locale={ptBR}
+              aria-label="Data final"
             />
           </div>
         </div>
+        {errorMessage && <p className="text-red-500 mt-4">{errorMessage}</p>}
+      </div>
+
+      <div className="flex flex-wrap justify-center gap-4 my-8">
+        <div className="w-full sm:w-1/3 p-4 rounded-lg shadow-lg bg-white dark:bg-neutral-800">
+          <h3 className="text-center text-neutral-700 dark:text-neutral-300 text-lg font-semibold mb-2">Total Empenhado</h3>
+          <p className="text-center text-neutral-900 dark:text-neutral-100 text-2xl">R$ {totalSales.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</p>
+        </div>
+        <div className="w-full sm:w-1/3 p-4 rounded-lg shadow-lg bg-white dark:bg-neutral-800">
+          <h3 className="text-center text-neutral-700 dark:text-neutral-300 text-lg font-semibold mb-2">Total Liquidado</h3>
+          <p className="text-center text-neutral-900 dark:text-neutral-100 text-2xl">R$ {totalRevenue.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</p>
+        </div>
+        <div className="w-full sm:w-1/3 p-4 rounded-lg shadow-lg bg-white dark:bg-neutral-800">
+          <h3 className="text-center text-neutral-700 dark:text-neutral-300 text-lg font-semibold mb-2">Total Pago</h3>
+          <p className="text-center text-neutral-900 dark:text-neutral-100 text-2xl">R$ {totalUsers.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</p>
+        </div>
+      </div>
+
+      <div className="flex flex-col md:flex-row gap-8">
+        <div className="w-full md:w-1/2 bg-white dark:bg-neutral-800 p-4 rounded-lg shadow-lg">
+          <ReactApexChart
+            options={lineChartOptions}
+            series={lineChartSeries}
+            type="line"
+            height={350}
+          />
+        </div>
+        <div className="w-full md:w-1/2 bg-white dark:bg-neutral-800 p-4 rounded-lg shadow-lg">
+          <ReactApexChart
+            options={pieChartOptions}
+            series={pieChartSeries}
+            type="pie"
+            height={350}
+          />
+        </div>
       </div>
     </div>
   );
 };
 
-export default Dashboard;
\ No newline at end of file
+export default Dashboard;

From 6df7fcc35efca042297e701e42cb75c35a05e9c6 Mon Sep 17 00:00:00 2001
From: Mateushqms <mateushqms@gmail.com>
Date: Sun, 1 Sep 2024 18:42:06 -0300
Subject: [PATCH 23/31] test: Ajuste nos testes do Filtro

---
 front/src/testes/Filtro.test.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/front/src/testes/Filtro.test.jsx b/front/src/testes/Filtro.test.jsx
index fefd71c..1810409 100644
--- a/front/src/testes/Filtro.test.jsx
+++ b/front/src/testes/Filtro.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import Dashboard from '../components/Dashboard';
+import Filtro from '../components/Filtro';
 import { fettchYearAndMonthTender } from '../services/api';
 
 // Mock das funções de API
@@ -29,18 +29,18 @@ beforeEach(() => {
 });
 
 test('renders Dashboard component and interacts with date pickers', async () => {
-  render(<Dashboard />);
+  render(<Filtro />);
 
   // Verifica se o título está presente
   expect(screen.getByText('Pesquise por período')).toBeInTheDocument();
 
   // Verifica se os campos de data inicial e final estão presentes
   expect(screen.getByPlaceholderText('Data Inicial')).toBeInTheDocument();
-  expect(screen.getByPlaceholderText('Data final')).toBeInTheDocument();
+  expect(screen.getByPlaceholderText('Data Final')).toBeInTheDocument();
 
   // Simula a seleção de datas
-  fireEvent.change(screen.getByPlaceholderText('Data Inicial'), { target: { value: '01 / 2023' } });
-  fireEvent.change(screen.getByPlaceholderText('Data final'), { target: { value: '12 / 2023' } });
+  fireEvent.change(screen.getByPlaceholderText('Data Inicial'), { target: { value: '01/2023' } });
+  fireEvent.change(screen.getByPlaceholderText('Data Final'), { target: { value: '12/2023' } });
 
   // Aguarda a busca de dados
   await waitFor(() => expect(fettchYearAndMonthTender).toHaveBeenCalled());

From e0c647050667dd3db68333a44d0022c45fb28be7 Mon Sep 17 00:00:00 2001
From: Mateushqms <mateushqms@gmail.com>
Date: Sun, 1 Sep 2024 19:22:50 -0300
Subject: [PATCH 24/31] test: Ajuste no teste do componente informacoes

---
 front/src/testes/Informacoes.test.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/testes/Informacoes.test.jsx b/front/src/testes/Informacoes.test.jsx
index 58eb6f2..eaf708e 100644
--- a/front/src/testes/Informacoes.test.jsx
+++ b/front/src/testes/Informacoes.test.jsx
@@ -16,7 +16,7 @@ describe('Informacoes', () => {
     expect(title).toBeInTheDocument();
 
     // Verifica se o parágrafo é renderizado
-    const paragraphText = "Este é um projeto desenvolvido como parte da disciplina de Métodos de Desenvolvimento de Software (MDS) da Universidade de Brasília (UnB). O objetivo principal deste projeto é criar uma plataforma online para análise e armazenamento de dados de licitações relacionadas aos gastos culturais apoiados pelo Governo Federal, utilizando a plataforma e a API do Querido Diário.";
+    const paragraphText = "Este é um projeto desenvolvido como parte da disciplina de Métodos de Desenvolvimento de Software (MDS) da Universidade de Brasília (UnB). O objetivo principal deste projeto é criar uma plataforma online para análise e armazenamento de dados de licitações relacionadas aos gastos culturais apoiados pelo Governo Federal, utilizando informações da Secretaria de Cultura do Estado de Minas Gerais.";
     const paragraph = screen.getByText((content, element) => {
       const hasText = element => element.textContent === paragraphText;
       const elementHasText = hasText(element);

From fc64f2a2a84ace5a1467e1dfede731b9740eaa3a Mon Sep 17 00:00:00 2001
From: Mateushqms <mateushqms@gmail.com>
Date: Sun, 1 Sep 2024 19:23:23 -0300
Subject: [PATCH 25/31] test: Ajuste no teste do componente Pilares

---
 front/src/testes/Pilares.test.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/src/testes/Pilares.test.jsx b/front/src/testes/Pilares.test.jsx
index d8f92a8..c3e8b14 100644
--- a/front/src/testes/Pilares.test.jsx
+++ b/front/src/testes/Pilares.test.jsx
@@ -13,19 +13,19 @@ describe('Pilares', () => {
 
     // Check if the first section is rendered
     const firstHeading = screen.getByText(/Deve preservar/i);
-    const firstSubheading = screen.getByText(/o patrimônio cultural do estado de Minas Gerais/i);
+    const firstSubheading = screen.getByText(/patrimônio cultural do estado de Minas Gerais/i);
     expect(firstHeading).toBeInTheDocument();
     expect(firstSubheading).toBeInTheDocument();
 
     // Check if the second section is rendered
     const secondHeading = screen.getByText(/Deve promover/i);
-    const secondSubheading = screen.getByText(/a acessibilidade e inclusão social à cultura/i);
+    const secondSubheading = screen.getByText(/acessibilidade e inclusão social à cultura/i);
     expect(secondHeading).toBeInTheDocument();
     expect(secondSubheading).toBeInTheDocument();
 
     // Check if the third section is rendered
     const thirdHeading = screen.getByText(/Deve fomentar/i);
-    const thirdSubheading = screen.getByText(/a produção artística da população/i);
+    const thirdSubheading = screen.getByText(/produção artística da população/i);
     expect(thirdHeading).toBeInTheDocument();
     expect(thirdSubheading).toBeInTheDocument();
   });

From ba15b5344f3bbf8d4bf4b909deed616e76114169 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Mon, 2 Sep 2024 00:28:01 -0300
Subject: [PATCH 26/31] style: arrumando a sensibilidade do componente busca

---
 front/src/components/Busca.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/front/src/components/Busca.tsx b/front/src/components/Busca.tsx
index 98450b4..0b09e79 100644
--- a/front/src/components/Busca.tsx
+++ b/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>

From a2e8c4e5d757a6b395ccb6f1b6b5cd7a6ab24c5d Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Mon, 2 Sep 2024 00:48:05 -0300
Subject: [PATCH 27/31] feat: adicionando HelpCircle explicativo

---
 front/src/components/Filtro.tsx | 58 +++++++++++++++++++++++++++++----
 1 file changed, 51 insertions(+), 7 deletions(-)

diff --git a/front/src/components/Filtro.tsx b/front/src/components/Filtro.tsx
index bf2c7e5..99e15ec 100644
--- a/front/src/components/Filtro.tsx
+++ b/front/src/components/Filtro.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
-import { CalendarClock, MoveLeft, MoveRight } from 'lucide-react';
+import { CalendarClock, MoveLeft, MoveRight, HelpCircle } from 'lucide-react'; // Importação do HelpCircle
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { ptBR } from 'date-fns/locale';
@@ -408,17 +408,61 @@ const Dashboard: React.FC = () => {
       </div>
 
       <div className="flex flex-wrap justify-center gap-4 my-8">
+        {/* Total Empenhado */}
         <div className="w-full sm:w-1/3 p-4 rounded-lg shadow-lg bg-white dark:bg-neutral-800">
-          <h3 className="text-center text-neutral-700 dark:text-neutral-300 text-lg font-semibold mb-2">Total Empenhado</h3>
-          <p className="text-center text-neutral-900 dark:text-neutral-100 text-2xl">R$ {totalSales.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</p>
+          <h3 className="flex items-center justify-center text-neutral-700 dark:text-neutral-300 text-lg font-semibold mb-2">
+            Total Empenhado
+            {/* Tooltip */}
+            <div className="relative inline-block ml-2 group">
+              <HelpCircle className="w-5 h-5 text-gray-700 dark:text-neutral-300 cursor-pointer" />
+              <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-60 hidden group-hover:block">
+                <div className="bg-gray-700 text-white text-xs rounded py-1 px-2 text-center">
+                  Valor Empenhado: Valor do orçamento reservado para fazer face a compromisso formalmente assumido com fornecedor ou credor.
+                </div>
+              </div>
+            </div>
+          </h3>
+          <p className="text-center text-neutral-900 dark:text-neutral-100 text-2xl">
+            R$ {totalSales.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
+          </p>
         </div>
+
+        {/* Total Liquidado */}
         <div className="w-full sm:w-1/3 p-4 rounded-lg shadow-lg bg-white dark:bg-neutral-800">
-          <h3 className="text-center text-neutral-700 dark:text-neutral-300 text-lg font-semibold mb-2">Total Liquidado</h3>
-          <p className="text-center text-neutral-900 dark:text-neutral-100 text-2xl">R$ {totalRevenue.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</p>
+          <h3 className="flex items-center justify-center text-neutral-700 dark:text-neutral-300 text-lg font-semibold mb-2">
+            Total Liquidado
+            {/* Tooltip */}
+            <div className="relative inline-block ml-2 group">
+              <HelpCircle className="w-5 h-5 text-gray-700 dark:text-neutral-300 cursor-pointer" />
+              <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-60 hidden group-hover:block">
+                <div className="bg-gray-700 text-white text-xs rounded py-1 px-2 text-center">
+                  Valor Liquidado: Valor que o fornecedor ou credor tem direito a receber referente a produto ou serviço devidamente entregue.
+                </div>
+              </div>
+            </div>
+          </h3>
+          <p className="text-center text-neutral-900 dark:text-neutral-100 text-2xl">
+            R$ {totalRevenue.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
+          </p>
         </div>
+
+        {/* Total Pago */}
         <div className="w-full sm:w-1/3 p-4 rounded-lg shadow-lg bg-white dark:bg-neutral-800">
-          <h3 className="text-center text-neutral-700 dark:text-neutral-300 text-lg font-semibold mb-2">Total Pago</h3>
-          <p className="text-center text-neutral-900 dark:text-neutral-100 text-2xl">R$ {totalUsers.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</p>
+          <h3 className="flex items-center justify-center text-neutral-700 dark:text-neutral-300 text-lg font-semibold mb-2">
+            Total Pago
+            {/* Tooltip */}
+            <div className="relative inline-block ml-2 group">
+              <HelpCircle className="w-5 h-5 text-gray-700 dark:text-neutral-300 cursor-pointer" />
+              <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-60 hidden group-hover:block">
+                <div className="bg-gray-700 text-white text-xs rounded py-1 px-2 text-center">
+                  Valor Pago: Valor referente aos pagamentos efetuados através de movimentações bancárias, escriturais e apropriação contábil da despesa.
+                </div>
+              </div>
+            </div>
+          </h3>
+          <p className="text-center text-neutral-900 dark:text-neutral-100 text-2xl">
+            R$ {totalUsers.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
+          </p>
         </div>
       </div>
 

From 4e188e93ac7597107cc72eed1f43859312a09f5e Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Mon, 2 Sep 2024 01:07:42 -0300
Subject: [PATCH 28/31] fix: arrumando link do componente Integrantes

---
 front/src/components/Integrantes.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/components/Integrantes.tsx b/front/src/components/Integrantes.tsx
index 875505a..c495d51 100644
--- a/front/src/components/Integrantes.tsx
+++ b/front/src/components/Integrantes.tsx
@@ -90,7 +90,7 @@ const Integrantes = () => {
                 <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6c0-0.4,0-0.9,0.2-1.3 C7.2,6.1,7.4,6,7.5,6c0,0,0.1,0,0.1,0C8.1,6.1,9.1,6.4,10,7.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3c0.9-0.9,2-1.2,2.5-1.3 c0,0,0.1,0,0.1,0c0.2,0,0.3,0.1,0.4,0.3C17,6.7,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4 c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3C22,6.1,16.9,1.4,10.9,2.1z"></path>
               </svg>
               </a>
-              <a href="https://www.linkedin.com/in/https:/www.linkedin.com/in/marcos-vieira-marinho-b433b4191/">
+              <a href="https:/www.linkedin.com/in/marcos-vieira-marinho/">
               <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" className="text-primary-white w-5 fill-current">
                 <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
               </svg>

From 8d15cc77617bc85b2dab2864b214a898f9bc5496 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Mon, 2 Sep 2024 10:10:25 -0300
Subject: [PATCH 29/31] chore: adicionando link ao site da UnB

---
 front/src/components/Filtro.tsx      |  2 +-
 front/src/components/Footer.tsx      | 10 ++++++----
 front/src/components/Informacoes.tsx |  4 ++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/front/src/components/Filtro.tsx b/front/src/components/Filtro.tsx
index 99e15ec..cff4e22 100644
--- a/front/src/components/Filtro.tsx
+++ b/front/src/components/Filtro.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import React, { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
diff --git a/front/src/components/Footer.tsx b/front/src/components/Footer.tsx
index 55ff157..5b2ac72 100644
--- a/front/src/components/Footer.tsx
+++ b/front/src/components/Footer.tsx
@@ -27,10 +27,12 @@ const Footer = () => {
             </li>                   
         </ul>
         <div className="flex justify-end gap-6">
-          <Image className="hidden md:flex w-12 h-12 lg:-mt-9 lg:mb-10 -mt-4"
-              src={unblogo}
-              alt='unblogo'
-          />       
+          <a href="https://unb.br" target="_  blank" rel="noopener noreferrer">
+            <Image className="hidden md:flex w-12 h-12 lg:-mt-9 lg:mb-10 -mt-4"
+                src={unblogo}
+                alt='unblogo'
+            />       
+          </a>
           <a href="https://github.com/unb-mds/2024-1-MinasDeCultura" target="_blank" rel="noopener noreferrer">
             <Image className="lg:-mt-12 lg:mb-10 -mt-4"
               src={ImgGit}
diff --git a/front/src/components/Informacoes.tsx b/front/src/components/Informacoes.tsx
index 619b945..7780cc9 100644
--- a/front/src/components/Informacoes.tsx
+++ b/front/src/components/Informacoes.tsx
@@ -21,11 +21,11 @@ const Informacoes = () => {
                         Este é um projeto desenvolvido como parte da disciplina de <b>Métodos de Desenvolvimento de Software</b> (MDS) da 
                         Universidade de Brasília (UnB). O objetivo principal deste projeto é criar uma plataforma online para análise e 
                         armazenamento de dados de licitações relacionadas aos gastos culturais apoiados pelo Governo Federal, utilizando 
-                        informações da Secretaria de Cultura do Estado de Minas Gerais.
+                        informações da Secretaria de Cultura do Estado de Minas Gerais. 
                     </p>
                     <p> </p>
                     <p className="text-neutral-700 dark:text-neutral-300 text-sm md:text-2xl 2xl:text-2xl font-DMsans font-regular text-justify leading-10">
-                        A plataforma permite aos usuários filtrar dados por um intervalo de tempo para obter informações de interesse, 
+                        <br></br>A plataforma permite aos usuários filtrar dados por um intervalo de tempo para obter informações de interesse, 
                         além de oferecer um dashboard informativo que facilita a consulta e visualização dos dados. Adicionalmente, 
                         a plataforma busca abranger a comunidade com funcionalidades como modo noturno, alto contraste e aumento de 
                         fonte para melhorar a acessibilidade, além de permitir o acesso via dispositivos móveis, garantindo 

From 6e5edaab3c7cb70b77b74fef29d348830629fea2 Mon Sep 17 00:00:00 2001
From: devMarcosVM <marcosvieira.2003@gmail.com>
Date: Mon, 2 Sep 2024 10:10:46 -0300
Subject: [PATCH 30/31] =?UTF-8?q?docs:=20atualizando=20a=20documenta=C3=A7?=
 =?UTF-8?q?=C3=A3o=20do=20teste=20Filtro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Testes do Componente Filtro.md"           | 46 ++++++-------------
 1 file changed, 14 insertions(+), 32 deletions(-)

diff --git "a/docs/Como executar/Front-end/Testes unit\303\241rios/Testes do Componente Filtro.md" "b/docs/Como executar/Front-end/Testes unit\303\241rios/Testes do Componente Filtro.md"
index 3130ce3..972c368 100644
--- "a/docs/Como executar/Front-end/Testes unit\303\241rios/Testes do Componente Filtro.md"	
+++ "b/docs/Como executar/Front-end/Testes unit\303\241rios/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.

From 2f64579d14c8936ae1929c6abf16e18b5b3fa278 Mon Sep 17 00:00:00 2001
From: Will <williambernardo838@gmail.com>
Date: Mon, 2 Sep 2024 11:10:04 -0300
Subject: [PATCH 31/31] bugfix: Acessando API do backend para gerar graficos

---
 front/src/services/api.ts | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/front/src/services/api.ts b/front/src/services/api.ts
index acc7a04..3daacfa 100644
--- a/front/src/services/api.ts
+++ b/front/src/services/api.ts
@@ -41,20 +41,7 @@ export const fetchYearlyTendersData = async () => {
     }
 };
 
-export const fettchYearAndMonthTender = async (params: SearchParams) => {
-  const { startYear, startMonth, endYear, endMonth } = params;
-  
-  const url = `http://localhost:5000/tenders?start=${startYear}${startMonth}&end=${endYear}${endMonth}`;
-  
-  try {
-    const response = await axios.get(url);
-    return response.data;
-  } catch (error) {
-    console.error('Error searching tenders:', error);
-    throw error;
-  }
-};
-/* pra quando a API remota estiver com a lógica certa
+/* pra quando a API remota estiver com a lógica certa*/
 export const fettchYearAndMonthTender = async (params: SearchParams) => {
   const { startYear, startMonth, endYear, endMonth } = params;
   
@@ -67,4 +54,4 @@ export const fettchYearAndMonthTender = async (params: SearchParams) => {
     console.error('Error searching tenders:', error);
     throw error;
   }
-};*/
+};