416 lines
15 KiB
TypeScript
416 lines
15 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 {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "@/hooks/use-toast";
|
|
|
|
import { AvailabilityService } from "@/services/availabilityApi.mjs";
|
|
import { exceptionsService } from "@/services/exceptionApi.mjs";
|
|
import { doctorsService } from "@/services/doctorsApi.mjs";
|
|
import { usersService } from "@/services/usersApi.mjs";
|
|
import Sidebar from "@/components/Sidebar";
|
|
import WeeklyScheduleCard from "@/components/ui/WeeklyScheduleCard";
|
|
|
|
type Availability = {
|
|
id: string;
|
|
doctor_id: string;
|
|
weekday: string;
|
|
start_time: string;
|
|
end_time: string;
|
|
slot_minutes: number;
|
|
appointment_type: string;
|
|
active: boolean;
|
|
created_at: string;
|
|
updated_at: string;
|
|
created_by: string;
|
|
updated_by: string | null;
|
|
};
|
|
|
|
type Schedule = {
|
|
weekday: object;
|
|
};
|
|
|
|
type Doctor = {
|
|
id: string;
|
|
user_id: string | null;
|
|
crm: string;
|
|
crm_uf: string;
|
|
specialty: string;
|
|
full_name: string;
|
|
cpf: string;
|
|
email: string;
|
|
phone_mobile: string | null;
|
|
phone2: string | null;
|
|
cep: string | null;
|
|
street: string | null;
|
|
number: string | null;
|
|
complement: string | null;
|
|
neighborhood: string | null;
|
|
city: string | null;
|
|
state: string | null;
|
|
birth_date: string | null;
|
|
rg: string | null;
|
|
active: boolean;
|
|
created_at: string;
|
|
updated_at: string;
|
|
created_by: string;
|
|
updated_by: string | null;
|
|
max_days_in_advance: number;
|
|
rating: number | null;
|
|
};
|
|
|
|
interface UserPermissions {
|
|
isAdmin: boolean;
|
|
isManager: boolean;
|
|
isDoctor: boolean;
|
|
isSecretary: boolean;
|
|
isAdminOrManager: boolean;
|
|
}
|
|
|
|
interface UserData {
|
|
user: {
|
|
id: string;
|
|
email: string;
|
|
email_confirmed_at: string | null;
|
|
created_at: string | null;
|
|
last_sign_in_at: string | null;
|
|
};
|
|
profile: {
|
|
id: string;
|
|
full_name: string;
|
|
email: string;
|
|
phone: string;
|
|
avatar_url: string | null;
|
|
disabled: boolean;
|
|
created_at: string | null;
|
|
updated_at: string | null;
|
|
};
|
|
roles: string[];
|
|
permissions: UserPermissions;
|
|
}
|
|
|
|
interface Exception {
|
|
id: string; // id da exceção
|
|
doctor_id: string;
|
|
date: string; // formato YYYY-MM-DD
|
|
start_time: string | null; // null = dia inteiro
|
|
end_time: string | null; // null = dia inteiro
|
|
kind: "bloqueio" | "disponibilidade"; // tipos conhecidos
|
|
reason: string | null; // pode ser null
|
|
created_at: string; // timestamp ISO
|
|
created_by: string;
|
|
}
|
|
|
|
export default function PatientDashboard() {
|
|
const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
|
|
const [userData, setUserData] = useState<UserData>();
|
|
const [availability, setAvailability] = useState<any | null>(null);
|
|
const [exceptions, setExceptions] = useState<Exception[]>([]);
|
|
const [schedule, setSchedule] = useState<
|
|
Record<string, { start: string; end: string }[]>
|
|
>({});
|
|
const formatTime = (time?: string | null) =>
|
|
time?.split(":")?.slice(0, 2).join(":") ?? "";
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(
|
|
null
|
|
);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Mapa de tradução
|
|
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 () => {
|
|
try {
|
|
const doctorsList: Doctor[] = await doctorsService.list();
|
|
const doctor = doctorsList[0];
|
|
|
|
// Salva no estado
|
|
setLoggedDoctor(doctor);
|
|
|
|
// Busca disponibilidade
|
|
const availabilityList = await AvailabilityService.list();
|
|
|
|
// Filtra já com a variável local
|
|
const filteredAvail = availabilityList.filter(
|
|
(disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
|
|
);
|
|
setAvailability(filteredAvail);
|
|
|
|
// Busca exceções
|
|
const exceptionsList = await exceptionsService.list();
|
|
const filteredExc = exceptionsList.filter((exc: { doctor_id: string }) => exc.doctor_id === doctor?.id);
|
|
setExceptions(filteredExc);
|
|
} catch (e: any) {
|
|
alert(`${e?.error} ${e?.message}`);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
// Função auxiliar para filtrar o id do doctor correspondente ao user logado
|
|
function findDoctorById(id: string, doctors: Doctor[]) {
|
|
return doctors.find((doctor) => doctor.user_id === id);
|
|
}
|
|
|
|
const openDeleteDialog = (exceptionId: string) => {
|
|
setExceptionToDelete(exceptionId);
|
|
setDeleteDialogOpen(true);
|
|
};
|
|
|
|
const handleDeleteException = async (ExceptionId: string) => {
|
|
try {
|
|
alert(ExceptionId);
|
|
const res = await exceptionsService.delete(ExceptionId);
|
|
|
|
let message = "Exceção deletada com sucesso";
|
|
try {
|
|
if (res) {
|
|
throw new Error(
|
|
`${res.error} ${res.message}` || "A API retornou erro"
|
|
);
|
|
} else {
|
|
console.log(message);
|
|
}
|
|
} catch {}
|
|
|
|
toast({
|
|
title: "Sucesso",
|
|
description: message,
|
|
});
|
|
|
|
setExceptions((prev: Exception[]) =>
|
|
prev.filter((p) => String(p.id) !== String(ExceptionId))
|
|
);
|
|
} catch (e: any) {
|
|
toast({
|
|
title: "Erro",
|
|
description: e?.message || "Não foi possível deletar a exceção",
|
|
});
|
|
}
|
|
setDeleteDialogOpen(false);
|
|
setExceptionToDelete(null);
|
|
};
|
|
|
|
function formatAvailability(data: Availability[]) {
|
|
// Agrupar os horários por dia da semana
|
|
const schedule = data.reduce((acc: any, item) => {
|
|
const { weekday, start_time, end_time } = item;
|
|
|
|
// Se o dia ainda não existe, cria o array
|
|
if (!acc[weekday]) {
|
|
acc[weekday] = [];
|
|
}
|
|
|
|
// Adiciona o horário do dia
|
|
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]);
|
|
|
|
return (
|
|
<Sidebar>
|
|
<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="bg-blue-600 hover:bg-blue-700 text-white cursor-pointer">
|
|
<Calendar className="mr-2 h-4 w-4 text-white" />
|
|
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>{loggedDoctor && <WeeklyScheduleCard doctorId={loggedDoctor.id} />}</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 && exceptions.length > 0 ? (
|
|
exceptions.map((ex: Exception) => {
|
|
// Formata data e hora
|
|
const date = new Date(ex.date).toLocaleDateString("pt-BR", {
|
|
weekday: "long",
|
|
day: "2-digit",
|
|
month: "long",
|
|
timeZone: "UTC",
|
|
});
|
|
|
|
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 ? `${startTime} - ${endTime}` : "Dia todo"}</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></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>
|
|
</Sidebar>
|
|
);
|
|
}
|