652 lines
28 KiB
TypeScript
652 lines
28 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Header from "@/components/Header";
|
|
|
|
interface Usuario {
|
|
id: string;
|
|
identificador: string;
|
|
nome: string;
|
|
email: string;
|
|
telefone?: string;
|
|
cpf?: string;
|
|
ativo: boolean;
|
|
superadmin: boolean;
|
|
nivel: string;
|
|
registro_completo: boolean;
|
|
enderecos: string[];
|
|
empresas_dados: string[];
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
}
|
|
|
|
interface Endereco {
|
|
id: string;
|
|
cep: string;
|
|
logradouro: string;
|
|
numero: string;
|
|
complemento?: string;
|
|
bairro: string;
|
|
cidade: string;
|
|
estado: string;
|
|
}
|
|
|
|
interface EmpresaDados {
|
|
id: string;
|
|
cnpj: string;
|
|
"razao-social": string;
|
|
"nome-fantasia": string;
|
|
"data-abertura": string;
|
|
situacao: string;
|
|
"natureza-juridica": string;
|
|
porte: string;
|
|
"capital-social": number;
|
|
telefone: string;
|
|
email: string;
|
|
"atividade-principal-codigo": string;
|
|
"atividade-principal-desc": string;
|
|
enderecos: string[];
|
|
}
|
|
|
|
interface UsuarioCompleto extends Usuario {
|
|
enderecoData?: Endereco;
|
|
empresaData?: EmpresaDados;
|
|
}
|
|
|
|
const UsuariosPendentesPage = () => {
|
|
const router = useRouter();
|
|
const [usuarios, setUsuarios] = useState<UsuarioCompleto[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const [page, setPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [selectedUser, setSelectedUser] = useState<UsuarioCompleto | null>(null);
|
|
const [showDetailsModal, setShowDetailsModal] = useState(false);
|
|
const [activatingUserId, setActivatingUserId] = useState<string | null>(null);
|
|
const [currentUser, setCurrentUser] = useState<any>(null); // Usuário logado
|
|
|
|
// Carregar dados do usuário logado
|
|
useEffect(() => {
|
|
const userData = localStorage.getItem('user');
|
|
if (userData) {
|
|
try {
|
|
setCurrentUser(JSON.parse(userData));
|
|
} catch (error) {
|
|
console.error('Erro ao parsing dos dados do usuário:', error);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
// Buscar usuários pendentes
|
|
const fetchUsuarios = async (pageNum: number = 1) => {
|
|
try {
|
|
setLoading(true);
|
|
const token = localStorage.getItem('access_token');
|
|
|
|
if (!token) {
|
|
router.push('/login');
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(
|
|
`${process.env.NEXT_PUBLIC_BFF_API_URL}/users?page=${pageNum}`,
|
|
{
|
|
method: 'GET',
|
|
headers: {
|
|
'accept': 'application/json',
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Erro ao buscar usuários pendentes');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
const rawUsuariosData = data.data || data.items || data || [];
|
|
const usuariosData = Array.isArray(rawUsuariosData)
|
|
? rawUsuariosData.filter((usuario: any) => usuario?.ativo === false)
|
|
: [];
|
|
|
|
// Para cada usuário, buscar dados do endereço e empresa
|
|
const usuariosCompletos = await Promise.all(
|
|
usuariosData.map(async (usuario: Usuario) => {
|
|
const usuarioCompleto: UsuarioCompleto = { ...usuario };
|
|
|
|
// Buscar dados do endereço
|
|
if (usuario.enderecos && usuario.enderecos.length > 0) {
|
|
try {
|
|
const enderecoResponse = await fetch(
|
|
`${process.env.NEXT_PUBLIC_BFF_API_URL}/enderecos/${usuario.enderecos[0]}`,
|
|
{
|
|
headers: {
|
|
'accept': 'application/json',
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
if (enderecoResponse.ok) {
|
|
usuarioCompleto.enderecoData = await enderecoResponse.json();
|
|
}
|
|
} catch (error) {
|
|
console.error('Erro ao buscar endereço:', error);
|
|
}
|
|
}
|
|
|
|
// Buscar dados da empresa
|
|
if (usuario.empresas_dados && usuario.empresas_dados.length > 0) {
|
|
try {
|
|
const empresaResponse = await fetch(
|
|
`${process.env.NEXT_PUBLIC_BFF_API_URL}/empresas/${usuario.empresas_dados[0]}`,
|
|
{
|
|
headers: {
|
|
'accept': 'application/json',
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
if (empresaResponse.ok) {
|
|
usuarioCompleto.empresaData = await empresaResponse.json();
|
|
}
|
|
} catch (error) {
|
|
console.error('Erro ao buscar empresa:', error);
|
|
}
|
|
}
|
|
|
|
return usuarioCompleto;
|
|
})
|
|
);
|
|
|
|
setUsuarios(usuariosCompletos);
|
|
|
|
// Se há paginação na resposta
|
|
if (data.pagination) {
|
|
setTotalPages(data.pagination.totalPages || 1);
|
|
}
|
|
|
|
} catch (error: any) {
|
|
console.error('❌ Erro ao carregar usuários:', error);
|
|
setError(error.message || 'Erro ao carregar usuários pendentes');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Ativar usuário
|
|
const ativarUsuario = async (usuarioId: string) => {
|
|
try {
|
|
setActivatingUserId(usuarioId);
|
|
const token = localStorage.getItem('access_token');
|
|
|
|
const response = await fetch(
|
|
`${process.env.NEXT_PUBLIC_BFF_API_URL}/users/${usuarioId}`,
|
|
{
|
|
method: 'PATCH',
|
|
headers: {
|
|
'accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({
|
|
ativo: true
|
|
}),
|
|
}
|
|
);
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Erro ao ativar usuário');
|
|
}
|
|
|
|
// Recarregar lista
|
|
await fetchUsuarios(page);
|
|
|
|
// Fechar modal se estiver aberto
|
|
if (showDetailsModal && selectedUser?.id === usuarioId) {
|
|
setShowDetailsModal(false);
|
|
setSelectedUser(null);
|
|
}
|
|
|
|
} catch (error: any) {
|
|
console.error('❌ Erro ao ativar usuário:', error);
|
|
setError(error.message || 'Erro ao ativar usuário');
|
|
} finally {
|
|
setActivatingUserId(null);
|
|
}
|
|
};
|
|
|
|
// Ver detalhes do usuário
|
|
const verDetalhes = (usuario: UsuarioCompleto) => {
|
|
setSelectedUser(usuario);
|
|
setShowDetailsModal(true);
|
|
};
|
|
|
|
// Fechar modal de detalhes
|
|
const closeDetailsModal = () => {
|
|
setShowDetailsModal(false);
|
|
setSelectedUser(null);
|
|
};
|
|
|
|
// Carregar usuários ao montar componente
|
|
useEffect(() => {
|
|
fetchUsuarios(page);
|
|
}, [page]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<Header user={currentUser} />
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Cabeçalho da página */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">Usuários Pendentes</h1>
|
|
<p className="mt-2 text-gray-600">
|
|
Gerencie usuários aguardando aprovação de cadastro
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => router.push('/dashboard')}
|
|
className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Voltar ao Dashboard
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conteúdo */}
|
|
{loading ? (
|
|
<div className="bg-white rounded-lg shadow p-8 text-center">
|
|
<div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
|
|
<p className="text-gray-600">Carregando usuários pendentes...</p>
|
|
</div>
|
|
) : error ? (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
|
<div className="flex items-center">
|
|
<svg className="w-5 h-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
|
</svg>
|
|
<p className="text-sm text-red-700">{error}</p>
|
|
</div>
|
|
</div>
|
|
) : usuarios.length === 0 ? (
|
|
<div className="bg-white rounded-lg shadow p-8 text-center">
|
|
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
|
Nenhum usuário pendente
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
Todos os usuários foram processados ou não há cadastros aguardando aprovação.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
|
{/* Tabela de usuários */}
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Usuário
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Empresa
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Data do Cadastro
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Ações
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{usuarios.map((usuario) => (
|
|
<tr key={usuario.id} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center">
|
|
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<span className="text-blue-600 font-medium text-sm">
|
|
{usuario.nome?.charAt(0)?.toUpperCase() || 'U'}
|
|
</span>
|
|
</div>
|
|
<div className="ml-4">
|
|
<div className="text-sm font-medium text-gray-900">
|
|
{usuario.nome}
|
|
</div>
|
|
<div className="text-sm text-gray-500">
|
|
{usuario.email}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900">
|
|
{usuario.empresaData?.['razao-social'] || 'Não informado'}
|
|
</div>
|
|
<div className="text-sm text-gray-500">
|
|
{usuario.empresaData?.cnpj || ''}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900">
|
|
{new Date(usuario.createdAt).toLocaleDateString('pt-BR')}
|
|
</div>
|
|
<div className="text-sm text-gray-500">
|
|
{new Date(usuario.createdAt).toLocaleTimeString('pt-BR', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
|
|
<svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
|
</svg>
|
|
Pendente
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button
|
|
onClick={() => verDetalhes(usuario)}
|
|
className="text-blue-600 hover:text-blue-900 bg-blue-50 hover:bg-blue-100 px-3 py-1 rounded-md transition-colors"
|
|
>
|
|
Ver Detalhes
|
|
</button>
|
|
<button
|
|
onClick={() => ativarUsuario(usuario.id)}
|
|
disabled={activatingUserId === usuario.id}
|
|
className="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-3 py-1 rounded-md transition-colors flex items-center gap-1"
|
|
>
|
|
{activatingUserId === usuario.id ? (
|
|
<>
|
|
<div className="w-3 h-3 border border-white border-t-transparent rounded-full animate-spin"></div>
|
|
Ativando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Ativar
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Paginação */}
|
|
{totalPages > 1 && (
|
|
<div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200">
|
|
<div className="flex-1 flex justify-between sm:hidden">
|
|
<button
|
|
onClick={() => setPage(Math.max(1, page - 1))}
|
|
disabled={page <= 1}
|
|
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
|
|
>
|
|
Anterior
|
|
</button>
|
|
<button
|
|
onClick={() => setPage(Math.min(totalPages, page + 1))}
|
|
disabled={page >= totalPages}
|
|
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
|
|
>
|
|
Próximo
|
|
</button>
|
|
</div>
|
|
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-700">
|
|
Página <span className="font-medium">{page}</span> de{' '}
|
|
<span className="font-medium">{totalPages}</span>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<button
|
|
onClick={() => setPage(Math.max(1, page - 1))}
|
|
disabled={page <= 1}
|
|
className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
|
|
>
|
|
<span className="sr-only">Anterior</span>
|
|
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
<span className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
|
{page}
|
|
</span>
|
|
<button
|
|
onClick={() => setPage(Math.min(totalPages, page + 1))}
|
|
disabled={page >= totalPages}
|
|
className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
|
|
>
|
|
<span className="sr-only">Próximo</span>
|
|
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Modal de Detalhes do Usuário */}
|
|
{showDetailsModal && selectedUser && (
|
|
<div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center p-4 z-50 overflow-auto">
|
|
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[calc(100vh-4rem)] overflow-hidden flex flex-col">
|
|
{/* Header do Modal (sticky para não sumir ao rolar) */}
|
|
<div className="bg-blue-600 p-6 rounded-t-lg sticky top-0 z-10">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-xl font-bold text-white">
|
|
Detalhes do Usuário
|
|
</h2>
|
|
<button
|
|
onClick={closeDetailsModal}
|
|
className="text-white hover:text-gray-200"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conteúdo do Modal - scrollable */}
|
|
<div className="p-6 space-y-6 overflow-y-auto flex-1">
|
|
{/* Informações Pessoais */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Informações Pessoais
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Nome</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.nome}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Email</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.email}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">CPF</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.cpf || 'Não informado'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Telefone</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.telefone || 'Não informado'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Nível</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.nivel}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Data de Cadastro</label>
|
|
<p className="text-sm text-gray-900">
|
|
{new Date(selectedUser.createdAt).toLocaleString('pt-BR')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Endereço */}
|
|
{selectedUser.enderecoData && (
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Endereço
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">CEP</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.enderecoData.cep}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Logradouro</label>
|
|
<p className="text-sm text-gray-900">
|
|
{selectedUser.enderecoData.logradouro}, {selectedUser.enderecoData.numero}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Complemento</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.enderecoData.complemento || 'Não informado'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Bairro</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.enderecoData.bairro}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Cidade</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.enderecoData.cidade}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Estado</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.enderecoData.estado}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Empresa */}
|
|
{selectedUser.empresaData && (
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Dados da Empresa
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Razão Social</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.empresaData['razao-social']}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Nome Fantasia</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.empresaData['nome-fantasia'] || 'Não informado'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">CNPJ</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.empresaData.cnpj}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Data de Abertura</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.empresaData['data-abertura'] || 'Não informado'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Situação</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.empresaData.situacao || 'Não informado'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Natureza Jurídica</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.empresaData['natureza-juridica'] || 'Não informado'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Porte</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.empresaData.porte || 'Não informado'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Capital Social</label>
|
|
<p className="text-sm text-gray-900">
|
|
{selectedUser.empresaData['capital-social']
|
|
? `R$ ${selectedUser.empresaData['capital-social'].toLocaleString('pt-BR')}`
|
|
: 'Não informado'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Telefone</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.empresaData.telefone || 'Não informado'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Email</label>
|
|
<p className="text-sm text-gray-900">{selectedUser.empresaData.email || 'Não informado'}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Atividade Principal</label>
|
|
<p className="text-sm text-gray-900">
|
|
{selectedUser.empresaData['atividade-principal-codigo'] || selectedUser.empresaData['atividade-principal-desc']
|
|
? `${selectedUser.empresaData['atividade-principal-codigo']} - ${selectedUser.empresaData['atividade-principal-desc']}`
|
|
: 'Não informado'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer do Modal (sticky para ficar visível) */}
|
|
<div className="bg-gray-50 px-6 py-4 flex justify-end gap-3 sticky bottom-0 z-10">
|
|
<button
|
|
onClick={closeDetailsModal}
|
|
className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors"
|
|
>
|
|
Fechar
|
|
</button>
|
|
<button
|
|
onClick={() => ativarUsuario(selectedUser.id)}
|
|
disabled={activatingUserId === selectedUser.id}
|
|
className="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center gap-2"
|
|
>
|
|
{activatingUserId === selectedUser.id ? (
|
|
<>
|
|
<div className="w-4 h-4 border border-white border-t-transparent rounded-full animate-spin"></div>
|
|
Ativando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Ativar Usuário
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UsuariosPendentesPage;
|