m1guelmcf/riseup-squad21
1
0
Fork 0
forked from RiseUP/riseup-squad21
Code Pull Requests Activity

Merge pull request #25 from m1guelmcf/retirar-relatorios

Browse Source 
Atualiza cards com dados de APIs e corrige contagens
This commit is contained in:
DaniloSts 2025-11-26 19:13:33 -03:00 committed by GitHub
commit 2e0ce5fa89
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 1030 additions and 1084 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
app/doctor/dashboard/page.tsx
View File

@ -24,6 +24,15 @@ import Link from "next/link";
import { useEffect, useState } from "react";
import { toast } from "@/hooks/use-toast";
// --- IMPORTS ADICIONADOS PARA A CORREÇÃO ---
import { useAuthLayout } from "@/hooks/useAuthLayout";
import { patientsService } from "@/services/patientsApi.mjs";
// --- FIM DOS IMPORTS ADICIONADOS ---
import { appointmentsService } from "@/services/appointmentsApi.mjs";
import { format, parseISO, isAfter, isSameMonth, startOfToday } from "date-fns";
import { ptBR } from "date-fns/locale";
import { AvailabilityService } from "@/services/availabilityApi.mjs";
import { exceptionsService } from "@/services/exceptionApi.mjs";
import { doctorsService } from "@/services/doctorsApi.mjs";
@ -122,63 +131,88 @@ interface Exception {
}
export default function PatientDashboard() {
const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
// --- USA O HOOK DE AUTENTICAÇÃO PARA PEGAR O USUÁRIO LOGADO ---
const { user } = useAuthLayout({ requiredRole: ['medico'] });
const [loggedDoctor, setLoggedDoctor] = useState<Doctor | null>(null);
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 [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 [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",
};
// --- ESTADOS PARA OS CARDS ATUALIZADOS ---
const [nextAppointment, setNextAppointment] = useState<EnrichedAppointment | null>(null);
const [monthlyCount, setMonthlyCount] = useState<number>(0);
const weekdaysPT: Record<string, string> = { sunday: "Domingo", monday: "Segunda", tuesday: "Terça", wednesday: "Quarta", thursday: "Quinta", friday: "Sexta", saturday: "Sábado" };
// ▼▼▼ LÓGICA DE BUSCA CORRIGIDA E ATUALIZADA ▼▼▼
useEffect(() => {
const fetchData = async () => {
if (!user?.id) return; // Aguarda o usuário ser carregado
try {
// Encontra o perfil de médico correspondente ao usuário logado
const doctorsList: Doctor[] = await doctorsService.list();
const doctor = doctorsList[0];
const currentDoctor = doctorsList.find(doc => doc.user_id === user.id);
// Salva no estado
setLoggedDoctor(doctor);
if (!currentDoctor) {
setError("Perfil de médico não encontrado para este usuário.");
return;
}
setLoggedDoctor(currentDoctor);
// Busca disponibilidade
const availabilityList = await AvailabilityService.list();
// Busca todos os dados necessários em paralelo
const [appointmentsList, patientsList, availabilityList, exceptionsList] = await Promise.all([
appointmentsService.list(),
patientsService.list(),
AvailabilityService.list(),
exceptionsService.list()
]);
// Filtra já com a variável local
const filteredAvail = availabilityList.filter(
(disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
// Mapeia pacientes por ID para consulta rápida
const patientsMap = new Map(patientsList.map((p: any) => [p.id, p.full_name]));
// Filtra e enriquece as consultas APENAS do médico logado
const doctorAppointments = appointmentsList
.filter((apt: any) => apt.doctor_id === currentDoctor.id)
.map((apt: any): EnrichedAppointment => ({
...apt,
patientName: patientsMap.get(apt.patient_id) || "Paciente Desconhecido",
}));
// 1. Lógica para "Próxima Consulta"
const today = startOfToday();
const upcomingAppointments = doctorAppointments
.filter(apt => isAfter(parseISO(apt.scheduled_at), today))
.sort((a, b) => new Date(a.scheduled_at).getTime() - new Date(b.scheduled_at).getTime());
setNextAppointment(upcomingAppointments[0] || null);
// 2. Lógica para "Consultas Este Mês" (apenas ativas)
const activeStatuses = ['confirmed', 'requested', 'checked_in'];
const currentMonthAppointments = doctorAppointments.filter(apt =>
isSameMonth(parseISO(apt.scheduled_at), new Date()) && activeStatuses.includes(apt.status)
);
setAvailability(filteredAvail);
setMonthlyCount(currentMonthAppointments.length);
// Busca e filtra o restante dos dados
setAvailability(availabilityList.filter((d: any) => d.doctor_id === currentDoctor.id));
setExceptions(exceptionsList.filter((e: any) => e.doctor_id === currentDoctor.id));
// 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}`);
setError(e?.message || "Erro ao buscar dados do dashboard");
console.error("Erro no dashboard:", e);
}
};
fetchData();
}, []);
}, [user]); // A busca de dados agora depende do usuário logado
// ▲▲▲ FIM DA LÓGICA DE BUSCA ATUALIZADA ▲▲▲
// 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);
}
@ -190,57 +224,25 @@ export default function PatientDashboard() {
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))
);
if (res && res.error) { throw new Error(res.message || "A API retornou um erro"); }
toast({ title: "Sucesso", description: "Exceção deletada com sucesso" });
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",
});
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
if (!data) return {};
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,
});
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;
}
@ -262,31 +264,44 @@ export default function PatientDashboard() {
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* ▼▼▼ CARD "PRÓXIMA CONSULTA" CORRIGIDO PARA MOSTRAR NOME DO PACIENTE ▼▼▼ */}
<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>
<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>
{nextAppointment ? (
<>
<div className="text-2xl font-bold capitalize">
{format(parseISO(nextAppointment.scheduled_at), "dd MMM", { locale: ptBR })}
</div>
<p className="text-xs text-muted-foreground">
{nextAppointment.patientName} - {format(parseISO(nextAppointment.scheduled_at), "HH:mm")}
</p>
</>
) : (
<>
<div className="text-2xl font-bold">Nenhuma</div>
<p className="text-xs text-muted-foreground">Sem próximas consultas</p>
</>
)}
</CardContent>
</Card>
{/* ▲▲▲ FIM DO CARD ATUALIZADO ▲▲▲ */}
{/* ▼▼▼ CARD "CONSULTAS ESTE MÊS" CORRIGIDO PARA CONTAGEM CORRETA ▼▼▼ */}
<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>
<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>
<div className="text-2xl font-bold">{monthlyCount}</div>
<p className="text-xs text-muted-foreground">{monthlyCount === 1 ? '1 agendada' : `${monthlyCount} agendadas`}</p>
</CardContent>
</Card>
{/* ▲▲▲ FIM DO CARD ATUALIZADO ▲▲▲ */}
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@ -300,18 +315,17 @@ export default function PatientDashboard() {
</Card>
</div>
{/* O restante do código permanece o mesmo */}
<div className="grid md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle>Ações Rápidas</CardTitle>
<CardDescription>
Acesse rapidamente as principais funcionalidades
</CardDescription>
<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" />
<Button className="w-full justify-start">
<Calendar className="mr-2 h-4 w-4" />
Ver Minhas Consultas
</Button>
</Link>
@ -358,12 +372,11 @@ export default function PatientDashboard() {
<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",
timeZone: "UTC"
});
const startTime = formatTime(ex.start_time);
@ -374,7 +387,11 @@ export default function PatientDashboard() {
<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>
<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>

55
app/manager/dashboard/page.tsx
View File

@ -8,12 +8,13 @@ import {
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Calendar, Clock, Plus, User } from "lucide-react";
import { Clock, Plus, User } from "lucide-react"; // Removi 'Calendar' que não estava sendo usado
import Link from "next/link";
import React, { useState, useEffect } from "react";
import { usersService } from "services/usersApi.mjs";
import { doctorsService } from "services/doctorsApi.mjs";
import Sidebar from "@/components/Sidebar";
import { api } from "services/api.mjs"; // <-- ADICIONEI ESTE IMPORT
export default function ManagerDashboard() {
// 🔹 Estados para usuários
@ -24,16 +25,44 @@ export default function ManagerDashboard() {
const [doctors, setDoctors] = useState<any[]>([]);
const [loadingDoctors, setLoadingDoctors] = useState(true);
// 🔹 Buscar primeiro usuário
// 🔹 Buscar primeiro usuário (LÓGICA ATUALIZADA)
useEffect(() => {
async function fetchFirstUser() {
setLoadingUser(true); // Garante que o estado de loading inicie como true
try {
const data = await usersService.list_roles();
if (Array.isArray(data) && data.length > 0) {
setFirstUser(data[0]);
// 1. Busca a lista de usuários com seus cargos (roles)
const rolesData = await usersService.list_roles();
// 2. Verifica se a lista não está vazia
if (Array.isArray(rolesData) && rolesData.length > 0) {
const firstUserRole = rolesData[0];
const firstUserId = firstUserRole.user_id;
if (!firstUserId) {
throw new Error("O primeiro usuário da lista não possui um ID válido.");
}
// 3. Usa o ID para buscar o perfil (com nome e email) do usuário
const profileData = await api.get(
`/rest/v1/profiles?select=full_name,email&id=eq.${firstUserId}`
);
// 4. Verifica se o perfil foi encontrado
if (Array.isArray(profileData) && profileData.length > 0) {
const userProfile = profileData[0];
// 5. Combina os dados do cargo e do perfil e atualiza o estado
setFirstUser({
...firstUserRole,
...userProfile
});
} else {
// Se não encontrar o perfil, exibe os dados que temos
setFirstUser(firstUserRole);
}
}
} catch (error) {
console.error("Erro ao carregar usuário:", error);
setFirstUser(null); // Limpa o usuário em caso de erro
} finally {
setLoadingUser(false);
}
@ -73,21 +102,7 @@ export default function ManagerDashboard() {
{/* Cards principais */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Card 1 */}
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
Relatórios gerenciais
</CardTitle>
<Calendar className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">0</div>
<p className="text-xs text-muted-foreground">
Relatórios disponíveis
</p>
</CardContent>
</Card>
{/* Card 2 — Gestão de usuários */}
<Card>

2
app/manager/home/[id]/editar/page.tsx
View File

@ -225,7 +225,7 @@ export default function EditarMedicoPage() {
Editar Médico: <span className="text-green-600">{formData.nomeCompleto}</span>
</h1>
<p className="text-sm text-gray-500">
Atualize as informações do médico (ID: {id}).
Atualize as informações do médico
</p>
</div>
<Link href="/manager/home">

180
app/manager/pacientes/page.tsx
View File

@ -66,7 +66,8 @@ export default function PacientesPage() {
// --- FUNÇÕES DE LÓGICA ---
// 1. Função para carregar TODOS os pacientes da API
const fetchAllPacientes = useCallback(async () => {
const fetchAllPacientes = useCallback(
async () => {
setLoading(true);
setError(null);
try {
@ -80,8 +81,8 @@ export default function PacientesPage() {
cidade: p.city ?? "—",
estado: p.state ?? "—",
// Formate as datas se necessário, aqui usamos como string
ultimoAtendimento: p.last_visit_at?.split("T")[0] ?? "—",
proximoAtendimento: p.next_appointment_at?.split("T")[0] ?? "—",
ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
proximoAtendimento: p.next_appointment_at ? p.next_appointment_at.split('T')[0].split('-').reverse().join('-') : "—",
vip: Boolean(p.vip ?? false),
convenio: p.convenio ?? "Particular", // Define um valor padrão
status: p.status ?? undefined,
@ -106,7 +107,8 @@ export default function PacientesPage() {
// Filtro por Convênio
const matchesConvenio =
convenioFilter === "all" || patient.convenio === convenioFilter;
convenioFilter === "all" ||
patient.convenio === convenioFilter;
// Filtro por VIP
const matchesVip =
@ -213,13 +215,9 @@ export default function PacientesPage() {
{/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */}
<div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
<span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
VIP
</span>
<span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span>
<Select value={vipFilter} onValueChange={setVipFilter}>
<SelectTrigger className="w-full sm:w-32">
{" "}
{/* w-full para mobile, w-32 para sm+ */}
<SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */}
<SelectValue placeholder="VIP" />
</SelectTrigger>
<SelectContent>
@ -240,106 +238,63 @@ export default function PacientesPage() {
{/* --- SEÇÃO DE TABELA (VISÍVEL EM TELAS MAIORES OU IGUAIS A MD) --- */}
{/* Garantir que a tabela se esconda em telas menores e apareça em MD+ */}
<div className="bg-white rounded-lg border border-gray-200 shadow-md hidden md:block">
<div className="overflow-x-auto">
{" "}
{/* Permite rolagem horizontal se a tabela for muito larga */}
<div className="overflow-x-auto"> {/* Permite rolagem horizontal se a tabela for muito larga */}
{error ? (
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
) : loading ? (
<div className="p-6 text-center text-gray-500 flex items-center justify-center">
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
Carregando pacientes...
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes...
</div>
) : (
<table className="w-full min-w-[650px]">
{" "}
{/* min-w para evitar que a tabela se contraia demais */}
<table className="w-full min-w-[650px]"> {/* min-w para evitar que a tabela se contraia demais */}
<thead className="bg-gray-50 border-b border-gray-200">
<tr>
<th className="text-left p-4 font-medium text-gray-700 w-[20%]">
Nome
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[20%]">Nome</th>
{/* Ajustes de visibilidade de colunas para diferentes breakpoints */}
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
Telefone
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">
Cidade / Estado
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">
Convênio
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
Último atendimento
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">
Próximo atendimento
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[5%]">
Ações
</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Telefone</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">Cidade / Estado</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Convênio</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Último atendimento</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Próximo atendimento</th>
<th className="text-left p-4 font-medium text-gray-700 w-[5%]">Ações</th>
</tr>
</thead>
<tbody>
{currentPatients.length === 0 ? (
<tr>
<td colSpan={7} className="p-8 text-center text-gray-500">
{allPatients.length === 0
? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"}
{allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
</td>
</tr>
) : (
currentPatients.map((patient) => (
<tr
key={patient.id}
className="border-b border-gray-100 hover:bg-gray-50"
>
<tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50">
<td className="p-4">
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<span className="text-blue-600 font-medium text-sm">
{patient.nome?.charAt(0) || "?"}
</span>
<div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
<span className="text-green-600 font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span>
</div>
<span className="font-medium text-gray-900">
{patient.nome}
{patient.vip && (
<span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
VIP
</span>
<span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">VIP</span>
)}
</span>
</div>
</td>
<td className="p-4 text-gray-600 hidden sm:table-cell">
{patient.telefone}
</td>
<td className="p-4 text-gray-600 hidden sm:table-cell">{patient.telefone}</td>
<td className="p-4 text-gray-600 hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
<td className="p-4 text-gray-600 hidden sm:table-cell">
{patient.convenio}
</td>
<td className="p-4 text-gray-600 hidden lg:table-cell">
{patient.ultimoAtendimento}
</td>
<td className="p-4 text-gray-600 hidden lg:table-cell">
{patient.proximoAtendimento}
</td>
<td className="p-4 text-gray-600 hidden sm:table-cell">{patient.convenio}</td>
<td className="p-4 text-gray-600 hidden lg:table-cell">{patient.ultimoAtendimento}</td>
<td className="p-4 text-gray-600 hidden lg:table-cell">{patient.proximoAtendimento}</td>
<td className="p-4">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="text-blue-600 cursor-pointer">
Ações
</div>
<div className="text-blue-600 cursor-pointer">Ações</div>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() =>
openDetailsDialog(String(patient.id))
}
>
<DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
<Eye className="w-4 h-4 mr-2" />
Ver detalhes
</DropdownMenuItem>
@ -386,59 +341,38 @@ export default function PacientesPage() {
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
) : loading ? (
<div className="p-6 text-center text-gray-500 flex items-center justify-center">
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
Carregando pacientes...
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes...
</div>
) : filteredPatients.length === 0 ? (
<div className="p-8 text-center text-gray-500">
{allPatients.length === 0
? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"}
{allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
</div>
) : (
<div className="space-y-4">
{currentPatients.map((patient) => (
<div
key={patient.id}
className="bg-gray-50 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border border-gray-200"
>
<div key={patient.id} className="bg-gray-50 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border border-gray-200">
<div className="flex-grow mb-2 sm:mb-0">
<div className="font-semibold text-lg text-gray-900 flex items-center">
{patient.nome}
{patient.vip && (
<span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
VIP
</span>
<span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">VIP</span>
)}
</div>
<div className="text-sm text-gray-600">
Telefone: {patient.telefone}
</div>
<div className="text-sm text-gray-600">
Convênio: {patient.convenio}
</div>
<div className="text-sm text-gray-600">Telefone: {patient.telefone}</div>
<div className="text-sm text-gray-600">Convênio: {patient.convenio}</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="w-full">
<Button variant="outline" className="w-full">
Ações
</Button>
</div>
<div className="w-full"><Button variant="outline" className="w-full">Ações</Button></div>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() => openDetailsDialog(String(patient.id))}
>
<DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
<Eye className="w-4 h-4 mr-2" />
Ver detalhes
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link
href={`/secretary/pacientes/${patient.id}/editar`}
className="flex items-center w-full"
>
<Link href={`/secretary/pacientes/${patient.id}/editar`} className="flex items-center w-full">
<Edit className="w-4 h-4 mr-2" />
Editar
</Link>
@ -448,10 +382,7 @@ export default function PacientesPage() {
<Calendar className="w-4 h-4 mr-2" />
Marcar consulta
</DropdownMenuItem>
<DropdownMenuItem
className="text-red-600"
onClick={() => openDeleteDialog(String(patient.id))}
>
<DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
<Trash2 className="w-4 h-4 mr-2" />
Excluir
</DropdownMenuItem>
@ -466,9 +397,7 @@ export default function PacientesPage() {
{/* Paginação */}
{totalPages > 1 && !loading && (
<div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-gray-200">
<div className="flex space-x-2 flex-wrap justify-center">
{" "}
{/* Adicionado flex-wrap e justify-center para botões da paginação */}
<div className="flex space-x-2 flex-wrap justify-center"> {/* Adicionado flex-wrap e justify-center para botões da paginação */}
<Button
onClick={() => setPage((prev) => Math.max(1, prev - 1))}
disabled={page === 1}
@ -477,6 +406,7 @@ export default function PacientesPage() {
>
&lt; Anterior
</Button>
{Array.from({ length: totalPages }, (_, index) => index + 1)
.slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
.map((pageNumber) => (
@ -485,19 +415,14 @@ export default function PacientesPage() {
onClick={() => setPage(pageNumber)}
variant={pageNumber === page ? "default" : "outline"}
size="lg"
className={
pageNumber === page
? "bg-blue-600 hover:bg-blue-700 text-white"
: "text-gray-700"
}
className={pageNumber === page ? "bg-green-600 hover:bg-green-700 text-white" : "text-gray-700"}
>
{pageNumber}
</Button>
))}
<Button
onClick={() =>
setPage((prev) => Math.min(totalPages, prev + 1))
}
onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
disabled={page === totalPages}
variant="outline"
size="lg"
@ -513,29 +438,18 @@ export default function PacientesPage() {
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
<AlertDialogDescription>
Tem certeza que deseja excluir este paciente? Esta ação não pode
ser desfeita.
</AlertDialogDescription>
<AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancelar</AlertDialogCancel>
<AlertDialogAction
onClick={() =>
patientToDelete && handleDeletePatient(patientToDelete)
}
className="bg-red-600 hover:bg-red-700"
>
<AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700">
Excluir
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<AlertDialog
open={detailsDialogOpen}
onOpenChange={setDetailsDialogOpen}
>
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>