RiseUP/riseup-squad21
5
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: RiseUP:8bb2c4997b0625e5fd6b8e672382316bc84e2f27
Branches Tags
RiseUP:main
RiseUP:responsividade-nova
RiseUP:user2
RiseUP:refatoracao
RiseUP:refatoracao-ui
RiseUP:refatoracao-manager
RiseUP:disponibilidade
RiseUP:Users
RiseUP:laudo-API
RiseUP:feat/refatorar-login
RiseUP:consultas-página-médico
RiseUP:acessibilidade
RiseUP:lista-de-pacientes-j2
RiseUP:sec-marca
...
compare: RiseUP:9af06b739f64d55d9eee007eb6cf7d6e9d35a1a1
Branches Tags
RiseUP:main
RiseUP:responsividade-nova
RiseUP:user2
RiseUP:refatoracao
RiseUP:refatoracao-ui
RiseUP:refatoracao-manager
RiseUP:disponibilidade
RiseUP:Users
RiseUP:laudo-API
RiseUP:feat/refatorar-login
RiseUP:consultas-página-médico
RiseUP:acessibilidade
RiseUP:lista-de-pacientes-j2
RiseUP:sec-marca

2 Commits
8bb2c4997b ... 9af06b739f

Author SHA1 Message Date
LiraS2
9af06b739f Merge pull request 'Adicionada função de marcar consulta' (#10) from StsDanilo/riseup-squad21:marcar-consulta into main 
Reviewed-on: #10
 2025-09-29 22:14:35 +00:00
DaniloSts
d4201994c8 Adicionada função de marcar consulta 2025-09-29 19:10:34 -03:00
4 changed files with 460 additions and 258 deletions
Show Stats Expand all files Collapse all files

112
app/context/AppointmentsContext.tsx Normal file
View File

@ -0,0 +1,112 @@
"use client";
import React, { createContext, useContext, useState, ReactNode } from 'react';
// A interface Appointment permanece a mesma
export interface Appointment {
id: string;
doctorName: string;
specialty: string;
date: string;
time: string;
location: string;
phone: string;
status: 'Agendada' | 'Realizada' | 'Cancelada';
observations?: string;
}
export interface AppointmentsContextType {
appointments: Appointment[];
addAppointment: (appointmentData: Omit<Appointment, 'id' | 'status'>) => void;
updateAppointment: (appointmentId: string, updatedData: Partial<Omit<Appointment, 'id'>>) => void;
// [NOVA FUNÇÃO] Adicionando a assinatura da função de exclusão ao nosso contrato
deleteAppointment: (appointmentId: string) => void;
}
const AppointmentsContext = createContext<AppointmentsContextType | undefined>(undefined);
// Os dados iniciais permanecem os mesmos
const initialAppointments: Appointment[] = [
{
id: '1',
doctorName: "Dr. João Silva",
specialty: "Cardiologia",
date: "2024-08-15",
time: "14:30",
status: "Agendada",
location: "Consultório A - 2º andar",
phone: "(11) 3333-4444",
observations: "Paciente relata dor no peito.",
},
{
id: '2',
doctorName: "Dra. Maria Santos",
specialty: "Dermatologia",
date: "2024-09-10",
time: "10:00",
status: "Agendada",
location: "Consultório B - 1º andar",
phone: "(11) 3333-5555",
},
{
id: '3',
doctorName: "Dr. Pedro Costa",
specialty: "Ortopedia",
date: "2024-07-08",
time: "16:00",
status: "Realizada",
location: "Consultório C - 3º andar",
phone: "(11) 3333-6666",
},
];
export function AppointmentsProvider({ children }: { children: ReactNode }) {
const [appointments, setAppointments] = useState<Appointment[]>(initialAppointments);
const addAppointment = (appointmentData: Omit<Appointment, 'id' | 'status'>) => {
const newAppointment: Appointment = {
id: Date.now().toString(),
status: 'Agendada',
...appointmentData,
};
setAppointments((prev) => [...prev, newAppointment]);
};
const updateAppointment = (appointmentId: string, updatedData: Partial<Omit<Appointment, 'id'>>) => {
setAppointments((prev) =>
prev.map((apt) =>
apt.id === appointmentId ? { ...apt, ...updatedData } : apt
)
);
};
// [NOVA FUNÇÃO] Implementando a lógica de exclusão real
const deleteAppointment = (appointmentId: string) => {
setAppointments((prev) =>
// O método 'filter' cria um novo array com todos os itens
// EXCETO aquele cujo ID corresponde ao que queremos excluir.
prev.filter((apt) => apt.id !== appointmentId)
);
};
const value = {
appointments,
addAppointment,
updateAppointment,
deleteAppointment, // Disponibilizando a nova função para os componentes
};
return (
<AppointmentsContext.Provider value={value}>
{children}
</AppointmentsContext.Provider>
);
}
export function useAppointments() {
const context = useContext(AppointmentsContext);
if (context === undefined) {
throw new Error('useAppointments deve ser usado dentro de um AppointmentsProvider');
}
return context;
}

9
app/layout.tsx
View File

@ -3,6 +3,8 @@ import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono' import { GeistMono } from 'geist/font/mono'
import { Analytics } from '@vercel/analytics/next' import { Analytics } from '@vercel/analytics/next'
import './globals.css' import './globals.css'
// [PASSO 1.2] - Importando o nosso provider
import { AppointmentsProvider } from './context/AppointmentsContext'
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Clinic App', title: 'Clinic App',
@ -18,9 +20,12 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}> <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
{children} {/* [PASSO 1.2] - Envolvendo a aplicação com o provider */}
<AppointmentsProvider>
{children}
</AppointmentsProvider>
<Analytics /> <Analytics />
</body> </body>
</html> </html>
) )
} }

376
app/patient/appointments/page.tsx
View File

@ -1,139 +1,125 @@
"use client"; "use client";
import { useState } 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, CalendarDays, X } from "lucide-react"; import { Calendar, Clock, MapPin, Phone, CalendarDays, X, Trash2 } from "lucide-react";
import { toast } from "sonner";
import Link from "next/link";
export default function PatientAppointments() { export default function PatientAppointmentsPage() {
const [appointments, setAppointments] = useState([ const { appointments, updateAppointment, deleteAppointment } = useAppointments();
{
id: 1,
doctor: "Dr. João Silva",
specialty: "Cardiologia",
date: "2024-01-15",
time: "14:30",
status: "agendada",
location: "Consultório A - 2º andar",
phone: "(11) 3333-4444",
},
{
id: 2,
doctor: "Dra. Maria Santos",
specialty: "Dermatologia",
date: "2024-01-22",
time: "10:00",
status: "agendada",
location: "Consultório B - 1º andar",
phone: "(11) 3333-5555",
},
{
id: 3,
doctor: "Dr. Pedro Costa",
specialty: "Ortopedia",
date: "2024-01-08",
time: "16:00",
status: "realizada",
location: "Consultório C - 3º andar",
phone: "(11) 3333-6666",
},
{
id: 4,
doctor: "Dra. Ana Lima",
specialty: "Ginecologia",
date: "2024-01-05",
time: "09:30",
status: "realizada",
location: "Consultório D - 2º andar",
phone: "(11) 3333-7777",
},
]);
const [rescheduleModal, setRescheduleModal] = useState(false); // Estados para controlar os modais e os dados do formulário
const [cancelModal, setCancelModal] = useState(false); const [isRescheduleModalOpen, setRescheduleModalOpen] = useState(false);
const [selectedAppointment, setSelectedAppointment] = useState<any>(null); const [isCancelModalOpen, setCancelModalOpen] = useState(false);
const [rescheduleData, setRescheduleData] = useState({ const [selectedAppointment, setSelectedAppointment] = useState<Appointment | null>(null);
date: "",
time: "", const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
reason: "",
});
const [cancelReason, setCancelReason] = useState(""); const [cancelReason, setCancelReason] = useState("");
const handleReschedule = (appointment: any) => { // --- MANIPULADORES DE EVENTOS ---
const handleRescheduleClick = (appointment: Appointment) => {
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 = () => { 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;
} }
if (selectedAppointment) {
setAppointments((prev) => prev.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, date: rescheduleData.date, time: rescheduleData.time } : apt))); updateAppointment(selectedAppointment.id, {
date: rescheduleData.date,
setRescheduleModal(false); time: rescheduleData.time,
toast.success("Consulta reagendada com sucesso!"); observations: rescheduleData.reason, // Atualiza as observações com o motivo
});
toast.success("Consulta reagendada com sucesso!");
setRescheduleModalOpen(false);
}
}; };
const confirmCancel = () => { const confirmCancel = () => {
if (!cancelReason.trim()) {
toast.error("O motivo do cancelamento é obrigatório");
return;
}
if (cancelReason.trim().length < 10) { if (cancelReason.trim().length < 10) {
toast.error("Por favor, forneça um motivo mais detalhado (mínimo 10 caracteres)"); toast.error("Por favor, forneça um motivo com pelo menos 10 caracteres.");
return; return;
} }
if (selectedAppointment) {
setAppointments((prev) => prev.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, status: "cancelada" } : apt))); // Apenas atualiza o status e adiciona o motivo do cancelamento nas observações
updateAppointment(selectedAppointment.id, {
setCancelModal(false); status: "Cancelada",
toast.success("Consulta cancelada com sucesso!"); observations: `Motivo do cancelamento: ${cancelReason}`
}; });
toast.success("Consulta cancelada com sucesso!");
const getStatusBadge = (status: string) => { setCancelModalOpen(false);
switch (status) {
case "agendada":
return <Badge className="bg-blue-100 text-blue-800">Agendada</Badge>;
case "realizada":
return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
case "cancelada":
return <Badge className="bg-red-100 text-red-800">Cancelada</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 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">Histórico e consultas agendadas</p> <p className="text-gray-600">Histórico e consultas agendadas</p>
</div> </div>
<Link href="/patient/schedule"> <Link href="/patient/schedule">
<Button> <Button className="bg-gray-800 hover:bg-gray-900 text-white">
<Calendar className="mr-2 h-4 w-4" /> <Calendar className="mr-2 h-4 w-4" />
Agendar Nova Consulta Agendar Nova Consulta
</Button> </Button>
@ -141,124 +127,162 @@ export default function PatientAppointments() {
</div> </div>
<div className="grid gap-6"> <div className="grid gap-6">
{appointments.map((appointment) => ( {/* Utiliza o array ORDENADO para a renderização */}
<Card key={appointment.id}> {sortedAppointments.map((appointment) => {
<CardHeader> const appointmentDate = new Date(appointment.date);
<div className="flex justify-between items-start"> let displayStatus = appointment.status;
<div>
<CardTitle className="text-lg">{appointment.doctor}</CardTitle>
<CardDescription>{appointment.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-600">
<Calendar className="mr-2 h-4 w-4" />
{new Date(appointment.date).toLocaleDateString("pt-BR")}
</div>
<div className="flex items-center text-sm text-gray-600">
<Clock className="mr-2 h-4 w-4" />
{appointment.time}
</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.location}
</div>
<div className="flex items-center text-sm text-gray-600">
<Phone className="mr-2 h-4 w-4" />
{appointment.phone}
</div>
</div>
</div>
{appointment.status === "agendada" && ( if (appointment.status === 'Agendada' && appointmentDate < today) {
<div className="flex gap-2 mt-4 pt-4 border-t"> displayStatus = 'Realizada';
<Button variant="outline" size="sm" onClick={() => handleReschedule(appointment)}> }
return (
<Card key={appointment.id} className="overflow-hidden">
<CardHeader>
<div className="flex justify-between items-start">
<div>
<CardTitle className="text-xl">{appointment.doctorName}</CardTitle>
<CardDescription>{appointment.specialty}</CardDescription>
</div>
{getStatusBadge(displayStatus)}
</div>
</CardHeader>
<CardContent>
<div className="grid md:grid-cols-2 gap-x-8 gap-y-4 mb-6">
<div className="space-y-4">
<div className="flex items-center text-sm text-gray-700">
<Calendar className="mr-3 h-4 w-4 text-gray-500" />
{new Date(appointment.date).toLocaleDateString("pt-BR", { timeZone: 'UTC' })}
</div>
<div className="flex items-center text-sm text-gray-700">
<Clock className="mr-3 h-4 w-4 text-gray-500" />
{appointment.time}
</div>
</div>
<div className="space-y-4">
<div className="flex items-center text-sm text-gray-700">
<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>
{/* Container ÚNICO para todas as ações */}
<div className="flex gap-2 pt-4 border-t">
{(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 variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent" onClick={() => handleCancel(appointment)}> <Button variant="ghost" size="sm" className="text-orange-600 hover:text-orange-700 hover:bg-orange-50" onClick={() => handleCancelClick(appointment)}>
<X className="mr-2 h-4 w-4" /> <X className="mr-2 h-4 w-4" />
Cancelar Cancelar
</Button>
</>
)}
{(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> </Button>
)}
</div> </div>
)} </CardContent>
</CardContent> </Card>
</Card> );
))} })}
</div> </div>
</div> </div>
{/* ETAPA 2: CONSTRUÇÃO DOS MODAIS */}
<Dialog open={rescheduleModal} onOpenChange={setRescheduleModal}> {/* Modal de Reagendamento */}
<DialogContent className="sm:max-w-[425px]"> <Dialog open={isRescheduleModalOpen} onOpenChange={setRescheduleModalOpen}>
<DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Reagendar Consulta</DialogTitle> <DialogTitle>Reagendar Consulta</DialogTitle>
<DialogDescription>Reagendar consulta com {selectedAppointment?.doctor}</DialogDescription> <DialogDescription>
Reagendar consulta com {selectedAppointment?.doctorName}.
</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 id="date" type="date" value={rescheduleData.date} onChange={(e) => setRescheduleData((prev) => ({ ...prev, date: e.target.value }))} min={new Date().toISOString().split("T")[0]} /> <Input
id="date"
type="date"
value={rescheduleData.date}
onChange={(e) => setRescheduleData({...rescheduleData, date: e.target.value})}
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 value={rescheduleData.time} onValueChange={(value) => setRescheduleData((prev) => ({ ...prev, time: value }))}> <Select
<SelectTrigger> value={rescheduleData.time}
onValueChange={(value) => setRescheduleData({...rescheduleData, time: value})}
>
<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 do Reagendamento (opcional)</Label> <Label htmlFor="reason" className="text-right">Motivo</Label>
<Textarea id="reason" placeholder="Informe o motivo do reagendamento..." value={rescheduleData.reason} onChange={(e) => setRescheduleData((prev) => ({ ...prev, reason: e.target.value }))} /> <Textarea
id="reason"
placeholder="Informe o motivo do reagendamento (opcional)"
value={rescheduleData.reason}
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 Reagendamento</Button> <Button type="button" onClick={confirmReschedule}>Confirmar Reagendamento</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<Dialog open={cancelModal} onOpenChange={setCancelModal}> {/* Modal de Cancelamento */}
<DialogContent className="sm:max-w-[425px]"> <Dialog open={isCancelModalOpen} onOpenChange={setCancelModalOpen}>
<DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Cancelar Consulta</DialogTitle> <DialogTitle>Cancelar Consulta</DialogTitle>
<DialogDescription>Tem certeza que deseja cancelar a consulta com {selectedAppointment?.doctor}?</DialogDescription> <DialogDescription>
Você tem certeza que deseja cancelar sua consulta com {selectedAppointment?.doctorName}? Esta ação não pode ser desfeita.
</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"> <Textarea
Motivo do Cancelamento <span className="text-red-500">*</span> id="cancelReason"
</Label> placeholder="Por favor, descreva o motivo do cancelamento..."
<Textarea id="cancel-reason" placeholder="Por favor, informe o motivo do cancelamento... (obrigatório)" value={cancelReason} onChange={(e) => setCancelReason(e.target.value)} required className={`min-h-[100px] ${!cancelReason.trim() && cancelModal ? "border-red-300 focus:border-red-500" : ""}`} /> value={cancelReason}
<p className="text-xs text-gray-500">Mínimo de 10 caracteres. Este campo é obrigatório.</p> onChange={(e) => setCancelReason(e.target.value)}
</div> className="mt-2"
/>
</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} disabled={!cancelReason.trim() || cancelReason.trim().length < 10}> <Button type="button" variant="destructive" onClick={confirmCancel}>Confirmar Cancelamento</Button>
Confirmar Cancelamento
</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</PatientLayout> </PatientLayout>
); );
} }

221
app/patient/schedule/page.tsx
View File

@ -1,50 +1,102 @@
"use client" "use client";
import type React from "react" import type React from "react";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { useState } from "react" // [SINCRONIZAÇÃO 1] - Importando a lista de 'appointments' para a validação de conflito
import PatientLayout from "@/components/patient-layout" import { useAppointments } from "../../context/AppointmentsContext";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Calendar, Clock, User } from "lucide-react"
export default function ScheduleAppointment() { // Componentes de UI e Layout
const [selectedDoctor, setSelectedDoctor] = useState("") import PatientLayout from "@/components/patient-layout";
const [selectedDate, setSelectedDate] = useState("") import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
const [selectedTime, setSelectedTime] = useState("") import { Button } from "@/components/ui/button";
const [notes, setNotes] = useState("") import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Calendar, Clock, User } from "lucide-react";
const doctors = [ // Interface para o estado local do formulário (sem alterações)
{ id: "1", name: "Dr. João Silva", specialty: "Cardiologia" }, interface AppointmentFormState {
{ id: "2", name: "Dra. Maria Santos", specialty: "Dermatologia" }, doctorId: string;
{ id: "3", name: "Dr. Pedro Costa", specialty: "Ortopedia" }, date: string;
{ id: "4", name: "Dra. Ana Lima", specialty: "Ginecologia" }, time: string;
] observations: string;
}
const availableTimes = [ // --- DADOS MOCKADOS (ALTERAÇÃO 1: Adicionando location e phone) ---
"08:00", const doctors = [
"08:30", { id: "1", name: "Dr. João Silva", specialty: "Cardiologia", location: "Consultório A - 2º andar", phone: "(11) 3333-4444" },
"09:00", { id: "2", name: "Dra. Maria Santos", specialty: "Dermatologia", location: "Consultório B - 1º andar", phone: "(11) 3333-5555" },
"09:30", { id: "3", name: "Dr. Pedro Costa", specialty: "Ortopedia", location: "Consultório C - 3º andar", phone: "(11) 3333-6666" },
"10:00", ];
"10:30", const availableTimes = ["09:00", "09:30", "10:00", "10:30", "14:00", "14:30", "15:00"];
"14:00", // -------------------------------------------------------------
"14:30",
"15:00", export default function ScheduleAppointmentPage() {
"15:30", const router = useRouter();
"16:00", // [SINCRONIZAÇÃO 1 - continuação] - Obtendo a lista de agendamentos existentes
"16:30", const { addAppointment, appointments } = useAppointments();
]
const [formData, setFormData] = useState<AppointmentFormState>({
doctorId: "",
date: "",
time: "",
observations: "",
});
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prevState => ({ ...prevState, [name]: value }));
};
const handleSelectChange = (name: keyof AppointmentFormState, value: string) => {
setFormData(prevState => ({ ...prevState, [name]: value }));
};
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault() e.preventDefault();
// Aqui você implementaria a lógica para salvar o agendamento if (!formData.doctorId || !formData.date || !formData.time) {
alert("Consulta agendada com sucesso!") toast.error("Por favor, preencha os campos de médico, data e horário.");
} return;
}
const selectedDoctor = doctors.find(doc => doc.id === formData.doctorId);
if (!selectedDoctor) return;
// Validação de conflito (sem alterações, já estava correta)
const isConflict = appointments.some(
(apt) =>
apt.doctorName === selectedDoctor.name &&
apt.date === formData.date &&
apt.time === formData.time
);
if (isConflict) {
toast.error("Este horário já está ocupado para o médico selecionado.");
return;
}
// [ALTERAÇÃO 2] - Utilizando os dados do médico selecionado para location e phone
// e removendo os placeholders.
addAppointment({
doctorName: selectedDoctor.name,
specialty: selectedDoctor.specialty,
date: formData.date,
time: formData.time,
observations: formData.observations,
location: selectedDoctor.location, // Usando a localização do médico
phone: selectedDoctor.phone, // Usando o telefone do médico
});
toast.success("Consulta agendada com sucesso!");
router.push('/patient/appointments');
};
// Validação de data passada (sem alterações, já estava correta)
const today = new Date().toISOString().split('T')[0];
return ( return (
<PatientLayout> <PatientLayout>
@ -54,7 +106,7 @@ export default function ScheduleAppointment() {
<p className="text-gray-600">Escolha o médico, data e horário para sua consulta</p> <p className="text-gray-600">Escolha o médico, data e horário para sua consulta</p>
</div> </div>
<div className="grid lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div className="lg:col-span-2"> <div className="lg:col-span-2">
<Card> <Card>
<CardHeader> <CardHeader>
@ -65,9 +117,12 @@ export default function ScheduleAppointment() {
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<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={formData.doctorId}
onValueChange={(value) => handleSelectChange('doctorId', value)}
>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Selecione um médico" /> <SelectValue placeholder="Seleione um médico" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{doctors.map((doctor) => ( {doctors.map((doctor) => (
@ -79,21 +134,24 @@ export default function ScheduleAppointment() {
</Select> </Select>
</div> </div>
<div className="grid md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 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>
<Input <Input
id="date" id="date"
name="date"
type="date" type="date"
value={selectedDate} value={formData.date}
onChange={(e) => setSelectedDate(e.target.value)} onChange={handleChange}
min={new Date().toISOString().split("T")[0]} min={today}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="time">Horário</Label> <Label htmlFor="time">Horário</Label>
<Select value={selectedTime} onValueChange={setSelectedTime}> <Select
value={formData.time}
onValueChange={(value) => handleSelectChange('time', value)}
>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Selecione um horário" /> <SelectValue placeholder="Selecione um horário" />
</SelectTrigger> </SelectTrigger>
@ -109,17 +167,18 @@ export default function ScheduleAppointment() {
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="notes">Observações (opcional)</Label> <Label htmlFor="observations">Observações (opcional)</Label>
<Textarea <Textarea
id="notes" id="observations"
name="observations"
placeholder="Descreva brevemente o motivo da consulta ou observações importantes" placeholder="Descreva brevemente o motivo da consulta ou observações importantes"
value={notes} value={formData.observations}
onChange={(e) => setNotes(e.target.value)} onChange={handleChange}
rows={3} rows={4}
/> />
</div> </div>
<Button type="submit" className="w-full" disabled={!selectedDoctor || !selectedDate || !selectedTime}> <Button type="submit" className="w-full bg-gray-600 hover:bg-gray-700 text-white text-base py-6">
Agendar Consulta Agendar Consulta
</Button> </Button>
</form> </form>
@ -130,30 +189,30 @@ export default function ScheduleAppointment() {
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="flex items-center"> <CardTitle className="flex items-center text-base">
<Calendar className="mr-2 h-5 w-5" /> <Calendar className="mr-2 h-5 w-5" />
Resumo Resumo
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-3 text-sm">
{selectedDoctor && ( {formData.doctorId ? (
<div className="flex items-center space-x-2"> <div className="flex items-center">
<User className="h-4 w-4 text-gray-500" /> <User className="mr-2 h-4 w-4 text-gray-500" />
<span className="text-sm">{doctors.find((d) => d.id === selectedDoctor)?.name}</span> <span>{doctors.find((d) => d.id === formData.doctorId)?.name}</span>
</div>
) : <p className="text-gray-500">Preencha o formulário...</p>}
{formData.date && (
<div className="flex items-center">
<Calendar className="mr-2 h-4 w-4 text-gray-500" />
<span>{new Date(formData.date).toLocaleDateString("pt-BR", { timeZone: 'UTC' })}</span>
</div> </div>
)} )}
{selectedDate && ( {formData.time && (
<div className="flex items-center space-x-2"> <div className="flex items-center">
<Calendar className="h-4 w-4 text-gray-500" /> <Clock className="mr-2 h-4 w-4 text-gray-500" />
<span className="text-sm">{new Date(selectedDate).toLocaleDateString("pt-BR")}</span> <span>{formData.time}</span>
</div>
)}
{selectedTime && (
<div className="flex items-center space-x-2">
<Clock className="h-4 w-4 text-gray-500" />
<span className="text-sm">{selectedTime}</span>
</div> </div>
)} )}
</CardContent> </CardContent>
@ -161,18 +220,20 @@ export default function ScheduleAppointment() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Informações Importantes</CardTitle> <CardTitle className="text-base">Informações Importantes</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="text-sm text-gray-600 space-y-2"> <CardContent>
<p>• Chegue com 15 minutos de antecedência</p> <ul className="space-y-2 text-sm text-gray-600 list-disc list-inside">
<p>• Traga documento com foto</p> <li>Chegue com 15 minutos de antecedência</li>
<p>• Traga carteirinha do convênio</p> <li>Traga documento com foto</li>
<p>• Traga exames anteriores, se houver</p> <li>Traga carteirinha do convênio</li>
<li>Traga exames anteriores, se houver</li>
</ul>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div> </div>
</div> </div>
</PatientLayout> </PatientLayout>
) );
} }