317 lines
14 KiB
TypeScript
317 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Calendar, Clock, User, Trash2 } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { disponibilidadeApi, Availability } from "@/services/disponibilidadeApi";
|
|
import { excecoesApi, Exception } from "@/services/excecoesApi";
|
|
import { toast } from "@/hooks/use-toast";
|
|
|
|
export default function PatientDashboard() {
|
|
const [availability, setAvailability] = useState<Availability[]>([]);
|
|
const [exceptions, setExceptions] = useState<Exception[]>([]);
|
|
const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);
|
|
|
|
const formatTime = (time: string) => time.split(":").slice(0, 2).join(":");
|
|
|
|
const weekdaysPT: Record<string, string> = {
|
|
sunday: "Domingo",
|
|
monday: "Segunda",
|
|
tuesday: "Terça",
|
|
wednesday: "Quarta",
|
|
thursday: "Quinta",
|
|
friday: "Sexta",
|
|
saturday: "Sábado",
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
const doctorId = JSON.parse(localStorage.getItem("user_info") || "{}")?.id;;
|
|
setIsLoading(true);
|
|
setError(null);
|
|
try {
|
|
const [availabilityResponse, exceptionsResponse] = await Promise.all([
|
|
disponibilidadeApi.list(),
|
|
excecoesApi.list(),
|
|
]);
|
|
|
|
const filteredAvailability = availabilityResponse.filter(
|
|
(disp) => disp.doctor_id === doctorId
|
|
);
|
|
setAvailability(filteredAvailability);
|
|
|
|
const filteredExceptions = exceptionsResponse.filter(
|
|
(exc) => exc.doctor_id === doctorId
|
|
);
|
|
setExceptions(filteredExceptions);
|
|
} catch (e: any) {
|
|
setError("Não foi possível carregar os dados do dashboard.");
|
|
console.error(e);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
fetchData();
|
|
}, []);
|
|
|
|
const openDeleteDialog = (exceptionId: string) => {
|
|
setExceptionToDelete(exceptionId);
|
|
setDeleteDialogOpen(true);
|
|
};
|
|
|
|
const handleDeleteException = async (exceptionId: string) => {
|
|
try {
|
|
await excecoesApi.delete(exceptionId);
|
|
toast({
|
|
title: "Sucesso",
|
|
description: "Exceção deletada com sucesso.",
|
|
});
|
|
setExceptions((prev) => prev.filter((ex) => ex.id !== exceptionId));
|
|
} catch (e: any) {
|
|
toast({
|
|
title: "Erro",
|
|
description: e?.message || "Não foi possível deletar a exceção.",
|
|
});
|
|
} finally {
|
|
setDeleteDialogOpen(false);
|
|
setExceptionToDelete(null);
|
|
}
|
|
};
|
|
|
|
function formatAvailability(data: Availability[]) {
|
|
const schedule = data.reduce(
|
|
(acc: any, item) => {
|
|
const { weekday, start_time, end_time } = item;
|
|
if (!acc[weekday]) {
|
|
acc[weekday] = [];
|
|
}
|
|
acc[weekday].push({
|
|
start: start_time,
|
|
end: end_time,
|
|
});
|
|
return acc;
|
|
},
|
|
{} as Record<string, { start: string; end: string }[]>
|
|
);
|
|
return schedule;
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (availability) {
|
|
const formatted = formatAvailability(availability);
|
|
setSchedule(formatted);
|
|
}
|
|
}, [availability]);
|
|
|
|
if (isLoading) {
|
|
return <div>Carregando...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return <div className="text-red-600">Erro: {error}</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
|
|
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
|
|
<Calendar className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">02 out</div>
|
|
<p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
|
|
<Clock className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">4</div>
|
|
<p className="text-xs text-muted-foreground">4 agendadas</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Perfil</CardTitle>
|
|
<User className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">100%</div>
|
|
<p className="text-xs text-muted-foreground">Dados completos</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Ações Rápidas</CardTitle>
|
|
<CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<Link href="/doctor/medicos/consultas">
|
|
<Button className="w-full justify-start">
|
|
<Calendar className="mr-2 h-4 w-4" />
|
|
Ver Minhas Consultas
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Próximas Consultas</CardTitle>
|
|
<CardDescription>Suas consultas agendadas</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
|
|
<div>
|
|
<p className="font-medium">Dr. João Santos</p>
|
|
<p className="text-sm text-gray-600">Cardiologia</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-medium">02 out</p>
|
|
<p className="text-sm text-gray-600">14:30</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<div className="grid md:grid-cols-1 gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Horário Semanal</CardTitle>
|
|
<CardDescription>Confira rapidamente a sua disponibilidade da semana</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
|
|
{Object.keys(schedule).length > 0 ? (
|
|
["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
|
|
const times = schedule[day] || [];
|
|
return (
|
|
<div key={day} className="space-y-4">
|
|
<div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg">
|
|
<div>
|
|
<p className="font-medium capitalize">{weekdaysPT[day]}</p>
|
|
</div>
|
|
<div className="text-center">
|
|
{times.length > 0 ? (
|
|
times.map((t, i) => (
|
|
<p key={i} className="text-sm text-gray-600">
|
|
{formatTime(t.start)} <br /> {formatTime(t.end)}
|
|
</p>
|
|
))
|
|
) : (
|
|
<p className="text-sm text-gray-400 italic">Sem horário</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
) : (
|
|
<p className="text-sm text-gray-400 italic col-span-7 text-center">Nenhum horário de disponibilidade encontrado.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<div className="grid md:grid-cols-1 gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Exceções</CardTitle>
|
|
<CardDescription>Bloqueios e liberações eventuais de agenda</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
|
|
{exceptions.length > 0 ? (
|
|
exceptions.map((ex) => {
|
|
const date = new Date(ex.date).toLocaleDateString("pt-BR", {
|
|
weekday: "long",
|
|
day: "2-digit",
|
|
month: "long",
|
|
});
|
|
const startTime = formatTime(ex.start_time);
|
|
const endTime = formatTime(ex.end_time);
|
|
|
|
return (
|
|
<div key={ex.id} className="space-y-4">
|
|
<div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg shadow-sm">
|
|
<div className="text-center">
|
|
<p className="font-semibold capitalize">{date}</p>
|
|
<p className="text-sm text-gray-600">
|
|
{startTime} - {endTime} <br /> -
|
|
</p>
|
|
</div>
|
|
<div className="text-center mt-2">
|
|
<p className={`text-sm font-medium ${ex.kind === "bloqueio" ? "text-red-600" : "text-green-600"}`}>
|
|
{ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}
|
|
</p>
|
|
<p className="text-xs text-gray-500 italic">{ex.reason || "Sem motivo especificado"}</p>
|
|
</div>
|
|
<div>
|
|
<Button className="text-red-600" variant="outline" onClick={() => openDeleteDialog(String(ex.id))}>
|
|
<Trash2 />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
) : (
|
|
<p className="text-sm text-gray-400 italic col-span-7 text-center">Nenhuma exceção registrada.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
|
|
<AlertDialogDescription>Tem certeza que deseja excluir esta exceção? Esta ação não pode ser desfeita.</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
|
<AlertDialogAction onClick={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-red-600 hover:bg-red-700">
|
|
Excluir
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
);
|
|
} |