85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import { Calendar } from "lucide-react";
|
|
import DoctorCalendar from "../agenda/DoctorCalendar";
|
|
import AvailabilityManager from "../agenda/AvailabilityManager";
|
|
import ExceptionsManager from "../agenda/ExceptionsManager";
|
|
|
|
interface Medico {
|
|
id: string;
|
|
nome: string;
|
|
}
|
|
|
|
interface AgendaSectionProps {
|
|
medicos: Medico[];
|
|
selectedDoctorId: string | null;
|
|
onSelectDoctor: (doctorId: string) => void;
|
|
}
|
|
|
|
export default function AgendaSection({
|
|
medicos,
|
|
selectedDoctorId,
|
|
onSelectDoctor,
|
|
}: AgendaSectionProps) {
|
|
return (
|
|
<section className="space-y-6">
|
|
{/* Header */}
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-foreground">
|
|
Gerenciar Agenda Médica
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
Configure disponibilidades, exceções e visualize o calendário dos
|
|
médicos
|
|
</p>
|
|
</div>
|
|
|
|
{/* Doctor Selector */}
|
|
<div className="bg-card rounded-lg border border-border p-6">
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
Selecione um médico para gerenciar sua agenda:
|
|
</label>
|
|
{medicos.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
Nenhum médico cadastrado. Adicione médicos na aba "Médicos"
|
|
primeiro.
|
|
</p>
|
|
) : (
|
|
<select
|
|
value={selectedDoctorId || ""}
|
|
onChange={(e) => onSelectDoctor(e.target.value)}
|
|
className="w-full md:w-96 h-10 px-3 rounded-md border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
|
>
|
|
<option value="">Selecione um médico</option>
|
|
{medicos.map((medico) => (
|
|
<option key={medico.id} value={medico.id}>
|
|
{medico.nome}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
|
|
{/* Calendar and Availability Management */}
|
|
{selectedDoctorId ? (
|
|
<div className="space-y-6">
|
|
<DoctorCalendar doctorId={selectedDoctorId} />
|
|
<AvailabilityManager doctorId={selectedDoctorId} />
|
|
<ExceptionsManager doctorId={selectedDoctorId} />
|
|
</div>
|
|
) : (
|
|
<div className="bg-card rounded-lg border border-border p-12">
|
|
<div className="flex flex-col items-center justify-center text-center">
|
|
<Calendar className="w-16 h-16 text-muted-foreground mb-4" />
|
|
<h3 className="text-lg font-semibold text-foreground mb-2">
|
|
Selecione um médico
|
|
</h3>
|
|
<p className="text-muted-foreground max-w-md">
|
|
Escolha um médico acima para visualizar e gerenciar sua agenda,
|
|
disponibilidades e exceções de horários.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|