first commit
This commit is contained in:
rodrigo committed
commit
c9fb67e751
423 files changed
+53287
No files matched your search
@@ -0,0 +1,155 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "react-query";
|
||||
import api from "../../services/api";
|
||||
import { Usuario } from "../../types/usuario";
|
||||
import { UsuarioForm } from "./UsuarioForm";
|
||||
//import { PencilIcon } from "@heroicons/react/24/outline"; // Importar ícone
|
||||
|
||||
export function UsuariosPage() {
|
||||
const [formOpen, setFormOpen] = useState(false);
|
||||
const [editingUsuario, setEditingUsuario] = useState<Usuario | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { data: usuarios, refetch } = useQuery("usuarios", async () => {
|
||||
const response = await api.get("/usuarios");
|
||||
return response.data;
|
||||
});
|
||||
|
||||
const handleSave = async () => {
|
||||
await refetch();
|
||||
setFormOpen(false);
|
||||
setEditingUsuario(null);
|
||||
};
|
||||
|
||||
const handleEditUsuario = async (usuario: Usuario) => {
|
||||
setEditingUsuario(usuario);
|
||||
setFormOpen(true);
|
||||
};
|
||||
|
||||
const handleToggleStatus = async (id: string, ativo: boolean) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await api.patch(`/usuarios/${id}/status`, { ativo: !ativo });
|
||||
await refetch();
|
||||
} catch (error) {
|
||||
console.error("Erro ao alterar status:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditClick = (usuario: Usuario) => {
|
||||
console.log("Editando usuário:", usuario); // Debug
|
||||
setEditingUsuario(usuario);
|
||||
setFormOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-semibold text-gray-900">Usuários</h1>
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingUsuario(null);
|
||||
setFormOpen(true);
|
||||
}}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Novo Usuário
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<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">
|
||||
Nome
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Email
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Perfil
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
OAB
|
||||
</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: Usuario) => (
|
||||
<tr key={usuario.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{usuario.nome}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{usuario.email}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{usuario.perfil.replace("_", " ")}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{usuario.oab ? `${usuario.oab}/${usuario.oabUF}` : "-"}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
className={`px-2 py-1 text-xs rounded-full ${
|
||||
usuario.ativo
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
}`}
|
||||
>
|
||||
{usuario.ativo ? "Ativo" : "Inativo"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right space-x-2">
|
||||
<button
|
||||
onClick={() => handleEditClick(usuario)}
|
||||
className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-blue-600 bg-blue-50 hover:bg-blue-100 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
Editar
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleToggleStatus(usuario.id, usuario.ativo)
|
||||
}
|
||||
disabled={loading}
|
||||
className={`inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md
|
||||
${
|
||||
usuario.ativo
|
||||
? "text-red-600 hover:bg-red-50"
|
||||
: "text-green-600 hover:bg-green-50"
|
||||
}`}
|
||||
>
|
||||
{usuario.ativo ? "Desativar" : "Ativar"}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<UsuarioForm
|
||||
open={formOpen}
|
||||
onClose={() => {
|
||||
setFormOpen(false);
|
||||
setEditingUsuario(null);
|
||||
}}
|
||||
onSave={() => {
|
||||
refetch();
|
||||
setFormOpen(false);
|
||||
setEditingUsuario(null);
|
||||
}}
|
||||
usuario={editingUsuario}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user