initial fixes and enhancements
This commit is contained in:
parent
427c9da08b
commit
557a157226
@ -5,7 +5,7 @@ import HeroSection from './components/HeroSection';
|
||||
import StatisticsSection from './components/StatisticsSection';
|
||||
import FeaturesSection from './components/FeaturesSection';
|
||||
import Footer from './components/Footer';
|
||||
import CandidatePage from './components/CandidatePage';
|
||||
import CandidatePage from './components/CandidatePage/CandidatePage';
|
||||
import './App.css';
|
||||
|
||||
// HomePage component
|
||||
|
||||
68
src/api/apiModels.ts
Normal file
68
src/api/apiModels.ts
Normal file
@ -0,0 +1,68 @@
|
||||
// Type definitions based on the API specs
|
||||
export interface CandidateSearchResult {
|
||||
candidatos: Candidate[];
|
||||
}
|
||||
|
||||
export interface Candidate {
|
||||
idCandidato: string;
|
||||
nome: string;
|
||||
cpf: string;
|
||||
dataNascimento: string;
|
||||
email: string;
|
||||
estadoCivil: string;
|
||||
sexo: string;
|
||||
ocupacao: string;
|
||||
fotoUrl: string;
|
||||
}
|
||||
|
||||
export interface CandidateDetails extends Candidate {
|
||||
eleicoes: Election[];
|
||||
}
|
||||
|
||||
export interface Election {
|
||||
sqCandidato: string;
|
||||
tipoEleicao: string;
|
||||
cargo: string;
|
||||
ano: number;
|
||||
siglaUF: string;
|
||||
nomeUE: string;
|
||||
nrCandidato: string;
|
||||
nomeCandidato: string;
|
||||
resultado: string;
|
||||
}
|
||||
|
||||
export interface CandidateAssets {
|
||||
bens: Asset[];
|
||||
}
|
||||
|
||||
export interface Asset {
|
||||
idCandidato: string;
|
||||
ano: number;
|
||||
tipoBem: string;
|
||||
descricao: string;
|
||||
valor: number;
|
||||
}
|
||||
|
||||
export interface CandidateRedesSociais {
|
||||
redesSociais: RedeSocial[];
|
||||
}
|
||||
|
||||
export interface RedeSocial {
|
||||
idCandidato: string;
|
||||
rede: "Facebook" | "Instagram" | "X/Twitter" | "TikTok" | "YouTube" | "LinkedIn" | "WhatsApp" | "Threads" | "Telegram" | "Kwai" | "Spotify" | "Outros";
|
||||
siglaUF: string;
|
||||
link: string;
|
||||
ano: number;
|
||||
}
|
||||
|
||||
export interface PlatformStats {
|
||||
totalCandidatos: number;
|
||||
totalBemCandidatos: number;
|
||||
totalValorBemCandidatos: number;
|
||||
totalRedesSociais: number;
|
||||
totalEleicoes: number;
|
||||
}
|
||||
|
||||
export interface CpfRevealResult {
|
||||
cpf: string;
|
||||
}
|
||||
@ -10,7 +10,7 @@ export type {
|
||||
CandidateRedesSociais,
|
||||
RedeSocial,
|
||||
PlatformStats,
|
||||
} from './openCandApi';
|
||||
} from './apiModels';
|
||||
|
||||
// Export base API classes for custom implementations
|
||||
export { BaseApiClient, ApiError } from './base';
|
||||
|
||||
@ -1,70 +1,6 @@
|
||||
import { BaseApiClient } from './base';
|
||||
import { API_CONFIG } from '../config/api';
|
||||
|
||||
// Type definitions based on the API specs
|
||||
export interface CandidateSearchResult {
|
||||
candidatos: Candidate[];
|
||||
}
|
||||
|
||||
export interface Candidate {
|
||||
idCandidato: string;
|
||||
nome: string;
|
||||
cpf: string;
|
||||
dataNascimento: string;
|
||||
email: string;
|
||||
estadoCivil: string;
|
||||
sexo: string;
|
||||
ocupacao: string;
|
||||
fotoUrl: string;
|
||||
}
|
||||
|
||||
export interface CandidateDetails extends Candidate {
|
||||
eleicoes: Election[];
|
||||
}
|
||||
|
||||
export interface Election {
|
||||
sqCandidato: string;
|
||||
tipoEleicao: string;
|
||||
cargo: string;
|
||||
ano: number;
|
||||
siglaUF: string;
|
||||
nomeUE: string;
|
||||
nrCandidato: string;
|
||||
nomeCandidato: string;
|
||||
resultado: string;
|
||||
}
|
||||
|
||||
export interface CandidateAssets {
|
||||
bens: Asset[];
|
||||
}
|
||||
|
||||
export interface Asset {
|
||||
idCandidato: string;
|
||||
ano: number;
|
||||
tipoBem: string;
|
||||
descricao: string;
|
||||
valor: number;
|
||||
}
|
||||
|
||||
export interface CandidateRedesSociais {
|
||||
redesSociais: RedeSocial[];
|
||||
}
|
||||
|
||||
export interface RedeSocial {
|
||||
idCandidato: string;
|
||||
rede: "Facebook" | "Instagram" | "X/Twitter" | "TikTok" | "YouTube" | "LinkedIn" | "WhatsApp" | "Threads" | "Telegram" | "Kwai" | "Spotify" | "Outros";
|
||||
siglaUF: string;
|
||||
link: string;
|
||||
ano: number;
|
||||
}
|
||||
|
||||
export interface PlatformStats {
|
||||
totalCandidatos: number;
|
||||
totalBemCandidatos: number;
|
||||
totalValorBemCandidatos: number;
|
||||
totalRedesSociais: number;
|
||||
totalEleicoes: number;
|
||||
}
|
||||
import type { CandidateAssets, CandidateDetails, CandidateRedesSociais, CandidateSearchResult, CpfRevealResult, PlatformStats } from './apiModels';
|
||||
|
||||
/**
|
||||
* OpenCand API client for interacting with the OpenCand platform
|
||||
@ -84,7 +20,6 @@ export class OpenCandApi extends BaseApiClient {
|
||||
|
||||
/**
|
||||
* Search for candidates by name or other attributes
|
||||
* GET /v1/candidato/search?q={query}
|
||||
*/
|
||||
async searchCandidates(query: string): Promise<CandidateSearchResult> {
|
||||
const encodedQuery = encodeURIComponent(query);
|
||||
@ -93,7 +28,6 @@ export class OpenCandApi extends BaseApiClient {
|
||||
|
||||
/**
|
||||
* Get detailed information about a specific candidate by ID
|
||||
* GET /v1/candidato/{id}
|
||||
*/
|
||||
async getCandidateById(id: string): Promise<CandidateDetails> {
|
||||
return this.get<CandidateDetails>(`/v1/candidato/${id}`);
|
||||
@ -101,19 +35,24 @@ export class OpenCandApi extends BaseApiClient {
|
||||
|
||||
/**
|
||||
* Get the assets of a specific candidate by ID
|
||||
* GET /v1/candidato/{id}/bens
|
||||
*/
|
||||
async getCandidateAssets(id: string): Promise<CandidateAssets> {
|
||||
return this.get<CandidateAssets>(`/v1/candidato/${id}/bens`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the assets of a specific candidate by ID
|
||||
* GET /v1/candidato/{id}/bens
|
||||
* Get the social networks of a specific candidate by ID
|
||||
*/
|
||||
async getCandidateRedesSociais(id: string): Promise<CandidateRedesSociais> {
|
||||
return this.get<CandidateRedesSociais>(`/v1/candidato/${id}/rede-social`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the social networks of a specific candidate by ID
|
||||
*/
|
||||
async getCandidateCpf(id: string): Promise<CpfRevealResult> {
|
||||
return this.get<CpfRevealResult>(`/v1/candidato/${id}/reveal-cpf`);
|
||||
}
|
||||
}
|
||||
|
||||
// Create a default instance for easy usage with proper configuration
|
||||
|
||||
@ -1,360 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeftIcon, UserIcon, DocumentTextIcon, CurrencyDollarIcon, LinkIcon } from '@heroicons/react/24/outline';
|
||||
import { openCandApi, type CandidateDetails, type CandidateAssets, type CandidateRedesSociais, type Election, type Asset, type RedeSocial, ApiError } from '../api';
|
||||
|
||||
const CandidatePage: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [candidateDetails, setCandidateDetails] = useState<CandidateDetails | null>(null);
|
||||
const [candidateAssets, setCandidateAssets] = useState<CandidateAssets | null>(null);
|
||||
const [candidateRedesSociais, setCandidateRedesSociais] = useState<CandidateRedesSociais | null>(null);
|
||||
const [isLoadingDetails, setIsLoadingDetails] = useState(true);
|
||||
const [isLoadingAssets, setIsLoadingAssets] = useState(true);
|
||||
const [isLoadingRedesSociais, setIsLoadingRedesSociais] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) {
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch candidate details
|
||||
const fetchCandidateDetails = async () => {
|
||||
try {
|
||||
setIsLoadingDetails(true);
|
||||
const details = await openCandApi.getCandidateById(id);
|
||||
setCandidateDetails(details);
|
||||
} catch (err) {
|
||||
console.error('Error fetching candidate details:', err);
|
||||
if (err instanceof ApiError) {
|
||||
setError(`Erro ao carregar dados do candidato: ${err.message}`);
|
||||
} else {
|
||||
setError('Erro inesperado ao carregar dados do candidato');
|
||||
}
|
||||
} finally {
|
||||
setIsLoadingDetails(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch candidate assets
|
||||
const fetchCandidateAssets = async () => {
|
||||
try {
|
||||
setIsLoadingAssets(true);
|
||||
const assets = await openCandApi.getCandidateAssets(id);
|
||||
setCandidateAssets(assets);
|
||||
} catch (err) {
|
||||
console.error('Error fetching candidate assets:', err);
|
||||
// Assets might not be available for all candidates, so we don't set error here
|
||||
} finally {
|
||||
setIsLoadingAssets(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch candidate social media
|
||||
const fetchCandidateRedesSociais = async () => {
|
||||
try {
|
||||
setIsLoadingRedesSociais(true);
|
||||
const redesSociais = await openCandApi.getCandidateRedesSociais(id);
|
||||
setCandidateRedesSociais(redesSociais);
|
||||
} catch (err) {
|
||||
console.error('Error fetching candidate social media:', err);
|
||||
// Social media might not be available for all candidates, so we don't set error here
|
||||
} finally {
|
||||
setIsLoadingRedesSociais(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCandidateDetails();
|
||||
fetchCandidateAssets();
|
||||
fetchCandidateRedesSociais();
|
||||
}, [id, navigate]);
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL'
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('pt-BR');
|
||||
} catch {
|
||||
return dateString;
|
||||
}
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<main className="flex-grow flex items-center justify-center min-h-screen p-4">
|
||||
<div className="text-center text-white">
|
||||
<h1 className="text-2xl font-bold mb-4">Erro</h1>
|
||||
<p className="text-red-400 mb-4">{error}</p>
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
Voltar ao Início
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex-grow p-6 max-w-7xl mx-auto">
|
||||
{/* Header with back button */}
|
||||
<div className="mb-6">
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="flex items-center text-white hover:text-gray-300 transition-colors mb-4"
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5 mr-2" />
|
||||
Voltar à busca
|
||||
</button>
|
||||
|
||||
{candidateDetails && (
|
||||
<h1 className="text-3xl font-bold text-white">{candidateDetails.nome}</h1>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full">
|
||||
{/* Left Column - Basic Information and Social Media */}
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
{/* Basic Information Panel */}
|
||||
<div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 p-6">
|
||||
<div className="flex items-center mb-6">
|
||||
<UserIcon className="h-8 w-8 text-blue-600 mr-3" />
|
||||
<h2 className="text-2xl font-bold text-gray-900">Informações Básicas</h2>
|
||||
</div>
|
||||
|
||||
{isLoadingDetails ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : candidateDetails ? (
|
||||
<div className="space-y-4">
|
||||
{/* Candidate Photo */}
|
||||
{candidateDetails.fotoUrl && (
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="relative">
|
||||
<img
|
||||
src={candidateDetails.fotoUrl}
|
||||
alt={`Foto de ${candidateDetails.nome}`}
|
||||
className="w-32 h-32 rounded-full object-cover border-4 border-blue-200 shadow-lg"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Nome</label>
|
||||
<p className="text-lg font-medium text-gray-900 mt-1">{candidateDetails.nome}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">CPF</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{candidateDetails.cpf}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Data de Nascimento</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{formatDate(candidateDetails.dataNascimento)}</p>
|
||||
</div>
|
||||
|
||||
{candidateDetails.email && (
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Email</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{candidateDetails.email}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Estado Civil</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{candidateDetails.estadoCivil}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Sexo</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{candidateDetails.sexo}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Ocupação</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{candidateDetails.ocupacao}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
Nenhuma informação encontrada
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Social Media Panel */}
|
||||
<div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 p-6">
|
||||
<div className="flex items-center mb-6">
|
||||
<LinkIcon className="h-8 w-8 text-orange-600 mr-3" />
|
||||
<h2 className="text-2xl font-bold text-gray-900">Redes Sociais</h2>
|
||||
</div>
|
||||
|
||||
{isLoadingRedesSociais ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-4 border-orange-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : candidateRedesSociais?.redesSociais && candidateRedesSociais.redesSociais.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{candidateRedesSociais.redesSociais.map((redeSocial: RedeSocial, index: number) => (
|
||||
<div key={`${redeSocial.idCandidato}-${redeSocial.rede}-${index}`} className="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center mb-2">
|
||||
<span className="font-semibold text-gray-900 mr-2">{redeSocial.rede}</span>
|
||||
<span className="text-sm text-gray-500">({redeSocial.ano})</span>
|
||||
</div>
|
||||
<a
|
||||
href={redeSocial.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 text-sm break-all transition-colors"
|
||||
>
|
||||
{redeSocial.link}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
Nenhuma rede social encontrada
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Elections and Assets */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Elections Panel */}
|
||||
<div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 p-6">
|
||||
<div className="flex items-center mb-6">
|
||||
<DocumentTextIcon className="h-8 w-8 text-green-600 mr-3" />
|
||||
<h2 className="text-2xl font-bold text-gray-900">Histórico de Eleições</h2>
|
||||
</div>
|
||||
|
||||
{isLoadingDetails ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-4 border-green-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : candidateDetails?.eleicoes && candidateDetails.eleicoes.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full table-auto">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Ano</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Tipo</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Cargo</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">UF</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Localidade</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Número</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Resultado</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{candidateDetails.eleicoes.map((election: Election, index: number) => (
|
||||
<tr key={election.sqCandidato || index} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
|
||||
<td className="py-3 px-2 text-gray-900">{election.ano}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{election.tipoEleicao}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{election.cargo}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{election.siglaUF}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{election.nomeUE}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{election.nrCandidato}</td>
|
||||
<td className="py-3 px-2">
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
election.resultado?.toLowerCase().includes('eleito')
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{election.resultado}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
Nenhum histórico de eleições encontrado
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Assets Panel */}
|
||||
<div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 p-6">
|
||||
<div className="flex items-center mb-6">
|
||||
<CurrencyDollarIcon className="h-8 w-8 text-purple-600 mr-3" />
|
||||
<h2 className="text-2xl font-bold text-gray-900">Patrimônio Declarado</h2>
|
||||
</div>
|
||||
|
||||
{isLoadingAssets ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-4 border-purple-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : candidateAssets?.bens && candidateAssets.bens.length > 0 ? (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full table-auto">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Ano</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Tipo</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Descrição</th>
|
||||
<th className="text-right py-3 px-2 font-semibold text-gray-700">Valor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{candidateAssets.bens.map((asset: Asset, index: number) => (
|
||||
<tr key={`${asset.idCandidato}-${asset.ano}-${index}`} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
|
||||
<td className="py-3 px-2 text-gray-900">{asset.ano}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{asset.tipoBem}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{asset.descricao}</td>
|
||||
<td className="py-3 px-2 text-right text-gray-900 font-medium">
|
||||
{formatCurrency(asset.valor)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Total Assets */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-lg font-semibold text-gray-700">Total Declarado:</span>
|
||||
<span className="text-xl font-bold text-purple-600">
|
||||
{formatCurrency(candidateAssets.bens.reduce((total, asset) => total + asset.valor, 0))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
Nenhum patrimônio declarado encontrado
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default CandidatePage;
|
||||
75
src/components/CandidatePage/AssetsComponent.tsx
Normal file
75
src/components/CandidatePage/AssetsComponent.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import { CurrencyDollarIcon } from '@heroicons/react/24/outline';
|
||||
import { type Asset } from '../../api';
|
||||
|
||||
interface AssetsComponentProps {
|
||||
assets: Asset[] | null;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const AssetsComponent: React.FC<AssetsComponentProps> = ({ assets, isLoading }) => {
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL'
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 p-6">
|
||||
<div className="flex items-center mb-6">
|
||||
<CurrencyDollarIcon className="h-8 w-8 text-purple-600 mr-3" />
|
||||
<h2 className="text-2xl font-bold text-gray-900">Patrimônio Declarado</h2>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-4 border-purple-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : assets && assets.length > 0 ? (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full table-auto">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Ano</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Tipo</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Descrição</th>
|
||||
<th className="text-right py-3 px-2 font-semibold text-gray-700">Valor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{assets.map((asset: Asset, index: number) => (
|
||||
<tr key={`${asset.idCandidato}-${asset.ano}-${index}`} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
|
||||
<td className="py-3 px-2 text-gray-900">{asset.ano}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{asset.tipoBem}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{asset.descricao}</td>
|
||||
<td className="py-3 px-2 text-right text-gray-900 font-medium">
|
||||
{formatCurrency(asset.valor)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Total Assets */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-lg font-semibold text-gray-700">Total Declarado:</span>
|
||||
<span className="text-xl font-bold text-purple-600">
|
||||
{formatCurrency(assets.reduce((total, asset) => total + asset.valor, 0))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
Nenhum patrimônio declarado encontrado
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssetsComponent;
|
||||
135
src/components/CandidatePage/BasicCandidateInfoComponent.tsx
Normal file
135
src/components/CandidatePage/BasicCandidateInfoComponent.tsx
Normal file
@ -0,0 +1,135 @@
|
||||
import React, { useState } from 'react';
|
||||
import { UserIcon } from '@heroicons/react/24/outline';
|
||||
import { type CandidateDetails, openCandApi } from '../../api';
|
||||
import { formatCpf, maskCpf } from '../../utils/utils';
|
||||
|
||||
interface BasicCandidateInfoComponentProps {
|
||||
candidateDetails: CandidateDetails | null;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const BasicCandidateInfoComponent: React.FC<BasicCandidateInfoComponentProps> = ({
|
||||
candidateDetails,
|
||||
isLoading
|
||||
}) => {
|
||||
const [revealedCpf, setRevealedCpf] = useState<string | null>(null);
|
||||
const [isRevealingCpf, setIsRevealingCpf] = useState(false);
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('pt-BR');
|
||||
} catch {
|
||||
return dateString;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCpfClick = async () => {
|
||||
if (!candidateDetails?.idCandidato || isRevealingCpf || revealedCpf) return;
|
||||
|
||||
setIsRevealingCpf(true);
|
||||
try {
|
||||
const cpfResult = await openCandApi.getCandidateCpf(candidateDetails?.idCandidato || '');
|
||||
setRevealedCpf(formatCpf(cpfResult.cpf));
|
||||
} catch (error) {
|
||||
console.error('Failed to reveal CPF:', error);
|
||||
} finally {
|
||||
setIsRevealingCpf(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 p-6">
|
||||
<div className="flex items-center mb-6">
|
||||
<UserIcon className="h-8 w-8 text-blue-600 mr-3" />
|
||||
<h2 className="text-2xl font-bold text-gray-900">Informações Básicas</h2>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : candidateDetails ? (
|
||||
<div className="space-y-4">
|
||||
{/* Candidate Photo */}
|
||||
{candidateDetails.fotoUrl && (
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="relative">
|
||||
<img
|
||||
src={candidateDetails.fotoUrl}
|
||||
alt={`Foto de ${candidateDetails.nome}`}
|
||||
className="w-32 h-32 rounded-full object-cover border-4 border-blue-200 shadow-lg"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Nome</label>
|
||||
<p className="text-lg font-medium text-gray-900 mt-1">{candidateDetails.nome}</p>
|
||||
</div>
|
||||
|
||||
{candidateDetails.cpf &&
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">CPF</label>
|
||||
<div
|
||||
className={`text-lg text-gray-900 mt-1 ${
|
||||
!revealedCpf && !isRevealingCpf ? 'cursor-pointer hover:text-blue-600 transition-colors duration-200' : ''
|
||||
}`}
|
||||
onClick={handleCpfClick}
|
||||
>
|
||||
{isRevealingCpf ? (
|
||||
<div className="flex items-center justify-center space-x-2 py-1">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-2 border-blue-200 border-t-blue-600"></div>
|
||||
<span className="animate-pulse text-blue-600">Carregando...</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className={revealedCpf ? '' : 'select-none'}>
|
||||
{revealedCpf || maskCpf(candidateDetails.cpf)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Data de Nascimento</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{formatDate(candidateDetails.dataNascimento)}</p>
|
||||
</div>
|
||||
|
||||
{candidateDetails.email && (
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Email</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{candidateDetails.email}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Estado Civil</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{candidateDetails.estadoCivil}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Sexo</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{candidateDetails.sexo}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-600 uppercase tracking-wide">Ocupação</label>
|
||||
<p className="text-lg text-gray-900 mt-1">{candidateDetails.ocupacao}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
Nenhuma informação encontrada
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicCandidateInfoComponent;
|
||||
147
src/components/CandidatePage/CandidatePage.tsx
Normal file
147
src/components/CandidatePage/CandidatePage.tsx
Normal file
@ -0,0 +1,147 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeftIcon } from '@heroicons/react/24/outline';
|
||||
import { openCandApi, type CandidateDetails, type CandidateAssets, type CandidateRedesSociais, ApiError } from '../../api';
|
||||
import ElectionsComponent from './ElectionsComponent';
|
||||
import AssetsComponent from './AssetsComponent';
|
||||
import BasicCandidateInfoComponent from './BasicCandidateInfoComponent';
|
||||
import SocialMediaComponent from './SocialMediaComponent';
|
||||
|
||||
const CandidatePage: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [candidateDetails, setCandidateDetails] = useState<CandidateDetails | null>(null);
|
||||
const [candidateAssets, setCandidateAssets] = useState<CandidateAssets | null>(null);
|
||||
const [candidateRedesSociais, setCandidateRedesSociais] = useState<CandidateRedesSociais | null>(null);
|
||||
const [isLoadingDetails, setIsLoadingDetails] = useState(true);
|
||||
const [isLoadingAssets, setIsLoadingAssets] = useState(true);
|
||||
const [isLoadingRedesSociais, setIsLoadingRedesSociais] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) {
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch candidate details
|
||||
const fetchCandidateDetails = async () => {
|
||||
try {
|
||||
setIsLoadingDetails(true);
|
||||
const details = await openCandApi.getCandidateById(id);
|
||||
setCandidateDetails(details);
|
||||
} catch (err) {
|
||||
console.error('Error fetching candidate details:', err);
|
||||
if (err instanceof ApiError) {
|
||||
setError(`Erro ao carregar dados do candidato: ${err.message}`);
|
||||
} else {
|
||||
setError('Erro inesperado ao carregar dados do candidato');
|
||||
}
|
||||
} finally {
|
||||
setIsLoadingDetails(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch candidate assets
|
||||
const fetchCandidateAssets = async () => {
|
||||
try {
|
||||
setIsLoadingAssets(true);
|
||||
const assets = await openCandApi.getCandidateAssets(id);
|
||||
setCandidateAssets(assets);
|
||||
} catch (err) {
|
||||
console.error('Error fetching candidate assets:', err);
|
||||
// Assets might not be available for all candidates, so we don't set error here
|
||||
} finally {
|
||||
setIsLoadingAssets(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch candidate social media
|
||||
const fetchCandidateRedesSociais = async () => {
|
||||
try {
|
||||
setIsLoadingRedesSociais(true);
|
||||
const redesSociais = await openCandApi.getCandidateRedesSociais(id);
|
||||
setCandidateRedesSociais(redesSociais);
|
||||
} catch (err) {
|
||||
console.error('Error fetching candidate social media:', err);
|
||||
// Social media might not be available for all candidates, so we don't set error here
|
||||
} finally {
|
||||
setIsLoadingRedesSociais(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCandidateDetails();
|
||||
fetchCandidateAssets();
|
||||
fetchCandidateRedesSociais();
|
||||
}, [id, navigate]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<main className="flex-grow flex items-center justify-center min-h-screen p-4">
|
||||
<div className="text-center text-white">
|
||||
<h1 className="text-2xl font-bold mb-4">Erro</h1>
|
||||
<p className="text-red-400 mb-4">{error}</p>
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
Voltar ao Início
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex-grow p-6 max-w-7xl mx-auto">
|
||||
{/* Header with back button */}
|
||||
<div className="mb-6">
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="flex items-center text-white hover:text-gray-300 transition-colors mb-4"
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5 mr-2" />
|
||||
Voltar à busca
|
||||
</button>
|
||||
|
||||
{candidateDetails && (
|
||||
<h1 className="text-3xl font-bold text-white">{candidateDetails.nome}</h1>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full">
|
||||
{/* Left Column - Basic Information and Social Media */}
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
{/* Basic Information Panel */}
|
||||
<BasicCandidateInfoComponent
|
||||
candidateDetails={candidateDetails}
|
||||
isLoading={isLoadingDetails}
|
||||
/>
|
||||
|
||||
{/* Social Media Panel */}
|
||||
<SocialMediaComponent
|
||||
redesSociais={candidateRedesSociais?.redesSociais || null}
|
||||
isLoading={isLoadingRedesSociais}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Elections and Assets */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Elections Panel */}
|
||||
<ElectionsComponent
|
||||
elections={candidateDetails?.eleicoes || null}
|
||||
isLoading={isLoadingDetails}
|
||||
/>
|
||||
|
||||
{/* Assets Panel */}
|
||||
<AssetsComponent
|
||||
assets={candidateAssets?.bens || null}
|
||||
isLoading={isLoadingAssets}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default CandidatePage;
|
||||
87
src/components/CandidatePage/ElectionsComponent.tsx
Normal file
87
src/components/CandidatePage/ElectionsComponent.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import React from 'react';
|
||||
import { DocumentTextIcon } from '@heroicons/react/24/outline';
|
||||
import { type Election } from '../../api';
|
||||
import Tooltip from '../Tooltip';
|
||||
|
||||
interface ElectionsComponentProps {
|
||||
elections: Election[] | null;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const ElectionsComponent: React.FC<ElectionsComponentProps> = ({ elections, isLoading }) => {
|
||||
const getResultadoHelper = (resultado: string | null) => {
|
||||
resultado = resultado?.toLowerCase() || '';
|
||||
if (resultado == 'eleito') return 'Eleito!';
|
||||
if (resultado == 'não eleito') return 'Não Eleito';
|
||||
if (resultado == 'eleito por qp') return 'Eleito por Quociente Partidário';
|
||||
if (resultado.includes('nulo')) return 'Dado não disponível';
|
||||
if (resultado == '2º turno') return 'Foi para o segundo Turno';
|
||||
if (resultado == 'suplente') return 'Foi eleito como suplente';
|
||||
return '';
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 p-6">
|
||||
<div className="flex items-center mb-6">
|
||||
<DocumentTextIcon className="h-8 w-8 text-green-600 mr-3" />
|
||||
<h2 className="text-2xl font-bold text-gray-900">Histórico de Eleições</h2>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-4 border-green-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : elections && elections.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full table-auto">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Ano</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Tipo</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Cargo</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">UF</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Localidade</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Número</th>
|
||||
<th className="text-left py-3 px-2 font-semibold text-gray-700">Resultado</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{elections.map((election: Election, index: number) => (
|
||||
<tr key={election.sqCandidato || index} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
|
||||
<td className="py-3 px-2 text-gray-900">{election.ano}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{election.tipoEleicao}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{election.cargo}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{election.siglaUF}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{election.nomeUE}</td>
|
||||
<td className="py-3 px-2 text-gray-900">{election.nrCandidato}</td>
|
||||
<td className="py-3 px-2">
|
||||
<Tooltip
|
||||
content={getResultadoHelper(election.resultado)}
|
||||
position="top"
|
||||
delay={200}
|
||||
>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
election.resultado?.toLowerCase() === 'eleito'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{election.resultado}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
Nenhum histórico de eleições encontrado
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ElectionsComponent;
|
||||
57
src/components/CandidatePage/SocialMediaComponent.tsx
Normal file
57
src/components/CandidatePage/SocialMediaComponent.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import { LinkIcon } from '@heroicons/react/24/outline';
|
||||
import { type RedeSocial } from '../../api';
|
||||
|
||||
interface SocialMediaComponentProps {
|
||||
redesSociais: RedeSocial[] | null;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const SocialMediaComponent: React.FC<SocialMediaComponentProps> = ({
|
||||
redesSociais,
|
||||
isLoading
|
||||
}) => {
|
||||
return (
|
||||
<div className="bg-white/95 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 p-6">
|
||||
<div className="flex items-center mb-6">
|
||||
<LinkIcon className="h-8 w-8 text-orange-600 mr-3" />
|
||||
<h2 className="text-2xl font-bold text-gray-900">Redes Sociais</h2>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-4 border-orange-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : redesSociais && redesSociais.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{redesSociais.map((redeSocial: RedeSocial, index: number) => (
|
||||
<div key={`${redeSocial.idCandidato}-${redeSocial.rede}-${index}`} className="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center mb-2">
|
||||
<span className="font-semibold text-gray-900 mr-2">{redeSocial.rede}</span>
|
||||
<span className="text-sm text-gray-500">({redeSocial.ano})</span>
|
||||
</div>
|
||||
<a
|
||||
href={redeSocial.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 text-sm break-all transition-colors"
|
||||
>
|
||||
{redeSocial.link}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
Nenhuma rede social encontrada
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SocialMediaComponent;
|
||||
@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/solid';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { openCandApi, type Candidate, ApiError } from '../api';
|
||||
import { formatDateToDDMMYYYY, maskCpf } from '../utils/utils';
|
||||
|
||||
interface SearchBarProps {
|
||||
className?: string;
|
||||
@ -91,6 +92,17 @@ const SearchBar: React.FC<SearchBarProps> = ({ className = '' }) => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const getCandidateDescription = (candidate: Candidate) => {
|
||||
let desc = [''];
|
||||
|
||||
if (candidate.cpf) desc.push(`CPF: ${maskCpf(candidate.cpf)}`);
|
||||
if (candidate.ocupacao && candidate.ocupacao != 'OUTROS') desc.push(`${candidate.ocupacao}`);
|
||||
if (desc.length == 0)
|
||||
if (candidate.dataNascimento) desc.push(`${formatDateToDDMMYYYY(candidate.dataNascimento)}`);
|
||||
|
||||
return desc.filter(Boolean).join(' | ');
|
||||
}
|
||||
|
||||
// Clear timeout on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@ -151,7 +163,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ className = '' }) => {
|
||||
>
|
||||
<div className="text-black font-semibold text-base">{candidate.nome}</div>
|
||||
<div className="text-gray-600 text-sm mt-1">
|
||||
CPF: {candidate.cpf} | {candidate.ocupacao}
|
||||
{getCandidateDescription(candidate)}
|
||||
</div>
|
||||
{candidate.email && (
|
||||
<div className="text-gray-500 text-xs mt-1">{candidate.email}</div>
|
||||
|
||||
180
src/components/Tooltip.tsx
Normal file
180
src/components/Tooltip.tsx
Normal file
@ -0,0 +1,180 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
interface TooltipProps {
|
||||
content: string;
|
||||
children: React.ReactNode;
|
||||
position?: 'top' | 'bottom' | 'left' | 'right';
|
||||
delay?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Tooltip: React.FC<TooltipProps> = ({
|
||||
content,
|
||||
children,
|
||||
position = 'top',
|
||||
delay = 300,
|
||||
className = ''
|
||||
}) => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [showTooltip, setShowTooltip] = useState(false);
|
||||
const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
|
||||
const timeoutRef = useRef<number | null>(null);
|
||||
const tooltipRef = useRef<HTMLDivElement>(null);
|
||||
const triggerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const calculateTooltipPosition = () => {
|
||||
if (!triggerRef.current) return { top: 0, left: 0 };
|
||||
|
||||
const triggerRect = triggerRef.current.getBoundingClientRect();
|
||||
|
||||
let top = 0;
|
||||
let left = 0;
|
||||
|
||||
switch (position) {
|
||||
case 'top':
|
||||
top = triggerRect.top - 8; // 8px offset for arrow and spacing
|
||||
left = triggerRect.left + triggerRect.width / 2;
|
||||
break;
|
||||
case 'bottom':
|
||||
top = triggerRect.bottom + 8;
|
||||
left = triggerRect.left + triggerRect.width / 2;
|
||||
break;
|
||||
case 'left':
|
||||
top = triggerRect.top + triggerRect.height / 2;
|
||||
left = triggerRect.left - 8;
|
||||
break;
|
||||
case 'right':
|
||||
top = triggerRect.top + triggerRect.height / 2;
|
||||
left = triggerRect.right + 8;
|
||||
break;
|
||||
}
|
||||
|
||||
return { top, left };
|
||||
};
|
||||
|
||||
const showTooltipWithDelay = () => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
const position = calculateTooltipPosition();
|
||||
setTooltipPosition(position);
|
||||
setIsVisible(true);
|
||||
// Small delay to allow for positioning before showing
|
||||
setTimeout(() => setShowTooltip(true), 10);
|
||||
}, delay);
|
||||
};
|
||||
|
||||
const hideTooltip = () => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
|
||||
setShowTooltip(false);
|
||||
setTimeout(() => setIsVisible(false), 150); // Match transition duration
|
||||
};
|
||||
|
||||
// Update tooltip position on scroll or resize
|
||||
useEffect(() => {
|
||||
if (!isVisible) return;
|
||||
|
||||
const updatePosition = () => {
|
||||
const position = calculateTooltipPosition();
|
||||
setTooltipPosition(position);
|
||||
};
|
||||
|
||||
const handleScroll = () => updatePosition();
|
||||
const handleResize = () => updatePosition();
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
window.addEventListener('resize', handleResize, { passive: true });
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, [isVisible, position]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const getTooltipClasses = () => {
|
||||
const baseClasses = `
|
||||
fixed z-[9999] px-3 py-2 text-sm font-medium text-white bg-gray-900
|
||||
rounded-lg shadow-xl backdrop-blur-sm border border-gray-700
|
||||
transition-all duration-150 ease-in-out pointer-events-none
|
||||
max-w-xs break-words
|
||||
`;
|
||||
|
||||
const transformClasses = {
|
||||
top: '-translate-x-1/2 -translate-y-full',
|
||||
bottom: '-translate-x-1/2',
|
||||
left: '-translate-x-full -translate-y-1/2',
|
||||
right: '-translate-y-1/2'
|
||||
};
|
||||
|
||||
const visibilityClasses = showTooltip
|
||||
? 'opacity-100 scale-100'
|
||||
: 'opacity-0 scale-95';
|
||||
|
||||
return `${baseClasses} ${transformClasses[position]} ${visibilityClasses}`;
|
||||
};
|
||||
|
||||
const getArrowClasses = () => {
|
||||
const baseClasses = 'absolute w-2 h-2 bg-gray-900 border border-gray-700 transform rotate-45';
|
||||
|
||||
const arrowPositions = {
|
||||
top: 'bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 border-t-0 border-l-0',
|
||||
bottom: 'top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-b-0 border-r-0',
|
||||
left: 'right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 border-l-0 border-b-0',
|
||||
right: 'left-0 top-1/2 transform -translate-x-1/2 -translate-y-1/2 border-r-0 border-t-0'
|
||||
};
|
||||
|
||||
return `${baseClasses} ${arrowPositions[position]}`;
|
||||
};
|
||||
|
||||
if (!content) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={triggerRef}
|
||||
className={`relative inline-block ${className}`}
|
||||
onMouseEnter={showTooltipWithDelay}
|
||||
onMouseLeave={hideTooltip}
|
||||
onFocus={showTooltipWithDelay}
|
||||
onBlur={hideTooltip}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{isVisible && createPortal(
|
||||
<div
|
||||
ref={tooltipRef}
|
||||
className={getTooltipClasses()}
|
||||
style={{
|
||||
top: tooltipPosition.top,
|
||||
left: tooltipPosition.left,
|
||||
}}
|
||||
role="tooltip"
|
||||
aria-hidden={!showTooltip}
|
||||
>
|
||||
{content}
|
||||
<div className={getArrowClasses()} />
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
@ -1,27 +0,0 @@
|
||||
import { openCandApi, OpenCandApi } from '../api';
|
||||
|
||||
/**
|
||||
* Example usage of the OpenCand API client
|
||||
*/
|
||||
export class OpenCandApiExample {
|
||||
private api: OpenCandApi;
|
||||
|
||||
constructor(baseUrl?: string) {
|
||||
// You can use the default instance or create a new one with custom base URL
|
||||
this.api = baseUrl ? new OpenCandApi(baseUrl) : openCandApi;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup API configuration
|
||||
*/
|
||||
setupApi(baseUrl: string, additionalHeaders?: Record<string, string>): void {
|
||||
this.api.setBaseUrl(baseUrl);
|
||||
|
||||
if (additionalHeaders) {
|
||||
this.api.setDefaultHeaders(additionalHeaders);
|
||||
}
|
||||
|
||||
// Set a custom timeout (optional)
|
||||
this.api.setTimeout(45000); // 45 seconds
|
||||
}
|
||||
}
|
||||
58
src/utils/utils.ts
Normal file
58
src/utils/utils.ts
Normal file
@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Formats a CPF string with masking (123.***.789-10)
|
||||
* @param cpf - A CPF string (11 digits without punctuation)
|
||||
* @returns Formatted CPF with masking or the original input if invalid
|
||||
*/
|
||||
export function maskCpf(cpf: string): string {
|
||||
// Clean input, keeping only digits
|
||||
const cleanCpf = cpf.replace(/\D/g, '');
|
||||
|
||||
// Validate if it's 11 digits
|
||||
if (cleanCpf.length !== 11) {
|
||||
return cpf;
|
||||
}
|
||||
|
||||
// Format with mask: 123.***.789-10
|
||||
return `${cleanCpf.slice(0, 3)}.***.${cleanCpf.slice(6, 9)}-${cleanCpf.slice(9)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats a CPF string with proper punctuation (123.456.789-10)
|
||||
* @param cpf - A CPF string (11 digits without punctuation)
|
||||
* @returns Formatted CPF or the original input if invalid
|
||||
*/
|
||||
export function formatCpf(cpf: string): string {
|
||||
// Clean input, keeping only digits
|
||||
const cleanCpf = cpf.replace(/\D/g, '');
|
||||
|
||||
// Validate if it's 11 digits
|
||||
if (cleanCpf.length !== 11) {
|
||||
return cpf;
|
||||
}
|
||||
|
||||
// Format with standard punctuation: 123.456.789-10
|
||||
return `${cleanCpf.slice(0, 3)}.${cleanCpf.slice(3, 6)}.${cleanCpf.slice(6, 9)}-${cleanCpf.slice(9)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats a date to DD/MM/YYYY format
|
||||
* @param date - Date object or string/number that can be parsed into a Date
|
||||
* @returns Formatted date string in DD/MM/YYYY format or empty string if invalid
|
||||
*/
|
||||
export function formatDateToDDMMYYYY(date: Date | string | number): string {
|
||||
try {
|
||||
const dateObj = date instanceof Date ? date : new Date(date);
|
||||
|
||||
if (isNaN(dateObj.getTime())) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const day = String(dateObj.getDate()).padStart(2, '0');
|
||||
const month = String(dateObj.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
|
||||
const year = dateObj.getFullYear();
|
||||
|
||||
return `${day}/${month}/${year}`;
|
||||
} catch (error) {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user