326 lines
10 KiB
TypeScript
326 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Dialog } from "@/components/ui/dialog";
|
|
import {
|
|
Calendar,
|
|
Clock,
|
|
MapPin,
|
|
Phone,
|
|
User,
|
|
Trash2,
|
|
Pencil,
|
|
} from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import Link from "next/link";
|
|
import { appointmentsService } from "@/services/appointmentsApi.mjs";
|
|
import { patientsService } from "@/services/patientsApi.mjs";
|
|
import { doctorsService } from "@/services/doctorsApi.mjs";
|
|
import Sidebar from "@/components/Sidebar";
|
|
|
|
export default function SecretaryAppointments() {
|
|
const [appointments, setAppointments] = useState<any[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
|
|
|
|
// Estados dos Modais
|
|
const [deleteModal, setDeleteModal] = useState(false);
|
|
const [editModal, setEditModal] = useState(false);
|
|
|
|
// Estado para o formulário de edição
|
|
const [editFormData, setEditFormData] = useState({
|
|
date: "",
|
|
time: "",
|
|
status: "",
|
|
});
|
|
|
|
const fetchData = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
// 1. DEFINIR O PARÂMETRO DE ORDENAÇÃO
|
|
// 'scheduled_at.desc' ordena pela data do agendamento, em ordem descendente (mais recentes primeiro).
|
|
const queryParams = "order=scheduled_at.desc";
|
|
|
|
const [appointmentList, patientList, doctorList] = await Promise.all([
|
|
// 2. USAR A FUNÇÃO DE BUSCA COM O PARÂMETRO DE ORDENAÇÃO
|
|
appointmentsService.search_appointment(queryParams),
|
|
patientsService.list(),
|
|
doctorsService.list(),
|
|
]);
|
|
|
|
const patientMap = new Map(patientList.map((p: any) => [p.id, p]));
|
|
const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
|
|
|
|
const enrichedAppointments = appointmentList.map((apt: any) => ({
|
|
...apt,
|
|
patient: patientMap.get(apt.patient_id) || {
|
|
full_name: "Paciente não encontrado",
|
|
},
|
|
doctor: doctorMap.get(apt.doctor_id) || {
|
|
full_name: "Médico não encontrado",
|
|
specialty: "N/A",
|
|
},
|
|
}));
|
|
|
|
setAppointments(enrichedAppointments);
|
|
} catch (error) {
|
|
console.error("Falha ao buscar agendamentos:", error);
|
|
toast.error("Não foi possível carregar a lista de agendamentos.");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []); // Array vazio garante que a busca ocorra apenas uma vez, no carregamento da página.
|
|
|
|
// --- LÓGICA DE EDIÇÃO ---
|
|
const handleEdit = (appointment: any) => {
|
|
setSelectedAppointment(appointment);
|
|
const appointmentDate = new Date(appointment.scheduled_at);
|
|
|
|
setEditFormData({
|
|
date: appointmentDate.toISOString().split("T")[0],
|
|
time: appointmentDate.toLocaleTimeString("pt-BR", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
timeZone: "UTC",
|
|
}),
|
|
status: appointment.status,
|
|
});
|
|
setEditModal(true);
|
|
};
|
|
|
|
const confirmEdit = async () => {
|
|
if (
|
|
!selectedAppointment ||
|
|
!editFormData.date ||
|
|
!editFormData.time ||
|
|
!editFormData.status
|
|
) {
|
|
toast.error("Todos os campos são obrigatórios para a edição.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const newScheduledAt = new Date(
|
|
`${editFormData.date}T${editFormData.time}:00Z`
|
|
).toISOString();
|
|
const updatePayload = {
|
|
scheduled_at: newScheduledAt,
|
|
status: editFormData.status,
|
|
};
|
|
|
|
await appointmentsService.update(selectedAppointment.id, updatePayload);
|
|
|
|
// 3. RECARREGAR OS DADOS APÓS A EDIÇÃO
|
|
// Isso garante que a lista permaneça ordenada corretamente se a data for alterada.
|
|
fetchData();
|
|
|
|
setEditModal(false);
|
|
toast.success("Consulta atualizada com sucesso!");
|
|
} catch (error) {
|
|
console.error("Erro ao atualizar consulta:", error);
|
|
toast.error("Não foi possível atualizar a consulta.");
|
|
}
|
|
};
|
|
|
|
// --- LÓGICA DE DELEÇÃO ---
|
|
const handleDelete = (appointment: any) => {
|
|
setSelectedAppointment(appointment);
|
|
setDeleteModal(true);
|
|
};
|
|
|
|
const confirmDelete = async () => {
|
|
if (!selectedAppointment) return;
|
|
try {
|
|
await appointmentsService.delete(selectedAppointment.id);
|
|
setAppointments((prev) =>
|
|
prev.filter((apt) => apt.id !== selectedAppointment.id)
|
|
);
|
|
setDeleteModal(false);
|
|
toast.success("Consulta deletada com sucesso!");
|
|
} catch (error) {
|
|
console.error("Erro ao deletar consulta:", error);
|
|
toast.error("Não foi possível deletar a consulta.");
|
|
}
|
|
};
|
|
|
|
const getStatusBadge = (status: string) => {
|
|
switch (status) {
|
|
case "requested":
|
|
return (
|
|
<Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>
|
|
);
|
|
case "confirmed":
|
|
return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
|
|
case "checked_in":
|
|
return (
|
|
<Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>
|
|
);
|
|
case "completed":
|
|
return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
|
|
case "cancelled":
|
|
return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
|
|
case "no_show":
|
|
return (
|
|
<Badge className="bg-gray-100 text-gray-800">Não Compareceu</Badge>
|
|
);
|
|
default:
|
|
return <Badge variant="secondary">{status}</Badge>;
|
|
}
|
|
};
|
|
|
|
const timeSlots = [
|
|
"08:00",
|
|
"08:30",
|
|
"09:00",
|
|
"09:30",
|
|
"10:00",
|
|
"10:30",
|
|
"11:00",
|
|
"11:30",
|
|
"14:00",
|
|
"14:30",
|
|
"15:00",
|
|
"15:30",
|
|
"16:00",
|
|
"16:30",
|
|
"17:00",
|
|
"17:30",
|
|
];
|
|
const appointmentStatuses = [
|
|
"requested",
|
|
"confirmed",
|
|
"checked_in",
|
|
"completed",
|
|
"cancelled",
|
|
"no_show",
|
|
];
|
|
|
|
return (
|
|
<Sidebar>
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">
|
|
Consultas Agendadas
|
|
</h1>
|
|
<p className="text-gray-600">Gerencie as consultas dos pacientes</p>
|
|
</div>
|
|
<Link href="/secretary/schedule">
|
|
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
|
<Calendar className="mr-2 h-4 w-4 text-white" />
|
|
Agendar Nova Consulta
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid gap-6">
|
|
{isLoading ? (
|
|
<p>Carregando consultas...</p>
|
|
) : appointments.length > 0 ? (
|
|
appointments.map((appointment) => (
|
|
<Card key={appointment.id}>
|
|
<CardHeader>
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<CardTitle className="text-lg">
|
|
{appointment.doctor.full_name}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{appointment.doctor.specialty}
|
|
</CardDescription>
|
|
</div>
|
|
{getStatusBadge(appointment.status)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center text-sm text-gray-800 font-medium">
|
|
<User className="mr-2 h-4 w-4 text-gray-600" />
|
|
{appointment.patient.full_name}
|
|
</div>
|
|
<div className="flex items-center text-sm text-gray-600">
|
|
<Calendar className="mr-2 h-4 w-4" />
|
|
{new Date(appointment.scheduled_at).toLocaleDateString(
|
|
"pt-BR",
|
|
{ timeZone: "UTC" }
|
|
)}
|
|
</div>
|
|
<div className="flex items-center text-sm text-gray-600">
|
|
<Clock className="mr-2 h-4 w-4" />
|
|
{new Date(appointment.scheduled_at).toLocaleTimeString(
|
|
"pt-BR",
|
|
{
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
timeZone: "UTC",
|
|
}
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center text-sm text-gray-600">
|
|
<MapPin className="mr-2 h-4 w-4" />
|
|
{appointment.doctor.location || "Local a definir"}
|
|
</div>
|
|
<div className="flex items-center text-sm text-gray-600">
|
|
<Phone className="mr-2 h-4 w-4" />
|
|
{appointment.doctor.phone || "N/A"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 mt-4 pt-4 border-t">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleEdit(appointment)}
|
|
>
|
|
<Pencil className="mr-2 h-4 w-4" />
|
|
Editar
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent"
|
|
onClick={() => handleDelete(appointment)}
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Deletar
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<p>Nenhuma consulta encontrada.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* MODAL DE EDIÇÃO */}
|
|
<Dialog open={editModal} onOpenChange={setEditModal}>
|
|
{/* ... (código do modal de edição) ... */}
|
|
</Dialog>
|
|
|
|
{/* Modal de Deleção */}
|
|
<Dialog open={deleteModal} onOpenChange={setDeleteModal}>
|
|
{/* ... (código do modal de deleção) ... */}
|
|
</Dialog>
|
|
</Sidebar>
|
|
);
|
|
}
|