first commit
This commit is contained in:
rodrigo committed
commit
c9fb67e751
423 files changed
+53287
No files matched your search
@@ -0,0 +1,274 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { format } from 'date-fns';
|
||||
import ptBR from 'date-fns/locale/pt-BR';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
|
||||
interface Calculo {
|
||||
id: string;
|
||||
titulo: string;
|
||||
status: string;
|
||||
valorBase: string;
|
||||
valorFinal: string;
|
||||
dataBase: string;
|
||||
dataCalculo: string;
|
||||
criadoEm: string;
|
||||
usuario: {
|
||||
nome: string;
|
||||
};
|
||||
processo?: {
|
||||
numero: string;
|
||||
titulo: string;
|
||||
};
|
||||
cliente?: {
|
||||
nome: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function CalculosList() {
|
||||
const { user, isAuthenticated, getToken } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [calculos, setCalculos] = useState<Calculo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filtro, setFiltro] = useState({
|
||||
titulo: '',
|
||||
status: '',
|
||||
processoId: '',
|
||||
clienteId: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar autenticação antes de carregar os dados
|
||||
if (isAuthenticated) {
|
||||
carregarCalculos();
|
||||
} else {
|
||||
// Redirecionar para login caso não esteja autenticado
|
||||
navigate('/login');
|
||||
}
|
||||
}, [isAuthenticated, navigate]);
|
||||
|
||||
const carregarCalculos = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Construir query string baseado nos filtros
|
||||
const queryParams = new URLSearchParams();
|
||||
if (filtro.titulo) queryParams.append('titulo', filtro.titulo);
|
||||
if (filtro.status) queryParams.append('status', filtro.status);
|
||||
if (filtro.processoId) queryParams.append('processoId', filtro.processoId);
|
||||
if (filtro.clienteId) queryParams.append('clienteId', filtro.clienteId);
|
||||
|
||||
// Obter token de autenticação usando o contexto
|
||||
const token = getToken();
|
||||
if (!token) {
|
||||
throw new Error('Usuário não autenticado. Faça login novamente.');
|
||||
}
|
||||
|
||||
// Incluir o token no cabeçalho da requisição
|
||||
const response = await fetch(`/api/calculos?${queryParams.toString()}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
// Se receber 401, o token pode estar expirado
|
||||
navigate('/login');
|
||||
throw new Error('Sessão expirada. Por favor, faça login novamente.');
|
||||
}
|
||||
throw new Error('Erro ao carregar cálculos');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setCalculos(data);
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar cálculos:', error);
|
||||
toast.error(`Falha ao carregar os cálculos: ${error.message}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFiltroChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFiltro(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmitFiltro = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
carregarCalculos();
|
||||
};
|
||||
|
||||
// Função para formatar valores monetários
|
||||
const formatarValor = (valor: string) => {
|
||||
return new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL'
|
||||
}).format(parseFloat(valor));
|
||||
};
|
||||
|
||||
// Função para formatar datas
|
||||
const formatarData = (data: string) => {
|
||||
try {
|
||||
return format(new Date(data), 'dd/MM/yyyy', { locale: ptBR });
|
||||
} catch (error) {
|
||||
return 'Data inválida';
|
||||
}
|
||||
};
|
||||
|
||||
// Status Badge
|
||||
const StatusBadge = ({ status }: { status: string }) => {
|
||||
const getStatusColor = () => {
|
||||
switch (status) {
|
||||
case 'RASCUNHO':
|
||||
return 'bg-yellow-100 text-yellow-800';
|
||||
case 'FINALIZADO':
|
||||
return 'bg-green-100 text-green-800';
|
||||
case 'ARQUIVADO':
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
default:
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor()}`}>
|
||||
{status}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Cálculos Judiciais</h1>
|
||||
<Link
|
||||
to="/calculos/novo"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
Novo Cálculo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Filtros */}
|
||||
<div className="bg-white shadow rounded-lg mb-6 p-4">
|
||||
<h2 className="text-lg font-medium text-gray-700 mb-3">Filtros</h2>
|
||||
<form onSubmit={handleSubmitFiltro} className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<label htmlFor="titulo" className="block text-sm font-medium text-gray-700">
|
||||
Título
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="titulo"
|
||||
id="titulo"
|
||||
value={filtro.titulo}
|
||||
onChange={handleFiltroChange}
|
||||
className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="status" className="block text-sm font-medium text-gray-700">
|
||||
Status
|
||||
</label>
|
||||
<select
|
||||
id="status"
|
||||
name="status"
|
||||
value={filtro.status}
|
||||
onChange={handleFiltroChange}
|
||||
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
>
|
||||
<option value="">Todos</option>
|
||||
<option value="RASCUNHO">Rascunho</option>
|
||||
<option value="FINALIZADO">Finalizado</option>
|
||||
<option value="ARQUIVADO">Arquivado</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-2 flex justify-end items-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
Filtrar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Lista de Cálculos */}
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-blue-600" role="status">
|
||||
<span className="visually-hidden">Carregando...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : calculos.length === 0 ? (
|
||||
<div className="bg-white shadow rounded-lg p-8 text-center">
|
||||
<h3 className="text-lg font-medium text-gray-900">Nenhum cálculo encontrado</h3>
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
Para criar um novo cálculo, clique no botão "Novo Cálculo".
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{calculos.map((calculo) => (
|
||||
<li key={calculo.id}>
|
||||
<Link to={`/calculos/${calculo.id}`} className="block hover:bg-gray-50">
|
||||
<div className="px-4 py-4 sm:px-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<p className="text-base font-medium text-blue-600 truncate">
|
||||
{calculo.titulo}
|
||||
</p>
|
||||
<StatusBadge status={calculo.status} />
|
||||
</div>
|
||||
<div className="ml-2 flex-shrink-0 flex">
|
||||
<p className="px-2 inline-flex text-sm leading-5 font-medium rounded-full bg-blue-100 text-blue-800">
|
||||
{formatarValor(calculo.valorFinal)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 sm:flex sm:justify-between">
|
||||
<div className="sm:flex">
|
||||
<p className="flex items-center text-sm text-gray-500">
|
||||
Base: {formatarValor(calculo.valorBase)}
|
||||
</p>
|
||||
<p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
|
||||
Data Base: {formatarData(calculo.dataBase)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
|
||||
<p>
|
||||
Criado em: {formatarData(calculo.criadoEm)} por {calculo.usuario.nome}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{calculo.processo && (
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-600">
|
||||
Processo: {calculo.processo.numero} - {calculo.processo.titulo}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{calculo.cliente && (
|
||||
<div className="mt-1">
|
||||
<p className="text-sm text-gray-600">
|
||||
Cliente: {calculo.cliente.nome}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user