RiseUP/riseup-squad21
5
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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

14
app/doctor/consultas/page.tsx
View File

@ -56,7 +56,7 @@ export default function DoctorAppointmentsPage() {
const patientsMap = new Map<string, { name: string; phone: string }>( const patientsMap = new Map<string, { name: string; phone: string }>(
patientsList.map((p: any) => [p.id, { name: p.full_name, phone: p.phone_mobile }]) patientsList.map((p: any) => [p.id, { name: p.full_name, phone: p.phone_mobile }])
); );
const enrichedAppointments = appointmentsList.map((apt: any) => ({ const enrichedAppointments = appointmentsList.map((apt: any) => ({
id: apt.id, id: apt.id,
patientName: patientsMap.get(apt.patient_id)?.name || "Paciente Desconhecido", patientName: patientsMap.get(apt.patient_id)?.name || "Paciente Desconhecido",
@ -85,10 +85,10 @@ export default function DoctorAppointmentsPage() {
const appointmentsToDisplay = selectedDate const appointmentsToDisplay = selectedDate
? allAppointments.filter(app => app.scheduled_at && app.scheduled_at.startsWith(format(selectedDate, "yyyy-MM-dd"))) ? allAppointments.filter(app => app.scheduled_at && app.scheduled_at.startsWith(format(selectedDate, "yyyy-MM-dd")))
: allAppointments.filter(app => { : allAppointments.filter(app => {
if (!app.scheduled_at) return false; if (!app.scheduled_at) return false;
const dateObj = parseISO(app.scheduled_at); const dateObj = parseISO(app.scheduled_at);
return isValid(dateObj) && isFuture(dateObj); return isValid(dateObj) && isFuture(dateObj);
}); });
return appointmentsToDisplay.reduce((acc, appointment) => { return appointmentsToDisplay.reduce((acc, appointment) => {
const dateKey = format(parseISO(appointment.scheduled_at), "yyyy-MM-dd"); const dateKey = format(parseISO(appointment.scheduled_at), "yyyy-MM-dd");
@ -162,7 +162,7 @@ export default function DoctorAppointmentsPage() {
<Card> <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> <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"> <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}/> <CalendarShadcn mode="single" selected={selectedDate} onSelect={setSelectedDate} modifiers={{ booked: bookedDays }} modifiersClassNames={{ booked: "bg-primary/20" }} className="rounded-md border p-2" locale={ptBR} />
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@ -197,7 +197,7 @@ export default function DoctorAppointmentsPage() {
{format(scheduledAtDate, "HH:mm")} {format(scheduledAtDate, "HH:mm")}
</div> </div>
</div> </div>
{/* Coluna 2: Status e Telefone */} {/* Coluna 2: Status e Telefone */}
<div className="col-span-1 flex flex-col items-center gap-2"> <div className="col-span-1 flex flex-col items-center gap-2">
<Badge variant="outline" className={getStatusVariant(appointment.status)}>{statusPT[appointment.status].replace('_', ' ')}</Badge> <Badge variant="outline" className={getStatusVariant(appointment.status)}>{statusPT[appointment.status].replace('_', ' ')}</Badge>

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

@ -24,6 +24,15 @@ import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "@/hooks/use-toast"; 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 { AvailabilityService } from "@/services/availabilityApi.mjs";
import { exceptionsService } from "@/services/exceptionApi.mjs"; import { exceptionsService } from "@/services/exceptionApi.mjs";
import { doctorsService } from "@/services/doctorsApi.mjs"; import { doctorsService } from "@/services/doctorsApi.mjs";
@ -122,127 +131,120 @@ interface Exception {
} }
export default function PatientDashboard() { export default function PatientDashboard() {
const [loggedDoctor, setLoggedDoctor] = useState<Doctor>(); // --- USA O HOOK DE AUTENTICAÇÃO PARA PEGAR O USUÁRIO LOGADO ---
const [userData, setUserData] = useState<UserData>(); const { user } = useAuthLayout({ requiredRole: ['medico'] });
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 [loggedDoctor, setLoggedDoctor] = useState<Doctor | null>(null);
const weekdaysPT: Record<string, string> = { const [userData, setUserData] = useState<UserData>();
sunday: "Domingo", const [availability, setAvailability] = useState<any | null>(null);
monday: "Segunda", const [exceptions, setExceptions] = useState<Exception[]>([]);
tuesday: "Terça", const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
wednesday: "Quarta", const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
thursday: "Quinta", const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
friday: "Sexta", const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);
saturday: "Sábado", const [error, setError] = useState<string | null>(null);
};
useEffect(() => { // --- ESTADOS PARA OS CARDS ATUALIZADOS ---
const fetchData = async () => { const [nextAppointment, setNextAppointment] = useState<EnrichedAppointment | null>(null);
try { const [monthlyCount, setMonthlyCount] = useState<number>(0);
const doctorsList: Doctor[] = await doctorsService.list();
const doctor = doctorsList[0];
// Salva no estado const weekdaysPT: Record<string, string> = { sunday: "Domingo", monday: "Segunda", tuesday: "Terça", wednesday: "Quarta", thursday: "Quinta", friday: "Sexta", saturday: "Sábado" };
setLoggedDoctor(doctor);
// Busca disponibilidade // ▼▼▼ LÓGICA DE BUSCA CORRIGIDA E ATUALIZADA ▼▼▼
const availabilityList = await AvailabilityService.list(); useEffect(() => {
const fetchData = async () => {
if (!user?.id) return; // Aguarda o usuário ser carregado
// Filtra já com a variável local try {
const filteredAvail = availabilityList.filter( // Encontra o perfil de médico correspondente ao usuário logado
(disp: { doctor_id: string }) => disp.doctor_id === doctor?.id const doctorsList: Doctor[] = await doctorsService.list();
); const currentDoctor = doctorsList.find(doc => doc.user_id === user.id);
setAvailability(filteredAvail);
if (!currentDoctor) {
setError("Perfil de médico não encontrado para este usuário.");
return;
}
setLoggedDoctor(currentDoctor);
// Busca todos os dados necessários em paralelo
const [appointmentsList, patientsList, availabilityList, exceptionsList] = await Promise.all([
appointmentsService.list(),
patientsService.list(),
AvailabilityService.list(),
exceptionsService.list()
]);
// 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)
);
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) { } catch (e: any) {
alert(`${e?.error} ${e?.message}`); setError(e?.message || "Erro ao buscar dados do dashboard");
console.error("Erro no dashboard:", e);
} }
}; };
fetchData(); 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[]) {
function findDoctorById(id: string, doctors: Doctor[]) { return doctors.find((doctor) => doctor.user_id === id);
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[]) { const openDeleteDialog = (exceptionId: string) => {
// Agrupar os horários por dia da semana setExceptionToDelete(exceptionId);
const schedule = data.reduce((acc: any, item) => { setDeleteDialogOpen(true);
const { weekday, start_time, end_time } = item; };
// Se o dia ainda não existe, cria o array const handleDeleteException = async (ExceptionId: string) => {
if (!acc[weekday]) { try {
acc[weekday] = []; const res = await exceptionsService.delete(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" });
}
setDeleteDialogOpen(false);
setExceptionToDelete(null);
};
// Adiciona o horário do dia function formatAvailability(data: Availability[]) {
acc[weekday].push({ if (!data) return {};
start: start_time, const schedule = data.reduce((acc: any, item) => {
end: end_time, const { weekday, start_time, end_time } = item;
}); if (!acc[weekday]) acc[weekday] = [];
acc[weekday].push({ start: start_time, end: end_time });
return acc; return acc;
}, {} as Record<string, { start: string; end: string }[]>); }, {} as Record<string, { start: string; end: string }[]>);
return schedule;
return schedule; }
}
useEffect(() => { useEffect(() => {
if (availability) { if (availability) {
@ -261,32 +263,45 @@ export default function PatientDashboard() {
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card> {/* ▼▼▼ CARD "PRÓXIMA CONSULTA" CORRIGIDO PARA MOSTRAR NOME DO PACIENTE ▼▼▼ */}
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <Card>
<CardTitle className="text-sm font-medium"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
Próxima Consulta <CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
</CardTitle> <Calendar className="h-4 w-4 text-muted-foreground" />
<Calendar className="h-4 w-4 text-muted-foreground" /> </CardHeader>
</CardHeader> <CardContent>
<CardContent> {nextAppointment ? (
<div className="text-2xl font-bold">02 out</div> <>
<p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p> <div className="text-2xl font-bold capitalize">
</CardContent> {format(parseISO(nextAppointment.scheduled_at), "dd MMM", { locale: ptBR })}
</Card> </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> {/* ▼▼▼ CARD "CONSULTAS ESTE MÊS" CORRIGIDO PARA CONTAGEM CORRETA ▼▼▼ */}
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <Card>
<CardTitle className="text-sm font-medium"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
Consultas Este Mês <CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
</CardTitle> <Clock className="h-4 w-4 text-muted-foreground" />
<Clock className="h-4 w-4 text-muted-foreground" /> </CardHeader>
</CardHeader> <CardContent>
<CardContent> <div className="text-2xl font-bold">{monthlyCount}</div>
<div className="text-2xl font-bold">4</div> <p className="text-xs text-muted-foreground">{monthlyCount === 1 ? '1 agendada' : `${monthlyCount} agendadas`}</p>
<p className="text-xs text-muted-foreground">4 agendadas</p> </CardContent>
</CardContent> </Card>
</Card> {/* ▲▲▲ FIM DO CARD ATUALIZADO ▲▲▲ */}
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@ -300,23 +315,22 @@ export default function PatientDashboard() {
</Card> </Card>
</div> </div>
<div className="grid md:grid-cols-2 gap-6"> {/* O restante do código permanece o mesmo */}
<Card> <div className="grid md:grid-cols-2 gap-6">
<CardHeader> <Card>
<CardTitle>Ações Rápidas</CardTitle> <CardHeader>
<CardDescription> <CardTitle>Ações Rápidas</CardTitle>
Acesse rapidamente as principais funcionalidades <CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
</CardDescription> </CardHeader>
</CardHeader> <CardContent className="space-y-4">
<CardContent className="space-y-4"> <Link href="/doctor/medicos/consultas">
<Link href="/doctor/medicos/consultas"> <Button className="w-full justify-start">
<Button className="bg-blue-600 hover:bg-blue-700 text-white cursor-pointer"> <Calendar className="mr-2 h-4 w-4" />
<Calendar className="mr-2 h-4 w-4 text-white" /> Ver Minhas Consultas
Ver Minhas Consultas </Button>
</Button> </Link>
</Link> </CardContent>
</CardContent> </Card>
</Card>
<Card> <Card>
<CardHeader> <CardHeader>
@ -355,16 +369,15 @@ export default function PatientDashboard() {
<CardDescription>Bloqueios e liberações eventuais de agenda</CardDescription> <CardDescription>Bloqueios e liberações eventuais de agenda</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4 grid md:grid-cols-7 gap-2"> <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
{exceptions && exceptions.length > 0 ? ( {exceptions && exceptions.length > 0 ? (
exceptions.map((ex: Exception) => { exceptions.map((ex: Exception) => {
// Formata data e hora const date = new Date(ex.date).toLocaleDateString("pt-BR", {
const date = new Date(ex.date).toLocaleDateString("pt-BR", { weekday: "long",
weekday: "long", day: "2-digit",
day: "2-digit", month: "long",
month: "long", timeZone: "UTC"
timeZone: "UTC", });
});
const startTime = formatTime(ex.start_time); const startTime = formatTime(ex.start_time);
const endTime = formatTime(ex.end_time); const endTime = formatTime(ex.end_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="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg shadow-sm">
<div className="text-center"> <div className="text-center">
<p className="font-semibold capitalize">{date}</p> <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>
<div className="text-center mt-2"> <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-sm font-medium ${ex.kind === "bloqueio" ? "text-red-600" : "text-green-600"}`}>{ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}</p>
@ -412,4 +429,4 @@ export default function PatientDashboard() {
</div> </div>
</Sidebar> </Sidebar>
); );
} }

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

@ -8,12 +8,13 @@ import {
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; 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 Link from "next/link";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { usersService } from "services/usersApi.mjs"; import { usersService } from "services/usersApi.mjs";
import { doctorsService } from "services/doctorsApi.mjs"; import { doctorsService } from "services/doctorsApi.mjs";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
import { api } from "services/api.mjs"; // <-- ADICIONEI ESTE IMPORT
export default function ManagerDashboard() { export default function ManagerDashboard() {
// 🔹 Estados para usuários // 🔹 Estados para usuários
@ -24,20 +25,48 @@ export default function ManagerDashboard() {
const [doctors, setDoctors] = useState<any[]>([]); const [doctors, setDoctors] = useState<any[]>([]);
const [loadingDoctors, setLoadingDoctors] = useState(true); const [loadingDoctors, setLoadingDoctors] = useState(true);
// 🔹 Buscar primeiro usuário // 🔹 Buscar primeiro usuário (LÓGICA ATUALIZADA)
useEffect(() => { useEffect(() => {
async function fetchFirstUser() { async function fetchFirstUser() {
try { setLoadingUser(true); // Garante que o estado de loading inicie como true
const data = await usersService.list_roles(); try {
if (Array.isArray(data) && data.length > 0) { // 1. Busca a lista de usuários com seus cargos (roles)
setFirstUser(data[0]); 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);
}
} }
} catch (error) {
console.error("Erro ao carregar usuário:", error);
} finally {
setLoadingUser(false);
}
}
fetchFirstUser(); fetchFirstUser();
}, []); }, []);
@ -71,23 +100,9 @@ export default function ManagerDashboard() {
</p> </p>
</div> </div>
{/* Cards principais */} {/* Cards principais */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <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 — Gestão de usuários */}
<Card> <Card>
@ -224,4 +239,4 @@ export default function ManagerDashboard() {
</div> </div>
</Sidebar> </Sidebar>
); );
} }

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

@ -9,47 +9,47 @@ import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea" import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox" import { Checkbox } from "@/components/ui/checkbox"
import { Save, Loader2, ArrowLeft } from "lucide-react" import { Save, Loader2, ArrowLeft } from "lucide-react"
import Sidebar from "@/components/Sidebar" import Sidebar from "@/components/Sidebar"
import { doctorsService } from "services/doctorsApi.mjs"; import { doctorsService } from "services/doctorsApi.mjs";
const UF_LIST = ["AC", "AL", "AP", "AM", "BA", "CE", "DF", "ES", "GO", "MA", "MT", "MS", "MG", "PA", "PB", "PR", "PE", "PI", "RJ", "RN", "RS", "RO", "RR", "SC", "SP", "SE", "TO"]; const UF_LIST = ["AC", "AL", "AP", "AM", "BA", "CE", "DF", "ES", "GO", "MA", "MT", "MS", "MG", "PA", "PB", "PR", "PE", "PI", "RJ", "RN", "RS", "RO", "RR", "SC", "SP", "SE", "TO"];
interface DoctorFormData { interface DoctorFormData {
nomeCompleto: string; nomeCompleto: string;
crm: string; crm: string;
crmEstado: string; crmEstado: string;
especialidade: string; especialidade: string;
cpf: string; cpf: string;
email: string; email: string;
dataNascimento: string; dataNascimento: string;
rg: string; rg: string;
telefoneCelular: string; telefoneCelular: string;
telefone2: string; telefone2: string;
cep: string; cep: string;
endereco: string; endereco: string;
numero: string; numero: string;
complemento: string; complemento: string;
bairro: string; bairro: string;
cidade: string; cidade: string;
estado: string; estado: string;
ativo: boolean; ativo: boolean;
observacoes: string; observacoes: string;
} }
const apiMap: { [K in keyof DoctorFormData]: string | null } = { const apiMap: { [K in keyof DoctorFormData]: string | null } = {
nomeCompleto: 'full_name', crm: 'crm', crmEstado: 'crm_uf', especialidade: 'specialty', nomeCompleto: 'full_name', crm: 'crm', crmEstado: 'crm_uf', especialidade: 'specialty',
cpf: 'cpf', email: 'email', dataNascimento: 'birth_date', rg: 'rg', cpf: 'cpf', email: 'email', dataNascimento: 'birth_date', rg: 'rg',
telefoneCelular: 'phone_mobile', telefone2: 'phone2', cep: 'cep', telefoneCelular: 'phone_mobile', telefone2: 'phone2', cep: 'cep',
endereco: 'street', numero: 'number', complemento: 'complement', endereco: 'street', numero: 'number', complemento: 'complement',
bairro: 'neighborhood', cidade: 'city', estado: 'state', ativo: 'active', bairro: 'neighborhood', cidade: 'city', estado: 'state', ativo: 'active',
observacoes: null, observacoes: null,
}; };
const defaultFormData: DoctorFormData = { const defaultFormData: DoctorFormData = {
nomeCompleto: '', crm: '', crmEstado: '', especialidade: '', cpf: '', email: '', nomeCompleto: '', crm: '', crmEstado: '', especialidade: '', cpf: '', email: '',
dataNascimento: '', rg: '', telefoneCelular: '', telefone2: '', cep: '', dataNascimento: '', rg: '', telefoneCelular: '', telefone2: '', cep: '',
endereco: '', numero: '', complemento: '', bairro: '', cidade: '', estado: '', endereco: '', numero: '', complemento: '', bairro: '', cidade: '', estado: '',
ativo: true, observacoes: '', ativo: true, observacoes: '',
}; };
const cleanNumber = (value: string): string => value.replace(/\D/g, ''); const cleanNumber = (value: string): string => value.replace(/\D/g, '');
@ -73,420 +73,420 @@ const formatPhoneMobile = (value: string): string => {
}; };
export default function EditarMedicoPage() { export default function EditarMedicoPage() {
const router = useRouter(); const router = useRouter();
const params = useParams(); const params = useParams();
const id = Array.isArray(params.id) ? params.id[0] : params.id; const id = Array.isArray(params.id) ? params.id[0] : params.id;
const [formData, setFormData] = useState<DoctorFormData>(defaultFormData); const [formData, setFormData] = useState<DoctorFormData>(defaultFormData);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const apiToFormMap: { [key: string]: keyof DoctorFormData } = { const apiToFormMap: { [key: string]: keyof DoctorFormData } = {
'full_name': 'nomeCompleto', 'crm': 'crm', 'crm_uf': 'crmEstado', 'specialty': 'especialidade', 'full_name': 'nomeCompleto', 'crm': 'crm', 'crm_uf': 'crmEstado', 'specialty': 'especialidade',
'cpf': 'cpf', 'email': 'email', 'birth_date': 'dataNascimento', 'rg': 'rg', 'cpf': 'cpf', 'email': 'email', 'birth_date': 'dataNascimento', 'rg': 'rg',
'phone_mobile': 'telefoneCelular', 'phone2': 'telefone2', 'cep': 'cep', 'phone_mobile': 'telefoneCelular', 'phone2': 'telefone2', 'cep': 'cep',
'street': 'endereco', 'number': 'numero', 'complement': 'complemento', 'street': 'endereco', 'number': 'numero', 'complement': 'complemento',
'neighborhood': 'bairro', 'city': 'cidade', 'state': 'estado', 'active': 'ativo' 'neighborhood': 'bairro', 'city': 'cidade', 'state': 'estado', 'active': 'ativo'
};
useEffect(() => {
if (!id) return;
const fetchDoctor = async () => {
try {
const data = await doctorsService.getById(id);
if (!data) {
setError("Médico não encontrado.");
setLoading(false);
return;
}
const initialData: Partial<DoctorFormData> = {};
Object.keys(data).forEach(key => {
const formKey = apiToFormMap[key];
if (formKey) {
let value = data[key] === null ? '' : data[key];
if (formKey === 'ativo') {
value = !!value;
} else if (typeof value !== 'boolean') {
value = String(value);
}
initialData[formKey] = value as any;
}
});
initialData.observacoes = "Observação carregada do sistema (exemplo de campo interno)";
setFormData(prev => ({ ...prev, ...initialData }));
} catch (e) {
console.error("Erro ao carregar dados:", e);
setError("Não foi possível carregar os dados do médico.");
} finally {
setLoading(false);
}
}; };
fetchDoctor();
}, [id]);
const handleInputChange = (key: keyof DoctorFormData, value: string | boolean) => {
if (typeof value === 'string') {
let maskedValue = value;
if (key === 'cpf') maskedValue = formatCPF(value);
if (key === 'cep') maskedValue = formatCEP(value);
if (key === 'telefoneCelular' || key === 'telefone2') maskedValue = formatPhoneMobile(value);
setFormData((prev) => ({ ...prev, [key]: maskedValue }));
} else {
setFormData((prev) => ({ ...prev, [key]: value }));
}
};
useEffect(() => {
if (!id) return;
const handleSubmit = async (e: React.FormEvent) => { const fetchDoctor = async () => {
e.preventDefault(); try {
setError(null); const data = await doctorsService.getById(id);
setIsSaving(true);
if (!id) {
setError("ID do médico ausente.");
setIsSaving(false);
return;
}
const finalPayload: { [key: string]: any } = {}; if (!data) {
const formKeys = Object.keys(formData) as Array<keyof DoctorFormData>; setError("Médico não encontrado.");
setLoading(false);
return;
}
const initialData: Partial<DoctorFormData> = {};
formKeys.forEach((key) => {
const apiFieldName = apiMap[key]; Object.keys(data).forEach(key => {
const formKey = apiToFormMap[key];
if (!apiFieldName) return; if (formKey) {
let value = data[key] === null ? '' : data[key];
if (formKey === 'ativo') {
value = !!value;
} else if (typeof value !== 'boolean') {
value = String(value);
}
initialData[formKey] = value as any;
}
});
initialData.observacoes = "Observação carregada do sistema (exemplo de campo interno)";
setFormData(prev => ({ ...prev, ...initialData }));
} catch (e) {
console.error("Erro ao carregar dados:", e);
setError("Não foi possível carregar os dados do médico.");
} finally {
setLoading(false);
}
};
fetchDoctor();
}, [id]);
const handleInputChange = (key: keyof DoctorFormData, value: string | boolean) => {
let value = formData[key];
if (typeof value === 'string') { if (typeof value === 'string') {
let trimmedValue = value.trim(); let maskedValue = value;
if (trimmedValue === '') { if (key === 'cpf') maskedValue = formatCPF(value);
finalPayload[apiFieldName] = null; if (key === 'cep') maskedValue = formatCEP(value);
return; if (key === 'telefoneCelular' || key === 'telefone2') maskedValue = formatPhoneMobile(value);
}
if (key === 'crmEstado' || key === 'estado') {
trimmedValue = trimmedValue.toUpperCase();
}
value = trimmedValue;
}
finalPayload[apiFieldName] = value;
});
delete finalPayload.user_id; setFormData((prev) => ({ ...prev, [key]: maskedValue }));
try { } else {
await doctorsService.update(id, finalPayload); setFormData((prev) => ({ ...prev, [key]: value }));
router.push("/manager/home"); }
} catch (e: any) { };
console.error("Erro ao salvar o médico:", e);
let detailedError = "Erro ao atualizar. Verifique os dados e tente novamente.";
if (e.message && e.message.includes("duplicate key value violates unique constraint")) { const handleSubmit = async (e: React.FormEvent) => {
detailedError = "O CPF ou CRM informado já está cadastrado em outro registro."; e.preventDefault();
} else if (e.message && e.message.includes("Detalhes:")) { setError(null);
detailedError = e.message.split("Detalhes:")[1].trim(); setIsSaving(true);
} else if (e.message) {
detailedError = e.message; if (!id) {
} setError("ID do médico ausente.");
setIsSaving(false);
setError(`Erro ao atualizar. Detalhes: ${detailedError}`); return;
} finally { }
setIsSaving(false);
const finalPayload: { [key: string]: any } = {};
const formKeys = Object.keys(formData) as Array<keyof DoctorFormData>;
formKeys.forEach((key) => {
const apiFieldName = apiMap[key];
if (!apiFieldName) return;
let value = formData[key];
if (typeof value === 'string') {
let trimmedValue = value.trim();
if (trimmedValue === '') {
finalPayload[apiFieldName] = null;
return;
}
if (key === 'crmEstado' || key === 'estado') {
trimmedValue = trimmedValue.toUpperCase();
}
value = trimmedValue;
}
finalPayload[apiFieldName] = value;
});
delete finalPayload.user_id;
try {
await doctorsService.update(id, finalPayload);
router.push("/manager/home");
} catch (e: any) {
console.error("Erro ao salvar o médico:", e);
let detailedError = "Erro ao atualizar. Verifique os dados e tente novamente.";
if (e.message && e.message.includes("duplicate key value violates unique constraint")) {
detailedError = "O CPF ou CRM informado já está cadastrado em outro registro.";
} else if (e.message && e.message.includes("Detalhes:")) {
detailedError = e.message.split("Detalhes:")[1].trim();
} else if (e.message) {
detailedError = e.message;
}
setError(`Erro ao atualizar. Detalhes: ${detailedError}`);
} finally {
setIsSaving(false);
}
};
if (loading) {
return (
<Sidebar>
<div className="flex justify-center items-center h-full w-full py-16">
<Loader2 className="w-8 h-8 animate-spin text-green-600" />
<p className="ml-2 text-gray-600">Carregando dados do médico...</p>
</div>
</Sidebar>
);
} }
};
if (loading) {
return ( return (
<Sidebar> <Sidebar>
<div className="flex justify-center items-center h-full w-full py-16"> <div className="w-full space-y-6 p-4 md:p-8">
<Loader2 className="w-8 h-8 animate-spin text-green-600" /> <div className="flex items-center justify-between">
<p className="ml-2 text-gray-600">Carregando dados do médico...</p> <div>
<h1 className="text-2xl font-bold text-gray-900">
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
</p>
</div>
<Link href="/manager/home">
<Button variant="outline">
<ArrowLeft className="w-4 h-4 mr-2" />
Voltar
</Button>
</Link>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
{error && (
<div className="p-3 bg-red-100 text-red-700 rounded-lg border border-red-300">
<p className="font-medium">Erro na Atualização:</p>
<p className="text-sm">{error}</p>
</div>
)}
<div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white">
<h2 className="text-lg font-semibold text-gray-800 border-b pb-2">
Dados Principais e Pessoais
</h2>
<div className="grid md:grid-cols-4 gap-4">
<div className="space-y-2 col-span-2">
<Label htmlFor="nomeCompleto">Nome Completo (full_name)</Label>
<Input
id="nomeCompleto"
value={formData.nomeCompleto}
onChange={(e) => handleInputChange("nomeCompleto", e.target.value)}
placeholder="Nome do Médico"
/>
</div>
<div className="space-y-2 col-span-1">
<Label htmlFor="crm">CRM</Label>
<Input
id="crm"
value={formData.crm}
onChange={(e) => handleInputChange("crm", e.target.value)}
placeholder="Ex: 123456"
/>
</div>
<div className="space-y-2 col-span-1">
<Label htmlFor="crmEstado">UF do CRM (crm_uf)</Label>
<Select value={formData.crmEstado} onValueChange={(v) => handleInputChange("crmEstado", v)}>
<SelectTrigger id="crmEstado">
<SelectValue placeholder="UF" />
</SelectTrigger>
<SelectContent>
{UF_LIST.map(uf => (
<SelectItem key={uf} value={uf}>{uf}</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className="grid md:grid-cols-3 gap-4">
<div className="space-y-2">
<Label htmlFor="especialidade">Especialidade (specialty)</Label>
<Input
id="especialidade"
value={formData.especialidade}
onChange={(e) => handleInputChange("especialidade", e.target.value)}
placeholder="Ex: Cardiologia"
/>
</div>
<div className="space-y-2">
<Label htmlFor="cpf">CPF</Label>
<Input
id="cpf"
value={formData.cpf}
onChange={(e) => handleInputChange("cpf", e.target.value)}
placeholder="000.000.000-00"
maxLength={14}
/>
</div>
<div className="space-y-2">
<Label htmlFor="rg">RG</Label>
<Input
id="rg"
value={formData.rg}
onChange={(e) => handleInputChange("rg", e.target.value)}
placeholder="00.000.000-0"
/>
</div>
</div>
<div className="grid md:grid-cols-4 gap-4">
<div className="space-y-2 col-span-2">
<Label htmlFor="email">E-mail</Label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)}
placeholder="exemplo@dominio.com"
/>
</div>
<div className="space-y-2 col-span-1">
<Label htmlFor="dataNascimento">Data de Nascimento (birth_date)</Label>
<Input
id="dataNascimento"
type="date"
value={formData.dataNascimento}
onChange={(e) => handleInputChange("dataNascimento", e.target.value)}
/>
</div>
<div className="space-y-2 flex items-end justify-center pb-1">
<div className="flex items-center space-x-2">
<Checkbox
id="ativo"
checked={formData.ativo}
onCheckedChange={(checked) => handleInputChange("ativo", checked === true)}
/>
<Label htmlFor="ativo">Médico Ativo (active)</Label>
</div>
</div>
</div>
</div>
<div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white">
<h2 className="text-lg font-semibold text-gray-800 border-b pb-2">
Contato e Endereço
</h2>
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="telefoneCelular">Telefone Celular (phone_mobile)</Label>
<Input
id="telefoneCelular"
value={formData.telefoneCelular}
onChange={(e) => handleInputChange("telefoneCelular", e.target.value)}
placeholder="(00) 00000-0000"
maxLength={15}
/>
</div>
<div className="space-y-2">
<Label htmlFor="telefone2">Telefone Adicional (phone2)</Label>
<Input
id="telefone2"
value={formData.telefone2}
onChange={(e) => handleInputChange("telefone2", e.target.value)}
placeholder="(00) 00000-0000"
maxLength={15}
/>
</div>
</div>
<div className="grid md:grid-cols-4 gap-4">
<div className="space-y-2 col-span-1">
<Label htmlFor="cep">CEP</Label>
<Input
id="cep"
value={formData.cep}
onChange={(e) => handleInputChange("cep", e.target.value)}
placeholder="00000-000"
maxLength={9}
/>
</div>
<div className="space-y-2 col-span-3">
<Label htmlFor="endereco">Logradouro (street)</Label>
<Input
id="endereco"
value={formData.endereco}
onChange={(e) => handleInputChange("endereco", e.target.value)}
placeholder="Rua, Avenida, etc."
/>
</div>
</div>
<div className="grid md:grid-cols-4 gap-4">
<div className="space-y-2 col-span-1">
<Label htmlFor="numero">Número</Label>
<Input
id="numero"
value={formData.numero}
onChange={(e) => handleInputChange("numero", e.target.value)}
placeholder="123"
/>
</div>
<div className="space-y-2 col-span-3">
<Label htmlFor="complemento">Complemento</Label>
<Input
id="complemento"
value={formData.complemento}
onChange={(e) => handleInputChange("complemento", e.target.value)}
placeholder="Apto, Bloco, etc."
/>
</div>
</div>
<div className="grid md:grid-cols-4 gap-4">
<div className="space-y-2 col-span-2">
<Label htmlFor="bairro">Bairro</Label>
<Input
id="bairro"
value={formData.bairro}
onChange={(e) => handleInputChange("bairro", e.target.value)}
placeholder="Bairro"
/>
</div>
<div className="space-y-2 col-span-1">
<Label htmlFor="cidade">Cidade</Label>
<Input
id="cidade"
value={formData.cidade}
onChange={(e) => handleInputChange("cidade", e.target.value)}
placeholder="São Paulo"
/>
</div>
<div className="space-y-2 col-span-1">
<Label htmlFor="estado">Estado (state)</Label>
<Input
id="estado"
value={formData.estado}
onChange={(e) => handleInputChange("estado", e.target.value)}
placeholder="SP"
/>
</div>
</div>
</div>
<div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white">
<h2 className="text-lg font-semibold text-gray-800 border-b pb-2">
Observações (Apenas internas)
</h2>
<Textarea
id="observacoes"
value={formData.observacoes}
onChange={(e) => handleInputChange("observacoes", e.target.value)}
placeholder="Notas internas sobre o médico..."
className="min-h-[100px]"
/>
</div>
<div className="flex justify-end gap-4 pb-8 pt-4">
<Link href="/manager/home">
<Button type="button" variant="outline" disabled={isSaving}>
Cancelar
</Button>
</Link>
<Button
type="submit"
className="bg-green-600 hover:bg-green-700"
disabled={isSaving}
>
{isSaving ? (
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
) : (
<Save className="w-4 h-4 mr-2" />
)}
{isSaving ? "Salvando..." : "Salvar Alterações"}
</Button>
</div>
</form>
</div> </div>
</Sidebar> </Sidebar>
); );
}
return (
<Sidebar>
<div className="w-full space-y-6 p-4 md:p-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900">
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}).
</p>
</div>
<Link href="/manager/home">
<Button variant="outline">
<ArrowLeft className="w-4 h-4 mr-2" />
Voltar
</Button>
</Link>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
{error && (
<div className="p-3 bg-red-100 text-red-700 rounded-lg border border-red-300">
<p className="font-medium">Erro na Atualização:</p>
<p className="text-sm">{error}</p>
</div>
)}
<div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white">
<h2 className="text-lg font-semibold text-gray-800 border-b pb-2">
Dados Principais e Pessoais
</h2>
<div className="grid md:grid-cols-4 gap-4">
<div className="space-y-2 col-span-2">
<Label htmlFor="nomeCompleto">Nome Completo (full_name)</Label>
<Input
id="nomeCompleto"
value={formData.nomeCompleto}
onChange={(e) => handleInputChange("nomeCompleto", e.target.value)}
placeholder="Nome do Médico"
/>
</div>
<div className="space-y-2 col-span-1">
<Label htmlFor="crm">CRM</Label>
<Input
id="crm"
value={formData.crm}
onChange={(e) => handleInputChange("crm", e.target.value)}
placeholder="Ex: 123456"
/>
</div>
<div className="space-y-2 col-span-1">
<Label htmlFor="crmEstado">UF do CRM (crm_uf)</Label>
<Select value={formData.crmEstado} onValueChange={(v) => handleInputChange("crmEstado", v)}>
<SelectTrigger id="crmEstado">
<SelectValue placeholder="UF" />
</SelectTrigger>
<SelectContent>
{UF_LIST.map(uf => (
<SelectItem key={uf} value={uf}>{uf}</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className="grid md:grid-cols-3 gap-4">
<div className="space-y-2">
<Label htmlFor="especialidade">Especialidade (specialty)</Label>
<Input
id="especialidade"
value={formData.especialidade}
onChange={(e) => handleInputChange("especialidade", e.target.value)}
placeholder="Ex: Cardiologia"
/>
</div>
<div className="space-y-2">
<Label htmlFor="cpf">CPF</Label>
<Input
id="cpf"
value={formData.cpf}
onChange={(e) => handleInputChange("cpf", e.target.value)}
placeholder="000.000.000-00"
maxLength={14}
/>
</div>
<div className="space-y-2">
<Label htmlFor="rg">RG</Label>
<Input
id="rg"
value={formData.rg}
onChange={(e) => handleInputChange("rg", e.target.value)}
placeholder="00.000.000-0"
/>
</div>
</div>
<div className="grid md:grid-cols-4 gap-4">
<div className="space-y-2 col-span-2">
<Label htmlFor="email">E-mail</Label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)}
placeholder="exemplo@dominio.com"
/>
</div>
<div className="space-y-2 col-span-1">
<Label htmlFor="dataNascimento">Data de Nascimento (birth_date)</Label>
<Input
id="dataNascimento"
type="date"
value={formData.dataNascimento}
onChange={(e) => handleInputChange("dataNascimento", e.target.value)}
/>
</div>
<div className="space-y-2 flex items-end justify-center pb-1">
<div className="flex items-center space-x-2">
<Checkbox
id="ativo"
checked={formData.ativo}
onCheckedChange={(checked) => handleInputChange("ativo", checked === true)}
/>
<Label htmlFor="ativo">Médico Ativo (active)</Label>
</div>
</div>
</div>
</div>
<div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white">
<h2 className="text-lg font-semibold text-gray-800 border-b pb-2">
Contato e Endereço
</h2>
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="telefoneCelular">Telefone Celular (phone_mobile)</Label>
<Input
id="telefoneCelular"
value={formData.telefoneCelular}
onChange={(e) => handleInputChange("telefoneCelular", e.target.value)}
placeholder="(00) 00000-0000"
maxLength={15}
/>
</div>
<div className="space-y-2">
<Label htmlFor="telefone2">Telefone Adicional (phone2)</Label>
<Input
id="telefone2"
value={formData.telefone2}
onChange={(e) => handleInputChange("telefone2", e.target.value)}
placeholder="(00) 00000-0000"
maxLength={15}
/>
</div>
</div>
<div className="grid md:grid-cols-4 gap-4">
<div className="space-y-2 col-span-1">
<Label htmlFor="cep">CEP</Label>
<Input
id="cep"
value={formData.cep}
onChange={(e) => handleInputChange("cep", e.target.value)}
placeholder="00000-000"
maxLength={9}
/>
</div>
<div className="space-y-2 col-span-3">
<Label htmlFor="endereco">Logradouro (street)</Label>
<Input
id="endereco"
value={formData.endereco}
onChange={(e) => handleInputChange("endereco", e.target.value)}
placeholder="Rua, Avenida, etc."
/>
</div>
</div>
<div className="grid md:grid-cols-4 gap-4">
<div className="space-y-2 col-span-1">
<Label htmlFor="numero">Número</Label>
<Input
id="numero"
value={formData.numero}
onChange={(e) => handleInputChange("numero", e.target.value)}
placeholder="123"
/>
</div>
<div className="space-y-2 col-span-3">
<Label htmlFor="complemento">Complemento</Label>
<Input
id="complemento"
value={formData.complemento}
onChange={(e) => handleInputChange("complemento", e.target.value)}
placeholder="Apto, Bloco, etc."
/>
</div>
</div>
<div className="grid md:grid-cols-4 gap-4">
<div className="space-y-2 col-span-2">
<Label htmlFor="bairro">Bairro</Label>
<Input
id="bairro"
value={formData.bairro}
onChange={(e) => handleInputChange("bairro", e.target.value)}
placeholder="Bairro"
/>
</div>
<div className="space-y-2 col-span-1">
<Label htmlFor="cidade">Cidade</Label>
<Input
id="cidade"
value={formData.cidade}
onChange={(e) => handleInputChange("cidade", e.target.value)}
placeholder="São Paulo"
/>
</div>
<div className="space-y-2 col-span-1">
<Label htmlFor="estado">Estado (state)</Label>
<Input
id="estado"
value={formData.estado}
onChange={(e) => handleInputChange("estado", e.target.value)}
placeholder="SP"
/>
</div>
</div>
</div>
<div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white">
<h2 className="text-lg font-semibold text-gray-800 border-b pb-2">
Observações (Apenas internas)
</h2>
<Textarea
id="observacoes"
value={formData.observacoes}
onChange={(e) => handleInputChange("observacoes", e.target.value)}
placeholder="Notas internas sobre o médico..."
className="min-h-[100px]"
/>
</div>
<div className="flex justify-end gap-4 pb-8 pt-4">
<Link href="/manager/home">
<Button type="button" variant="outline" disabled={isSaving}>
Cancelar
</Button>
</Link>
<Button
type="submit"
className="bg-green-600 hover:bg-green-700"
disabled={isSaving}
>
{isSaving ? (
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
) : (
<Save className="w-4 h-4 mr-2" />
)}
{isSaving ? "Salvando..." : "Salvar Alterações"}
</Button>
</div>
</form>
</div>
</Sidebar>
);
} }

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

@ -34,58 +34,59 @@ import Sidebar from "@/components/Sidebar";
const PAGE_SIZE = 5; const PAGE_SIZE = 5;
export default function PacientesPage() { export default function PacientesPage() {
// --- ESTADOS DE DADOS E GERAL --- // --- ESTADOS DE DADOS E GERAL ---
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const [convenioFilter, setConvenioFilter] = useState("all"); const [convenioFilter, setConvenioFilter] = useState("all");
const [vipFilter, setVipFilter] = useState("all"); const [vipFilter, setVipFilter] = useState("all");
// Lista completa, carregada da API uma única vez // Lista completa, carregada da API uma única vez
const [allPatients, setAllPatients] = useState<any[]>([]); const [allPatients, setAllPatients] = useState<any[]>([]);
// Lista após a aplicação dos filtros (base para a paginação) // Lista após a aplicação dos filtros (base para a paginação)
const [filteredPatients, setFilteredPatients] = useState<any[]>([]); const [filteredPatients, setFilteredPatients] = useState<any[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// --- ESTADOS DE PAGINAÇÃO --- // --- ESTADOS DE PAGINAÇÃO ---
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
// CÁLCULO DA PAGINAÇÃO // CÁLCULO DA PAGINAÇÃO
const totalPages = Math.ceil(filteredPatients.length / PAGE_SIZE); const totalPages = Math.ceil(filteredPatients.length / PAGE_SIZE);
const startIndex = (page - 1) * PAGE_SIZE; const startIndex = (page - 1) * PAGE_SIZE;
const endIndex = startIndex + PAGE_SIZE; const endIndex = startIndex + PAGE_SIZE;
// Pacientes a serem exibidos na tabela (aplicando a paginação) // Pacientes a serem exibidos na tabela (aplicando a paginação)
const currentPatients = filteredPatients.slice(startIndex, endIndex); const currentPatients = filteredPatients.slice(startIndex, endIndex);
// --- ESTADOS DE DIALOGS --- // --- ESTADOS DE DIALOGS ---
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [patientToDelete, setPatientToDelete] = useState<string | null>(null); const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false); const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
const [patientDetails, setPatientDetails] = useState<any | null>(null); const [patientDetails, setPatientDetails] = useState<any | null>(null);
// --- FUNÇÕES DE LÓGICA --- // --- FUNÇÕES DE LÓGICA ---
// 1. Função para carregar TODOS os pacientes da API // 1. Função para carregar TODOS os pacientes da API
const fetchAllPacientes = useCallback(async () => { const fetchAllPacientes = useCallback(
setLoading(true); async () => {
setError(null); setLoading(true);
try { setError(null);
// Como o backend retorna um array, chamamos sem paginação try {
const res = await patientsService.list(); // Como o backend retorna um array, chamamos sem paginação
const res = await patientsService.list();
const mapped = res.map((p: any) => ({ const mapped = res.map((p: any) => ({
id: String(p.id ?? ""), id: String(p.id ?? ""),
nome: p.full_name ?? "—", nome: p.full_name ?? "—",
telefone: p.phone_mobile ?? p.phone1 ?? "—", telefone: p.phone_mobile ?? p.phone1 ?? "—",
cidade: p.city ?? "—", cidade: p.city ?? "—",
estado: p.state ?? "—", estado: p.state ?? "—",
// Formate as datas se necessário, aqui usamos como string // Formate as datas se necessário, aqui usamos como string
ultimoAtendimento: p.last_visit_at?.split("T")[0] ?? "—", ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
proximoAtendimento: p.next_appointment_at?.split("T")[0] ?? "—", proximoAtendimento: p.next_appointment_at ? p.next_appointment_at.split('T')[0].split('-').reverse().join('-') : "—",
vip: Boolean(p.vip ?? false), vip: Boolean(p.vip ?? false),
convenio: p.convenio ?? "Particular", // Define um valor padrão convenio: p.convenio ?? "Particular", // Define um valor padrão
status: p.status ?? undefined, status: p.status ?? undefined,
})); }));
setAllPatients(mapped); setAllPatients(mapped);
} catch (e: any) { } catch (e: any) {
@ -96,31 +97,32 @@ export default function PacientesPage() {
} }
}, []); }, []);
// 2. Efeito para aplicar filtros e calcular a lista filtrada (chama-se quando allPatients ou filtros mudam) // 2. Efeito para aplicar filtros e calcular a lista filtrada (chama-se quando allPatients ou filtros mudam)
useEffect(() => { useEffect(() => {
const filtered = allPatients.filter((patient) => { const filtered = allPatients.filter((patient) => {
// Filtro por termo de busca (Nome ou Telefone) // Filtro por termo de busca (Nome ou Telefone)
const matchesSearch = const matchesSearch =
patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
patient.telefone?.includes(searchTerm); patient.telefone?.includes(searchTerm);
// Filtro por Convênio // Filtro por Convênio
const matchesConvenio = const matchesConvenio =
convenioFilter === "all" || patient.convenio === convenioFilter; convenioFilter === "all" ||
patient.convenio === convenioFilter;
// Filtro por VIP // Filtro por VIP
const matchesVip = const matchesVip =
vipFilter === "all" || vipFilter === "all" ||
(vipFilter === "vip" && patient.vip) || (vipFilter === "vip" && patient.vip) ||
(vipFilter === "regular" && !patient.vip); (vipFilter === "regular" && !patient.vip);
return matchesSearch && matchesConvenio && matchesVip; return matchesSearch && matchesConvenio && matchesVip;
}); });
setFilteredPatients(filtered); setFilteredPatients(filtered);
// Garante que a página atual seja válida após a filtragem // Garante que a página atual seja válida após a filtragem
setPage(1); setPage(1);
}, [allPatients, searchTerm, convenioFilter, vipFilter]); }, [allPatients, searchTerm, convenioFilter, vipFilter]);
// 3. Efeito inicial para buscar os pacientes // 3. Efeito inicial para buscar os pacientes
useEffect(() => { useEffect(() => {
@ -128,18 +130,18 @@ export default function PacientesPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
// --- LÓGICA DE AÇÕES (DELETAR / VER DETALHES) --- // --- LÓGICA DE AÇÕES (DELETAR / VER DETALHES) ---
const openDetailsDialog = async (patientId: string) => { const openDetailsDialog = async (patientId: string) => {
setDetailsDialogOpen(true); setDetailsDialogOpen(true);
setPatientDetails(null); setPatientDetails(null);
try { try {
const res = await patientsService.getById(patientId); const res = await patientsService.getById(patientId);
setPatientDetails(Array.isArray(res) ? res[0] : res); // Supondo que retorne um array com um item setPatientDetails(Array.isArray(res) ? res[0] : res); // Supondo que retorne um array com um item
} catch (e: any) { } catch (e: any) {
setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" }); setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
} }
}; };
const handleDeletePatient = async (patientId: string) => { const handleDeletePatient = async (patientId: string) => {
try { try {
@ -175,20 +177,20 @@ export default function PacientesPage() {
</div> </div>
</div> </div>
{/* Bloco de Filtros (Responsividade APLICADA) */} {/* Bloco de Filtros (Responsividade APLICADA) */}
{/* Adicionado flex-wrap para permitir que os itens quebrem para a linha de baixo */} {/* Adicionado flex-wrap para permitir que os itens quebrem para a linha de baixo */}
<div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border border-border"> <div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border border-border">
<Filter className="w-5 h-5 text-gray-400" /> <Filter className="w-5 h-5 text-gray-400" />
{/* Busca - Ocupa 100% no mobile, depois cresce */} {/* Busca - Ocupa 100% no mobile, depois cresce */}
<input <input
type="text" type="text"
placeholder="Buscar por nome ou telefone..." placeholder="Buscar por nome ou telefone..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
// w-full no mobile, depois flex-grow para ocupar o espaço disponível // w-full no mobile, depois flex-grow para ocupar o espaço disponível
className="w-full sm:flex-grow sm:max-w-[300px] p-2 border rounded-md text-sm" className="w-full sm:flex-grow sm:max-w-[300px] p-2 border rounded-md text-sm"
/> />
{/* Convênio - Ocupa a largura total em telas pequenas, depois se ajusta */} {/* Convênio - 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-[200px]"> <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]">
@ -211,138 +213,91 @@ export default function PacientesPage() {
</Select> </Select>
</div> </div>
{/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */} {/* 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]"> <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"> <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span>
VIP <Select value={vipFilter} onValueChange={setVipFilter}>
</span> <SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */}
<Select value={vipFilter} onValueChange={setVipFilter}> <SelectValue placeholder="VIP" />
<SelectTrigger className="w-full sm:w-32"> </SelectTrigger>
{" "} <SelectContent>
{/* w-full para mobile, w-32 para sm+ */} <SelectItem value="all">Todos</SelectItem>
<SelectValue placeholder="VIP" /> <SelectItem value="vip">VIP</SelectItem>
</SelectTrigger> <SelectItem value="regular">Regular</SelectItem>
<SelectContent> </SelectContent>
<SelectItem value="all">Todos</SelectItem> </Select>
<SelectItem value="vip">VIP</SelectItem> </div>
<SelectItem value="regular">Regular</SelectItem>
</SelectContent>
</Select>
</div>
{/* Aniversariantes - Ocupa 100% no mobile, e se alinha à direita no md+ */} {/* Aniversariantes - Ocupa 100% no mobile, e se alinha à direita no md+ */}
<Button variant="outline" className="w-full md:w-auto md:ml-auto"> <Button variant="outline" className="w-full md:w-auto md:ml-auto">
<Calendar className="w-4 h-4 mr-2" /> <Calendar className="w-4 h-4 mr-2" />
Aniversariantes Aniversariantes
</Button> </Button>
</div> </div>
{/* --- SEÇÃO DE TABELA (VISÍVEL EM TELAS MAIORES OU IGUAIS A MD) --- */} {/* --- 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+ */} {/* 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="bg-white rounded-lg border border-gray-200 shadow-md hidden md:block">
<div className="overflow-x-auto"> <div className="overflow-x-auto"> {/* Permite rolagem horizontal se a tabela for muito larga */}
{" "} {error ? (
{/* Permite rolagem horizontal se a tabela for muito larga */} <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
{error ? ( ) : loading ? (
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div> <div className="p-6 text-center text-gray-500 flex items-center justify-center">
) : loading ? ( <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes...
<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...
</div>
) : (
<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>
{/* 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>
</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"}
</td>
</tr>
) : (
currentPatients.map((patient) => (
<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> </div>
) : (
<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>
{/* 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>
</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"}
</td>
</tr>
) : (
currentPatients.map((patient) => (
<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-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>
</div>
</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>
<span className="font-medium text-gray-900"> <td className="p-4">
{patient.nome} <DropdownMenu>
{patient.vip && ( <DropdownMenuTrigger asChild>
<span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full"> <div className="text-blue-600 cursor-pointer">Ações</div>
VIP </DropdownMenuTrigger>
</span> <DropdownMenuContent align="end">
)} <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
</span> <Eye className="w-4 h-4 mr-2" />
</div> Ver detalhes
</td> </DropdownMenuItem>
<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">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="text-blue-600 cursor-pointer">
Ações
</div>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() =>
openDetailsDialog(String(patient.id))
}
>
<Eye className="w-4 h-4 mr-2" />
Ver detalhes
</DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link <Link
@ -379,249 +334,208 @@ export default function PacientesPage() {
</div> </div>
</div> </div>
{/* --- SEÇÃO DE CARDS (VISÍVEL APENAS EM TELAS MENORES QUE MD) --- */} {/* --- SEÇÃO DE CARDS (VISÍVEL APENAS EM TELAS MENORES QUE MD) --- */}
{/* Garantir que os cards apareçam em telas menores e se escondam em MD+ */} {/* Garantir que os cards apareçam em telas menores e se escondam em MD+ */}
<div className="bg-white rounded-lg border border-gray-200 shadow-md p-4 block md:hidden"> <div className="bg-white rounded-lg border border-gray-200 shadow-md p-4 block md:hidden">
{error ? ( {error ? (
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div> <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
) : loading ? ( ) : loading ? (
<div className="p-6 text-center text-gray-500 flex items-center justify-center"> <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" />{" "} <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes...
Carregando pacientes... </div>
</div> ) : filteredPatients.length === 0 ? (
) : filteredPatients.length === 0 ? ( <div className="p-8 text-center text-gray-500">
<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 </div>
? "Nenhum paciente cadastrado" ) : (
: "Nenhum paciente encontrado com os filtros aplicados"} <div className="space-y-4">
</div> {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 className="space-y-4"> <div className="flex-grow mb-2 sm:mb-0">
{currentPatients.map((patient) => ( <div className="font-semibold text-lg text-gray-900 flex items-center">
<div {patient.nome}
key={patient.id} {patient.vip && (
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" <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">VIP</span>
> )}
<div className="flex-grow mb-2 sm:mb-0"> </div>
<div className="font-semibold text-lg text-gray-900 flex items-center"> <div className="text-sm text-gray-600">Telefone: {patient.telefone}</div>
{patient.nome} <div className="text-sm text-gray-600">Convênio: {patient.convenio}</div>
{patient.vip && ( </div>
<span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full"> <DropdownMenu>
VIP <DropdownMenuTrigger asChild>
</span> <div className="w-full"><Button variant="outline" className="w-full">Ações</Button></div>
)} </DropdownMenuTrigger>
</div> <DropdownMenuContent align="end">
<div className="text-sm text-gray-600"> <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
Telefone: {patient.telefone} <Eye className="w-4 h-4 mr-2" />
</div> Ver detalhes
<div className="text-sm text-gray-600"> </DropdownMenuItem>
Convênio: {patient.convenio}
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="w-full">
<Button variant="outline" className="w-full">
Ações
</Button>
</div>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() => openDetailsDialog(String(patient.id))}
>
<Eye className="w-4 h-4 mr-2" />
Ver detalhes
</DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link <Link href={`/secretary/pacientes/${patient.id}/editar`} className="flex items-center w-full">
href={`/secretary/pacientes/${patient.id}/editar`} <Edit className="w-4 h-4 mr-2" />
className="flex items-center w-full" Editar
> </Link>
<Edit className="w-4 h-4 mr-2" /> </DropdownMenuItem>
Editar
</Link>
</DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Calendar className="w-4 h-4 mr-2" /> <Calendar className="w-4 h-4 mr-2" />
Marcar consulta Marcar consulta
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
className="text-red-600" <Trash2 className="w-4 h-4 mr-2" />
onClick={() => openDeleteDialog(String(patient.id))} Excluir
> </DropdownMenuItem>
<Trash2 className="w-4 h-4 mr-2" /> </DropdownMenuContent>
Excluir </DropdownMenu>
</DropdownMenuItem> </div>
</DropdownMenuContent> ))}
</DropdownMenu> </div>
)}
</div> </div>
))}
</div>
)}
</div>
{/* Paginação */} {/* Paginação */}
{totalPages > 1 && !loading && ( {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 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"> <div className="flex space-x-2 flex-wrap justify-center"> {/* Adicionado flex-wrap e justify-center para botões da paginação */}
{" "} <Button
{/* Adicionado flex-wrap e justify-center para botões da paginação */} onClick={() => setPage((prev) => Math.max(1, prev - 1))}
<Button disabled={page === 1}
onClick={() => setPage((prev) => Math.max(1, prev - 1))} variant="outline"
disabled={page === 1} size="lg"
variant="outline" >
size="lg" &lt; Anterior
> </Button>
&lt; Anterior
</Button>
{Array.from({ length: totalPages }, (_, index) => index + 1)
.slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
.map((pageNumber) => (
<Button
key={pageNumber}
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"
}
>
{pageNumber}
</Button>
))}
<Button
onClick={() =>
setPage((prev) => Math.min(totalPages, prev + 1))
}
disabled={page === totalPages}
variant="outline"
size="lg"
>
Próximo &gt;
</Button>
</div>
</div>
)}
{/* AlertDialogs (Permanecem os mesmos) */} {Array.from({ length: totalPages }, (_, index) => index + 1)
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}> .slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
<AlertDialogContent> .map((pageNumber) => (
<AlertDialogHeader> <Button
<AlertDialogTitle>Confirmar exclusão</AlertDialogTitle> key={pageNumber}
<AlertDialogDescription> onClick={() => setPage(pageNumber)}
Tem certeza que deseja excluir este paciente? Esta ação não pode variant={pageNumber === page ? "default" : "outline"}
ser desfeita. size="lg"
</AlertDialogDescription> className={pageNumber === page ? "bg-green-600 hover:bg-green-700 text-white" : "text-gray-700"}
</AlertDialogHeader> >
<AlertDialogFooter> {pageNumber}
<AlertDialogCancel>Cancelar</AlertDialogCancel> </Button>
<AlertDialogAction ))}
onClick={() =>
patientToDelete && handleDeletePatient(patientToDelete)
}
className="bg-red-600 hover:bg-red-700"
>
Excluir
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<AlertDialog <Button
open={detailsDialogOpen} onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
onOpenChange={setDetailsDialogOpen} disabled={page === totalPages}
> variant="outline"
<AlertDialogContent> size="lg"
<AlertDialogHeader> >
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle> Próximo &gt;
<AlertDialogDescription> </Button>
{patientDetails === null ? ( </div>
<div className="text-gray-500">
<Loader2 className="w-6 h-6 animate-spin mx-auto text-green-600 my-4" />
Carregando...
</div>
) : patientDetails?.error ? (
<div className="text-red-600 p-4">{patientDetails.error}</div>
) : (
<div className="grid gap-4 py-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<p className="font-semibold">Nome Completo</p>
<p>{patientDetails.full_name}</p>
</div>
<div>
<p className="font-semibold">Email</p>
<p>{patientDetails.email}</p>
</div>
<div>
<p className="font-semibold">Telefone</p>
<p>{patientDetails.phone_mobile}</p>
</div>
<div>
<p className="font-semibold">Data de Nascimento</p>
<p>{patientDetails.birth_date}</p>
</div>
<div>
<p className="font-semibold">CPF</p>
<p>{patientDetails.cpf}</p>
</div>
<div>
<p className="font-semibold">Tipo Sanguíneo</p>
<p>{patientDetails.blood_type}</p>
</div>
<div>
<p className="font-semibold">Peso (kg)</p>
<p>{patientDetails.weight_kg}</p>
</div>
<div>
<p className="font-semibold">Altura (m)</p>
<p>{patientDetails.height_m}</p>
</div>
</div> </div>
<div className="border-t pt-4 mt-4">
<h3 className="font-semibold mb-2">Endereço</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<p className="font-semibold">Rua</p>
<p>{`${patientDetails.street}, ${patientDetails.number}`}</p>
</div>
<div>
<p className="font-semibold">Complemento</p>
<p>{patientDetails.complement}</p>
</div>
<div>
<p className="font-semibold">Bairro</p>
<p>{patientDetails.neighborhood}</p>
</div>
<div>
<p className="font-semibold">Cidade</p>
<p>{patientDetails.cidade}</p>
</div>
<div>
<p className="font-semibold">Estado</p>
<p>{patientDetails.estado}</p>
</div>
<div>
<p className="font-semibold">CEP</p>
<p>{patientDetails.cep}</p>
</div>
</div>
</div>
</div>
)} )}
</AlertDialogDescription>
</AlertDialogHeader> {/* AlertDialogs (Permanecem os mesmos) */}
<AlertDialogFooter> <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogCancel>Fechar</AlertDialogCancel> <AlertDialogContent>
</AlertDialogFooter> <AlertDialogHeader>
</AlertDialogContent> <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
</AlertDialog> <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
</div> </AlertDialogHeader>
</Sidebar> <AlertDialogFooter>
); <AlertDialogCancel>Cancelar</AlertDialogCancel>
<AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700">
Excluir
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
<AlertDialogDescription>
{patientDetails === null ? (
<div className="text-gray-500">
<Loader2 className="w-6 h-6 animate-spin mx-auto text-green-600 my-4" />
Carregando...
</div>
) : patientDetails?.error ? (
<div className="text-red-600 p-4">{patientDetails.error}</div>
) : (
<div className="grid gap-4 py-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<p className="font-semibold">Nome Completo</p>
<p>{patientDetails.full_name}</p>
</div>
<div>
<p className="font-semibold">Email</p>
<p>{patientDetails.email}</p>
</div>
<div>
<p className="font-semibold">Telefone</p>
<p>{patientDetails.phone_mobile}</p>
</div>
<div>
<p className="font-semibold">Data de Nascimento</p>
<p>{patientDetails.birth_date}</p>
</div>
<div>
<p className="font-semibold">CPF</p>
<p>{patientDetails.cpf}</p>
</div>
<div>
<p className="font-semibold">Tipo Sanguíneo</p>
<p>{patientDetails.blood_type}</p>
</div>
<div>
<p className="font-semibold">Peso (kg)</p>
<p>{patientDetails.weight_kg}</p>
</div>
<div>
<p className="font-semibold">Altura (m)</p>
<p>{patientDetails.height_m}</p>
</div>
</div>
<div className="border-t pt-4 mt-4">
<h3 className="font-semibold mb-2">Endereço</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<p className="font-semibold">Rua</p>
<p>{`${patientDetails.street}, ${patientDetails.number}`}</p>
</div>
<div>
<p className="font-semibold">Complemento</p>
<p>{patientDetails.complement}</p>
</div>
<div>
<p className="font-semibold">Bairro</p>
<p>{patientDetails.neighborhood}</p>
</div>
<div>
<p className="font-semibold">Cidade</p>
<p>{patientDetails.cidade}</p>
</div>
<div>
<p className="font-semibold">Estado</p>
<p>{patientDetails.estado}</p>
</div>
<div>
<p className="font-semibold">CEP</p>
<p>{patientDetails.cep}</p>
</div>
</div>
</div>
</div>
)}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Fechar</AlertDialogCancel>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</Sidebar>
);
} }