first commit
This commit is contained in:
rodrigo committed
commit
c9fb67e751
423 files changed
+53287
No files matched your search
@@ -0,0 +1,197 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
TextField,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
} from "@mui/material";
|
||||
import { Usuario, PerfilUsuario } from "../../types/usuario";
|
||||
import api from "../../services/api";
|
||||
|
||||
interface UsuarioFormProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSave: () => void;
|
||||
usuario?: Usuario | null;
|
||||
}
|
||||
|
||||
export function UsuarioForm({
|
||||
open,
|
||||
onClose,
|
||||
onSave,
|
||||
usuario,
|
||||
}: UsuarioFormProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
nome: "",
|
||||
email: "",
|
||||
senha: "",
|
||||
perfil: PerfilUsuario.ADVOGADO,
|
||||
ativo: true,
|
||||
oab: "",
|
||||
oabUF: "",
|
||||
telefone: "",
|
||||
cpf: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (usuario) {
|
||||
setFormData({
|
||||
nome: usuario.nome,
|
||||
email: usuario.email,
|
||||
senha: "", // Senha vazia para edição
|
||||
perfil: usuario.perfil,
|
||||
ativo: usuario.ativo ?? true,
|
||||
oab: usuario.oab ?? "",
|
||||
oabUF: usuario.oabUF ?? "",
|
||||
telefone: usuario.telefone ?? "",
|
||||
cpf: usuario.cpf ?? "",
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
nome: "",
|
||||
email: "",
|
||||
senha: "",
|
||||
perfil: PerfilUsuario.ADVOGADO,
|
||||
ativo: true,
|
||||
oab: "",
|
||||
oabUF: "",
|
||||
telefone: "",
|
||||
cpf: "",
|
||||
});
|
||||
}
|
||||
}, [usuario]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
if (usuario) {
|
||||
// Se estiver editando, não envia a senha se estiver vazia
|
||||
const dataToSend = { ...formData } as Partial<typeof formData>;
|
||||
if (!dataToSend.senha) {
|
||||
delete dataToSend.senha;
|
||||
}
|
||||
await api.put(`/usuarios/${usuario.id}`, dataToSend);
|
||||
} else {
|
||||
await api.post("/usuarios", formData);
|
||||
}
|
||||
onSave();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error("Erro ao salvar usuário:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<DialogTitle>{usuario ? "Editar Usuário" : "Novo Usuário"}</DialogTitle>
|
||||
<DialogContent>
|
||||
<div className="mt-4 space-y-4">
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Nome"
|
||||
value={formData.nome}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, nome: e.target.value })
|
||||
}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, email: e.target.value })
|
||||
}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Senha"
|
||||
type="password"
|
||||
value={formData.senha}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, senha: e.target.value })
|
||||
}
|
||||
required={!usuario}
|
||||
helperText={
|
||||
usuario ? "Deixe em branco para manter a senha atual" : ""
|
||||
}
|
||||
/>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Perfil</InputLabel>
|
||||
<Select
|
||||
value={formData.perfil}
|
||||
label="Perfil"
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
perfil: e.target.value as PerfilUsuario,
|
||||
})
|
||||
}
|
||||
>
|
||||
{Object.values(PerfilUsuario).map((perfil) => (
|
||||
<MenuItem key={perfil} value={perfil}>
|
||||
{perfil.replace("_", " ")}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="OAB"
|
||||
value={formData.oab}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, oab: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="OAB UF"
|
||||
value={formData.oabUF}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, oabUF: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Telefone"
|
||||
value={formData.telefone}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, telefone: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="CPF"
|
||||
value={formData.cpf}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, cpf: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>Cancelar</Button>
|
||||
<Button type="submit" variant="contained" color="primary">
|
||||
Salvar
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -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