355 lines
13 KiB
TypeScript
355 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect, useCallback } from "react"
|
|
import { Calendar, Clock, User } from "lucide-react"
|
|
import PatientLayout from "@/components/patient-layout"
|
|
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 { doctorsService } from "services/medicosApi"
|
|
|
|
interface Doctor {
|
|
id: string
|
|
full_name: string
|
|
specialty: string
|
|
phone_mobile: string
|
|
}
|
|
|
|
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments"
|
|
|
|
export default function ScheduleAppointment() {
|
|
const [selectedDoctor, setSelectedDoctor] = useState("")
|
|
const [selectedDate, setSelectedDate] = useState("")
|
|
const [selectedTime, setSelectedTime] = useState("")
|
|
const [notes, setNotes] = useState("")
|
|
|
|
// 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 () => {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
const data: Doctor[] = await doctorsService.list()
|
|
setDoctors(data || [])
|
|
} catch (e: any) {
|
|
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.")
|
|
setDoctors([])
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
fetchDoctors()
|
|
}, [fetchDoctors])
|
|
|
|
const availableTimes = [
|
|
"08:00",
|
|
"08:30",
|
|
"09:00",
|
|
"09:30",
|
|
"10:00",
|
|
"10:30",
|
|
"14:00",
|
|
"14:30",
|
|
"15:00",
|
|
"15:30",
|
|
"16:00",
|
|
"16:30",
|
|
]
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
const doctorDetails = doctors.find((d) => d.id === selectedDoctor)
|
|
const patientDetails = {
|
|
id: "P001",
|
|
full_name: "Paciente Exemplo Único",
|
|
location: "Clínica Geral",
|
|
phone: "(11) 98765-4321",
|
|
}
|
|
|
|
if (!patientDetails || !doctorDetails) {
|
|
alert("Erro: Selecione o médico ou dados do paciente indisponíveis.")
|
|
return
|
|
}
|
|
|
|
const newAppointment = {
|
|
id: new Date().getTime(),
|
|
patientName: patientDetails.full_name,
|
|
doctor: doctorDetails.full_name,
|
|
specialty: doctorDetails.specialty,
|
|
date: selectedDate,
|
|
time: selectedTime,
|
|
tipoConsulta,
|
|
duracao,
|
|
convenio,
|
|
queixa,
|
|
obsPaciente,
|
|
obsInternas,
|
|
notes,
|
|
status: "agendada",
|
|
phone: patientDetails.phone,
|
|
}
|
|
|
|
const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY)
|
|
const currentAppointments = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : []
|
|
const updatedAppointments = [...currentAppointments, newAppointment]
|
|
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments))
|
|
|
|
alert(`Consulta com ${doctorDetails.full_name} agendada com sucesso!`)
|
|
|
|
// resetar campos
|
|
setSelectedDoctor("")
|
|
setSelectedDate("")
|
|
setSelectedTime("")
|
|
setNotes("")
|
|
setTipoConsulta("presencial")
|
|
setDuracao("30")
|
|
setConvenio("")
|
|
setQueixa("")
|
|
setObsPaciente("")
|
|
setObsInternas("")
|
|
}
|
|
|
|
return (
|
|
<PatientLayout>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">Agendar Consulta</h1>
|
|
<p className="text-gray-600">Escolha o médico, data e horário para sua consulta</p>
|
|
</div>
|
|
|
|
<div className="grid lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Dados da Consulta</CardTitle>
|
|
<CardDescription>Preencha as informações para agendar sua consulta</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
|
|
|
|
{/* Médico */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="doctor">Médico</Label>
|
|
<Select value={selectedDoctor} onValueChange={setSelectedDoctor}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Selecione um médico" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{loading ? (
|
|
<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}>
|
|
{doctor.full_name} - {doctor.specialty}
|
|
</SelectItem>
|
|
))
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Data e horário */}
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="date">Data</Label>
|
|
<Input
|
|
id="date"
|
|
type="date"
|
|
value={selectedDate}
|
|
onChange={(e) => setSelectedDate(e.target.value)}
|
|
min={new Date().toISOString().split("T")[0]}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="time">Horário</Label>
|
|
<Select value={selectedTime} onValueChange={setSelectedTime}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Selecione um horário" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{availableTimes.map((time) => (
|
|
<SelectItem key={time} value={time}>
|
|
{time}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</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">
|
|
<Label htmlFor="duracao">Duração (minutos)</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
|
|
id="notes"
|
|
placeholder="Descreva brevemente o motivo da consulta ou observações importantes"
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
|
|
{/* Botão */}
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={!selectedDoctor || !selectedDate || !selectedTime}
|
|
>
|
|
Agendar Consulta
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Resumo */}
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center">
|
|
<Calendar className="mr-2 h-5 w-5" />
|
|
Resumo
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{selectedDoctor && (
|
|
<div className="flex items-center space-x-2">
|
|
<User className="h-4 w-4 text-gray-500" />
|
|
<span className="text-sm">
|
|
{doctors.find((d) => d.id === selectedDoctor)?.full_name}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{selectedDate && (
|
|
<div className="flex items-center space-x-2">
|
|
<Calendar className="h-4 w-4 text-gray-500" />
|
|
<span className="text-sm">
|
|
{new Date(selectedDate).toLocaleDateString("pt-BR")}
|
|
</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>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Informações Importantes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-sm text-gray-600 space-y-2">
|
|
<p>• Chegue com 15 minutos de antecedência</p>
|
|
<p>• Traga documento com foto</p>
|
|
<p>• Traga carteirinha do convênio</p>
|
|
<p>• Traga exames anteriores, se houver</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PatientLayout>
|
|
)
|
|
}
|