new estatistica page

2025-06-12 18:11:49 -03:00 · 2025-06-12 18:11:49 -03:00 · 8cf184fa46
commit 8cf184fa46
parent 2764dbdc4e
14 changed files with 852 additions and 7 deletions
--- a/src/App.css
+++ b/src/App.css
@ -88,4 +88,10 @@ body, html {

 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
+}
+
+.scrollbar-hide {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer and Edge */
+  overflow: -moz-scrollbars-none; /* Old versions of Firefox */
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -7,6 +7,7 @@ import FeaturesSection from './components/FeaturesSection';
 import Footer from './components/Footer';
 import CandidatePage from './components/CandidatePage/CandidatePage';
 import DataStatsPage from './components/DataStatsPage';
+import StatisticsPage from './components/StatisticsPage';
 import NotFound from './components/NotFound';
 import MatrixBackground from './components/MatrixBackground';
 import './App.css';
@ -32,6 +33,7 @@ function App() {
            <Route path="/" element={<HomePage />} />
            <Route path="/candidato/:id" element={<CandidatePage />} />
            <Route path="/dados-disponiveis" element={<DataStatsPage />} />
+            <Route path="/estatisticas" element={<StatisticsPage />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
--- a/src/api/apiStatisticsModels.ts
+++ b/src/api/apiStatisticsModels.ts
@ -0,0 +1,58 @@
+// Type definitions based on the API specs for statistics endpoints
+
+export interface StatisticsConfig {
+  partidos: string[];
+  siglasUF: string[];
+  anos: number[];
+  cargos: string[];
+}
+
+
+export interface EnrichmentResponse {
+  idCandidato: string;
+  nome: string;
+  patrimonioInicial: number;
+  anoInicial: number;
+  patrimonioFinal: number;
+  anoFinal: number;
+  enriquecimento: number;
+}
+
+export interface ValueSumRequest {
+  type: 'bem' | 'despesa' | 'receita';
+  groupBy: 'candidato' | 'partido' | 'uf' | 'cargo';
+  filter?: {
+    partido?: string | null; // Optional, can be null
+    uf?: string | null; // Optional, can be null
+    ano?: number | null; // Optional, can be null
+    cargo?: CargoFilter; // Optional, can be null
+  }
+}
+
+export type CargoFilter =
+  | '1º SUPLENTE SENADOR'
+  | 'VICE-GOVERNADOR'
+  | '2º SUPLENTE'
+  | 'PRESIDENTE'
+  | 'DEPUTADO DISTRITAL'
+  | 'PREFEITO'
+  | 'VICE-PRESIDENTE'
+  | '2º SUPLENTE SENADOR'
+  | 'SENADOR'
+  | 'DEPUTADO ESTADUAL'
+  | '1º SUPLENTE'
+  | 'GOVERNADOR'
+  | 'VICE-PREFEITO'
+  | 'VEREADOR'
+  | 'DEPUTADO FEDERAL'
+  | null;
+
+export interface ValueSumResponse {
+  idCandidato?: string;
+  sgpartido?: string;
+  siglaUf?: string;
+  cargo?: string;
+  nome?: string;
+  ano: number;
+  valor: number;
+}
--- a/src/api/openCandApi.ts
+++ b/src/api/openCandApi.ts
@ -1,6 +1,7 @@
 import { BaseApiClient } from './base';
 import { API_CONFIG } from '../config/api';
 import type { CandidateAssets, CandidateDetails, CandidateExpenses, CandidateIncome, CandidateRedesSociais, CandidateSearchResult, CpfRevealResult, OpenCandDataAvailabilityStats, PlatformStats, RandomCandidate } from './apiModels';
+import type { EnrichmentResponse, StatisticsConfig, ValueSumRequest, ValueSumResponse } from './apiStatisticsModels';

 /**
 * OpenCand API client for interacting with the OpenCand platform
@ -82,6 +83,27 @@ export class OpenCandApi extends BaseApiClient {
  async getCandidateReceitas(id: string): Promise<CandidateIncome> {
    return this.get<CandidateIncome>(`/v1/candidato/${id}/receitas`);
  }
+
+  /**
+   * Get the configuration for statistics filters
+   */
+  async getStatisticsConfig(): Promise<StatisticsConfig> {
+    return this.get<StatisticsConfig>(`/v1/estatistica/configuration`);
+  }
+
+  /**
+   * Get the enrichment statistics for candidates
+   */
+  async getStatisticsEnrichment(): Promise<EnrichmentResponse[]> {
+    return this.get<EnrichmentResponse[]>(`/v1/estatistica/enriquecimento`);
+  }
+
+  /**
+   * Get the sum of values for a specific type and grouping
+   */
+  async getStatisticsValueSum(request: ValueSumRequest): Promise<ValueSumResponse> {
+    return this.post<ValueSumResponse>(`/v1/estatistica/values-sum`, request);
+  }
 }

 // Create a default instance for easy usage with proper configuration
--- a/src/components/CandidatePage/BasicCandidateInfoComponent.tsx
+++ b/src/components/CandidatePage/BasicCandidateInfoComponent.tsx
@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { use, useState } from 'react';
 import { UserIcon } from '@heroicons/react/24/outline';
 import { type CandidateDetails, openCandApi } from '../../api';
 import { formatCpf, maskCpf } from '../../utils/utils';
@ -15,6 +15,12 @@ const BasicCandidateInfoComponent: React.FC<BasicCandidateInfoComponentProps> =
  const [revealedCpf, setRevealedCpf] = useState<string | null>(null);
  const [isRevealingCpf, setIsRevealingCpf] = useState(false);

+  React.useEffect(() => {
+    if (candidateDetails) {
+      setRevealedCpf(null);
+    }
+  }, [candidateDetails]);
+
  const formatDate = (dateString: string) => {
    try {
      const date = new Date(dateString);
--- a/src/components/DataStatsPage.tsx
+++ b/src/components/DataStatsPage.tsx
@ -72,7 +72,7 @@ const DataStatsPage: React.FC = () => {
  ];

  return (
-    <div className="min-h-screen py-20 px-4">
+    <div className="min-h-screen py-20 px-4 hover:cursor-default">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12 animate-fade-in">
@ -154,15 +154,14 @@ const DataStatsPage: React.FC = () => {
                        <span>{dataType.label}</span>
                      </div>
                    </td>
-                    {sortedYears.map((year, cellIndex) => {
+                    {sortedYears.map((year) => {
                      const isAvailable = (stats[dataType.key as keyof OpenCandDataAvailabilityStats] as number[]).includes(year);
                      return (
                        <td 
                          key={year} 
-                          className="text-center p-4 border-b border-gray-700/20 animate-fade-in"
-                          style={{ animationDelay: `${(rowIndex * sortedYears.length + cellIndex) * 30}ms` }}
+                          className="text-center p-4 border-b border-gray-700/20"
                        >
-                          <div className={`inline-flex items-center justify-center w-8 h-8 rounded-full transition-all duration-300 ${
+                          <div className={`inline-flex items-center justify-center w-8 h-8 rounded-full transition-all duration-100 ${
                            isAvailable 
                              ? 'bg-green-500/20 text-green-300 hover:bg-green-500/30 hover:scale-110 hover:cursor-default' 
                              : 'bg-red-500/20 text-red-300 hover:bg-red-500/30 hover:cursor-default'
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@ -14,7 +14,7 @@ const HeroSection: React.FC = () => {
          Explore Dados Eleitorais
        </h1>
        <p className="text-lg md:text-xl mb-10 text-gray-300">
-          OpenCand oferece acesso fácil e visualizações intuitivas de dados abertos do Tribunal Superior Eleitoral (TSE) do Brasil.
+          OpenCand oferece acesso fácil e visualizações intuitivas de dados abertos do Tribunal Superior Eleitoral (TSE).
        </p>
        
        <SearchBar />
--- a/src/components/StatisticsPage/StatisticsFilters.tsx
+++ b/src/components/StatisticsPage/StatisticsFilters.tsx
@ -0,0 +1,174 @@
+import React, { useState, useEffect } from 'react';
+import type { FilterState } from './StatisticsPage';
+import type { CargoFilter, StatisticsConfig } from '../../api/apiStatisticsModels';
+import { openCandApi } from '../../api/openCandApi';
+import Button from '../../shared/Button';
+
+interface StatisticsFiltersProps {
+  filters: FilterState;
+  onFiltersChange: (filters: FilterState) => void;
+  isLoading?: boolean;
+}
+
+const StatisticsFilters: React.FC<StatisticsFiltersProps> = ({
+  filters,
+  onFiltersChange,
+  isLoading = false,
+}) => {
+  // Local state for form fields
+  const [localFilters, setLocalFilters] = useState<FilterState>(filters);
+  // State for configuration data from API
+  const [config, setConfig] = useState<StatisticsConfig | null>(null);
+  const [configLoading, setConfigLoading] = useState(true);
+  const [configError, setConfigError] = useState<string | null>(null);
+
+  // Sync local state when parent filters change
+  useEffect(() => {
+    setLocalFilters(filters);
+  }, [filters]);
+
+  // Fetch configuration data on component mount
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        setConfigLoading(true);
+        setConfigError(null);
+        const configData = await openCandApi.getStatisticsConfig();
+        setConfig(configData);
+      } catch (error) {
+        console.error('Error fetching statistics config:', error);
+        setConfigError('Erro ao carregar configurações');
+      } finally {
+        setConfigLoading(false);
+      }
+    };
+
+    fetchConfig();
+  }, []);
+
+  const handleLocalChange = (key: keyof FilterState, value: any) => {
+    setLocalFilters((prev) => ({
+      ...prev,
+      [key]: value === '' ? null : value,
+    }));
+  };
+
+  const handleApply = (e: React.FormEvent) => {
+    e.preventDefault();
+    onFiltersChange(localFilters);
+  };
+
+  return (
+    <form
+      className="h-full flex flex-col justify-between space-y-6"
+      onSubmit={handleApply}
+      style={{ minHeight: '400px' }} // optional: ensures enough height for flex
+    >
+      <div className="flex-1 flex flex-col space-y-6">
+        <div>
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">
+            Filtros
+          </h2>
+          {configError && (
+            <div className="mb-4 p-3 bg-red-100 border border-red-300 rounded-lg text-red-700 text-sm">
+              {configError}
+            </div>
+          )}
+        </div>
+
+        {/* Party Filter */}
+        <div className="space-y-2">
+          <label className="block text-sm font-semibold text-gray-600 uppercase tracking-wide">
+            Partido (Opcional)
+          </label>
+          <select
+            value={localFilters.partido || ''}
+            onChange={(e) => handleLocalChange('partido', e.target.value)}
+            disabled={isLoading || configLoading}
+            className="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <option value="">Todos os Partidos</option>
+            {config?.partidos.map((partido) => (
+              <option key={partido} value={partido}>
+                {partido}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* UF Filter */}
+        <div className="space-y-2">
+          <label className="block text-sm font-semibold text-gray-600 uppercase tracking-wide">
+            UF (Opcional)
+          </label>
+          <select
+            value={localFilters.uf || ''}
+            onChange={(e) => handleLocalChange('uf', e.target.value)}
+            disabled={isLoading || configLoading}
+            className="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <option value="">Todos os Estados</option>
+            {config?.siglasUF.map((uf) => (
+              <option key={uf} value={uf}>
+                {uf}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Year Filter */}
+        <div className="space-y-2">
+          <label className="block text-sm font-semibold text-gray-600 uppercase tracking-wide">
+            Ano (Opcional)
+          </label>
+          <select
+            value={localFilters.ano || ''}
+            onChange={(e) => handleLocalChange('ano', e.target.value ? Number(e.target.value) : null)}
+            disabled={isLoading || configLoading}
+            className="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <option value="">Todos os Anos</option>
+            {config?.anos.map((year) => (
+              <option key={year} value={year}>
+                {year}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Cargo Filter */}
+        <div className="space-y-2">
+          <label className="block text-sm font-semibold text-gray-600 uppercase tracking-wide">
+            Cargo (Opcional)
+          </label>
+          <select
+            value={localFilters.cargo || ''}
+            onChange={(e) => handleLocalChange('cargo', e.target.value)}
+            disabled={isLoading || configLoading}
+            className="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <option value="">Todos os Cargos</option>
+            {config?.cargos.map((cargo) => (
+              <option key={cargo} value={cargo}>
+                {cargo}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Apply Filters Button */}
+      <div className="pt-4">
+        <button
+          type="submit"
+          disabled={isLoading || configLoading}
+          className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-md hover:shadow-lg duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none hover:cursor-pointer"
+        >
+          {isLoading || configLoading ? 'Carregando...' : 'Aplicar Filtros'}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default StatisticsFilters;
--- a/src/components/StatisticsPage/StatisticsGraphs.tsx
+++ b/src/components/StatisticsPage/StatisticsGraphs.tsx
@ -0,0 +1,229 @@
+import React from 'react';
+import type { StatisticsData } from './statisticsRequests';
+import GlassCard from '../../shared/GlassCard';
+
+interface StatisticsGraphsProps {
+  isLoading: boolean;
+  error: string | null;
+  statisticsData: StatisticsData | null;
+}
+
+const StatisticsGraphs: React.FC<StatisticsGraphsProps> = ({
+  isLoading,
+  error,
+  statisticsData,
+}) => {
+  if (error) {
+    return (
+      <GlassCard className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="text-red-600 text-lg mb-2">⚠️ Erro</div>
+          <p className="text-gray-700">{error}</p>
+        </div>
+      </GlassCard>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <GlassCard className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="animate-spin w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full mx-auto mb-4"></div>
+          <p className="text-gray-700">Carregando dados...</p>
+        </div>
+      </GlassCard>
+    );
+  }
+
+  if (!statisticsData) {
+    return (
+      <GlassCard className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="text-gray-500 text-4xl mb-4">📊</div>
+          <h3 className="text-gray-900 text-lg mb-2">Nenhum dado encontrado</h3>
+          <p className="text-gray-700">
+            Os dados estatísticos não puderam ser carregados
+          </p>
+        </div>
+      </GlassCard>
+    );
+  }
+
+  const renderDataTable = (title: string, data: any[], type: 'candidate' | 'party' | 'state' | 'enrichment') => {
+    if (!data || data.length === 0) {
+      return (
+        <GlassCard>
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+            <p className="text-gray-700">Nenhum dado disponível</p>
+          </div>
+        </GlassCard>
+      );
+    }
+
+    if (type === 'enrichment') {
+      const enrichmentData = data[0]; // Single enrichment response
+      return (
+        <GlassCard>
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+            <div className="space-y-3">
+              <div className="flex justify-between items-center">
+                <span className="text-gray-600">Candidato:</span>
+                <span className="text-gray-900 font-medium">{enrichmentData.nome}</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-gray-600">Patrimônio Inicial (<span className="text-xs text-gray-500">{enrichmentData.anoInicial}</span>):</span>
+                <span className="text-gray-900 font-medium">
+                  R$ {enrichmentData.patrimonioInicial?.toLocaleString('pt-BR') || '0'}
+                        
+                </span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-gray-600">Patrimônio Final (<span className="text-xs text-gray-500">{enrichmentData.anoFinal}</span>):</span>
+                <span className="text-gray-900 font-medium">
+                  R$ {enrichmentData.patrimonioFinal?.toLocaleString('pt-BR') || '0'}
+                </span>
+              </div>
+              <div className="border-t border-gray-200 pt-3">
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-600">Enriquecimento:</span>
+                  <span className={`font-bold text-lg ${
+                    enrichmentData.enriquecimento >= 0 ? 'text-green-600' : 'text-red-600'
+                  }`}>
+                    {enrichmentData.enriquecimento >= 0 ? '+' : ''}
+                    R$ {enrichmentData.enriquecimento?.toLocaleString('pt-BR') || '0'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </GlassCard>
+      );
+    }
+
+    return (
+      <GlassCard>
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+          <div className="overflow-auto max-h-60 scrollbar-hide">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-gray-200">
+                  {type === 'candidate' && (
+                    <>
+                      <th className="text-left py-2 text-gray-600 font-medium">Nome</th>
+                    </>
+                  )}
+                  {type === 'party' && (
+                    <th className="text-left py-2 text-gray-600 font-medium">Partido</th>
+                  )}
+                  {type === 'state' && (
+                    <th className="text-left py-2 text-gray-600 font-medium">UF</th>
+                  )}
+                  <th className="text-left py-2 text-gray-600 font-medium">Ano</th>
+                  <th className="text-right py-2 text-gray-600 font-medium">Valor</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.slice(0, 5).map((item, index) => (
+                  <tr key={index} className="border-b border-gray-100 hover:bg-gray-50 transition-colors duration-150">
+                    {type === 'candidate' && (
+                      <>
+                        <td className="py-3 text-gray-900">{item.nome || 'N/A'}</td>
+                      </>
+                    )}
+                    {type === 'party' && (
+                      <td className="py-3 text-gray-900">{item.sgpartido || 'N/A'}</td>
+                    )}
+                    {type === 'state' && (
+                      <td className="py-3 text-gray-900">{item.siglaUf || 'N/A'}</td>
+                    )}
+                    <td className="py-3 text-gray-900">{item.ano || 'N/A'}</td>
+                    <td className="py-3 text-right font-medium text-gray-900">
+                      R$ {item.valor?.toLocaleString('pt-BR') || '0'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </GlassCard>
+    );
+  };
+
+  return (
+    <div className="">
+      <div className="space-y-6">
+        {/* First Row - Candidates */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {renderDataTable(
+            'Candidatos com Maiores Bens',
+            statisticsData.candidatesWithMostAssets,
+            'candidate'
+          )}
+          {statisticsData.enrichmentData && renderDataTable(
+            'Análise de Enriquecimento',
+            statisticsData.enrichmentData,
+            'enrichment'
+          )}
+        </div>
+
+        {/* Second Row - Candidates Revenue & Expenses */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {renderDataTable(
+            'Candidatos com Maiores Receitas',
+            statisticsData.candidatesWithMostRevenue,
+            'candidate'
+          )}
+          {renderDataTable(
+            'Candidatos com Maiores Despesas',
+            statisticsData.candidatesWithMostExpenses,
+            'candidate'
+          )}
+        </div>
+
+        {/* Third Row - Parties */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {renderDataTable(
+            'Partidos com Maiores Bens',
+            statisticsData.partiesWithMostAssets,
+            'party'
+          )}
+          {renderDataTable(
+            'Partidos com Maiores Despesas',
+            statisticsData.partiesWithMostExpenses,
+            'party'
+          )}
+          {renderDataTable(
+            'Partidos com Maiores Receitas',
+            statisticsData.partiesWithMostRevenue,
+            'party'
+          )}
+        </div>
+
+        {/* Fourth Row - States */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {renderDataTable(
+            'UFs com Maiores Bens',
+            statisticsData.statesWithMostAssets,
+            'state'
+          )}
+          {renderDataTable(
+            'UFs com Maiores Despesas',
+            statisticsData.statesWithMostExpenses,
+            'state'
+          )}
+          {renderDataTable(
+            'UFs com Maiores Receitas',
+            statisticsData.statesWithMostRevenue,
+            'state'
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StatisticsGraphs;
--- a/src/components/StatisticsPage/StatisticsPage.tsx
+++ b/src/components/StatisticsPage/StatisticsPage.tsx
@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import GlassCard from '../../shared/GlassCard';
+import StatisticsFilters from './StatisticsFilters';
+import StatisticsGraphs from './StatisticsGraphs';
+import { fetchAllStatisticsData, type StatisticsData, type StatisticsRequestOptions } from './statisticsRequests';
+import type { CargoFilter } from '../../api/apiStatisticsModels';
+
+export interface FilterState {
+  type: 'bem' | 'despesa' | 'receita';
+  groupBy: 'candidato' | 'partido' | 'uf' | 'cargo';
+  partido?: string | null;
+  uf?: string | null;
+  ano?: number | null;
+  cargo?: CargoFilter;
+}
+
+const StatisticsPage: React.FC = () => {
+  const [filters, setFilters] = useState<FilterState>({
+    type: 'bem',
+    groupBy: 'candidato',
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [statisticsData, setStatisticsData] = useState<StatisticsData | null>(null);
+
+  // Load statistics data when component mounts or filters change
+  useEffect(() => {
+    const loadStatisticsData = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        
+        const options: StatisticsRequestOptions = {
+          filters: {
+            partido: filters.partido,
+            uf: filters.uf,
+            ano: filters.ano,
+            cargo: filters.cargo,
+          },
+        };
+
+        const data = await fetchAllStatisticsData(options);
+        setStatisticsData(data);
+      } catch (err) {
+        setError('Erro ao carregar dados estatísticos');
+        console.error('Error loading statistics data:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadStatisticsData();
+  }, [filters]);
+
+  const handleFiltersChange = (newFilters: FilterState) => {
+    setFilters(newFilters);
+  };
+
+  return (
+    <div className="p-6 pt-16 pl-16 pr-16">
+      <div className="max-w-full mx-auto">
+        <div className="mb-8">
+          <h1 className="text-4xl md:text-6xl font-bold mb-4 text-white4">
+            Estatísticas
+          </h1>
+          <p className="text-white/70 text-lg">
+            Análise de dados e estatísticas dos candidatos e partidos brasileiros
+          </p>
+          <div className="w-32 h-1 bg-gradient-to-r from-indigo-400 to-purple-400 mx-auto mt-6 rounded-full"></div>
+        </div>
+
+        <div className="flex gap-6 ">
+          {/* Left Sidebar - Filters (20% width) */}
+          <div className="w-1/5 min-w-[300px] h-[calc(100vh-12rem)]">
+            <GlassCard 
+              fullHeight 
+              className="overflow-y-auto"
+            >
+              <StatisticsFilters
+                filters={filters}
+                onFiltersChange={handleFiltersChange}
+                isLoading={isLoading}
+              />
+            </GlassCard>
+          </div>
+
+          {/* Right Content - Graphs (80% width) */}
+          <div className="flex-1 overflow-auto">
+            <StatisticsGraphs
+                isLoading={isLoading}
+                error={error}
+                statisticsData={statisticsData}
+              />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StatisticsPage;
--- a/src/components/StatisticsPage/index.ts
+++ b/src/components/StatisticsPage/index.ts
@ -0,0 +1,3 @@
+export { default as StatisticsFilters } from './StatisticsFilters';
+export { default as StatisticsGraphs } from './StatisticsGraphs';
+export { default } from './StatisticsPage';
--- a/src/components/StatisticsPage/statisticsRequests.ts
+++ b/src/components/StatisticsPage/statisticsRequests.ts
@ -0,0 +1,213 @@
+
+import { openCandApi } from '../../api/openCandApi';
+import type { EnrichmentResponse, ValueSumRequest, ValueSumResponse, CargoFilter } from '../../api/apiStatisticsModels';
+
+// Statistics data interfaces
+export interface StatisticsData {
+  // First Row
+  candidatesWithMostAssets: ValueSumResponse[];
+  enrichmentData: EnrichmentResponse[] | null;
+  
+  // Second Row
+  candidatesWithMostRevenue: ValueSumResponse[];
+  candidatesWithMostExpenses: ValueSumResponse[];
+  
+  // Third Row
+  partiesWithMostAssets: ValueSumResponse[];
+  partiesWithMostExpenses: ValueSumResponse[];
+  partiesWithMostRevenue: ValueSumResponse[];
+  
+  // Fourth Row
+  statesWithMostAssets: ValueSumResponse[];
+  statesWithMostExpenses: ValueSumResponse[];
+  statesWithMostRevenue: ValueSumResponse[];
+}
+
+export interface StatisticsRequestOptions {
+  filters?: {
+    partido?: string | null;
+    uf?: string | null;
+    ano?: number | null;
+    cargo?: CargoFilter;
+  };
+}
+
+// First Row Requests
+export async function getCandidatesWithMostAssets(options?: StatisticsRequestOptions): Promise<ValueSumResponse[]> {
+  const request: ValueSumRequest = {
+    type: "bem",
+    groupBy: "candidato",
+    filter: options?.filters
+  };
+  
+  const response = await openCandApi.getStatisticsValueSum(request);
+  return Array.isArray(response) ? response : [response];
+}
+
+export async function getEnrichmentData(): Promise<EnrichmentResponse[] | null> {
+  try {
+    return await openCandApi.getStatisticsEnrichment();
+  } catch (error) {
+    console.error('Error fetching enrichment data:', error);
+    return null;
+  }
+}
+
+// Second Row Requests
+export async function getCandidatesWithMostRevenue(options?: StatisticsRequestOptions): Promise<ValueSumResponse[]> {
+  const request: ValueSumRequest = {
+    type: "receita",
+    groupBy: "candidato",
+    filter: options?.filters
+  };
+  
+  const response = await openCandApi.getStatisticsValueSum(request);
+  return Array.isArray(response) ? response : [response];
+}
+
+export async function getCandidatesWithMostExpenses(options?: StatisticsRequestOptions): Promise<ValueSumResponse[]> {
+  const request: ValueSumRequest = {
+    type: "despesa",
+    groupBy: "candidato",
+    filter: options?.filters
+  };
+  
+  const response = await openCandApi.getStatisticsValueSum(request);
+  return Array.isArray(response) ? response : [response];
+}
+
+// Third Row Requests
+export async function getPartiesWithMostAssets(options?: StatisticsRequestOptions): Promise<ValueSumResponse[]> {
+  const request: ValueSumRequest = {
+    type: "bem",
+    groupBy: "partido",
+    filter: options?.filters
+  };
+  
+  const response = await openCandApi.getStatisticsValueSum(request);
+  return Array.isArray(response) ? response : [response];
+}
+
+export async function getPartiesWithMostExpenses(options?: StatisticsRequestOptions): Promise<ValueSumResponse[]> {
+  const request: ValueSumRequest = {
+    type: "despesa",
+    groupBy: "partido",
+    filter: options?.filters
+  };
+  
+  const response = await openCandApi.getStatisticsValueSum(request);
+  return Array.isArray(response) ? response : [response];
+}
+
+export async function getPartiesWithMostRevenue(options?: StatisticsRequestOptions): Promise<ValueSumResponse[]> {
+  const request: ValueSumRequest = {
+    type: "receita",
+    groupBy: "partido",
+    filter: options?.filters
+  };
+  
+  const response = await openCandApi.getStatisticsValueSum(request);
+  return Array.isArray(response) ? response : [response];
+}
+
+// Fourth Row Requests
+export async function getStatesWithMostAssets(options?: StatisticsRequestOptions): Promise<ValueSumResponse[]> {
+  const request: ValueSumRequest = {
+    type: "bem",
+    groupBy: "uf",
+    filter: options?.filters
+  };
+  
+  const response = await openCandApi.getStatisticsValueSum(request);
+  return Array.isArray(response) ? response : [response];
+}
+
+export async function getStatesWithMostExpenses(options?: StatisticsRequestOptions): Promise<ValueSumResponse[]> {
+  const request: ValueSumRequest = {
+    type: "despesa",
+    groupBy: "uf",
+    filter: options?.filters
+  };
+  
+  const response = await openCandApi.getStatisticsValueSum(request);
+  return Array.isArray(response) ? response : [response];
+}
+
+export async function getStatesWithMostRevenue(options?: StatisticsRequestOptions): Promise<ValueSumResponse[]> {
+  const request: ValueSumRequest = {
+    type: "receita",
+    groupBy: "uf",
+    filter: options?.filters
+  };
+  
+  const response = await openCandApi.getStatisticsValueSum(request);
+  return Array.isArray(response) ? response : [response];
+}
+
+// Main function to fetch all statistics data
+export async function fetchAllStatisticsData(options?: StatisticsRequestOptions): Promise<StatisticsData> {
+  try {
+    const [
+      // First Row
+      candidatesWithMostAssets,
+      enrichmentData,
+      
+      // Second Row
+      candidatesWithMostRevenue,
+      candidatesWithMostExpenses,
+      
+      // Third Row
+      partiesWithMostAssets,
+      partiesWithMostExpenses,
+      partiesWithMostRevenue,
+      
+      // Fourth Row
+      statesWithMostAssets,
+      statesWithMostExpenses,
+      statesWithMostRevenue
+    ] = await Promise.all([
+      getCandidatesWithMostAssets(options),
+      getEnrichmentData(),
+      getCandidatesWithMostRevenue(options),
+      getCandidatesWithMostExpenses(options),
+      getPartiesWithMostAssets(options),
+      getPartiesWithMostExpenses(options),
+      getPartiesWithMostRevenue(options),
+      getStatesWithMostAssets(options),
+      getStatesWithMostExpenses(options),
+      getStatesWithMostRevenue(options)
+    ]);
+
+    return {
+      candidatesWithMostAssets,
+      enrichmentData,
+      candidatesWithMostRevenue,
+      candidatesWithMostExpenses,
+      partiesWithMostAssets,
+      partiesWithMostExpenses,
+      partiesWithMostRevenue,
+      statesWithMostAssets,
+      statesWithMostExpenses,
+      statesWithMostRevenue
+    };
+  } catch (error) {
+    console.error('Error fetching statistics data:', error);
+    throw error;
+  }
+}
+
+// Helper function to fetch data for specific category
+export async function fetchStatisticsByCategory(
+  type: 'bem' | 'despesa' | 'receita',
+  groupBy: 'candidato' | 'partido' | 'uf' | 'cargo',
+  options?: StatisticsRequestOptions
+): Promise<ValueSumResponse[]> {
+  const request: ValueSumRequest = {
+    type,
+    groupBy,
+    filter: options?.filters
+  };
+  
+  const response = await openCandApi.getStatisticsValueSum(request);
+  return Array.isArray(response) ? response : [response];
+}
--- a/src/index.css
+++ b/src/index.css
@ -3,6 +3,8 @@
@tailwind components;
@tailwind utilities;

+@plugin 'tailwind-scrollbar';
+
 :root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
--- a/src/shared/GlassCard.tsx
+++ b/src/shared/GlassCard.tsx
@ -0,0 +1,30 @@
+import React from 'react';
+
+interface GlassCardProps {
+  children: React.ReactNode;
+  className?: string;
+  fullHeight?: boolean;
+  padding?: string;
+}
+
+const GlassCard: React.FC<GlassCardProps> = ({
+  children,
+  className = '',
+  fullHeight = false,
+  padding = 'p-6',
+}) => {
+  return (
+    <div className={`
+      bg-white/95 border border-white/25 rounded-xl backdrop-blur-sm
+      shadow-lg hover:shadow-xl
+      ${fullHeight ? 'h-full' : ''}
+      ${className}
+    `}>
+      <div className={`${padding} ${fullHeight ? 'h-full flex flex-col' : ''}`}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default GlassCard;