Compare commits
No commits in common. "634900c29b9cc3bbe37301dbf9e7a401b1a5d618" and "515b5d593cbd37f1527ad0a5f6080821c773257b" have entirely different histories.
634900c29b
...
515b5d593c
@ -1,340 +1,285 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect } from "react";
|
import { useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { useAppointments, Appointment } from "../../context/AppointmentsContext";
|
||||||
|
|
||||||
|
// Componentes de UI e Ícones
|
||||||
import PatientLayout from "@/components/patient-layout";
|
import PatientLayout from "@/components/patient-layout";
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogClose } from "@/components/ui/dialog";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
import { Calendar, Clock, MapPin, Phone, User, X, CalendarDays } from "lucide-react";
|
import { Calendar, Clock, MapPin, Phone, CalendarDays, X, Trash2 } from "lucide-react";
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
import { appointmentsService } from "@/services/appointmentsApi.mjs";
|
export default function PatientAppointmentsPage() {
|
||||||
import { patientsService } from "@/services/patientsApi.mjs";
|
const { appointments, updateAppointment, deleteAppointment } = useAppointments();
|
||||||
import { doctorsService } from "@/services/doctorsApi.mjs";
|
|
||||||
|
|
||||||
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
// Estados para controlar os modais e os dados do formulário
|
||||||
|
const [isRescheduleModalOpen, setRescheduleModalOpen] = useState(false);
|
||||||
|
const [isCancelModalOpen, setCancelModalOpen] = useState(false);
|
||||||
|
const [selectedAppointment, setSelectedAppointment] = useState<Appointment | null>(null);
|
||||||
|
|
||||||
// Simulação do paciente logado
|
|
||||||
const LOGGED_PATIENT_ID = "P001";
|
|
||||||
|
|
||||||
export default function PatientAppointments() {
|
|
||||||
const [appointments, setAppointments] = useState<any[]>([]);
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
|
|
||||||
|
|
||||||
// Modais
|
|
||||||
const [rescheduleModal, setRescheduleModal] = useState(false);
|
|
||||||
const [cancelModal, setCancelModal] = useState(false);
|
|
||||||
|
|
||||||
// Formulário de reagendamento/cancelamento
|
|
||||||
const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
|
const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
|
||||||
const [cancelReason, setCancelReason] = useState("");
|
const [cancelReason, setCancelReason] = useState("");
|
||||||
|
|
||||||
const timeSlots = [
|
// --- MANIPULADORES DE EVENTOS ---
|
||||||
"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 fetchData = async () => {
|
const handleRescheduleClick = (appointment: Appointment) => {
|
||||||
setIsLoading(true);
|
|
||||||
try {
|
|
||||||
const [appointmentList, patientList, doctorList] = await Promise.all([
|
|
||||||
appointmentsService.list(),
|
|
||||||
patientsService.list(),
|
|
||||||
doctorsService.list(),
|
|
||||||
]);
|
|
||||||
|
|
||||||
const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
|
|
||||||
const patientMap = new Map(patientList.map((p: any) => [p.id, p]));
|
|
||||||
|
|
||||||
// Filtra apenas as consultas do paciente logado
|
|
||||||
const patientAppointments = appointmentList
|
|
||||||
.filter((apt: any) => apt.patient_id === LOGGED_PATIENT_ID)
|
|
||||||
.map((apt: any) => ({
|
|
||||||
...apt,
|
|
||||||
doctor: doctorMap.get(apt.doctor_id) || { full_name: "Médico não encontrado", specialty: "N/A" },
|
|
||||||
patient: patientMap.get(apt.patient_id) || { full_name: "Paciente não encontrado" },
|
|
||||||
}));
|
|
||||||
|
|
||||||
setAppointments(patientAppointments);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Erro ao carregar consultas:", error);
|
|
||||||
toast.error("Não foi possível carregar suas consultas.");
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
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>;
|
|
||||||
default:
|
|
||||||
return <Badge variant="secondary">{status}</Badge>;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleReschedule = (appointment: any) => {
|
|
||||||
setSelectedAppointment(appointment);
|
setSelectedAppointment(appointment);
|
||||||
setRescheduleData({ date: "", time: "", reason: "" });
|
// Preenche o formulário com os dados atuais da consulta
|
||||||
setRescheduleModal(true);
|
setRescheduleData({ date: appointment.date, time: appointment.time, reason: appointment.observations || "" });
|
||||||
|
setRescheduleModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCancel = (appointment: any) => {
|
const handleCancelClick = (appointment: Appointment) => {
|
||||||
setSelectedAppointment(appointment);
|
setSelectedAppointment(appointment);
|
||||||
setCancelReason("");
|
setCancelReason(""); // Limpa o motivo ao abrir
|
||||||
setCancelModal(true);
|
setCancelModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const confirmReschedule = async () => {
|
const confirmReschedule = () => {
|
||||||
if (!rescheduleData.date || !rescheduleData.time) {
|
if (!rescheduleData.date || !rescheduleData.time) {
|
||||||
toast.error("Por favor, selecione uma nova data e horário.");
|
toast.error("Por favor, selecione uma nova data e horário");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
try {
|
if (selectedAppointment) {
|
||||||
const newScheduledAt = new Date(`${rescheduleData.date}T${rescheduleData.time}:00Z`).toISOString();
|
updateAppointment(selectedAppointment.id, {
|
||||||
|
date: rescheduleData.date,
|
||||||
await appointmentsService.update(selectedAppointment.id, {
|
time: rescheduleData.time,
|
||||||
scheduled_at: newScheduledAt,
|
observations: rescheduleData.reason, // Atualiza as observações com o motivo
|
||||||
status: "requested",
|
|
||||||
});
|
});
|
||||||
|
|
||||||
setAppointments((prev) =>
|
|
||||||
prev.map((apt) =>
|
|
||||||
apt.id === selectedAppointment.id ? { ...apt, scheduled_at: newScheduledAt, status: "requested" } : apt
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
setRescheduleModal(false);
|
|
||||||
toast.success("Consulta reagendada com sucesso!");
|
toast.success("Consulta reagendada com sucesso!");
|
||||||
} catch (error) {
|
setRescheduleModalOpen(false);
|
||||||
console.error("Erro ao reagendar consulta:", error);
|
|
||||||
toast.error("Não foi possível reagendar a consulta.");
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const confirmCancel = async () => {
|
const confirmCancel = () => {
|
||||||
if (!cancelReason.trim() || cancelReason.trim().length < 10) {
|
if (cancelReason.trim().length < 10) {
|
||||||
toast.error("Por favor, informe um motivo de cancelamento (mínimo 10 caracteres).");
|
toast.error("Por favor, forneça um motivo com pelo menos 10 caracteres.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
try {
|
if (selectedAppointment) {
|
||||||
await appointmentsService.update(selectedAppointment.id, {
|
// Apenas atualiza o status e adiciona o motivo do cancelamento nas observações
|
||||||
status: "cancelled",
|
updateAppointment(selectedAppointment.id, {
|
||||||
cancel_reason: cancelReason,
|
status: "Cancelada",
|
||||||
|
observations: `Motivo do cancelamento: ${cancelReason}`
|
||||||
});
|
});
|
||||||
|
|
||||||
setAppointments((prev) =>
|
|
||||||
prev.map((apt) =>
|
|
||||||
apt.id === selectedAppointment.id ? { ...apt, status: "cancelled" } : apt
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
setCancelModal(false);
|
|
||||||
toast.success("Consulta cancelada com sucesso!");
|
toast.success("Consulta cancelada com sucesso!");
|
||||||
} catch (error) {
|
setCancelModalOpen(false);
|
||||||
console.error("Erro ao cancelar consulta:", error);
|
|
||||||
toast.error("Não foi possível cancelar a consulta.");
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleDeleteClick = (appointmentId: string) => {
|
||||||
|
if (window.confirm("Tem certeza que deseja excluir permanentemente esta consulta? Esta ação não pode ser desfeita.")) {
|
||||||
|
deleteAppointment(appointmentId);
|
||||||
|
toast.success("Consulta excluída do histórico.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- LÓGICA AUXILIAR ---
|
||||||
|
|
||||||
|
const getStatusBadge = (status: Appointment['status']) => {
|
||||||
|
switch (status) {
|
||||||
|
case "Agendada": return <Badge className="bg-blue-100 text-blue-800 font-medium">Agendada</Badge>;
|
||||||
|
case "Realizada": return <Badge className="bg-green-100 text-green-800 font-medium">Realizada</Badge>;
|
||||||
|
case "Cancelada": return <Badge className="bg-red-100 text-red-800 font-medium">Cancelada</Badge>;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const timeSlots = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "14:00", "14:30", "15:00", "15:30"];
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0); // Zera o horário para comparar apenas o dia
|
||||||
|
|
||||||
|
// ETAPA 1: ORDENAÇÃO DAS CONSULTAS
|
||||||
|
// Cria uma cópia do array e o ordena
|
||||||
|
const sortedAppointments = [...appointments].sort((a, b) => {
|
||||||
|
const statusWeight = { 'Agendada': 1, 'Realizada': 2, 'Cancelada': 3 };
|
||||||
|
|
||||||
|
// Primeiro, ordena por status (Agendada vem primeiro)
|
||||||
|
if (statusWeight[a.status] !== statusWeight[b.status]) {
|
||||||
|
return statusWeight[a.status] - statusWeight[b.status];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Se o status for o mesmo, ordena por data (mais recente/futura no topo)
|
||||||
|
return new Date(b.date).getTime() - new Date(a.date).getTime();
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PatientLayout>
|
<PatientLayout>
|
||||||
<div className="space-y-6">
|
<div className="space-y-8">
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold text-gray-900">Minhas Consultas</h1>
|
<h1 className="text-3xl font-bold text-gray-900">Minhas Consultas</h1>
|
||||||
<p className="text-gray-600">Veja, reagende ou cancele suas consultas</p>
|
<p className="text-gray-600">Histórico e consultas agendadas</p>
|
||||||
</div>
|
</div>
|
||||||
|
<Link href="/patient/schedule">
|
||||||
|
<Button className="bg-gray-800 hover:bg-gray-900 text-white">
|
||||||
|
<Calendar className="mr-2 h-4 w-4" />
|
||||||
|
Agendar Nova Consulta
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-6">
|
<div className="grid gap-6">
|
||||||
{isLoading ? (
|
{/* Utiliza o array ORDENADO para a renderização */}
|
||||||
<p>Carregando suas consultas...</p>
|
{sortedAppointments.map((appointment) => {
|
||||||
) : appointments.length > 0 ? (
|
const appointmentDate = new Date(appointment.date);
|
||||||
appointments.map((appointment) => (
|
let displayStatus = appointment.status;
|
||||||
<Card key={appointment.id}>
|
|
||||||
|
if (appointment.status === 'Agendada' && appointmentDate < today) {
|
||||||
|
displayStatus = 'Realizada';
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card key={appointment.id} className="overflow-hidden">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div className="flex justify-between items-start">
|
<div className="flex justify-between items-start">
|
||||||
<div>
|
<div>
|
||||||
<CardTitle className="text-lg">{appointment.doctor.full_name}</CardTitle>
|
<CardTitle className="text-xl">{appointment.doctorName}</CardTitle>
|
||||||
<CardDescription>{appointment.doctor.specialty}</CardDescription>
|
<CardDescription>{appointment.specialty}</CardDescription>
|
||||||
</div>
|
</div>
|
||||||
{getStatusBadge(appointment.status)}
|
{getStatusBadge(displayStatus)}
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="grid md:grid-cols-2 gap-3">
|
<div className="grid md:grid-cols-2 gap-x-8 gap-y-4 mb-6">
|
||||||
<div className="space-y-2 text-sm text-gray-700">
|
<div className="space-y-4">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center text-sm text-gray-700">
|
||||||
<Calendar className="mr-2 h-4 w-4 text-gray-500" />
|
<Calendar className="mr-3 h-4 w-4 text-gray-500" />
|
||||||
{new Date(appointment.scheduled_at).toLocaleDateString("pt-BR", { timeZone: "UTC" })}
|
{new Date(appointment.date).toLocaleDateString("pt-BR", { timeZone: 'UTC' })}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center text-sm text-gray-700">
|
||||||
<Clock className="mr-2 h-4 w-4 text-gray-500" />
|
<Clock className="mr-3 h-4 w-4 text-gray-500" />
|
||||||
{new Date(appointment.scheduled_at).toLocaleTimeString("pt-BR", {
|
{appointment.time}
|
||||||
hour: "2-digit",
|
|
||||||
minute: "2-digit",
|
|
||||||
timeZone: "UTC",
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center">
|
|
||||||
<MapPin className="mr-2 h-4 w-4 text-gray-500" />
|
|
||||||
{appointment.doctor.location || "Local a definir"}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center">
|
<div className="space-y-4">
|
||||||
<Phone className="mr-2 h-4 w-4 text-gray-500" />
|
<div className="flex items-center text-sm text-gray-700">
|
||||||
{appointment.doctor.phone || "N/A"}
|
<MapPin className="mr-3 h-4 w-4 text-gray-500" />
|
||||||
|
{appointment.location || 'Local não informado'}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-700">
|
||||||
|
<Phone className="mr-3 h-4 w-4 text-gray-500" />
|
||||||
|
{appointment.phone || 'Telefone não informado'}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{appointment.status !== "cancelled" && (
|
{/* Container ÚNICO para todas as ações */}
|
||||||
<div className="flex gap-2 mt-4 pt-4 border-t">
|
<div className="flex gap-2 pt-4 border-t">
|
||||||
<Button variant="outline" size="sm" onClick={() => handleReschedule(appointment)}>
|
{(displayStatus === "Agendada") && (
|
||||||
|
<>
|
||||||
|
<Button variant="outline" size="sm" onClick={() => handleRescheduleClick(appointment)}>
|
||||||
<CalendarDays className="mr-2 h-4 w-4" />
|
<CalendarDays className="mr-2 h-4 w-4" />
|
||||||
Reagendar
|
Reagendar
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button variant="ghost" size="sm" className="text-orange-600 hover:text-orange-700 hover:bg-orange-50" onClick={() => handleCancelClick(appointment)}>
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
|
||||||
onClick={() => handleCancel(appointment)}
|
|
||||||
>
|
|
||||||
<X className="mr-2 h-4 w-4" />
|
<X className="mr-2 h-4 w-4" />
|
||||||
Cancelar
|
Cancelar
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{(displayStatus === "Realizada" || displayStatus === "Cancelada") && (
|
||||||
|
<Button variant="ghost" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50" onClick={() => handleDeleteClick(appointment.id)}>
|
||||||
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
|
Excluir do Histórico
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
))
|
);
|
||||||
) : (
|
})}
|
||||||
<p className="text-gray-600">Você ainda não possui consultas agendadas.</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* MODAL DE REAGENDAMENTO */}
|
{/* ETAPA 2: CONSTRUÇÃO DOS MODAIS */}
|
||||||
<Dialog open={rescheduleModal} onOpenChange={setRescheduleModal}>
|
|
||||||
<DialogContent className="sm:max-w-[425px]">
|
{/* Modal de Reagendamento */}
|
||||||
|
<Dialog open={isRescheduleModalOpen} onOpenChange={setRescheduleModalOpen}>
|
||||||
|
<DialogContent>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Reagendar Consulta</DialogTitle>
|
<DialogTitle>Reagendar Consulta</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
Escolha uma nova data e horário para sua consulta com{" "}
|
Reagendar consulta com {selectedAppointment?.doctorName}.
|
||||||
<strong>{selectedAppointment?.doctor?.full_name}</strong>.
|
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<div className="grid gap-4 py-4">
|
<div className="grid gap-4 py-4">
|
||||||
<div className="grid gap-2">
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
<Label htmlFor="date">Nova Data</Label>
|
<Label htmlFor="date" className="text-right">Nova Data</Label>
|
||||||
<Input
|
<Input
|
||||||
id="date"
|
id="date"
|
||||||
type="date"
|
type="date"
|
||||||
value={rescheduleData.date}
|
value={rescheduleData.date}
|
||||||
onChange={(e) => setRescheduleData((prev) => ({ ...prev, date: e.target.value }))}
|
onChange={(e) => setRescheduleData({...rescheduleData, date: e.target.value})}
|
||||||
min={new Date().toISOString().split("T")[0]}
|
className="col-span-3"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-2">
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
<Label htmlFor="time">Novo Horário</Label>
|
<Label htmlFor="time" className="text-right">Novo Horário</Label>
|
||||||
<Select
|
<Select
|
||||||
value={rescheduleData.time}
|
value={rescheduleData.time}
|
||||||
onValueChange={(value) => setRescheduleData((prev) => ({ ...prev, time: value }))}
|
onValueChange={(value) => setRescheduleData({...rescheduleData, time: value})}
|
||||||
>
|
>
|
||||||
<SelectTrigger>
|
<SelectTrigger className="col-span-3">
|
||||||
<SelectValue placeholder="Selecione um horário" />
|
<SelectValue placeholder="Selecione um horário" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{timeSlots.map((time) => (
|
{timeSlots.map(time => <SelectItem key={time} value={time}>{time}</SelectItem>)}
|
||||||
<SelectItem key={time} value={time}>
|
|
||||||
{time}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-2">
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
<Label htmlFor="reason">Motivo (opcional)</Label>
|
<Label htmlFor="reason" className="text-right">Motivo</Label>
|
||||||
<Textarea
|
<Textarea
|
||||||
id="reason"
|
id="reason"
|
||||||
placeholder="Explique brevemente o motivo do reagendamento..."
|
placeholder="Informe o motivo do reagendamento (opcional)"
|
||||||
value={rescheduleData.reason}
|
value={rescheduleData.reason}
|
||||||
onChange={(e) => setRescheduleData((prev) => ({ ...prev, reason: e.target.value }))}
|
onChange={(e) => setRescheduleData({...rescheduleData, reason: e.target.value})}
|
||||||
|
className="col-span-3"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
<Button variant="outline" onClick={() => setRescheduleModal(false)}>
|
<DialogClose asChild>
|
||||||
Cancelar
|
<Button type="button" variant="outline">Cancelar</Button>
|
||||||
</Button>
|
</DialogClose>
|
||||||
<Button onClick={confirmReschedule}>Confirmar</Button>
|
<Button type="button" onClick={confirmReschedule}>Confirmar Reagendamento</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
{/* MODAL DE CANCELAMENTO */}
|
{/* Modal de Cancelamento */}
|
||||||
<Dialog open={cancelModal} onOpenChange={setCancelModal}>
|
<Dialog open={isCancelModalOpen} onOpenChange={setCancelModalOpen}>
|
||||||
<DialogContent className="sm:max-w-[425px]">
|
<DialogContent>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Cancelar Consulta</DialogTitle>
|
<DialogTitle>Cancelar Consulta</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
Deseja realmente cancelar sua consulta com{" "}
|
Você tem certeza que deseja cancelar sua consulta com {selectedAppointment?.doctorName}? Esta ação não pode ser desfeita.
|
||||||
<strong>{selectedAppointment?.doctor?.full_name}</strong>?
|
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<div className="grid gap-4 py-4">
|
<div className="py-4">
|
||||||
<div className="grid gap-2">
|
<Label htmlFor="cancelReason">Motivo do Cancelamento (obrigatório)</Label>
|
||||||
<Label htmlFor="cancel-reason" className="text-sm font-medium">
|
|
||||||
Motivo do Cancelamento <span className="text-red-500">*</span>
|
|
||||||
</Label>
|
|
||||||
<Textarea
|
<Textarea
|
||||||
id="cancel-reason"
|
id="cancelReason"
|
||||||
placeholder="Informe o motivo do cancelamento (mínimo 10 caracteres)"
|
placeholder="Por favor, descreva o motivo do cancelamento..."
|
||||||
value={cancelReason}
|
value={cancelReason}
|
||||||
onChange={(e) => setCancelReason(e.target.value)}
|
onChange={(e) => setCancelReason(e.target.value)}
|
||||||
className="min-h-[100px]"
|
className="mt-2"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
<Button variant="outline" onClick={() => setCancelModal(false)}>
|
<DialogClose asChild>
|
||||||
Voltar
|
<Button type="button" variant="outline">Voltar</Button>
|
||||||
</Button>
|
</DialogClose>
|
||||||
<Button variant="destructive" onClick={confirmCancel}>
|
<Button type="button" variant="destructive" onClick={confirmCancel}>Confirmar Cancelamento</Button>
|
||||||
Confirmar Cancelamento
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
|
import type React from "react"
|
||||||
import { useState, useEffect, useCallback } from "react"
|
import { useState, useEffect, useCallback } from "react"
|
||||||
import { Calendar, Clock, User } from "lucide-react"
|
// Importações de componentes omitidas para brevidade, mas estão no código original
|
||||||
import PatientLayout from "@/components/patient-layout"
|
import PatientLayout from "@/components/patient-layout"
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
@ -9,53 +10,49 @@ import { Input } from "@/components/ui/input"
|
|||||||
import { Label } from "@/components/ui/label"
|
import { Label } from "@/components/ui/label"
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||||
import { Textarea } from "@/components/ui/textarea"
|
import { Textarea } from "@/components/ui/textarea"
|
||||||
import { doctorsService } from "services/doctorsApi.mjs"
|
import { Calendar, Clock, User } from "lucide-react"
|
||||||
|
import { doctorsService } from "services/doctorsApi.mjs";
|
||||||
|
|
||||||
interface Doctor {
|
interface Doctor {
|
||||||
id: string
|
id: string;
|
||||||
full_name: string
|
full_name: string;
|
||||||
specialty: string
|
specialty: string;
|
||||||
phone_mobile: string
|
phone_mobile: string;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments"
|
// Chave do LocalStorage, a mesma usada em secretarypage.tsx
|
||||||
|
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
||||||
|
|
||||||
export default function ScheduleAppointment() {
|
export default function ScheduleAppointment() {
|
||||||
const [selectedDoctor, setSelectedDoctor] = useState("")
|
const [selectedDoctor, setSelectedDoctor] = useState("")
|
||||||
const [selectedDate, setSelectedDate] = useState("")
|
const [selectedDate, setSelectedDate] = useState("")
|
||||||
const [selectedTime, setSelectedTime] = useState("")
|
const [selectedTime, setSelectedTime] = useState("")
|
||||||
const [notes, setNotes] = useState("")
|
const [notes, setNotes] = useState("")
|
||||||
|
const [doctors, setDoctors] = useState<Doctor[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
// novos campos
|
|
||||||
const [tipoConsulta, setTipoConsulta] = useState("presencial")
|
|
||||||
const [duracao, setDuracao] = useState("30")
|
|
||||||
const [convenio, setConvenio] = useState("")
|
|
||||||
const [queixa, setQueixa] = useState("")
|
|
||||||
const [obsPaciente, setObsPaciente] = useState("")
|
|
||||||
const [obsInternas, setObsInternas] = useState("")
|
|
||||||
|
|
||||||
const [doctors, setDoctors] = useState<Doctor[]>([])
|
|
||||||
const [loading, setLoading] = useState(true)
|
|
||||||
const [error, setError] = useState<string | null>(null)
|
|
||||||
|
|
||||||
const fetchDoctors = useCallback(async () => {
|
const fetchDoctors = useCallback(async () => {
|
||||||
setLoading(true)
|
setLoading(true);
|
||||||
setError(null)
|
setError(null);
|
||||||
try {
|
try {
|
||||||
const data: Doctor[] = await doctorsService.list()
|
|
||||||
setDoctors(data || [])
|
const data: Doctor[] = await doctorsService.list();
|
||||||
|
setDoctors(data || []);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
console.error("Erro ao carregar lista de médicos:", e)
|
console.error("Erro ao carregar lista de médicos:", e);
|
||||||
setError("Não foi possível carregar a lista de médicos. Verifique a conexão com a API.")
|
setError("Não foi possível carregar a lista de médicos. Verifique a conexão com a API.");
|
||||||
setDoctors([])
|
setDoctors([]);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false)
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchDoctors()
|
fetchDoctors();
|
||||||
}, [fetchDoctors])
|
}, [fetchDoctors]);
|
||||||
|
|
||||||
const availableTimes = [
|
const availableTimes = [
|
||||||
"08:00",
|
"08:00",
|
||||||
@ -76,54 +73,49 @@ export default function ScheduleAppointment() {
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
const doctorDetails = doctors.find((d) => d.id === selectedDoctor)
|
const doctorDetails = doctors.find((d) => d.id === selectedDoctor)
|
||||||
|
|
||||||
|
// --- SIMULAÇÃO DO PACIENTE LOGADO ---
|
||||||
|
// Você só tem um usuário para cada role. Vamos simular um paciente:
|
||||||
const patientDetails = {
|
const patientDetails = {
|
||||||
id: "P001",
|
id: "P001",
|
||||||
full_name: "Paciente Exemplo Único",
|
full_name: "Paciente Exemplo Único", // Este nome aparecerá na agenda do médico
|
||||||
location: "Clínica Geral",
|
location: "Clínica Geral",
|
||||||
phone: "(11) 98765-4321",
|
phone: "(11) 98765-4321"
|
||||||
}
|
};
|
||||||
|
|
||||||
if (!patientDetails || !doctorDetails) {
|
if (!patientDetails || !doctorDetails) {
|
||||||
alert("Erro: Selecione o médico ou dados do paciente indisponíveis.")
|
alert("Erro: Selecione o médico ou dados do paciente indisponíveis.");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const newAppointment = {
|
const newAppointment = {
|
||||||
id: new Date().getTime(),
|
id: new Date().getTime(), // ID único simples
|
||||||
patientName: patientDetails.full_name,
|
patientName: patientDetails.full_name,
|
||||||
doctor: doctorDetails.full_name,
|
doctor: doctorDetails.full_name, // Nome completo do médico (necessário para a listagem)
|
||||||
specialty: doctorDetails.specialty,
|
specialty: doctorDetails.specialty,
|
||||||
date: selectedDate,
|
date: selectedDate,
|
||||||
time: selectedTime,
|
time: selectedTime,
|
||||||
tipoConsulta,
|
|
||||||
duracao,
|
|
||||||
convenio,
|
|
||||||
queixa,
|
|
||||||
obsPaciente,
|
|
||||||
obsInternas,
|
|
||||||
notes,
|
|
||||||
status: "agendada",
|
status: "agendada",
|
||||||
phone: patientDetails.phone,
|
phone: patientDetails.phone,
|
||||||
}
|
};
|
||||||
|
|
||||||
const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY)
|
// 1. Carrega agendamentos existentes
|
||||||
const currentAppointments = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : []
|
const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
|
||||||
const updatedAppointments = [...currentAppointments, newAppointment]
|
const currentAppointments = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : [];
|
||||||
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments))
|
|
||||||
|
|
||||||
alert(`Consulta com ${doctorDetails.full_name} agendada com sucesso!`)
|
// 2. Adiciona o novo agendamento
|
||||||
|
const updatedAppointments = [...currentAppointments, newAppointment];
|
||||||
|
|
||||||
// resetar campos
|
// 3. Salva a lista atualizada no LocalStorage
|
||||||
setSelectedDoctor("")
|
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
|
||||||
setSelectedDate("")
|
|
||||||
setSelectedTime("")
|
alert(`Consulta com ${doctorDetails.full_name} agendada com sucesso!`);
|
||||||
setNotes("")
|
|
||||||
setTipoConsulta("presencial")
|
// Limpar o formulário após o sucesso (opcional)
|
||||||
setDuracao("30")
|
setSelectedDoctor("");
|
||||||
setConvenio("")
|
setSelectedDate("");
|
||||||
setQueixa("")
|
setSelectedTime("");
|
||||||
setObsPaciente("")
|
setNotes("");
|
||||||
setObsInternas("")
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -143,9 +135,6 @@ export default function ScheduleAppointment() {
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
|
||||||
|
|
||||||
{/* Médico */}
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="doctor">Médico</Label>
|
<Label htmlFor="doctor">Médico</Label>
|
||||||
<Select value={selectedDoctor} onValueChange={setSelectedDoctor}>
|
<Select value={selectedDoctor} onValueChange={setSelectedDoctor}>
|
||||||
@ -153,26 +142,15 @@ export default function ScheduleAppointment() {
|
|||||||
<SelectValue placeholder="Selecione um médico" />
|
<SelectValue placeholder="Selecione um médico" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{loading ? (
|
{doctors.map((doctor) => (
|
||||||
<SelectItem value="loading" disabled>
|
|
||||||
Carregando médicos...
|
|
||||||
</SelectItem>
|
|
||||||
) : error ? (
|
|
||||||
<SelectItem value="error" disabled>
|
|
||||||
Erro ao carregar
|
|
||||||
</SelectItem>
|
|
||||||
) : (
|
|
||||||
doctors.map((doctor) => (
|
|
||||||
<SelectItem key={doctor.id} value={doctor.id}>
|
<SelectItem key={doctor.id} value={doctor.id}>
|
||||||
{doctor.full_name} - {doctor.specialty}
|
{doctor.full_name} - {doctor.specialty}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
))
|
))}
|
||||||
)}
|
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Data e horário */}
|
|
||||||
<div className="grid md:grid-cols-2 gap-4">
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="date">Data</Label>
|
<Label htmlFor="date">Data</Label>
|
||||||
@ -201,81 +179,9 @@ export default function ScheduleAppointment() {
|
|||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Tipo e Duração */}
|
|
||||||
<div className="grid md:grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="tipoConsulta">Tipo de Consulta</Label>
|
|
||||||
<Select value={tipoConsulta} onValueChange={setTipoConsulta}>
|
|
||||||
<SelectTrigger id="tipoConsulta">
|
|
||||||
<SelectValue placeholder="Selecione o tipo" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="presencial">Presencial</SelectItem>
|
|
||||||
<SelectItem value="online">Telemedicina</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="duracao">Duração (minutos)</Label>
|
<Label htmlFor="notes">Observações (opcional)</Label>
|
||||||
<Input
|
|
||||||
id="duracao"
|
|
||||||
type="number"
|
|
||||||
min={10}
|
|
||||||
max={120}
|
|
||||||
value={duracao}
|
|
||||||
onChange={(e) => setDuracao(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Convênio */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="convenio">Convênio (opcional)</Label>
|
|
||||||
<Input
|
|
||||||
id="convenio"
|
|
||||||
placeholder="Nome do convênio do paciente"
|
|
||||||
value={convenio}
|
|
||||||
onChange={(e) => setConvenio(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Queixa Principal */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="queixa">Queixa Principal (opcional)</Label>
|
|
||||||
<Textarea
|
|
||||||
id="queixa"
|
|
||||||
placeholder="Descreva brevemente o motivo da consulta..."
|
|
||||||
value={queixa}
|
|
||||||
onChange={(e) => setQueixa(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Observações do Paciente */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="obsPaciente">Observações do Paciente (opcional)</Label>
|
|
||||||
<Textarea
|
|
||||||
id="obsPaciente"
|
|
||||||
placeholder="Anotações relevantes informadas pelo paciente..."
|
|
||||||
value={obsPaciente}
|
|
||||||
onChange={(e) => setObsPaciente(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Observações Internas */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="obsInternas">Observações Internas (opcional)</Label>
|
|
||||||
<Textarea
|
|
||||||
id="obsInternas"
|
|
||||||
placeholder="Anotações para a equipe da clínica..."
|
|
||||||
value={obsInternas}
|
|
||||||
onChange={(e) => setObsInternas(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Observações gerais */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="notes">Observações gerais (opcional)</Label>
|
|
||||||
<Textarea
|
<Textarea
|
||||||
id="notes"
|
id="notes"
|
||||||
placeholder="Descreva brevemente o motivo da consulta ou observações importantes"
|
placeholder="Descreva brevemente o motivo da consulta ou observações importantes"
|
||||||
@ -285,12 +191,7 @@ export default function ScheduleAppointment() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Botão */}
|
<Button type="submit" className="w-full" disabled={!selectedDoctor || !selectedDate || !selectedTime}>
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full"
|
|
||||||
disabled={!selectedDoctor || !selectedDate || !selectedTime}
|
|
||||||
>
|
|
||||||
Agendar Consulta
|
Agendar Consulta
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
@ -298,7 +199,6 @@ export default function ScheduleAppointment() {
|
|||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Resumo */}
|
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
@ -311,18 +211,14 @@ export default function ScheduleAppointment() {
|
|||||||
{selectedDoctor && (
|
{selectedDoctor && (
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<User className="h-4 w-4 text-gray-500" />
|
<User className="h-4 w-4 text-gray-500" />
|
||||||
<span className="text-sm">
|
<span className="text-sm">{doctors.find((d) => d.id === selectedDoctor)?.full_name}</span>
|
||||||
{doctors.find((d) => d.id === selectedDoctor)?.full_name}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{selectedDate && (
|
{selectedDate && (
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Calendar className="h-4 w-4 text-gray-500" />
|
<Calendar className="h-4 w-4 text-gray-500" />
|
||||||
<span className="text-sm">
|
<span className="text-sm">{new Date(selectedDate).toLocaleDateString("pt-BR")}</span>
|
||||||
{new Date(selectedDate).toLocaleDateString("pt-BR")}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user