Skip to content

fix: ajusta tela de detalhes dos animais, adiciona status "Falecido" … #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rafaelhgcarlos merged 1 commit into from
Oct 13, 2025
Merged

fix: ajusta tela de detalhes dos animais, adiciona status "Falecido" … #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 15 additions & 19 deletions src/pages/Adopter/AdopterList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useEffect, type ChangeEvent } from "react";
import React, { useState, useEffect, type ChangeEvent } from "react";
import { Plus, X, Trash2 } from "lucide-react";
import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
Expand Down Expand Up @@ -182,15 +182,14 @@ export default function AdopterList() {
className="flex-1 sm:w-64 px-4 py-2 border border-gray-300 rounded-xl shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
/>
<button
className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-xl hover:bg-green-700 transition shadow"
className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-xl hover:bg-blue-700 transition shadow"
onClick={() => navigate("/adopterRegister")}
>
<Plus size={18} /> <span className="hidden sm:inline">Cadastrar</span>
</button>
</div>
</div>

{/* Grid de adotantes */}
{loading ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{[...Array(6)].map((_, i) => (
Expand Down Expand Up @@ -237,7 +236,6 @@ export default function AdopterList() {
)}

<AnimatePresence>
{/* Modal detalhes */}
{selectedAdopter && (
<motion.div
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
Expand Down Expand Up @@ -271,24 +269,23 @@ export default function AdopterList() {
<p className="sm:col-span-2"><strong>Observações:</strong> {selectedAdopter.notes || "Nenhuma"}</p>
</div>
<div className="flex justify-end mt-6 gap-3">
<button
onClick={() => { setEditing(selectedAdopter); setSelectedAdopter(null); }}
className="px-4 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 transition shadow"
>
Editar
</button>
<button
onClick={() => setSelectedAdopter(null)}
className="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100 transition"
>
Voltar
</button>
<button
onClick={() => { setEditing(selectedAdopter); setSelectedAdopter(null); }}
className="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition shadow"
>
Editar
</button>
</div>
</motion.div>
</motion.div>
)}

{/* Modal edição */}
{editing && (
<motion.div
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
Expand Down Expand Up @@ -410,7 +407,6 @@ export default function AdopterList() {
<ErrorMessage message={errors.complement} />
</div>

{/* CEP */}
<div className="flex flex-col">
<label className="mb-1 font-medium text-gray-700">CEP</label>
<input
Expand Down Expand Up @@ -480,20 +476,20 @@ export default function AdopterList() {
</div>

<div className="flex justify-end gap-3 mt-4">
<button
type="submit"
disabled={saving}
className="px-6 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700 transition shadow"
>
Salvar
</button>
<button
type="button"
onClick={() => { setEditing(null); setErrors({}); }}
className="px-6 py-2 border border-gray-300 rounded-xl hover:bg-gray-100 transition"
>
Cancelar
</button>
<button
type="submit"
disabled={saving}
className="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition shadow"
>
{saving ? "Salvando..." : "Salvar"}
</button>
</div>
</form>
</motion.div>
Expand Down
22 changes: 19 additions & 3 deletions src/pages/Adopter/AdopterRegister.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,9 +146,25 @@ export default function AdopterRegister() {
}
if (id) await updateAdopterById(id, formData);
else await registerAdopter(formData);

toast.success(`Adotante ${id ? "atualizado" : "cadastrado"} com sucesso!`);
navigate("/adopterList");
setFormData({
name: "",
email: "",
phone: "",
sex: "",
notes: "",
rg: "",
cpf: "",
maritalStatus: "",
state: "",
city: "",
district: "",
street: "",
number: "",
complement: "",
cep: "",
hasPets: false,
});
} catch {
toast.error("Erro ao salvar adotante.");
} finally {
Expand All @@ -174,7 +190,7 @@ export default function AdopterRegister() {
transition={{ duration: 0.6 }}
className="text-2xl md:text-3xl font-extrabold text-gray-800 mb-10 flex items-center gap-2 text-center"
>
<UserCheck className="w-7 h-7 md:w-8 md:h-8 text-green-600" />{" "}
<UserCheck className="w-7 h-7 md:w-8 md:h-8 text-blue-600" />{" "}
Cadastro de Adotantes
</motion.h1>

Expand Down
7 changes: 0 additions & 7 deletions src/pages/Adoption/AdoptionRegister.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,11 +155,9 @@ export default function AdoptionRegister() {
transition={{ duration: 0.6 }}
className="bg-white w-full max-w-4xl rounded-3xl shadow-xl p-6 md:p-10 space-y-8"
>
{/* Informações da Adoção */}
<section>
<h2 className="text-lg font-semibold text-gray-700 mb-4">Informações da Adoção</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Adotante */}
<div className="flex flex-col">
<label className="mb-1 font-medium text-gray-700">Adotante</label>
<Select
Expand All @@ -177,7 +175,6 @@ export default function AdoptionRegister() {
{errors.adopterId && <span className={errorStyle}>{errors.adopterId}</span>}
</div>

{/* Animal */}
<div className="flex flex-col">
<label className="mb-1 font-medium text-gray-700">Animal</label>
<Select
Expand All @@ -195,7 +192,6 @@ export default function AdoptionRegister() {
{errors.animalId && <span className={errorStyle}>{errors.animalId}</span>}
</div>

{/* Funcionário */}
<div className="flex flex-col">
<label className="mb-1 font-medium text-gray-700">Funcionário Responsável</label>
<Select
Expand All @@ -213,7 +209,6 @@ export default function AdoptionRegister() {
{errors.employeeId && <span className={errorStyle}>{errors.employeeId}</span>}
</div>

{/* Status */}
<div className="flex flex-col">
<label className="mb-1 font-medium text-gray-700">Status</label>
<Select
Expand All @@ -231,7 +226,6 @@ export default function AdoptionRegister() {
{errors.status && <span className={errorStyle}>{errors.status}</span>}
</div>

{/* Data da Adoção */}
<div className="flex flex-col sm:col-span-2 lg:col-span-1">
<label className="mb-1 font-medium text-gray-700">Data da Adoção</label>
<input
Expand All @@ -246,7 +240,6 @@ export default function AdoptionRegister() {
</div>
</section>

{/* Observações */}
<section>
<div className="flex flex-col">
<label className="text-lg font-semibold text-gray-700 mb-2">Observações</label>
Expand Down
73 changes: 71 additions & 2 deletions src/pages/Animal/AnimalList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from "react";
import React, { useState } from "react";
import { Plus, X, Trash2 } from "lucide-react";
import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
Expand All @@ -12,6 +12,7 @@ export default function AnimalList() {
const [saving, setSaving] = useState(false);
const [selectedFile, setSelectedFile] = useState<File | undefined>();
const [searchTerm, setSearchTerm] = useState("");
const [selectedAnimal, setSelectedAnimal] = useState<Animal | null>(null);

const navigate = useNavigate();
const { animals, updateAnimalStatus, removeAnimalFromContext } = useAnimals();
Expand Down Expand Up @@ -166,7 +167,7 @@ export default function AnimalList() {
{calcularIdade(animal.birthDate)} • {animal.breed || "-"}
</p>
<button
onClick={() => setEditForm(animal)}
onClick={() => setSelectedAnimal(animal)}
className="w-full mt-2 px-3 py-2 border border-gray-200 rounded-xl hover:bg-gray-100 transition text-sm font-medium"
>
Ver detalhes
Expand All @@ -178,6 +179,73 @@ export default function AnimalList() {
)}

<AnimatePresence>
{selectedAnimal && (
<motion.div
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<motion.div
className="bg-white rounded-2xl shadow-xl w-full max-w-3xl p-6 relative overflow-y-auto max-h-[90vh]"
initial={{ scale: 0.9 }}
animate={{ scale: 1 }}
exit={{ scale: 0.9 }}
>
<button
onClick={() => setSelectedAnimal(null)}
className="absolute top-3 right-3 text-gray-500 hover:text-gray-700"
>
<X size={20} />
</button>

<div className="h-60 bg-gray-200 flex items-center justify-center rounded-xl mb-6 relative overflow-hidden">
{selectedAnimal.image ? (
<img
src={selectedAnimal.image}
alt={selectedAnimal.name}
className="absolute inset-0 w-full h-full object-cover"
/>
) : (
<span className="text-gray-400">Sem imagem</span>
)}
</div>

<h2 className="text-2xl font-bold text-gray-800 mb-4">{selectedAnimal.name}</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-2 text-gray-700">
<p><strong>Raça:</strong> {selectedAnimal.breed || "-"}</p>
<p><strong>Espécie:</strong> {selectedAnimal.species || "-"}</p>
<p><strong>Sexo:</strong> {selectedAnimal.sex}</p>
<p><strong>Cor:</strong> {selectedAnimal.color}</p>
<p><strong>Porte:</strong> {selectedAnimal.size}</p>
<p><strong>Idade:</strong> {calcularIdade(selectedAnimal.birthDate)}</p>
<p><strong>Status:</strong> {selectedAnimal.status}</p>
<p className="sm:col-span-2">
<strong>Observações:</strong> {selectedAnimal.notes || "Nenhuma"}
</p>
</div>

<div className="flex justify-end mt-6 gap-3">
<button
onClick={() => setSelectedAnimal(null)}
className="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100 transition"
>
Voltar
</button>
<button
onClick={() => {
setEditForm(selectedAnimal);
setSelectedAnimal(null);
}}
className="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition shadow"
>
Editar
</button>
</div>
</motion.div>
</motion.div>
)}

{editForm && (
<motion.div
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
Expand Down Expand Up @@ -251,6 +319,7 @@ export default function AnimalList() {
<option value="Adotado">Adotado</option>
<option value="Em tratamento">Em tratamento</option>
<option value="Em andamento">Em andamento</option>
<option value="Falecido">Falecido</option>
</select>
</div>

Expand Down
1 change: 1 addition & 0 deletions src/pages/Animal/AnimalRegister.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ export default function AnimalRegister() {
<option value="Disponível">Disponível</option>
<option value="Adotado">Adotado</option>
<option value="Em tratamento">Em tratamento</option>
<option value="Falecido">Falecido</option>
</select>
{errors.status && <span className={errorStyle}>{errors.status}</span>}
</div>
Expand Down
34 changes: 22 additions & 12 deletions src/pages/Staff/StaffList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import React, { useState, useEffect } from "react";
import { Plus, X, Trash2 } from "lucide-react";
import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
Expand All @@ -11,7 +11,7 @@ export type Staff = {
role: string;
email: string;
phone: string;
sex?: string;
sex: string;
notes?: string;
image?: string;
};
Expand Down Expand Up @@ -232,6 +232,12 @@ export default function StaffList() {
</div>

<div className="flex justify-end mt-6 gap-3">
<button
onClick={() => setSelectedStaff(null)}
className="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100 transition"
>
Voltar
</button>
<button
onClick={() => {
setEditStaff(selectedStaff);
Expand All @@ -242,12 +248,6 @@ export default function StaffList() {
>
Editar
</button>
<button
onClick={() => setSelectedStaff(null)}
className="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100 transition"
>
Voltar
</button>
</div>
</motion.div>
</motion.div>
Expand Down Expand Up @@ -403,8 +403,18 @@ export default function StaffList() {
</AnimatePresence>

{deleteStaff && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 animate-fadeIn">
<div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 animate-scaleIn">
<motion.div
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<motion.div
className="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 relative overflow-hidden"
initial={{ scale: 0.9 }}
animate={{ scale: 1 }}
exit={{ scale: 0.9 }}
>
<h2 className="text-lg font-bold text-gray-800 mb-4">Confirmar exclusão</h2>
<p className="text-gray-600 mb-6">
Deseja realmente excluir <strong>{deleteStaff.name}</strong>?
Expand All @@ -423,8 +433,8 @@ export default function StaffList() {
Excluir
</button>
</div>
</div>
</div>
</motion.div>
</motion.div>
)}
</div>
);
Expand Down
Loading