novo layout da secretaria
This commit is contained in:
parent
c04b0989d2
commit
5a3ea1bb75
@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect, useMemo } from "react";
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
@ -11,15 +11,22 @@ import {
|
|||||||
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 } from "@/components/ui/dialog";
|
import { Dialog } from "@/components/ui/dialog";
|
||||||
|
import { Calendar as CalendarShadcn } from "@/components/ui/calendar";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
import {
|
import {
|
||||||
Calendar,
|
Calendar as CalendarIcon,
|
||||||
Clock,
|
Clock,
|
||||||
MapPin,
|
MapPin,
|
||||||
Phone,
|
Phone,
|
||||||
User,
|
User,
|
||||||
Trash2,
|
Trash2,
|
||||||
Pencil,
|
Pencil,
|
||||||
|
List,
|
||||||
|
RefreshCw,
|
||||||
|
Loader2,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
import { format, parseISO, isValid, isToday, isTomorrow } from "date-fns";
|
||||||
|
import { ptBR } from "date-fns/locale";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { appointmentsService } from "@/services/appointmentsApi.mjs";
|
import { appointmentsService } from "@/services/appointmentsApi.mjs";
|
||||||
@ -43,15 +50,15 @@ export default function SecretaryAppointments() {
|
|||||||
status: "",
|
status: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Estado de data selecionada para o layout novo
|
||||||
|
const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
try {
|
try {
|
||||||
// 1. DEFINIR O PARÂMETRO DE ORDENAÇÃO
|
const queryParams = "order=scheduled_at.asc";
|
||||||
// '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([
|
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),
|
appointmentsService.search_appointment(queryParams),
|
||||||
patientsService.list(),
|
patientsService.list(),
|
||||||
doctorsService.list(),
|
doctorsService.list(),
|
||||||
@ -82,7 +89,50 @@ export default function SecretaryAppointments() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchData();
|
fetchData();
|
||||||
}, []); // Array vazio garante que a busca ocorra apenas uma vez, no carregamento da página.
|
}, []);
|
||||||
|
|
||||||
|
// --- Agrupamento por dia para o layout novo ---
|
||||||
|
const groupedAppointments = useMemo(() => {
|
||||||
|
const list = selectedDate
|
||||||
|
? appointments.filter((apt) => {
|
||||||
|
if (!apt.scheduled_at) return false;
|
||||||
|
const iso = apt.scheduled_at.toString();
|
||||||
|
return iso.startsWith(format(selectedDate, "yyyy-MM-dd"));
|
||||||
|
})
|
||||||
|
: appointments;
|
||||||
|
|
||||||
|
return list.reduce((acc: Record<string, any[]>, apt: any) => {
|
||||||
|
if (!apt.scheduled_at) return acc;
|
||||||
|
const dateObj = new Date(apt.scheduled_at);
|
||||||
|
if (!isValid(dateObj)) return acc;
|
||||||
|
const key = format(dateObj, "yyyy-MM-dd");
|
||||||
|
if (!acc[key]) acc[key] = [];
|
||||||
|
acc[key].push(apt);
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
}, [appointments, selectedDate]);
|
||||||
|
|
||||||
|
// Dias que têm consulta (para destacar no calendário)
|
||||||
|
const bookedDays = useMemo(
|
||||||
|
() =>
|
||||||
|
appointments
|
||||||
|
.map((apt) =>
|
||||||
|
apt.scheduled_at ? new Date(apt.scheduled_at) : null
|
||||||
|
)
|
||||||
|
.filter((d): d is Date => d !== null && isValid(d)),
|
||||||
|
[appointments]
|
||||||
|
);
|
||||||
|
|
||||||
|
const formatDisplayDate = (dateString: string) => {
|
||||||
|
const date = parseISO(dateString);
|
||||||
|
if (isToday(date)) {
|
||||||
|
return `Hoje, ${format(date, "dd 'de' MMMM", { locale: ptBR })}`;
|
||||||
|
}
|
||||||
|
if (isTomorrow(date)) {
|
||||||
|
return `Amanhã, ${format(date, "dd 'de' MMMM", { locale: ptBR })}`;
|
||||||
|
}
|
||||||
|
return format(date, "EEEE, dd 'de' MMMM", { locale: ptBR });
|
||||||
|
};
|
||||||
|
|
||||||
// --- LÓGICA DE EDIÇÃO ---
|
// --- LÓGICA DE EDIÇÃO ---
|
||||||
const handleEdit = (appointment: any) => {
|
const handleEdit = (appointment: any) => {
|
||||||
@ -123,9 +173,7 @@ export default function SecretaryAppointments() {
|
|||||||
|
|
||||||
await appointmentsService.update(selectedAppointment.id, updatePayload);
|
await appointmentsService.update(selectedAppointment.id, updatePayload);
|
||||||
|
|
||||||
// 3. RECARREGAR OS DADOS APÓS A EDIÇÃO
|
await fetchData();
|
||||||
// Isso garante que a lista permaneça ordenada corretamente se a data for alterada.
|
|
||||||
fetchData();
|
|
||||||
|
|
||||||
setEditModal(false);
|
setEditModal(false);
|
||||||
toast.success("Consulta atualizada com sucesso!");
|
toast.success("Consulta atualizada com sucesso!");
|
||||||
@ -156,6 +204,7 @@ export default function SecretaryAppointments() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Mantidos caso use nos modais
|
||||||
const timeSlots = [
|
const timeSlots = [
|
||||||
"08:00",
|
"08:00",
|
||||||
"08:30",
|
"08:30",
|
||||||
@ -186,131 +235,225 @@ export default function SecretaryAppointments() {
|
|||||||
return (
|
return (
|
||||||
<Sidebar>
|
<Sidebar>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
|
{/* Cabeçalho principal */}
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold">
|
<h1 className="text-3xl font-bold text-foreground">
|
||||||
Consultas Agendadas
|
Agenda Médica
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-muted-foreground">Gerencie as consultas dos pacientes</p>
|
<p className="text-muted-foreground">
|
||||||
|
Consultas para os pacientes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Link href="/secretary/schedule">
|
||||||
|
<Button className="bg-primary hover:bg-primary/90 text-primary-foreground">
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
Agendar Nova Consulta
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<Link href="/secretary/schedule">
|
|
||||||
<Button className="bg-primary hover:bg-primary/90 text-primary-foreground">
|
|
||||||
<Calendar className="mr-2 h-4 w-4" />
|
|
||||||
Agendar Nova Consulta
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-6">
|
{/* Subtítulo e ações (mostrar todas / atualizar) */}
|
||||||
{isLoading ? (
|
<div className="flex justify-between items-center">
|
||||||
<p>Carregando consultas...</p>
|
<h2 className="text-xl font-semibold capitalize">
|
||||||
) : appointments.length > 0 ? (
|
{selectedDate
|
||||||
appointments.map((appointment) => (
|
? `Agenda de ${format(selectedDate, "dd/MM/yyyy")}`
|
||||||
<Card key={appointment.id}>
|
: "Próximas Consultas"}
|
||||||
|
</h2>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
onClick={() => setSelectedDate(undefined)}
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<List className="mr-2 h-4 w-4" />
|
||||||
|
Mostrar Todas
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => fetchData()}
|
||||||
|
disabled={isLoading}
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<RefreshCw
|
||||||
|
className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
|
||||||
|
/>
|
||||||
|
Atualizar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Grid com calendário + lista */}
|
||||||
|
<div className="grid lg:grid-cols-3 gap-6">
|
||||||
|
{/* Coluna esquerda: calendário */}
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center">
|
||||||
|
<CalendarIcon className="mr-2 h-5 w-5" />
|
||||||
|
Filtrar por Data
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Selecione um dia para ver os detalhes.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex justify-center p-2">
|
||||||
|
<CalendarShadcn
|
||||||
|
mode="single"
|
||||||
|
selected={selectedDate}
|
||||||
|
onSelect={setSelectedDate}
|
||||||
|
modifiers={{ booked: bookedDays }}
|
||||||
|
modifiersClassNames={{ booked: "bg-primary/20" }}
|
||||||
|
className="rounded-md border p-2"
|
||||||
|
locale={ptBR}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Coluna direita: lista de consultas */}
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex justify-center items-center h-48">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||||
|
</div>
|
||||||
|
) : Object.keys(groupedAppointments).length === 0 ? (
|
||||||
|
<Card className="flex flex-col items-center justify-center h-48 text-center">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div className="flex justify-between items-start">
|
<CardTitle>Nenhuma consulta encontrada</CardTitle>
|
||||||
<div>
|
|
||||||
<CardTitle className="text-lg">
|
|
||||||
{appointment.doctor.full_name}
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
{appointment.doctor.specialty}
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
{getStatusBadge(appointment.status)}
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="grid md:grid-cols-2 gap-4">
|
<p className="text-muted-foreground">
|
||||||
<div className="space-y-3">
|
{selectedDate
|
||||||
<div className="flex items-center text-sm text-foreground font-medium">
|
? "Não há agendamentos para esta data."
|
||||||
<User className="mr-2 h-4 w-4 text-muted-foreground" />
|
: "Não há próximas consultas agendadas."}
|
||||||
{appointment.patient.full_name}
|
</p>
|
||||||
</div>
|
</CardContent>
|
||||||
<div className="flex items-center text-sm text-muted-foreground">
|
</Card>
|
||||||
<Calendar className="mr-2 h-4 w-4" />
|
) : (
|
||||||
{new Date(appointment.scheduled_at).toLocaleDateString(
|
Object.entries(groupedAppointments).map(
|
||||||
"pt-BR",
|
([date, appointmentsForDay]) => (
|
||||||
{ timeZone: "UTC" }
|
<div key={date}>
|
||||||
)}
|
<h3 className="text-lg font-semibold text-foreground mb-3 capitalize">
|
||||||
</div>
|
{formatDisplayDate(date)}
|
||||||
<div className="flex items-center text-sm text-muted-foreground">
|
</h3>
|
||||||
<Clock className="mr-2 h-4 w-4" />
|
<div className="space-y-4">
|
||||||
{new Date(appointment.scheduled_at).toLocaleTimeString(
|
{appointmentsForDay.map((appointment: any) => {
|
||||||
"pt-BR",
|
const scheduledAtDate = new Date(
|
||||||
{
|
appointment.scheduled_at
|
||||||
hour: "2-digit",
|
);
|
||||||
minute: "2-digit",
|
|
||||||
timeZone: "UTC",
|
return (
|
||||||
}
|
<Card
|
||||||
)}
|
key={appointment.id}
|
||||||
</div>
|
className="shadow-sm hover:shadow-md transition-shadow"
|
||||||
</div>
|
>
|
||||||
<div className="space-y-3">
|
<CardContent className="p-4 grid grid-cols-3 items-center gap-4">
|
||||||
<div className="flex items-center text-sm text-muted-foreground">
|
{/* Coluna 1: Paciente + hora */}
|
||||||
<MapPin className="mr-2 h-4 w-4" />
|
<div className="col-span-1 flex flex-col gap-2">
|
||||||
{appointment.doctor.location || "Local a definir"}
|
<div className="font-semibold flex items-center text-foreground">
|
||||||
</div>
|
<User className="mr-2 h-4 w-4 text-primary" />
|
||||||
<div className="flex items-center text-sm text-muted-foreground">
|
{appointment.patient.full_name}
|
||||||
<Phone className="mr-2 h-4 w-4" />
|
</div>
|
||||||
{appointment.doctor.phone || "N/A"}
|
<div className="flex items-center text-sm text-muted-foreground">
|
||||||
</div>
|
<Clock className="mr-2 h-4 w-4" />
|
||||||
|
{isValid(scheduledAtDate)
|
||||||
|
? format(scheduledAtDate, "HH:mm")
|
||||||
|
: "--:--"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Coluna 2: Médico / local / telefone */}
|
||||||
|
<div className="col-span-1 flex flex-col gap-2">
|
||||||
|
<div className="flex items-center text-sm text-muted-foreground">
|
||||||
|
<User className="mr-2 h-4 w-4" />
|
||||||
|
{appointment.doctor.full_name}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-muted-foreground">
|
||||||
|
<MapPin className="mr-2 h-4 w-4" />
|
||||||
|
{appointment.doctor.location ||
|
||||||
|
"Local a definir"}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-muted-foreground">
|
||||||
|
<Phone className="mr-2 h-4 w-4" />
|
||||||
|
{appointment.doctor.phone || "N/A"}
|
||||||
|
</div>
|
||||||
|
<div>{getStatusBadge(appointment.status)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Coluna 3: Ações */}
|
||||||
|
<div className="col-span-1 flex justify-end">
|
||||||
|
<div className="flex flex-col sm:flex-row gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleEdit(appointment)}
|
||||||
|
>
|
||||||
|
<Pencil className="mr-2 h-4 w-4" />
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleDelete(appointment)}
|
||||||
|
>
|
||||||
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
<Separator className="my-6" />
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-2 mt-4 pt-4 border-t">
|
{/* MODAL DE EDIÇÃO */}
|
||||||
<Button variant="outline" size="sm" onClick={() => handleEdit(appointment)}>
|
<Dialog open={editModal} onOpenChange={setEditModal}>
|
||||||
<Pencil className="mr-2 h-4 w-4" />
|
{/* ... (código do modal de edição permanece) ... */}
|
||||||
Editar
|
</Dialog>
|
||||||
</Button>
|
|
||||||
<Button variant="outline" size="sm" className="text-destructive hover:text-destructive/90 hover:bg-destructive/10 bg-transparent" onClick={() => handleDelete(appointment)}>
|
|
||||||
<Trash2 className="mr-2 h-4 w-4" />
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<p>Nenhuma consulta encontrada.</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* MODAL DE EDIÇÃO */}
|
{/* Modal de Deleção */}
|
||||||
<Dialog open={editModal} onOpenChange={setEditModal}>
|
<Dialog open={deleteModal} onOpenChange={setDeleteModal}>
|
||||||
{/* ... (código do modal de edição) ... */}
|
{/* ... (código do modal de deleção permanece) ... */}
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
</div>
|
||||||
{/* Modal de Deleção */}
|
|
||||||
<Dialog open={deleteModal} onOpenChange={setDeleteModal}>
|
|
||||||
{/* ... (código do modal de deleção) ... */}
|
|
||||||
</Dialog>
|
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const getStatusBadge = (status: string) => {
|
const getStatusBadge = (status: string) => {
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case "requested":
|
case "requested":
|
||||||
return (
|
return (
|
||||||
<Badge className="bg-yellow-400/10 text-yellow-400">Solicitada</Badge>
|
<Badge className="bg-yellow-400/10 text-yellow-400">Solicitada</Badge>
|
||||||
);
|
);
|
||||||
case "confirmed":
|
case "confirmed":
|
||||||
return <Badge className="bg-primary/10 text-primary">Confirmada</Badge>;
|
return <Badge className="bg-primary/10 text-primary">Confirmada</Badge>;
|
||||||
case "checked_in":
|
case "checked_in":
|
||||||
return (
|
return (
|
||||||
<Badge className="bg-indigo-400/10 text-indigo-400">Check-in</Badge>
|
<Badge className="bg-indigo-400/10 text-indigo-400">Check-in</Badge>
|
||||||
);
|
);
|
||||||
case "completed":
|
case "completed":
|
||||||
return <Badge className="bg-green-400/10 text-green-400">Realizada</Badge>;
|
return <Badge className="bg-green-400/10 text-green-400">Realizada</Badge>;
|
||||||
case "cancelled":
|
case "cancelled":
|
||||||
return <Badge className="bg-destructive/10 text-destructive">Cancelada</Badge>;
|
return (
|
||||||
case "no_show":
|
<Badge className="bg-destructive/10 text-destructive">Cancelada</Badge>
|
||||||
return (
|
);
|
||||||
<Badge className="bg-muted text-foreground">Não Compareceu</Badge>
|
case "no_show":
|
||||||
);
|
return (
|
||||||
default:
|
<Badge className="bg-muted text-foreground">Não Compareceu</Badge>
|
||||||
return <Badge variant="secondary">{status}</Badge>;
|
);
|
||||||
}
|
default:
|
||||||
};
|
return <Badge variant="secondary">{status}</Badge>;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user