develop #83
@ -3,25 +3,18 @@
|
|||||||
// Imports mantidos
|
// Imports mantidos
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
// --- Imports do EventManager (NOVO) - MANTIDOS ---
|
// --- Imports do EventManager (NOVO) - MANTIDOS ---
|
||||||
import { EventManager, type Event } from "@/components/features/general/event-manager";
|
import { EventManager, type Event } from "@/components/features/general/event-manager";
|
||||||
import { v4 as uuidv4 } from 'uuid'; // Usado para IDs de fallback
|
import { v4 as uuidv4 } from 'uuid'; // Usado para IDs de fallback
|
||||||
|
|
||||||
// Imports mantidos
|
// Imports mantidos
|
||||||
import { Sidebar } from "@/components/layout/sidebar";
|
|
||||||
import { PagesHeader } from "@/components/features/dashboard/header";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { useAuth } from "@/hooks/useAuth";
|
||||||
import { mockWaitingList } from "@/lib/mocks/appointment-mocks";
|
import { mockWaitingList } from "@/lib/mocks/appointment-mocks";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/components/ui/dropdown-menu";
|
|
||||||
import { ThreeDWallCalendar, CalendarEvent } from "@/components/ui/three-dwall-calendar"; // Calendário 3D mantido
|
import { ThreeDWallCalendar, CalendarEvent } from "@/components/ui/three-dwall-calendar"; // Calendário 3D mantido
|
||||||
|
import { PatientRegistrationForm } from "@/components/features/forms/patient-registration-form";
|
||||||
|
|
||||||
const ListaEspera = dynamic(
|
const ListaEspera = dynamic(
|
||||||
() => import("@/components/features/agendamento/ListaEspera"),
|
() => import("@/components/features/agendamento/ListaEspera"),
|
||||||
@ -29,28 +22,38 @@ const ListaEspera = dynamic(
|
|||||||
);
|
);
|
||||||
|
|
||||||
export default function AgendamentoPage() {
|
export default function AgendamentoPage() {
|
||||||
|
const { user, token } = useAuth();
|
||||||
const [appointments, setAppointments] = useState<any[]>([]);
|
const [appointments, setAppointments] = useState<any[]>([]);
|
||||||
const [waitingList, setWaitingList] = useState(mockWaitingList);
|
const [activeTab, setActiveTab] = useState<"calendar" | "3d">("calendar");
|
||||||
const [activeTab, setActiveTab] = useState<"calendar" | "espera" | "3d">("calendar");
|
|
||||||
|
|
||||||
const [threeDEvents, setThreeDEvents] = useState<CalendarEvent[]>([]);
|
const [threeDEvents, setThreeDEvents] = useState<CalendarEvent[]>([]);
|
||||||
|
|
||||||
|
// Padroniza idioma da página para pt-BR (afeta componentes que usam o lang do documento)
|
||||||
|
useEffect(() => {
|
||||||
|
try {
|
||||||
|
// Atributos no <html>
|
||||||
|
document.documentElement.lang = "pt-BR";
|
||||||
|
document.documentElement.setAttribute("xml:lang", "pt-BR");
|
||||||
|
document.documentElement.setAttribute("data-lang", "pt-BR");
|
||||||
|
// Cookie de locale (usado por apps com i18n)
|
||||||
|
const oneYear = 60 * 60 * 24 * 365;
|
||||||
|
document.cookie = `NEXT_LOCALE=pt-BR; Path=/; Max-Age=${oneYear}; SameSite=Lax`;
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
// --- NOVO ESTADO ---
|
// --- NOVO ESTADO ---
|
||||||
// Estado para alimentar o NOVO EventManager com dados da API
|
// Estado para alimentar o NOVO EventManager com dados da API
|
||||||
const [managerEvents, setManagerEvents] = useState<Event[]>([]);
|
const [managerEvents, setManagerEvents] = useState<Event[]>([]);
|
||||||
const [managerLoading, setManagerLoading] = useState<boolean>(true);
|
const [managerLoading, setManagerLoading] = useState<boolean>(true);
|
||||||
|
|
||||||
|
// Estado para o formulário de registro de paciente
|
||||||
|
const [showPatientForm, setShowPatientForm] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.addEventListener("keydown", (event) => {
|
document.addEventListener("keydown", (event) => {
|
||||||
if (event.key === "c") {
|
if (event.key === "c") setActiveTab("calendar");
|
||||||
setActiveTab("calendar");
|
if (event.key === "3") setActiveTab("3d");
|
||||||
}
|
|
||||||
if (event.key === "f") {
|
|
||||||
setActiveTab("espera");
|
|
||||||
}
|
|
||||||
if (event.key === "3") {
|
|
||||||
setActiveTab("3d");
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@ -87,17 +90,22 @@ export default function AgendamentoPage() {
|
|||||||
const patient = (patientsById[String(obj.patient_id)]?.full_name) || obj.patient_name || obj.patient_full_name || obj.patient || 'Paciente';
|
const patient = (patientsById[String(obj.patient_id)]?.full_name) || obj.patient_name || obj.patient_full_name || obj.patient || 'Paciente';
|
||||||
const title = `${patient}: ${obj.appointment_type ?? obj.type ?? ''}`.trim();
|
const title = `${patient}: ${obj.appointment_type ?? obj.type ?? ''}`.trim();
|
||||||
|
|
||||||
let color = "gray"; // Cor padrão
|
// Mapeamento de cores padronizado:
|
||||||
if (obj.status === 'confirmed') color = 'green';
|
// azul = solicitado; verde = confirmado; laranja = pendente; vermelho = cancelado; azul como fallback
|
||||||
if (obj.status === 'pending') color = 'orange';
|
const status = String(obj.status || "").toLowerCase();
|
||||||
|
let color: Event["color"] = "blue";
|
||||||
|
if (status === "confirmed" || status === "confirmado") color = "green";
|
||||||
|
else if (status === "pending" || status === "pendente") color = "orange";
|
||||||
|
else if (status === "canceled" || status === "cancelado" || status === "cancelled") color = "red";
|
||||||
|
else if (status === "requested" || status === "solicitado") color = "blue";
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id: obj.id || uuidv4(), // Usa ID da API ou gera um
|
id: obj.id || uuidv4(),
|
||||||
title: title,
|
title,
|
||||||
description: `Agendamento para ${patient}. Status: ${obj.status || 'N/A'}.`,
|
description: `Agendamento para ${patient}. Status: ${obj.status || 'N/A'}.`,
|
||||||
startTime: start,
|
startTime: start,
|
||||||
endTime: end,
|
endTime: end,
|
||||||
color: color,
|
color,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
setManagerEvents(newManagerEvents);
|
setManagerEvents(newManagerEvents);
|
||||||
@ -146,10 +154,6 @@ export default function AgendamentoPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleNotifyPatient = (patientId: string) => {
|
|
||||||
console.log(`Notificando paciente ${patientId}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAddEvent = (event: CalendarEvent) => {
|
const handleAddEvent = (event: CalendarEvent) => {
|
||||||
setThreeDEvents((prev) => [...prev, event]);
|
setThreeDEvents((prev) => [...prev, event]);
|
||||||
};
|
};
|
||||||
@ -172,26 +176,10 @@ export default function AgendamentoPage() {
|
|||||||
Navegue através dos atalhos: Calendário (C), Fila de espera (F) ou 3D (3).
|
Navegue através dos atalhos: Calendário (C), Fila de espera (F) ou 3D (3).
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex space-x-2">
|
<div className="flex space-x-2 items-center">
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger className="bg-primary hover:bg-primary/90 px-5 py-1 text-primary-foreground rounded-sm">
|
|
||||||
Opções »
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent>
|
|
||||||
<Link href={"/agenda"}>
|
|
||||||
<DropdownMenuItem>Agendamento</DropdownMenuItem>
|
|
||||||
</Link>
|
|
||||||
<Link href={"/procedimento"}>
|
|
||||||
<DropdownMenuItem>Procedimento</DropdownMenuItem>
|
|
||||||
</Link>
|
|
||||||
<Link href={"/financeiro"}>
|
|
||||||
<DropdownMenuItem>Financeiro</DropdownMenuItem>
|
|
||||||
</Link>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
|
|
||||||
<div className="flex flex-row">
|
<div className="flex flex-row">
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant={"outline"}
|
variant={"outline"}
|
||||||
className="bg-muted hover:bg-primary! hover:text-white! transition-colors rounded-l-[100px] rounded-r-none"
|
className="bg-muted hover:bg-primary! hover:text-white! transition-colors rounded-l-[100px] rounded-r-none"
|
||||||
onClick={() => setActiveTab("calendar")}
|
onClick={() => setActiveTab("calendar")}
|
||||||
@ -200,20 +188,27 @@ export default function AgendamentoPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
variant={"outline"}
|
variant={"outline"}
|
||||||
className="bg-muted hover:bg-primary! hover:text-white! transition-colors rounded-none"
|
className="bg-muted hover:bg-primary! hover:text-white! transition-colors rounded-r-[100px] rounded-l-none"
|
||||||
onClick={() => setActiveTab("3d")}
|
onClick={() => setActiveTab("3d")}
|
||||||
>
|
>
|
||||||
3D
|
3D
|
||||||
</Button>
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Button
|
{/* Legenda de status (estilo Google Calendar) */}
|
||||||
variant={"outline"}
|
<div className="rounded-md border bg-card/60 p-2 sm:p-3 -mt-4">
|
||||||
className="bg-muted hover:bg-primary! hover:text-white! transition-colors rounded-r-[100px] rounded-l-none"
|
<div className="flex flex-wrap items-center gap-6 text-sm">
|
||||||
onClick={() => setActiveTab("espera")}
|
<div className="flex items-center gap-2">
|
||||||
>
|
<span aria-hidden className="h-3 w-3 rounded-full bg-blue-500 ring-2 ring-blue-500/30" />
|
||||||
Lista de espera
|
<span className="text-foreground">Solicitado</span>
|
||||||
</Button>
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span aria-hidden className="h-3 w-3 rounded-full bg-green-500 ring-2 ring-green-500/30" />
|
||||||
|
<span className="text-foreground">Confirmado</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -242,17 +237,22 @@ export default function AgendamentoPage() {
|
|||||||
events={threeDEvents}
|
events={threeDEvents}
|
||||||
onAddEvent={handleAddEvent}
|
onAddEvent={handleAddEvent}
|
||||||
onRemoveEvent={handleRemoveEvent}
|
onRemoveEvent={handleRemoveEvent}
|
||||||
|
onOpenAddPatientForm={() => setShowPatientForm(true)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : null}
|
||||||
// A Lista de Espera foi MANTIDA
|
|
||||||
<ListaEspera
|
|
||||||
patients={waitingList}
|
|
||||||
onNotify={handleNotifyPatient}
|
|
||||||
onAddToWaitlist={() => {}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Formulário de Registro de Paciente */}
|
||||||
|
<PatientRegistrationForm
|
||||||
|
open={showPatientForm}
|
||||||
|
onOpenChange={setShowPatientForm}
|
||||||
|
mode="create"
|
||||||
|
onSaved={(newPaciente) => {
|
||||||
|
console.log('[Calendar] Novo paciente registrado:', newPaciente);
|
||||||
|
setShowPatientForm(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -123,3 +123,47 @@
|
|||||||
@apply bg-background text-foreground font-sans;
|
@apply bg-background text-foreground font-sans;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Esconder botões com ícones de lixo */
|
||||||
|
button:has(.lucide-trash2),
|
||||||
|
button:has(.lucide-trash),
|
||||||
|
button[class*="trash"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Esconder campos de input embaixo do calendário 3D */
|
||||||
|
input[placeholder="Nome do paciente"],
|
||||||
|
input[placeholder^="dd/mm"],
|
||||||
|
input[type="date"][value=""] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Esconder botão "Adicionar Paciente" */
|
||||||
|
/* Removido seletor vazio - será tratado por outros seletores */
|
||||||
|
|
||||||
|
/* Afastar X do popup (dialog-close) para longe das setas */
|
||||||
|
[data-slot="dialog-close"],
|
||||||
|
button[aria-label="Close"],
|
||||||
|
.fc button[aria-label*="Close"] {
|
||||||
|
right: 16px !important;
|
||||||
|
top: 8px !important;
|
||||||
|
position: absolute !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Esconder footer/header extras do calendário que mostram os campos */
|
||||||
|
.fc .fc-toolbar input,
|
||||||
|
.fc .fc-toolbar [type="date"],
|
||||||
|
.fc .fc-toolbar [placeholder*="paciente"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Esconder row com campos de pesquisa - estrutura mantida pelo calendário */
|
||||||
|
|
||||||
|
/* Esconder botões de trash/delete em todos os popups */
|
||||||
|
[role="dialog"] button[class*="hover:text-destructive"],
|
||||||
|
[role="dialog"] button[aria-label*="delete"],
|
||||||
|
[role="dialog"] button[aria-label*="excluir"],
|
||||||
|
[role="dialog"] button[aria-label*="remove"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -18,7 +18,8 @@ import Link from 'next/link'
|
|||||||
import ProtectedRoute from '@/components/shared/ProtectedRoute'
|
import ProtectedRoute from '@/components/shared/ProtectedRoute'
|
||||||
import { useAuth } from '@/hooks/useAuth'
|
import { useAuth } from '@/hooks/useAuth'
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||||
import { buscarPacientes, buscarPacientePorUserId, getUserInfo, listarAgendamentos, buscarMedicosPorIds, buscarMedicos, atualizarPaciente, buscarPacientePorId, getDoctorById } from '@/lib/api'
|
import { buscarPacientes, buscarPacientePorUserId, getUserInfo, listarAgendamentos, buscarMedicosPorIds, buscarMedicos, atualizarPaciente, buscarPacientePorId, getDoctorById, atualizarAgendamento, deletarAgendamento } from '@/lib/api'
|
||||||
|
import { CalendarRegistrationForm } from '@/components/features/forms/calendar-registration-form'
|
||||||
import { buscarRelatorioPorId, listarRelatoriosPorMedico } from '@/lib/reports'
|
import { buscarRelatorioPorId, listarRelatoriosPorMedico } from '@/lib/reports'
|
||||||
import { ENV_CONFIG } from '@/lib/env-config'
|
import { ENV_CONFIG } from '@/lib/env-config'
|
||||||
import { listarRelatoriosPorPaciente } from '@/lib/reports'
|
import { listarRelatoriosPorPaciente } from '@/lib/reports'
|
||||||
@ -35,7 +36,6 @@ const strings = {
|
|||||||
ultimosExames: 'Últimos Exames',
|
ultimosExames: 'Últimos Exames',
|
||||||
mensagensNaoLidas: 'Mensagens Não Lidas',
|
mensagensNaoLidas: 'Mensagens Não Lidas',
|
||||||
agendar: 'Agendar',
|
agendar: 'Agendar',
|
||||||
reagendar: 'Reagendar',
|
|
||||||
cancelar: 'Cancelar',
|
cancelar: 'Cancelar',
|
||||||
detalhes: 'Detalhes',
|
detalhes: 'Detalhes',
|
||||||
adicionarCalendario: 'Adicionar ao calendário',
|
adicionarCalendario: 'Adicionar ao calendário',
|
||||||
@ -449,7 +449,6 @@ export default function PacientePage() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Consultas fictícias
|
|
||||||
const [currentDate, setCurrentDate] = useState(new Date())
|
const [currentDate, setCurrentDate] = useState(new Date())
|
||||||
|
|
||||||
// helper: produce a local YYYY-MM-DD key (uses local timezone, not toISOString UTC)
|
// helper: produce a local YYYY-MM-DD key (uses local timezone, not toISOString UTC)
|
||||||
@ -521,8 +520,13 @@ export default function PacientePage() {
|
|||||||
|
|
||||||
// Appointments state (loaded when component mounts)
|
// Appointments state (loaded when component mounts)
|
||||||
const [appointments, setAppointments] = useState<any[] | null>(null)
|
const [appointments, setAppointments] = useState<any[] | null>(null)
|
||||||
|
const [doctorsMap, setDoctorsMap] = useState<Record<string, any>>({}) // Store doctor info by ID
|
||||||
const [loadingAppointments, setLoadingAppointments] = useState(false)
|
const [loadingAppointments, setLoadingAppointments] = useState(false)
|
||||||
const [appointmentsError, setAppointmentsError] = useState<string | null>(null)
|
const [appointmentsError, setAppointmentsError] = useState<string | null>(null)
|
||||||
|
// expanded appointment id for inline details (kept for possible fallback)
|
||||||
|
const [expandedId, setExpandedId] = useState<number | null>(null)
|
||||||
|
// selected appointment for modal details
|
||||||
|
const [selectedAppointment, setSelectedAppointment] = useState<any | null>(null)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let mounted = true
|
let mounted = true
|
||||||
@ -608,6 +612,7 @@ export default function PacientePage() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
setDoctorsMap(doctorsMap)
|
||||||
setAppointments(mapped)
|
setAppointments(mapped)
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
console.warn('[Consultas] falha ao carregar agendamentos', err)
|
console.warn('[Consultas] falha ao carregar agendamentos', err)
|
||||||
@ -638,6 +643,60 @@ export default function PacientePage() {
|
|||||||
const _dialogSource = (appointments !== null ? appointments : consultasFicticias)
|
const _dialogSource = (appointments !== null ? appointments : consultasFicticias)
|
||||||
const _todaysAppointments = (_dialogSource || []).filter((c: any) => c.data === todayStr)
|
const _todaysAppointments = (_dialogSource || []).filter((c: any) => c.data === todayStr)
|
||||||
|
|
||||||
|
// helper: present a localized label for appointment status
|
||||||
|
const statusLabel = (s: any) => {
|
||||||
|
const raw = (s === null || s === undefined) ? '' : String(s)
|
||||||
|
const key = raw.toLowerCase()
|
||||||
|
const map: Record<string,string> = {
|
||||||
|
'requested': 'Solicitado',
|
||||||
|
'request': 'Solicitado',
|
||||||
|
'confirmed': 'Confirmado',
|
||||||
|
'confirmada': 'Confirmada',
|
||||||
|
'confirmado': 'Confirmado',
|
||||||
|
'completed': 'Concluído',
|
||||||
|
'concluído': 'Concluído',
|
||||||
|
'cancelled': 'Cancelado',
|
||||||
|
'cancelada': 'Cancelada',
|
||||||
|
'cancelado': 'Cancelado',
|
||||||
|
'pending': 'Pendente',
|
||||||
|
'pendente': 'Pendente',
|
||||||
|
'checked_in': 'Registrado',
|
||||||
|
'in_progress': 'Em andamento',
|
||||||
|
'no_show': 'Não compareceu'
|
||||||
|
}
|
||||||
|
return map[key] || raw
|
||||||
|
}
|
||||||
|
|
||||||
|
// map an appointment (row) to the CalendarRegistrationForm's formData shape
|
||||||
|
const mapAppointmentToFormData = (appointment: any) => {
|
||||||
|
// Use the raw appointment with all fields: doctor_id, scheduled_at, appointment_type, etc.
|
||||||
|
const schedIso = appointment.scheduled_at || (appointment.data && appointment.hora ? `${appointment.data}T${appointment.hora}` : null) || null
|
||||||
|
const baseDate = schedIso ? new Date(schedIso) : new Date()
|
||||||
|
const appointmentDate = schedIso ? baseDate.toISOString().split('T')[0] : ''
|
||||||
|
const startTime = schedIso ? baseDate.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }) : (appointment.hora || '')
|
||||||
|
const duration = appointment.duration_minutes ?? appointment.duration ?? 30
|
||||||
|
|
||||||
|
// Get doctor name from doctorsMap if available
|
||||||
|
const docName = appointment.medico || (appointment.doctor_id ? doctorsMap[String(appointment.doctor_id)]?.full_name : null) || appointment.doctor_name || appointment.professional_name || '---'
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: appointment.id,
|
||||||
|
patientName: docName,
|
||||||
|
patientId: null,
|
||||||
|
doctorId: appointment.doctor_id ?? null,
|
||||||
|
professionalName: docName,
|
||||||
|
appointmentDate,
|
||||||
|
startTime,
|
||||||
|
endTime: '',
|
||||||
|
status: appointment.status || undefined,
|
||||||
|
appointmentType: appointment.appointment_type || appointment.type || (appointment.local ? 'presencial' : 'teleconsulta'),
|
||||||
|
duration_minutes: duration,
|
||||||
|
notes: appointment.notes || '',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
@ -771,7 +830,7 @@ export default function PacientePage() {
|
|||||||
? 'bg-linear-to-r from-amber-500 to-amber-600 shadow-amber-500/20'
|
? 'bg-linear-to-r from-amber-500 to-amber-600 shadow-amber-500/20'
|
||||||
: 'bg-linear-to-r from-red-500 to-red-600 shadow-red-500/20'
|
: 'bg-linear-to-r from-red-500 to-red-600 shadow-red-500/20'
|
||||||
}`}>
|
}`}>
|
||||||
{consulta.status}
|
{statusLabel(consulta.status)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -781,28 +840,43 @@ export default function PacientePage() {
|
|||||||
type="button"
|
type="button"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="border border-primary/30 text-primary bg-primary/5 hover:bg-primary! hover:text-white! hover:border-primary! transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/40 active:scale-95 text-xs font-semibold flex-1"
|
className="border border-primary/30 text-primary bg-primary/5 hover:bg-primary! hover:text-white! hover:border-primary! transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/40 active:scale-95 text-xs font-semibold flex-1"
|
||||||
|
onClick={() => setSelectedAppointment(consulta)}
|
||||||
>
|
>
|
||||||
Detalhes
|
Detalhes
|
||||||
</Button>
|
</Button>
|
||||||
{consulta.status !== 'Cancelada' && (
|
{/* Reagendar removed by request */}
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
size="sm"
|
|
||||||
className="bg-primary/10 text-primary border border-primary/30 hover:bg-primary! hover:text-white! hover:border-primary! transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/40 active:scale-95 text-xs font-semibold flex-1"
|
|
||||||
>
|
|
||||||
Reagendar
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{consulta.status !== 'Cancelada' && (
|
{consulta.status !== 'Cancelada' && (
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="border border-destructive/30 text-destructive bg-destructive/5 hover:bg-destructive! hover:text-white! hover:border-destructive! transition-all duration-200 focus-visible:ring-2 focus-visible:ring-destructive/40 active:scale-95 text-xs font-semibold flex-1"
|
className="border border-destructive/30 text-destructive bg-destructive/5 hover:bg-destructive! hover:text-white! hover:border-destructive! transition-all duration-200 focus-visible:ring-2 focus-visible:ring-destructive/40 active:scale-95 text-xs font-semibold flex-1"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
const ok = typeof window !== 'undefined' ? window.confirm('Deseja realmente cancelar esta consulta?') : true
|
||||||
|
if (!ok) return
|
||||||
|
// call API to delete
|
||||||
|
await deletarAgendamento(consulta.id)
|
||||||
|
// remove from local list
|
||||||
|
setAppointments((prev) => {
|
||||||
|
if (!prev) return prev
|
||||||
|
return prev.filter((a: any) => String(a.id) !== String(consulta.id))
|
||||||
|
})
|
||||||
|
// if modal open for this appointment, close it
|
||||||
|
if (selectedAppointment && String(selectedAppointment.id) === String(consulta.id)) setSelectedAppointment(null)
|
||||||
|
setToast({ type: 'success', msg: 'Consulta cancelada.' })
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error('[Consultas] falha ao cancelar agendamento', err)
|
||||||
|
try { setToast({ type: 'error', msg: err?.message || 'Falha ao cancelar a consulta.' }) } catch (e) {}
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Cancelar
|
Cancelar
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Inline detalhes removed: modal will show details instead */}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
@ -811,6 +885,45 @@ export default function PacientePage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Dialog open={!!selectedAppointment} onOpenChange={open => !open && setSelectedAppointment(null)}>
|
||||||
|
<DialogContent className="w-full sm:mx-auto sm:my-8 max-w-3xl md:max-w-4xl lg:max-w-5xl max-h-[90vh] overflow-hidden sm:p-6 p-4">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Detalhes da Consulta</DialogTitle>
|
||||||
|
<DialogDescription className="sr-only">Detalhes da consulta</DialogDescription>
|
||||||
|
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3 max-h-[70vh] overflow-y-auto text-sm text-foreground">
|
||||||
|
{selectedAppointment ? (
|
||||||
|
<>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div><span className="font-medium">Profissional:</span> {selectedAppointment.medico || '-'}</div>
|
||||||
|
<div><span className="font-medium">Especialidade:</span> {selectedAppointment.especialidade || '-'}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div><span className="font-medium">Data:</span> {(function(d:any,h:any){ try{ const dt = new Date(String(d) + 'T' + String(h||'00:00')); return formatDatePt(dt) }catch(e){ return String(d||'-') } })(selectedAppointment.data, selectedAppointment.hora)}</div>
|
||||||
|
<div><span className="font-medium">Hora:</span> {selectedAppointment.hora || '-'}</div>
|
||||||
|
<div><span className="font-medium">Status:</span> {statusLabel(selectedAppointment.status) || '-'}</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div>Carregando...</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogFooter className="flex flex-col sm:flex-row gap-2 sm:justify-end sm:items-center mt-4">
|
||||||
|
<div className="flex w-full sm:w-auto justify-between sm:justify-end gap-2">
|
||||||
|
<Button variant="outline" onClick={() => setSelectedAppointment(null)} className="transition duration-200 hover:bg-primary/10 hover:text-primary min-w-[110px]">
|
||||||
|
Fechar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Reagendar feature removed */}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1262,7 +1375,7 @@ export default function PacientePage() {
|
|||||||
setReportsPage(1)
|
setReportsPage(1)
|
||||||
}, [reports])
|
}, [reports])
|
||||||
|
|
||||||
return (
|
return (<>
|
||||||
<section className="bg-card shadow-md rounded-lg border border-border p-6">
|
<section className="bg-card shadow-md rounded-lg border border-border p-6">
|
||||||
<h2 className="text-2xl font-bold mb-6">Laudos</h2>
|
<h2 className="text-2xl font-bold mb-6">Laudos</h2>
|
||||||
|
|
||||||
@ -1334,6 +1447,9 @@ export default function PacientePage() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<Dialog open={!!selectedReport} onOpenChange={open => !open && setSelectedReport(null)}>
|
<Dialog open={!!selectedReport} onOpenChange={open => !open && setSelectedReport(null)}>
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
@ -1422,103 +1538,200 @@ export default function PacientePage() {
|
|||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</section>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function Perfil() {
|
function Perfil() {
|
||||||
const hasAddress = Boolean(profileData.endereco || profileData.cidade || profileData.cep)
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6 max-w-2xl mx-auto">
|
<div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-10 md:px-8">
|
||||||
|
{/* Header com Título e Botão */}
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-2xl font-bold text-foreground">Meu Perfil</h2>
|
<div>
|
||||||
|
<h2 className="text-3xl font-bold">Meu Perfil</h2>
|
||||||
|
<p className="text-muted-foreground mt-1">Bem-vindo à sua área exclusiva.</p>
|
||||||
|
</div>
|
||||||
{!isEditingProfile ? (
|
{!isEditingProfile ? (
|
||||||
<Button onClick={() => setIsEditingProfile(true)} className="flex items-center gap-2">
|
<Button
|
||||||
Editar Perfil
|
className="bg-blue-600 hover:bg-blue-700"
|
||||||
|
onClick={() => setIsEditingProfile(true)}
|
||||||
|
>
|
||||||
|
✏️ Editar Perfil
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Button onClick={handleSaveProfile} className="flex items-center gap-2">Salvar</Button>
|
<Button
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={handleSaveProfile}
|
||||||
|
>
|
||||||
|
✓ Salvar
|
||||||
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={handleCancelEdit}
|
onClick={handleCancelEdit}
|
||||||
className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
|
|
||||||
>
|
>
|
||||||
Cancelar
|
✕ Cancelar
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-6 md:grid-cols-2">
|
|
||||||
|
{/* Grid de 3 colunas (2 + 1) */}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Coluna Esquerda - Informações Pessoais */}
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
{/* Informações Pessoais */}
|
{/* Informações Pessoais */}
|
||||||
|
<div className="border border-border rounded-lg p-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Informações Pessoais</h3>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-lg font-semibold border-b border-border text-foreground pb-2">Informações Pessoais</h3>
|
{/* Nome Completo */}
|
||||||
<div className="space-y-2">
|
<div>
|
||||||
<Label htmlFor="nome">Nome Completo</Label>
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
<p className="p-2 bg-muted rounded text-muted-foreground">{profileData.nome}</p>
|
Nome Completo
|
||||||
<span className="text-xs text-muted-foreground">Este campo não pode ser alterado</span>
|
</Label>
|
||||||
|
<div className="mt-2 p-3 bg-muted rounded text-foreground font-medium">
|
||||||
|
{profileData.nome || "Não preenchido"}
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
<Label htmlFor="email">Email</Label>
|
Este campo não pode ser alterado
|
||||||
{isEditingProfile ? (
|
</p>
|
||||||
<Input id="email" type="email" value={profileData.email} onChange={e => handleProfileChange('email', e.target.value)} />
|
|
||||||
) : (
|
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.email}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="telefone">Telefone</Label>
|
{/* Email */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
|
Email
|
||||||
|
</Label>
|
||||||
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
|
{profileData.email || "Não preenchido"}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Este campo não pode ser alterado
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Telefone */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
|
Telefone
|
||||||
|
</Label>
|
||||||
{isEditingProfile ? (
|
{isEditingProfile ? (
|
||||||
<Input id="telefone" value={profileData.telefone} onChange={e => handleProfileChange('telefone', e.target.value)} />
|
<Input
|
||||||
|
value={profileData.telefone || ""}
|
||||||
|
onChange={(e) => handleProfileChange('telefone', e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="(00) 00000-0000"
|
||||||
|
maxLength={15}
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.telefone}</p>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
|
{profileData.telefone || "Não preenchido"}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Endereço e Contato (render apenas se existir algum dado) */}
|
</div>
|
||||||
{hasAddress && (
|
|
||||||
|
{/* Endereço e Contato */}
|
||||||
|
<div className="border border-border rounded-lg p-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Endereço e Contato</h3>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-lg font-semibold border-b border-border text-foreground pb-2">Endereço</h3>
|
{/* Logradouro */}
|
||||||
<div className="space-y-2">
|
<div>
|
||||||
<Label htmlFor="endereco">Endereço</Label>
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
|
Logradouro
|
||||||
|
</Label>
|
||||||
{isEditingProfile ? (
|
{isEditingProfile ? (
|
||||||
<Input id="endereco" value={profileData.endereco} onChange={e => handleProfileChange('endereco', e.target.value)} />
|
<Input
|
||||||
|
value={profileData.endereco || ""}
|
||||||
|
onChange={(e) => handleProfileChange('endereco', e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="Rua, avenida, etc."
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.endereco}</p>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
|
{profileData.endereco || "Não preenchido"}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="cidade">Cidade</Label>
|
{/* Cidade */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
|
Cidade
|
||||||
|
</Label>
|
||||||
{isEditingProfile ? (
|
{isEditingProfile ? (
|
||||||
<Input id="cidade" value={profileData.cidade} onChange={e => handleProfileChange('cidade', e.target.value)} />
|
<Input
|
||||||
|
value={profileData.cidade || ""}
|
||||||
|
onChange={(e) => handleProfileChange('cidade', e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="São Paulo"
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.cidade}</p>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
|
{profileData.cidade || "Não preenchido"}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="cep">CEP</Label>
|
{/* CEP */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
|
CEP
|
||||||
|
</Label>
|
||||||
{isEditingProfile ? (
|
{isEditingProfile ? (
|
||||||
<Input id="cep" value={profileData.cep} onChange={e => handleProfileChange('cep', e.target.value)} />
|
<Input
|
||||||
|
value={profileData.cep || ""}
|
||||||
|
onChange={(e) => handleProfileChange('cep', e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="00000-000"
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.cep}</p>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
)}
|
{profileData.cep || "Não preenchido"}
|
||||||
</div>
|
|
||||||
{/* Biografia removed: not used */}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{/* Foto do Perfil */}
|
</div>
|
||||||
<div className="border-t border-border pt-6">
|
</div>
|
||||||
<h3 className="text-lg font-semibold mb-4 text-foreground">Foto do Perfil</h3>
|
</div>
|
||||||
|
|
||||||
|
{/* Coluna Direita - Foto do Perfil */}
|
||||||
|
<div>
|
||||||
|
<div className="border border-border rounded-lg p-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Foto do Perfil</h3>
|
||||||
|
|
||||||
|
{isEditingProfile ? (
|
||||||
|
<div className="space-y-4">
|
||||||
<UploadAvatar
|
<UploadAvatar
|
||||||
userId={profileData.id}
|
userId={profileData.id}
|
||||||
currentAvatarUrl={profileData.foto_url}
|
currentAvatarUrl={profileData.foto_url || "/avatars/01.png"}
|
||||||
onAvatarChange={(newUrl) => handleProfileChange('foto_url', newUrl)}
|
onAvatarChange={(newUrl) => handleProfileChange('foto_url', newUrl)}
|
||||||
userName={profileData.nome}
|
userName={profileData.nome}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
<Avatar className="h-24 w-24">
|
||||||
|
<AvatarFallback className="bg-primary text-primary-foreground text-2xl font-bold">
|
||||||
|
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -148,7 +148,7 @@ export default function ResultadosClient() {
|
|||||||
try {
|
try {
|
||||||
setLoadingMedicos(true)
|
setLoadingMedicos(true)
|
||||||
console.log('[ResultadosClient] Initial doctors fetch starting')
|
console.log('[ResultadosClient] Initial doctors fetch starting')
|
||||||
const list = await buscarMedicos('medico').catch((err) => {
|
const list = await buscarMedicos('').catch((err) => {
|
||||||
console.error('[ResultadosClient] Initial fetch error:', err)
|
console.error('[ResultadosClient] Initial fetch error:', err)
|
||||||
return []
|
return []
|
||||||
})
|
})
|
||||||
@ -175,7 +175,7 @@ export default function ResultadosClient() {
|
|||||||
setAgendaByDoctor({})
|
setAgendaByDoctor({})
|
||||||
setAgendasExpandida({})
|
setAgendasExpandida({})
|
||||||
// termo de busca: usar a especialidade escolhida
|
// termo de busca: usar a especialidade escolhida
|
||||||
const termo = (especialidadeHero && especialidadeHero !== 'Veja mais') ? especialidadeHero : 'medico'
|
const termo = (especialidadeHero && especialidadeHero !== 'Veja mais') ? especialidadeHero : ''
|
||||||
console.log('[ResultadosClient] Fetching doctors with term:', termo)
|
console.log('[ResultadosClient] Fetching doctors with term:', termo)
|
||||||
const list = await buscarMedicos(termo).catch((err) => {
|
const list = await buscarMedicos(termo).catch((err) => {
|
||||||
console.error('[ResultadosClient] buscarMedicos error:', err)
|
console.error('[ResultadosClient] buscarMedicos error:', err)
|
||||||
@ -219,9 +219,9 @@ export default function ResultadosClient() {
|
|||||||
}, [searchQuery])
|
}, [searchQuery])
|
||||||
|
|
||||||
// 3) Carregar horários disponíveis para um médico (próximos 7 dias) e agrupar por dia
|
// 3) Carregar horários disponíveis para um médico (próximos 7 dias) e agrupar por dia
|
||||||
async function loadAgenda(doctorId: string) {
|
async function loadAgenda(doctorId: string): Promise<{ iso: string; label: string } | null> {
|
||||||
if (!doctorId) return
|
if (!doctorId) return null
|
||||||
if (agendaLoading[doctorId]) return
|
if (agendaLoading[doctorId]) return null
|
||||||
setAgendaLoading((s) => ({ ...s, [doctorId]: true }))
|
setAgendaLoading((s) => ({ ...s, [doctorId]: true }))
|
||||||
try {
|
try {
|
||||||
// janela de 7 dias
|
// janela de 7 dias
|
||||||
@ -273,8 +273,10 @@ export default function ResultadosClient() {
|
|||||||
|
|
||||||
setAgendaByDoctor((prev) => ({ ...prev, [doctorId]: days }))
|
setAgendaByDoctor((prev) => ({ ...prev, [doctorId]: days }))
|
||||||
setNearestSlotByDoctor((prev) => ({ ...prev, [doctorId]: nearest }))
|
setNearestSlotByDoctor((prev) => ({ ...prev, [doctorId]: nearest }))
|
||||||
|
return nearest
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
showToast('error', e?.message || 'Falha ao buscar horários')
|
showToast('error', e?.message || 'Falha ao buscar horários')
|
||||||
|
return null
|
||||||
} finally {
|
} finally {
|
||||||
setAgendaLoading((s) => ({ ...s, [doctorId]: false }))
|
setAgendaLoading((s) => ({ ...s, [doctorId]: false }))
|
||||||
}
|
}
|
||||||
@ -752,19 +754,7 @@ export default function ResultadosClient() {
|
|||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
<Select value={bairro} onValueChange={setBairro}>
|
{/* Search input para buscar médico por nome (movido antes do Select de bairro para ficar ao lado visualmente) */}
|
||||||
<SelectTrigger className="h-10 min-w-40 rounded-full border border-primary/40 bg-primary/10 text-primary transition duration-200 hover:border-primary! focus:ring-2 focus:ring-primary cursor-pointer">
|
|
||||||
<SelectValue placeholder="Bairro" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="Todos">Todos os bairros</SelectItem>
|
|
||||||
<SelectItem value="Centro">Centro</SelectItem>
|
|
||||||
<SelectItem value="Jardins">Jardins</SelectItem>
|
|
||||||
<SelectItem value="Farolândia">Farolândia</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{/* Search input para buscar médico por nome */}
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Input
|
<Input
|
||||||
placeholder="Buscar médico por nome"
|
placeholder="Buscar médico por nome"
|
||||||
@ -806,6 +796,18 @@ export default function ResultadosClient() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Select value={bairro} onValueChange={setBairro}>
|
||||||
|
<SelectTrigger className="h-10 min-w-40 rounded-full border border-primary/40 bg-primary/10 text-primary transition duration-200 hover:border-primary! focus:ring-2 focus:ring-primary cursor-pointer">
|
||||||
|
<SelectValue placeholder="Bairro" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="Todos">Todos os bairros</SelectItem>
|
||||||
|
<SelectItem value="Centro">Centro</SelectItem>
|
||||||
|
<SelectItem value="Jardins">Jardins</SelectItem>
|
||||||
|
<SelectItem value="Farolândia">Farolândia</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="ml-auto rounded-full text-primary hover:bg-primary! hover:text-white! transition-colors"
|
className="ml-auto rounded-full text-primary hover:bg-primary! hover:text-white! transition-colors"
|
||||||
@ -934,7 +936,29 @@ export default function ResultadosClient() {
|
|||||||
<div className="flex flex-wrap gap-3 pt-2">
|
<div className="flex flex-wrap gap-3 pt-2">
|
||||||
<Button
|
<Button
|
||||||
className="h-11 rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
|
className="h-11 rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
|
||||||
onClick={() => { if (!agendaByDoctor[id]) loadAgenda(id) }}
|
onClick={async () => {
|
||||||
|
// If we don't have the agenda loaded, load it and try to open the nearest slot.
|
||||||
|
if (!agendaByDoctor[id]) {
|
||||||
|
const nearest = await loadAgenda(id)
|
||||||
|
if (nearest) {
|
||||||
|
openConfirmDialog(id, nearest.iso)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// fallback: open the "more times" modal to let the user pick a date/time
|
||||||
|
setMoreTimesForDoctor(id)
|
||||||
|
void fetchSlotsForDate(id, moreTimesDate)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// If agenda already loaded, try nearest known slot
|
||||||
|
const nearest = nearestSlotByDoctor[id]
|
||||||
|
if (nearest) {
|
||||||
|
openConfirmDialog(id, nearest.iso)
|
||||||
|
} else {
|
||||||
|
setMoreTimesForDoctor(id)
|
||||||
|
void fetchSlotsForDate(id, moreTimesDate)
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Agendar consulta
|
Agendar consulta
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@ -25,7 +25,7 @@ import {
|
|||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
|
|
||||||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
|
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
|
||||||
import { User, FolderOpen, X, Users, MessageSquare, ClipboardList, Plus, Edit, Trash2, ChevronLeft, ChevronRight, Clock, FileCheck, Upload, Download, Eye, History, Stethoscope, Pill, Activity, Search } from "lucide-react"
|
import { User, FolderOpen, X, Users, MessageSquare, ClipboardList, Plus, Edit, ChevronLeft, ChevronRight, Clock, FileCheck, Upload, Download, Eye, History, Stethoscope, Pill, Activity, Search } from "lucide-react"
|
||||||
import { Calendar as CalendarIcon, FileText, Settings } from "lucide-react";
|
import { Calendar as CalendarIcon, FileText, Settings } from "lucide-react";
|
||||||
import {
|
import {
|
||||||
Tooltip,
|
Tooltip,
|
||||||
@ -41,6 +41,7 @@ import dayGridPlugin from "@fullcalendar/daygrid";
|
|||||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||||
import interactionPlugin from "@fullcalendar/interaction";
|
import interactionPlugin from "@fullcalendar/interaction";
|
||||||
import ptBrLocale from "@fullcalendar/core/locales/pt-br";
|
import ptBrLocale from "@fullcalendar/core/locales/pt-br";
|
||||||
|
import { PatientRegistrationForm } from "@/components/features/forms/patient-registration-form";
|
||||||
|
|
||||||
const FullCalendar = dynamic(() => import("@fullcalendar/react"), {
|
const FullCalendar = dynamic(() => import("@fullcalendar/react"), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
@ -230,7 +231,7 @@ const ProfissionalPage = () => {
|
|||||||
})();
|
})();
|
||||||
return () => { mounted = false; };
|
return () => { mounted = false; };
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, [user?.email, user?.id]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -378,6 +379,9 @@ const ProfissionalPage = () => {
|
|||||||
const [editingEvent, setEditingEvent] = useState<any>(null);
|
const [editingEvent, setEditingEvent] = useState<any>(null);
|
||||||
const [showPopup, setShowPopup] = useState(false);
|
const [showPopup, setShowPopup] = useState(false);
|
||||||
const [showActionModal, setShowActionModal] = useState(false);
|
const [showActionModal, setShowActionModal] = useState(false);
|
||||||
|
const [showDayModal, setShowDayModal] = useState(false);
|
||||||
|
const [selectedDayDate, setSelectedDayDate] = useState<Date | null>(null);
|
||||||
|
const [showPatientForm, setShowPatientForm] = useState(false);
|
||||||
const [step, setStep] = useState(1);
|
const [step, setStep] = useState(1);
|
||||||
const [newEvent, setNewEvent] = useState({
|
const [newEvent, setNewEvent] = useState({
|
||||||
title: "",
|
title: "",
|
||||||
@ -686,6 +690,13 @@ const ProfissionalPage = () => {
|
|||||||
<section className="bg-card shadow-md rounded-lg border border-border p-6">
|
<section className="bg-card shadow-md rounded-lg border border-border p-6">
|
||||||
<div className="flex justify-between items-center mb-4">
|
<div className="flex justify-between items-center mb-4">
|
||||||
<h2 className="text-2xl font-bold">Agenda do Dia</h2>
|
<h2 className="text-2xl font-bold">Agenda do Dia</h2>
|
||||||
|
<Button
|
||||||
|
onClick={() => setShowPatientForm(true)}
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Adicionar Paciente
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navegação de Data */}
|
{/* Navegação de Data */}
|
||||||
@ -718,7 +729,7 @@ const ProfissionalPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Lista de Pacientes do Dia */}
|
{/* Lista de Pacientes do Dia */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4 max-h-[calc(100vh-450px)] overflow-y-auto pr-2">
|
||||||
{todayEvents.length === 0 ? (
|
{todayEvents.length === 0 ? (
|
||||||
<div className="text-center py-8 text-gray-600 dark:text-muted-foreground">
|
<div className="text-center py-8 text-gray-600 dark:text-muted-foreground">
|
||||||
<CalendarIcon className="h-12 w-12 mx-auto mb-4 text-gray-400 dark:text-muted-foreground/50" />
|
<CalendarIcon className="h-12 w-12 mx-auto mb-4 text-gray-400 dark:text-muted-foreground/50" />
|
||||||
@ -2656,150 +2667,216 @@ const ProfissionalPage = () => {
|
|||||||
|
|
||||||
|
|
||||||
const renderPerfilSection = () => (
|
const renderPerfilSection = () => (
|
||||||
<div className="space-y-6">
|
<div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-10 md:px-8">
|
||||||
|
{/* Header com Título e Botão */}
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-2xl font-bold text-foreground">Meu Perfil</h2>
|
<div>
|
||||||
|
<h2 className="text-3xl font-bold">Meu Perfil</h2>
|
||||||
|
<p className="text-muted-foreground mt-1">Bem-vindo à sua área exclusiva.</p>
|
||||||
|
</div>
|
||||||
{!isEditingProfile ? (
|
{!isEditingProfile ? (
|
||||||
<Button onClick={() => setIsEditingProfile(true)} className="flex items-center gap-2">
|
<Button
|
||||||
<Edit className="h-4 w-4" />
|
className="bg-blue-600 hover:bg-blue-700"
|
||||||
Editar Perfil
|
onClick={() => setIsEditingProfile(true)}
|
||||||
|
>
|
||||||
|
✏️ Editar Perfil
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Button onClick={handleSaveProfile} className="flex items-center gap-2">
|
<Button
|
||||||
Salvar
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={handleSaveProfile}
|
||||||
|
>
|
||||||
|
✓ Salvar
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" onClick={handleCancelEdit} className="hover:bg-primary! hover:text-white! transition-colors">
|
<Button
|
||||||
Cancelar
|
variant="outline"
|
||||||
|
onClick={handleCancelEdit}
|
||||||
|
>
|
||||||
|
✕ Cancelar
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-6 md:grid-cols-2">
|
{/* Grid de 3 colunas (2 + 1) */}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Coluna Esquerda - Informações Pessoais */}
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
{/* Informações Pessoais */}
|
{/* Informações Pessoais */}
|
||||||
|
<div className="border border-border rounded-lg p-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Informações Pessoais</h3>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-lg font-semibold border-b border-border text-foreground pb-2">Informações Pessoais</h3>
|
{/* Nome Completo */}
|
||||||
|
<div>
|
||||||
<div className="space-y-2">
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
<Label htmlFor="nome">Nome Completo</Label>
|
Nome Completo
|
||||||
<p className="p-2 bg-muted rounded text-muted-foreground">{profileData.nome}</p>
|
</Label>
|
||||||
<span className="text-xs text-muted-foreground">Este campo não pode ser alterado</span>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground font-medium">
|
||||||
|
{profileData.nome || "Não preenchido"}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Este campo não pode ser alterado
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
{/* Email */}
|
||||||
<Label htmlFor="email">Email</Label>
|
<div>
|
||||||
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
|
Email
|
||||||
|
</Label>
|
||||||
{isEditingProfile ? (
|
{isEditingProfile ? (
|
||||||
<Input
|
<Input
|
||||||
id="email"
|
value={profileData.email || ""}
|
||||||
type="email"
|
|
||||||
value={profileData.email}
|
|
||||||
onChange={(e) => handleProfileChange('email', e.target.value)}
|
onChange={(e) => handleProfileChange('email', e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
type="email"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.email}</p>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
|
{profileData.email || "Não preenchido"}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
{/* Telefone */}
|
||||||
<Label htmlFor="telefone">Telefone</Label>
|
<div>
|
||||||
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
|
Telefone
|
||||||
|
</Label>
|
||||||
{isEditingProfile ? (
|
{isEditingProfile ? (
|
||||||
<Input
|
<Input
|
||||||
id="telefone"
|
value={profileData.telefone || ""}
|
||||||
value={profileData.telefone}
|
|
||||||
onChange={(e) => handleProfileChange('telefone', e.target.value)}
|
onChange={(e) => handleProfileChange('telefone', e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="(00) 00000-0000"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.telefone}</p>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
|
{profileData.telefone || "Não preenchido"}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
{/* CRM */}
|
||||||
<Label htmlFor="crm">CRM</Label>
|
<div>
|
||||||
<p className="p-2 bg-muted rounded text-muted-foreground">{profileData.crm}</p>
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
<span className="text-xs text-muted-foreground">Este campo não pode ser alterado</span>
|
CRM
|
||||||
|
</Label>
|
||||||
|
<div className="mt-2 p-3 bg-muted rounded text-foreground font-medium">
|
||||||
|
{profileData.crm || "Não preenchido"}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Este campo não pode ser alterado
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
{/* Especialidade */}
|
||||||
<Label htmlFor="especialidade">Especialidade</Label>
|
<div>
|
||||||
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
|
Especialidade
|
||||||
|
</Label>
|
||||||
{isEditingProfile ? (
|
{isEditingProfile ? (
|
||||||
<Input
|
<Input
|
||||||
id="especialidade"
|
value={profileData.especialidade || ""}
|
||||||
value={profileData.especialidade}
|
|
||||||
onChange={(e) => handleProfileChange('especialidade', e.target.value)}
|
onChange={(e) => handleProfileChange('especialidade', e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="Ex: Cardiologia"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.especialidade}</p>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
|
{profileData.especialidade || "Não preenchido"}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Endereço e Contato */}
|
{/* Endereço e Contato */}
|
||||||
|
<div className="border border-border rounded-lg p-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Endereço e Contato</h3>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-lg font-semibold border-b border-border text-foreground pb-2">Endereço e Contato</h3>
|
{/* Logradouro */}
|
||||||
|
<div>
|
||||||
<div className="space-y-2">
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
<Label htmlFor="endereco">Endereço</Label>
|
Logradouro
|
||||||
|
</Label>
|
||||||
{isEditingProfile ? (
|
{isEditingProfile ? (
|
||||||
<Input
|
<Input
|
||||||
id="endereco"
|
value={profileData.endereco || ""}
|
||||||
value={profileData.endereco}
|
|
||||||
onChange={(e) => handleProfileChange('endereco', e.target.value)}
|
onChange={(e) => handleProfileChange('endereco', e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="Rua, avenida, etc."
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.endereco}</p>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
|
{profileData.endereco || "Não preenchido"}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
{/* Cidade */}
|
||||||
<Label htmlFor="cidade">Cidade</Label>
|
<div>
|
||||||
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
|
Cidade
|
||||||
|
</Label>
|
||||||
{isEditingProfile ? (
|
{isEditingProfile ? (
|
||||||
<Input
|
<Input
|
||||||
id="cidade"
|
value={profileData.cidade || ""}
|
||||||
value={profileData.cidade}
|
|
||||||
onChange={(e) => handleProfileChange('cidade', e.target.value)}
|
onChange={(e) => handleProfileChange('cidade', e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="São Paulo"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.cidade}</p>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
|
{profileData.cidade || "Não preenchido"}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
{/* CEP */}
|
||||||
<Label htmlFor="cep">CEP</Label>
|
<div>
|
||||||
|
<Label className="text-sm font-medium text-muted-foreground">
|
||||||
|
CEP
|
||||||
|
</Label>
|
||||||
{isEditingProfile ? (
|
{isEditingProfile ? (
|
||||||
<Input
|
<Input
|
||||||
id="cep"
|
value={profileData.cep || ""}
|
||||||
value={profileData.cep}
|
|
||||||
onChange={(e) => handleProfileChange('cep', e.target.value)}
|
onChange={(e) => handleProfileChange('cep', e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="00000-000"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.cep}</p>
|
<div className="mt-2 p-3 bg-muted rounded text-foreground">
|
||||||
|
{profileData.cep || "Não preenchido"}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/* Biografia removida: não é um campo no registro de médico */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Foto do Perfil */}
|
{/* Coluna Direita - Foto do Perfil */}
|
||||||
<div className="border-t border-border pt-6">
|
<div>
|
||||||
<h3 className="text-lg font-semibold mb-4 text-foreground">Foto do Perfil</h3>
|
<div className="border border-border rounded-lg p-6">
|
||||||
<div className="flex items-center gap-4">
|
<h3 className="text-lg font-semibold mb-4">Foto do Perfil</h3>
|
||||||
<Avatar className="h-20 w-20">
|
|
||||||
<AvatarFallback className="text-lg">
|
<div className="flex flex-col items-center gap-4">
|
||||||
{profileData.nome.split(' ').map(n => n[0]).join('').toUpperCase()}
|
<Avatar className="h-24 w-24">
|
||||||
|
<AvatarFallback className="bg-primary text-primary-foreground text-2xl font-bold">
|
||||||
|
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
|
||||||
</AvatarFallback>
|
</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
{isEditingProfile && (
|
|
||||||
<div className="space-y-2">
|
<div className="text-center space-y-2">
|
||||||
<Button variant="outline" size="sm" className="hover:bg-primary! hover:text-white! transition-colors">
|
<p className="text-sm text-muted-foreground">
|
||||||
Alterar Foto
|
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
|
||||||
</Button>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
Formatos aceitos: JPG, PNG (máx. 2MB)
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -2838,8 +2915,8 @@ const ProfissionalPage = () => {
|
|||||||
);
|
);
|
||||||
case 'laudos':
|
case 'laudos':
|
||||||
return renderLaudosSection();
|
return renderLaudosSection();
|
||||||
case 'comunicacao':
|
// case 'comunicacao':
|
||||||
return renderComunicacaoSection();
|
// return renderComunicacaoSection();
|
||||||
case 'perfil':
|
case 'perfil':
|
||||||
return renderPerfilSection();
|
return renderPerfilSection();
|
||||||
default:
|
default:
|
||||||
@ -2910,14 +2987,15 @@ const ProfissionalPage = () => {
|
|||||||
<FileText className="mr-2 h-4 w-4" />
|
<FileText className="mr-2 h-4 w-4" />
|
||||||
Laudos
|
Laudos
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
{/* Comunicação removida - campos embaixo do calendário */}
|
||||||
|
{/* <Button
|
||||||
variant={activeSection === 'comunicacao' ? 'default' : 'ghost'}
|
variant={activeSection === 'comunicacao' ? 'default' : 'ghost'}
|
||||||
className="w-full justify-start transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
|
className="w-full justify-start transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
|
||||||
onClick={() => setActiveSection('comunicacao')}
|
onClick={() => setActiveSection('comunicacao')}
|
||||||
>
|
>
|
||||||
<MessageSquare className="mr-2 h-4 w-4" />
|
<MessageSquare className="mr-2 h-4 w-4" />
|
||||||
Comunicação
|
Comunicação
|
||||||
</Button>
|
</Button> */}
|
||||||
<Button
|
<Button
|
||||||
variant={activeSection === 'perfil' ? 'default' : 'ghost'}
|
variant={activeSection === 'perfil' ? 'default' : 'ghost'}
|
||||||
className="w-full justify-start transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
|
className="w-full justify-start transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
|
||||||
@ -3072,14 +3150,6 @@ const ProfissionalPage = () => {
|
|||||||
<Edit className="h-4 w-4" />
|
<Edit className="h-4 w-4" />
|
||||||
Editar
|
Editar
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
|
||||||
onClick={handleDeleteEvent}
|
|
||||||
variant="destructive"
|
|
||||||
className="flex-1 flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
Excluir
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
@ -3092,6 +3162,128 @@ const ProfissionalPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Modal para visualizar pacientes de um dia específico */}
|
||||||
|
{showDayModal && selectedDayDate && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex justify-center items-center z-50 p-4">
|
||||||
|
<div className="bg-card border border-border rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
|
||||||
|
{/* Header com navegação */}
|
||||||
|
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
const prev = new Date(selectedDayDate);
|
||||||
|
prev.setDate(prev.getDate() - 1);
|
||||||
|
setSelectedDayDate(prev);
|
||||||
|
}}
|
||||||
|
className="p-2 hover:bg-muted rounded transition-colors"
|
||||||
|
aria-label="Dia anterior"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<h2 className="text-lg font-semibold flex-1 text-center">
|
||||||
|
{selectedDayDate.toLocaleDateString('pt-BR', {
|
||||||
|
weekday: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
year: 'numeric'
|
||||||
|
})}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
const next = new Date(selectedDayDate);
|
||||||
|
next.setDate(next.getDate() + 1);
|
||||||
|
setSelectedDayDate(next);
|
||||||
|
}}
|
||||||
|
className="p-2 hover:bg-muted rounded transition-colors"
|
||||||
|
aria-label="Próximo dia"
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="w-12" />
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDayModal(false)}
|
||||||
|
className="p-2 hover:bg-muted rounded transition-colors ml-2"
|
||||||
|
aria-label="Fechar"
|
||||||
|
>
|
||||||
|
<X className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-4">
|
||||||
|
{(() => {
|
||||||
|
const dayStr = selectedDayDate.toISOString().split('T')[0];
|
||||||
|
const dayEvents = events.filter(e => e.date === dayStr).sort((a, b) => a.time.localeCompare(b.time));
|
||||||
|
|
||||||
|
if (dayEvents.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-8 text-muted-foreground">
|
||||||
|
<CalendarIcon className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
|
||||||
|
<p className="text-lg">Nenhuma consulta agendada para este dia</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<p className="text-sm text-muted-foreground mb-4">
|
||||||
|
{dayEvents.length} consulta{dayEvents.length !== 1 ? 's' : ''} agendada{dayEvents.length !== 1 ? 's' : ''}
|
||||||
|
</p>
|
||||||
|
{dayEvents.map((appointment) => {
|
||||||
|
const paciente = pacientes.find(p => p.nome === appointment.title);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={appointment.id}
|
||||||
|
className="border-l-4 p-4 rounded-lg bg-muted/20"
|
||||||
|
style={{ borderLeftColor: getStatusColor(appointment.type) }}
|
||||||
|
>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="font-semibold flex items-center gap-2">
|
||||||
|
<User className="h-4 w-4" />
|
||||||
|
{appointment.title}
|
||||||
|
</h3>
|
||||||
|
<span className="px-2 py-1 rounded-full text-xs font-medium text-white" style={{ backgroundColor: getStatusColor(appointment.type) }}>
|
||||||
|
{appointment.type}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Clock className="h-4 w-4" />
|
||||||
|
{appointment.time}
|
||||||
|
</span>
|
||||||
|
{paciente && (
|
||||||
|
<span>
|
||||||
|
CPF: {getPatientCpf(paciente)} • {getPatientAge(paciente)} anos
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Formulário para cadastro de paciente */}
|
||||||
|
<PatientRegistrationForm
|
||||||
|
open={showPatientForm}
|
||||||
|
onOpenChange={setShowPatientForm}
|
||||||
|
mode="create"
|
||||||
|
onSaved={(newPaciente) => {
|
||||||
|
// Adicionar o novo paciente à lista e recarregar
|
||||||
|
setPacientes((prev) => [...prev, newPaciente]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
);
|
);
|
||||||
|
|||||||
1485
susconecta/components/event-manager.tsx
Normal file
1485
susconecta/components/event-manager.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@ -264,7 +264,17 @@ export function PatientRegistrationForm({
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function handleSubmit(ev: React.FormEvent) {
|
async function handleSubmit(ev: React.FormEvent) {
|
||||||
ev.preventDefault(); if (!validateLocal()) return;
|
ev.preventDefault();
|
||||||
|
if (!validateLocal()) return;
|
||||||
|
|
||||||
|
// Debug: verificar se token está disponível
|
||||||
|
const tokenCheck = typeof window !== 'undefined' ? (localStorage.getItem('auth_token') || sessionStorage.getItem('auth_token')) : null;
|
||||||
|
console.debug('[PatientForm] Token disponível?', !!tokenCheck ? 'SIM' : 'NÃO - Possível causa do erro!');
|
||||||
|
if (!tokenCheck) {
|
||||||
|
setErrors({ submit: 'Sessão expirada. Por favor, faça login novamente.' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (!validarCPFLocal(form.cpf)) { setErrors((e) => ({ ...e, cpf: "CPF inválido" })); return; }
|
if (!validarCPFLocal(form.cpf)) { setErrors((e) => ({ ...e, cpf: "CPF inválido" })); return; }
|
||||||
if (mode === "create") { const existe = await verificarCpfDuplicado(form.cpf); if (existe) { setErrors((e) => ({ ...e, cpf: "CPF já cadastrado no sistema" })); return; } }
|
if (mode === "create") { const existe = await verificarCpfDuplicado(form.cpf); if (existe) { setErrors((e) => ({ ...e, cpf: "CPF já cadastrado no sistema" })); return; } }
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import React, { useState, useCallback, useMemo } from "react"
|
import React, { useState, useCallback, useMemo, useEffect } from "react"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
import { Card } from "@/components/ui/card"
|
import { Card } from "@/components/ui/card"
|
||||||
import { Input } from "@/components/ui/input"
|
import { Input } from "@/components/ui/input"
|
||||||
@ -16,16 +16,8 @@ import {
|
|||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog"
|
} from "@/components/ui/dialog"
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
import { ChevronLeft, ChevronRight, Plus, Calendar, Clock, Grid3x3, List, Search, Filter, X } from "lucide-react"
|
import { ChevronLeft, ChevronRight, Plus, Calendar, Clock, Grid3x3, List, Search, X } from "lucide-react"
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuCheckboxItem,
|
|
||||||
DropdownMenuLabel,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/components/ui/dropdown-menu"
|
|
||||||
|
|
||||||
export interface Event {
|
export interface Event {
|
||||||
id: string
|
id: string
|
||||||
@ -60,6 +52,10 @@ const defaultColors = [
|
|||||||
{ name: "Red", value: "red", bg: "bg-red-500", text: "text-red-700" },
|
{ name: "Red", value: "red", bg: "bg-red-500", text: "text-red-700" },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
// Locale/timezone padrão BR
|
||||||
|
const LOCALE = "pt-BR"
|
||||||
|
const TIMEZONE = "America/Sao_Paulo"
|
||||||
|
|
||||||
export function EventManager({
|
export function EventManager({
|
||||||
events: initialEvents = [],
|
events: initialEvents = [],
|
||||||
onEventCreate,
|
onEventCreate,
|
||||||
@ -87,13 +83,19 @@ export function EventManager({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const [searchQuery, setSearchQuery] = useState("")
|
const [searchQuery, setSearchQuery] = useState("")
|
||||||
const [selectedColors, setSelectedColors] = useState<string[]>([])
|
|
||||||
const [selectedTags, setSelectedTags] = useState<string[]>([])
|
// Dialog: lista completa de pacientes do dia
|
||||||
const [selectedCategories, setSelectedCategories] = useState<string[]>([])
|
const [dayDialogEvents, setDayDialogEvents] = useState<Event[] | null>(null)
|
||||||
|
const [isDayDialogOpen, setIsDayDialogOpen] = useState(false)
|
||||||
|
const openDayDialog = useCallback((eventsForDay: Event[]) => {
|
||||||
|
// ordena por horário antes de abrir
|
||||||
|
const ordered = [...eventsForDay].sort((a, b) => a.startTime.getTime() - b.startTime.getTime())
|
||||||
|
setDayDialogEvents(ordered)
|
||||||
|
setIsDayDialogOpen(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
const filteredEvents = useMemo(() => {
|
const filteredEvents = useMemo(() => {
|
||||||
return events.filter((event) => {
|
return events.filter((event) => {
|
||||||
// Search filter
|
|
||||||
if (searchQuery) {
|
if (searchQuery) {
|
||||||
const query = searchQuery.toLowerCase()
|
const query = searchQuery.toLowerCase()
|
||||||
const matchesSearch =
|
const matchesSearch =
|
||||||
@ -101,36 +103,15 @@ export function EventManager({
|
|||||||
event.description?.toLowerCase().includes(query) ||
|
event.description?.toLowerCase().includes(query) ||
|
||||||
event.category?.toLowerCase().includes(query) ||
|
event.category?.toLowerCase().includes(query) ||
|
||||||
event.tags?.some((tag) => tag.toLowerCase().includes(query))
|
event.tags?.some((tag) => tag.toLowerCase().includes(query))
|
||||||
|
|
||||||
if (!matchesSearch) return false
|
if (!matchesSearch) return false
|
||||||
}
|
}
|
||||||
|
|
||||||
// Color filter
|
|
||||||
if (selectedColors.length > 0 && !selectedColors.includes(event.color)) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tag filter
|
|
||||||
if (selectedTags.length > 0) {
|
|
||||||
const hasMatchingTag = event.tags?.some((tag) => selectedTags.includes(tag))
|
|
||||||
if (!hasMatchingTag) return false
|
|
||||||
}
|
|
||||||
|
|
||||||
// Category filter
|
|
||||||
if (selectedCategories.length > 0 && event.category && !selectedCategories.includes(event.category)) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
return true
|
return true
|
||||||
})
|
})
|
||||||
}, [events, searchQuery, selectedColors, selectedTags, selectedCategories])
|
}, [events, searchQuery])
|
||||||
|
|
||||||
const hasActiveFilters = selectedColors.length > 0 || selectedTags.length > 0 || selectedCategories.length > 0
|
const hasActiveFilters = false
|
||||||
|
|
||||||
const clearFilters = () => {
|
const clearFilters = () => {
|
||||||
setSelectedColors([])
|
|
||||||
setSelectedTags([])
|
|
||||||
setSelectedCategories([])
|
|
||||||
setSearchQuery("")
|
setSearchQuery("")
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -238,23 +219,16 @@ export function EventManager({
|
|||||||
[colors],
|
[colors],
|
||||||
)
|
)
|
||||||
|
|
||||||
const toggleTag = (tag: string, isCreating: boolean) => {
|
// Força lang/cookie pt-BR no documento (reforço local)
|
||||||
if (isCreating) {
|
useEffect(() => {
|
||||||
setNewEvent((prev) => ({
|
try {
|
||||||
...prev,
|
document.documentElement.lang = "pt-BR"
|
||||||
tags: prev.tags?.includes(tag) ? prev.tags.filter((t) => t !== tag) : [...(prev.tags || []), tag],
|
document.documentElement.setAttribute("xml:lang", "pt-BR")
|
||||||
}))
|
document.documentElement.setAttribute("data-lang", "pt-BR")
|
||||||
} else {
|
const oneYear = 60 * 60 * 24 * 365
|
||||||
setSelectedEvent((prev) =>
|
document.cookie = `NEXT_LOCALE=pt-BR; Path=/; Max-Age=${oneYear}; SameSite=Lax`
|
||||||
prev
|
} catch {}
|
||||||
? {
|
}, [])
|
||||||
...prev,
|
|
||||||
tags: prev.tags?.includes(tag) ? prev.tags.filter((t) => t !== tag) : [...(prev.tags || []), tag],
|
|
||||||
}
|
|
||||||
: null,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn("flex flex-col gap-4", className)}>
|
<div className={cn("flex flex-col gap-4", className)}>
|
||||||
@ -263,21 +237,24 @@ export function EventManager({
|
|||||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
|
||||||
<h2 className="text-xl font-semibold sm:text-2xl">
|
<h2 className="text-xl font-semibold sm:text-2xl">
|
||||||
{view === "month" &&
|
{view === "month" &&
|
||||||
currentDate.toLocaleDateString("pt-BR", {
|
currentDate.toLocaleDateString(LOCALE, {
|
||||||
month: "long",
|
month: "long",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
|
timeZone: TIMEZONE,
|
||||||
})}
|
})}
|
||||||
{view === "week" &&
|
{view === "week" &&
|
||||||
`Semana de ${currentDate.toLocaleDateString("pt-BR", {
|
`Semana de ${currentDate.toLocaleDateString(LOCALE, {
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
|
timeZone: TIMEZONE,
|
||||||
})}`}
|
})}`}
|
||||||
{view === "day" &&
|
{view === "day" &&
|
||||||
currentDate.toLocaleDateString("pt-BR", {
|
currentDate.toLocaleDateString(LOCALE, {
|
||||||
weekday: "long",
|
weekday: "long",
|
||||||
month: "long",
|
month: "long",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
|
timeZone: TIMEZONE,
|
||||||
})}
|
})}
|
||||||
{view === "list" && "Todos os eventos"}
|
{view === "list" && "Todos os eventos"}
|
||||||
</h2>
|
</h2>
|
||||||
@ -285,9 +262,6 @@ export function EventManager({
|
|||||||
<Button variant="outline" size="icon" onClick={() => navigateDate("prev")} className="h-8 w-8">
|
<Button variant="outline" size="icon" onClick={() => navigateDate("prev")} className="h-8 w-8">
|
||||||
<ChevronLeft className="h-4 w-4" />
|
<ChevronLeft className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" size="sm" onClick={() => setCurrentDate(new Date())}>
|
|
||||||
Hoje
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" size="icon" onClick={() => navigateDate("next")} className="h-8 w-8">
|
<Button variant="outline" size="icon" onClick={() => navigateDate("next")} className="h-8 w-8">
|
||||||
<ChevronRight className="h-4 w-4" />
|
<ChevronRight className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
@ -385,289 +359,45 @@ export function EventManager({
|
|||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<div className="relative flex-1">
|
<div className="relative flex-1">
|
||||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
<div className="flex items-center">
|
||||||
|
{/* Lupa minimalista à esquerda (somente ícone) */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label="Buscar"
|
||||||
|
className="flex items-center justify-center h-10 w-10 p-0 text-muted-foreground bg-transparent border-0"
|
||||||
|
onClick={() => {
|
||||||
|
const el = document.querySelector<HTMLInputElement>('input[placeholder="Buscar eventos..."]')
|
||||||
|
el?.focus()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Search className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Input central com altura consistente e foco visível */}
|
||||||
<Input
|
<Input
|
||||||
placeholder="Buscar eventos..."
|
placeholder="Buscar eventos..."
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
className="pl-9"
|
className={cn(
|
||||||
|
"flex-1 h-10 px-3 border border-border focus:ring-2 focus:ring-primary/20 outline-none",
|
||||||
|
searchQuery ? "rounded-l-md rounded-r-none" : "rounded-md"
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
{searchQuery && (
|
|
||||||
<Button
|
{/* Botão limpar discreto à direita (aparece somente com query) */}
|
||||||
variant="ghost"
|
{searchQuery ? (
|
||||||
size="icon"
|
<button
|
||||||
className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2"
|
type="button"
|
||||||
|
aria-label="Limpar busca"
|
||||||
|
className="flex items-center justify-center h-10 w-10 p-0 text-muted-foreground bg-transparent border-0"
|
||||||
onClick={() => setSearchQuery("")}
|
onClick={() => setSearchQuery("")}
|
||||||
>
|
>
|
||||||
<X className="h-4 w-4" />
|
<X className="h-5 w-5" />
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mobile: Horizontal scroll with full-length buttons */}
|
|
||||||
<div className="sm:hidden -mx-4 px-4">
|
|
||||||
<div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
|
|
||||||
{/* Color Filter */}
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="outline" size="sm" className="gap-2 whitespace-nowrap flex-shrink-0 bg-transparent">
|
|
||||||
<Filter className="h-4 w-4" />
|
|
||||||
Cores
|
|
||||||
{selectedColors.length > 0 && (
|
|
||||||
<Badge variant="secondary" className="ml-1 h-5 px-1.5">
|
|
||||||
{selectedColors.length}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="start" className="w-48">
|
|
||||||
<DropdownMenuLabel>Filtrar por Cor</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
{colors.map((color) => (
|
|
||||||
<DropdownMenuCheckboxItem
|
|
||||||
key={color.value}
|
|
||||||
checked={selectedColors.includes(color.value)}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
setSelectedColors((prev) =>
|
|
||||||
checked ? [...prev, color.value] : prev.filter((c) => c !== color.value),
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className={cn("h-3 w-3 rounded", color.bg)} />
|
|
||||||
{color.name}
|
|
||||||
</div>
|
|
||||||
</DropdownMenuCheckboxItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
|
|
||||||
{/* Tag Filter */}
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="outline" size="sm" className="gap-2 whitespace-nowrap flex-shrink-0 bg-transparent">
|
|
||||||
<Filter className="h-4 w-4" />
|
|
||||||
Tags
|
|
||||||
{selectedTags.length > 0 && (
|
|
||||||
<Badge variant="secondary" className="ml-1 h-5 px-1.5">
|
|
||||||
{selectedTags.length}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="start" className="w-48">
|
|
||||||
<DropdownMenuLabel>Filtrar por Tag</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
{availableTags.map((tag) => (
|
|
||||||
<DropdownMenuCheckboxItem
|
|
||||||
key={tag}
|
|
||||||
checked={selectedTags.includes(tag)}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
setSelectedTags((prev) => (checked ? [...prev, tag] : prev.filter((t) => t !== tag)))
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tag}
|
|
||||||
</DropdownMenuCheckboxItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
|
|
||||||
{/* Category Filter */}
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="outline" size="sm" className="gap-2 whitespace-nowrap flex-shrink-0 bg-transparent">
|
|
||||||
<Filter className="h-4 w-4" />
|
|
||||||
Categorias
|
|
||||||
{selectedCategories.length > 0 && (
|
|
||||||
<Badge variant="secondary" className="ml-1 h-5 px-1.5">
|
|
||||||
{selectedCategories.length}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="start" className="w-48">
|
|
||||||
<DropdownMenuLabel>Filtrar por Categoria</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
{categories.map((category) => (
|
|
||||||
<DropdownMenuCheckboxItem
|
|
||||||
key={category}
|
|
||||||
checked={selectedCategories.includes(category)}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
setSelectedCategories((prev) =>
|
|
||||||
checked ? [...prev, category] : prev.filter((c) => c !== category),
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{category}
|
|
||||||
</DropdownMenuCheckboxItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
|
|
||||||
{hasActiveFilters && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={clearFilters}
|
|
||||||
className="gap-2 whitespace-nowrap flex-shrink-0"
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
Limpar Filtros
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Desktop: Original layout */}
|
|
||||||
<div className="hidden sm:flex items-center gap-2">
|
|
||||||
{/* Color Filter */}
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="outline" size="sm" className="gap-2 bg-transparent">
|
|
||||||
<Filter className="h-4 w-4" />
|
|
||||||
Cores
|
|
||||||
{selectedColors.length > 0 && (
|
|
||||||
<Badge variant="secondary" className="ml-1 h-5 px-1">
|
|
||||||
{selectedColors.length}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end" className="w-48">
|
|
||||||
<DropdownMenuLabel>Filtrar por Cor</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
{colors.map((color) => (
|
|
||||||
<DropdownMenuCheckboxItem
|
|
||||||
key={color.value}
|
|
||||||
checked={selectedColors.includes(color.value)}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
setSelectedColors((prev) =>
|
|
||||||
checked ? [...prev, color.value] : prev.filter((c) => c !== color.value),
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className={cn("h-3 w-3 rounded", color.bg)} />
|
|
||||||
{color.name}
|
|
||||||
</div>
|
|
||||||
</DropdownMenuCheckboxItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
|
|
||||||
{/* Tag Filter */}
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="outline" size="sm" className="gap-2 bg-transparent">
|
|
||||||
<Filter className="h-4 w-4" />
|
|
||||||
Tags
|
|
||||||
{selectedTags.length > 0 && (
|
|
||||||
<Badge variant="secondary" className="ml-1 h-5 px-1">
|
|
||||||
{selectedTags.length}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end" className="w-48">
|
|
||||||
<DropdownMenuLabel>Filtrar por Tag</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
{availableTags.map((tag) => (
|
|
||||||
<DropdownMenuCheckboxItem
|
|
||||||
key={tag}
|
|
||||||
checked={selectedTags.includes(tag)}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
setSelectedTags((prev) => (checked ? [...prev, tag] : prev.filter((t) => t !== tag)))
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tag}
|
|
||||||
</DropdownMenuCheckboxItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
|
|
||||||
{/* Category Filter */}
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="outline" size="sm" className="gap-2 bg-transparent">
|
|
||||||
<Filter className="h-4 w-4" />
|
|
||||||
Categorias
|
|
||||||
{selectedCategories.length > 0 && (
|
|
||||||
<Badge variant="secondary" className="ml-1 h-5 px-1">
|
|
||||||
{selectedCategories.length}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end" className="w-48">
|
|
||||||
<DropdownMenuLabel>Filtrar por Categoria</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
{categories.map((category) => (
|
|
||||||
<DropdownMenuCheckboxItem
|
|
||||||
key={category}
|
|
||||||
checked={selectedCategories.includes(category)}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
setSelectedCategories((prev) =>
|
|
||||||
checked ? [...prev, category] : prev.filter((c) => c !== category),
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{category}
|
|
||||||
</DropdownMenuCheckboxItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
|
|
||||||
{hasActiveFilters && (
|
|
||||||
<Button variant="ghost" size="sm" onClick={clearFilters} className="gap-2">
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
Limpar
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{hasActiveFilters && (
|
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
|
||||||
<span className="text-sm text-muted-foreground">Filtros ativos:</span>
|
|
||||||
{selectedColors.map((colorValue) => {
|
|
||||||
const color = getColorClasses(colorValue)
|
|
||||||
return (
|
|
||||||
<Badge key={colorValue} variant="secondary" className="gap-1">
|
|
||||||
<div className={cn("h-2 w-2 rounded-full", color.bg)} />
|
|
||||||
{color.name}
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedColors((prev) => prev.filter((c) => c !== colorValue))}
|
|
||||||
className="ml-1 hover:text-foreground"
|
|
||||||
>
|
|
||||||
<X className="h-3 w-3" />
|
|
||||||
</button>
|
</button>
|
||||||
</Badge>
|
) : null}
|
||||||
)
|
</div>
|
||||||
})}
|
</div>
|
||||||
{selectedTags.map((tag) => (
|
|
||||||
<Badge key={tag} variant="secondary" className="gap-1">
|
|
||||||
{tag}
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedTags((prev) => prev.filter((t) => t !== tag))}
|
|
||||||
className="ml-1 hover:text-foreground"
|
|
||||||
>
|
|
||||||
<X className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
{selectedCategories.map((category) => (
|
|
||||||
<Badge key={category} variant="secondary" className="gap-1">
|
|
||||||
{category}
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedCategories((prev) => prev.filter((c) => c !== category))}
|
|
||||||
className="ml-1 hover:text-foreground"
|
|
||||||
>
|
|
||||||
<X className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Calendar Views - Pass filteredEvents instead of events */}
|
{/* Calendar Views - Pass filteredEvents instead of events */}
|
||||||
{view === "month" && (
|
{view === "month" && (
|
||||||
@ -682,9 +412,66 @@ export function EventManager({
|
|||||||
onDragEnd={() => handleDragEnd()}
|
onDragEnd={() => handleDragEnd()}
|
||||||
onDrop={handleDrop}
|
onDrop={handleDrop}
|
||||||
getColorClasses={getColorClasses}
|
getColorClasses={getColorClasses}
|
||||||
|
openDayDialog={openDayDialog}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Dialog com todos os pacientes do dia */}
|
||||||
|
<Dialog open={isDayDialogOpen} onOpenChange={setIsDayDialogOpen}>
|
||||||
|
<DialogContent className="max-w-lg max-h-[80vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Pacientes do dia</DialogTitle>
|
||||||
|
<DialogDescription>Todos os agendamentos do dia selecionado.</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-3 py-2">
|
||||||
|
{dayDialogEvents?.map((ev) => (
|
||||||
|
<div
|
||||||
|
key={ev.id}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedEvent(ev)
|
||||||
|
setIsDialogOpen(true)
|
||||||
|
setIsDayDialogOpen(false)
|
||||||
|
}}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
|
setSelectedEvent(ev)
|
||||||
|
setIsDialogOpen(true)
|
||||||
|
setIsDayDialogOpen(false)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="flex items-start gap-3 p-2 border-b last:border-b-0 rounded-md cursor-pointer hover:bg-accent/40 focus:outline-none focus:ring-2 focus:ring-primary/30"
|
||||||
|
>
|
||||||
|
<div className={cn("mt-1 h-3 w-3 rounded-full", getColorClasses(ev.color).bg)} />
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<div className="font-semibold truncate">{ev.title}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
{ev.startTime.toLocaleTimeString(LOCALE,{hour:"2-digit",minute:"2-digit",hour12:false,timeZone:TIMEZONE})}
|
||||||
|
{" - "}
|
||||||
|
{ev.endTime.toLocaleTimeString(LOCALE,{hour:"2-digit",minute:"2-digit",hour12:false,timeZone:TIMEZONE})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{ev.description && (
|
||||||
|
<div className="text-xs text-muted-foreground line-clamp-2">{ev.description}</div>
|
||||||
|
)}
|
||||||
|
<div className="mt-1 flex flex-wrap gap-1">
|
||||||
|
{ev.category && <Badge variant="secondary" className="text-[11px] h-5">{ev.category}</Badge>}
|
||||||
|
{ev.tags?.map((t) => (
|
||||||
|
<Badge key={t} variant="outline" className="text-[11px] h-5">{t}</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{!dayDialogEvents?.length && (
|
||||||
|
<div className="py-6 text-center text-sm text-muted-foreground">Nenhum evento</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
{view === "week" && (
|
{view === "week" && (
|
||||||
<WeekView
|
<WeekView
|
||||||
currentDate={currentDate}
|
currentDate={currentDate}
|
||||||
@ -728,7 +515,7 @@ export function EventManager({
|
|||||||
|
|
||||||
{/* Event Dialog */}
|
{/* Event Dialog */}
|
||||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
<DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
|
<DialogContent className="max-w-md max-h[90vh] overflow-y-auto">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>{isCreating ? "Criar Evento" : "Detalhes do Evento"}</DialogTitle>
|
<DialogTitle>{isCreating ? "Criar Evento" : "Detalhes do Evento"}</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
@ -827,75 +614,9 @@ export function EventManager({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
{/* Campos de Categoria/Cor removidos */}
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="category">Categoria</Label>
|
|
||||||
<Select
|
|
||||||
value={isCreating ? newEvent.category : selectedEvent?.category}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
isCreating
|
|
||||||
? setNewEvent((prev) => ({ ...prev, category: value }))
|
|
||||||
: setSelectedEvent((prev) => (prev ? { ...prev, category: value } : null))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger id="category">
|
|
||||||
<SelectValue placeholder="Selecione a categoria" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{categories.map((cat) => (
|
|
||||||
<SelectItem key={cat} value={cat}>
|
|
||||||
{cat}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
{/* Campo de Tags removido */}
|
||||||
<Label htmlFor="color">Cor</Label>
|
|
||||||
<Select
|
|
||||||
value={isCreating ? newEvent.color : selectedEvent?.color}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
isCreating
|
|
||||||
? setNewEvent((prev) => ({ ...prev, color: value }))
|
|
||||||
: setSelectedEvent((prev) => (prev ? { ...prev, color: value } : null))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger id="color">
|
|
||||||
<SelectValue placeholder="Selecione a cor" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{colors.map((color) => (
|
|
||||||
<SelectItem key={color.value} value={color.value}>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className={cn("h-4 w-4 rounded", color.bg)} />
|
|
||||||
{color.name}
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Tags</Label>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{availableTags.map((tag) => {
|
|
||||||
const isSelected = isCreating ? newEvent.tags?.includes(tag) : selectedEvent?.tags?.includes(tag)
|
|
||||||
return (
|
|
||||||
<Badge
|
|
||||||
key={tag}
|
|
||||||
variant={isSelected ? "default" : "outline"}
|
|
||||||
className="cursor-pointer transition-all hover:scale-105"
|
|
||||||
onClick={() => toggleTag(tag, isCreating)}
|
|
||||||
>
|
|
||||||
{tag}
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
@ -944,9 +665,11 @@ function EventCard({
|
|||||||
const colorClasses = getColorClasses(event.color)
|
const colorClasses = getColorClasses(event.color)
|
||||||
|
|
||||||
const formatTime = (date: Date) => {
|
const formatTime = (date: Date) => {
|
||||||
return date.toLocaleTimeString("en-US", {
|
return date.toLocaleTimeString(LOCALE, {
|
||||||
hour: "2-digit",
|
hour: "2-digit",
|
||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
|
hour12: false,
|
||||||
|
timeZone: TIMEZONE,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1124,6 +847,7 @@ function MonthView({
|
|||||||
onDragEnd,
|
onDragEnd,
|
||||||
onDrop,
|
onDrop,
|
||||||
getColorClasses,
|
getColorClasses,
|
||||||
|
openDayDialog,
|
||||||
}: {
|
}: {
|
||||||
currentDate: Date
|
currentDate: Date
|
||||||
events: Event[]
|
events: Event[]
|
||||||
@ -1132,6 +856,7 @@ function MonthView({
|
|||||||
onDragEnd: () => void
|
onDragEnd: () => void
|
||||||
onDrop: (date: Date) => void
|
onDrop: (date: Date) => void
|
||||||
getColorClasses: (color: string) => { bg: string; text: string }
|
getColorClasses: (color: string) => { bg: string; text: string }
|
||||||
|
openDayDialog: (eventsForDay: Event[]) => void
|
||||||
}) {
|
}) {
|
||||||
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
|
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
|
||||||
const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)
|
const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)
|
||||||
@ -1170,6 +895,15 @@ function MonthView({
|
|||||||
<div className="grid grid-cols-7">
|
<div className="grid grid-cols-7">
|
||||||
{days.map((day, index) => {
|
{days.map((day, index) => {
|
||||||
const dayEvents = getEventsForDay(day)
|
const dayEvents = getEventsForDay(day)
|
||||||
|
// dedup por título para evitar repetidos
|
||||||
|
const uniqueMap = new Map<string, Event>()
|
||||||
|
dayEvents.forEach((ev) => {
|
||||||
|
const k = (ev.title || "").trim().toLowerCase()
|
||||||
|
if (!uniqueMap.has(k)) uniqueMap.set(k, ev)
|
||||||
|
})
|
||||||
|
const uniqueEvents = Array.from(uniqueMap.values())
|
||||||
|
const eventsToShow = uniqueEvents.slice(0, 3)
|
||||||
|
const moreCount = Math.max(0, uniqueEvents.length - 3)
|
||||||
const isCurrentMonth = day.getMonth() === currentDate.getMonth()
|
const isCurrentMonth = day.getMonth() === currentDate.getMonth()
|
||||||
const isToday = day.toDateString() === new Date().toDateString()
|
const isToday = day.toDateString() === new Date().toDateString()
|
||||||
|
|
||||||
@ -1184,16 +918,11 @@ function MonthView({
|
|||||||
onDragOver={(e) => e.preventDefault()}
|
onDragOver={(e) => e.preventDefault()}
|
||||||
onDrop={() => onDrop(day)}
|
onDrop={() => onDrop(day)}
|
||||||
>
|
>
|
||||||
<div
|
{/* Número do dia padronizado (sem destaque azul no 'hoje') */}
|
||||||
className={cn(
|
<div className="mb-1 text-xs sm:text-sm">{day.getDate()}</div>
|
||||||
"mb-1 flex h-5 w-5 items-center justify-center rounded-full text-xs sm:h-6 sm:w-6 sm:text-sm",
|
|
||||||
isToday && "bg-primary text-primary-foreground font-semibold",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{day.getDate()}
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
{dayEvents.slice(0, 3).map((event) => (
|
{eventsToShow.map((event) => (
|
||||||
<EventCard
|
<EventCard
|
||||||
key={event.id}
|
key={event.id}
|
||||||
event={event}
|
event={event}
|
||||||
@ -1204,8 +933,16 @@ function MonthView({
|
|||||||
variant="compact"
|
variant="compact"
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{dayEvents.length > 3 && (
|
{moreCount > 0 && (
|
||||||
<div className="text-[10px] text-muted-foreground sm:text-xs">+{dayEvents.length - 3} mais</div>
|
<div className="text-[10px] sm:text-xs">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => openDayDialog(uniqueEvents)}
|
||||||
|
className="text-primary underline"
|
||||||
|
>
|
||||||
|
+{moreCount} mais
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1267,17 +1004,17 @@ function WeekView({
|
|||||||
key={day.toISOString()}
|
key={day.toISOString()}
|
||||||
className="border-r p-2 text-center text-xs font-medium last:border-r-0 sm:text-sm"
|
className="border-r p-2 text-center text-xs font-medium last:border-r-0 sm:text-sm"
|
||||||
>
|
>
|
||||||
<div className="hidden sm:block">{day.toLocaleDateString("pt-BR", { weekday: "short" })}</div>
|
<div className="hidden sm:block">{day.toLocaleDateString(LOCALE, { weekday: "short", timeZone: TIMEZONE })}</div>
|
||||||
<div className="sm:hidden">{day.toLocaleDateString("pt-BR", { weekday: "narrow" })}</div>
|
<div className="sm:hidden">{day.toLocaleDateString(LOCALE, { weekday: "narrow", timeZone: TIMEZONE })}</div>
|
||||||
<div className="text-[10px] text-muted-foreground sm:text-xs">
|
<div className="text-[10px] text-muted-foreground sm:text-xs">
|
||||||
{day.toLocaleDateString("pt-BR", { month: "short", day: "numeric" })}
|
{day.toLocaleDateString(LOCALE, { month: "short", day: "numeric", timeZone: TIMEZONE })}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-8">
|
<div className="grid grid-cols-8">
|
||||||
{hours.map((hour) => (
|
{hours.map((hour) => (
|
||||||
<>
|
<React.Fragment key={`hour-${hour}`}>
|
||||||
<div
|
<div
|
||||||
key={`time-${hour}`}
|
key={`time-${hour}`}
|
||||||
className="border-b border-r p-1 text-[10px] text-muted-foreground sm:p-2 sm:text-xs"
|
className="border-b border-r p-1 text-[10px] text-muted-foreground sm:p-2 sm:text-xs"
|
||||||
@ -1309,7 +1046,7 @@ function WeekView({
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
@ -1401,15 +1138,14 @@ function ListView({
|
|||||||
|
|
||||||
const groupedEvents = sortedEvents.reduce(
|
const groupedEvents = sortedEvents.reduce(
|
||||||
(acc, event) => {
|
(acc, event) => {
|
||||||
const dateKey = event.startTime.toLocaleDateString("pt-BR", {
|
const dateKey = event.startTime.toLocaleDateString(LOCALE, {
|
||||||
weekday: "long",
|
weekday: "long",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
month: "long",
|
month: "long",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
|
timeZone: TIMEZONE,
|
||||||
})
|
})
|
||||||
if (!acc[dateKey]) {
|
if (!acc[dateKey]) acc[dateKey] = []
|
||||||
acc[dateKey] = []
|
|
||||||
}
|
|
||||||
acc[dateKey].push(event)
|
acc[dateKey].push(event)
|
||||||
return acc
|
return acc
|
||||||
},
|
},
|
||||||
@ -1426,11 +1162,7 @@ function ListView({
|
|||||||
{dateEvents.map((event) => {
|
{dateEvents.map((event) => {
|
||||||
const colorClasses = getColorClasses(event.color)
|
const colorClasses = getColorClasses(event.color)
|
||||||
return (
|
return (
|
||||||
<div
|
<div key={event.id} onClick={() => onEventClick(event)} className="group cursor-pointer rounded-lg border bg-card p-3 transition-all hover:shadow-md hover:scale-[1.01] animate-in fade-in slide-in-from-bottom-2 duration-300 sm:p-4">
|
||||||
key={event.id}
|
|
||||||
onClick={() => onEventClick(event)}
|
|
||||||
className="group cursor-pointer rounded-lg border bg-card p-3 transition-all hover:shadow-md hover:scale-[1.01] animate-in fade-in slide-in-from-bottom-2 duration-300 sm:p-4"
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-2 sm:gap-3">
|
<div className="flex items-start gap-2 sm:gap-3">
|
||||||
<div className={cn("mt-1 h-2.5 w-2.5 rounded-full sm:h-3 sm:w-3", colorClasses.bg)} />
|
<div className={cn("mt-1 h-2.5 w-2.5 rounded-full sm:h-3 sm:w-3", colorClasses.bg)} />
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
@ -1456,7 +1188,9 @@ function ListView({
|
|||||||
<div className="mt-2 flex flex-wrap items-center gap-2 text-[10px] text-muted-foreground sm:gap-4 sm:text-xs">
|
<div className="mt-2 flex flex-wrap items-center gap-2 text-[10px] text-muted-foreground sm:gap-4 sm:text-xs">
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<Clock className="h-3 w-3" />
|
<Clock className="h-3 w-3" />
|
||||||
{event.startTime.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" })} - {event.endTime.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" })}
|
{event.startTime.toLocaleTimeString(LOCALE, { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: TIMEZONE })}
|
||||||
|
{" - "}
|
||||||
|
{event.endTime.toLocaleTimeString(LOCALE, { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: TIMEZONE })}
|
||||||
</div>
|
</div>
|
||||||
{event.tags && event.tags.length > 0 && (
|
{event.tags && event.tags.length > 0 && (
|
||||||
<div className="flex flex-wrap gap-1">
|
<div className="flex flex-wrap gap-1">
|
||||||
|
|||||||
@ -25,6 +25,7 @@ interface ThreeDWallCalendarProps {
|
|||||||
events: CalendarEvent[]
|
events: CalendarEvent[]
|
||||||
onAddEvent?: (e: CalendarEvent) => void
|
onAddEvent?: (e: CalendarEvent) => void
|
||||||
onRemoveEvent?: (id: string) => void
|
onRemoveEvent?: (id: string) => void
|
||||||
|
onOpenAddPatientForm?: () => void
|
||||||
panelWidth?: number
|
panelWidth?: number
|
||||||
panelHeight?: number
|
panelHeight?: number
|
||||||
columns?: number
|
columns?: number
|
||||||
@ -34,6 +35,7 @@ export function ThreeDWallCalendar({
|
|||||||
events,
|
events,
|
||||||
onAddEvent,
|
onAddEvent,
|
||||||
onRemoveEvent,
|
onRemoveEvent,
|
||||||
|
onOpenAddPatientForm,
|
||||||
panelWidth = 160,
|
panelWidth = 160,
|
||||||
panelHeight = 120,
|
panelHeight = 120,
|
||||||
columns = 7,
|
columns = 7,
|
||||||
@ -448,9 +450,17 @@ export function ThreeDWallCalendar({
|
|||||||
|
|
||||||
{/* Add event form */}
|
{/* Add event form */}
|
||||||
<div className="flex gap-2 items-center">
|
<div className="flex gap-2 items-center">
|
||||||
|
{onOpenAddPatientForm ? (
|
||||||
|
<Button onClick={onOpenAddPatientForm} className="w-full">
|
||||||
|
Adicionar Paciente
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<Input placeholder="Nome do paciente" value={title} onChange={(e) => setTitle(e.target.value)} />
|
<Input placeholder="Nome do paciente" value={title} onChange={(e) => setTitle(e.target.value)} />
|
||||||
<Input type="date" value={newDate} onChange={(e) => setNewDate(e.target.value)} />
|
<Input type="date" value={newDate} onChange={(e) => setNewDate(e.target.value)} />
|
||||||
<Button onClick={handleAdd}>Adicionar Paciente</Button>
|
<Button onClick={handleAdd}>Adicionar Paciente</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1554,6 +1554,15 @@ export async function criarPaciente(input: PacienteInput): Promise<Paciente> {
|
|||||||
];
|
];
|
||||||
|
|
||||||
let lastErr: any = null;
|
let lastErr: any = null;
|
||||||
|
|
||||||
|
// Debug: verificar token antes de tentar
|
||||||
|
const debugToken = getAuthToken();
|
||||||
|
if (!debugToken) {
|
||||||
|
console.warn('[criarPaciente] ⚠️ AVISO: Nenhum token de autenticação encontrado no localStorage/sessionStorage! Tentando mesmo assim, mas possível causa do erro.');
|
||||||
|
} else {
|
||||||
|
console.debug('[criarPaciente] ✓ Token encontrado, comprimento:', debugToken.length);
|
||||||
|
}
|
||||||
|
|
||||||
for (const u of fnUrls) {
|
for (const u of fnUrls) {
|
||||||
try {
|
try {
|
||||||
const headers = { ...baseHeaders(), 'Content-Type': 'application/json' } as Record<string,string>;
|
const headers = { ...baseHeaders(), 'Content-Type': 'application/json' } as Record<string,string>;
|
||||||
@ -1562,7 +1571,7 @@ export async function criarPaciente(input: PacienteInput): Promise<Paciente> {
|
|||||||
const a = maskedHeaders.Authorization as string;
|
const a = maskedHeaders.Authorization as string;
|
||||||
maskedHeaders.Authorization = `${a.slice(0,6)}...${a.slice(-6)}`;
|
maskedHeaders.Authorization = `${a.slice(0,6)}...${a.slice(-6)}`;
|
||||||
}
|
}
|
||||||
// Log removido por segurança
|
console.debug('[criarPaciente] Tentando criar paciente em:', u.replace(/^https:\/\/[^\/]+/, 'https://[...host...]'));
|
||||||
const res = await fetch(u, {
|
const res = await fetch(u, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers,
|
headers,
|
||||||
@ -1601,17 +1610,37 @@ export async function criarPaciente(input: PacienteInput): Promise<Paciente> {
|
|||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
lastErr = err;
|
lastErr = err;
|
||||||
const emsg = err && typeof err === 'object' && 'message' in err ? (err as any).message : String(err);
|
const emsg = err && typeof err === 'object' && 'message' in err ? (err as any).message : String(err);
|
||||||
console.warn('[criarPaciente] tentativa em', u, 'falhou:', emsg);
|
console.warn('[criarPaciente] ❌ Tentativa em', u, 'falhou:', emsg);
|
||||||
// If the underlying error is a network/CORS issue, add a helpful hint in the log
|
|
||||||
if (emsg && emsg.toLowerCase().includes('failed to fetch')) {
|
// Se o erro é uma falha de fetch (network/CORS)
|
||||||
console.error('[criarPaciente] Falha de fetch (network/CORS). Verifique se você está autenticado no navegador (token presente em localStorage/sessionStorage) e se o endpoint permite requisições CORS do seu domínio. Também confirme que a função /create-user-with-password existe e está acessível.');
|
if (emsg && (emsg.toLowerCase().includes('failed to fetch') || emsg.toLowerCase().includes('networkerror'))) {
|
||||||
|
console.error('[criarPaciente] ⚠️ FALHA DE REDE/CORS detectada. Possíveis causas:\n' +
|
||||||
|
'1. Função Supabase /create-user-with-password não existe ou está desativada\n' +
|
||||||
|
'2. CORS configurado incorretamente no Supabase\n' +
|
||||||
|
'3. Endpoint indisponível ou a rede está offline\n' +
|
||||||
|
'4. Token expirado ou inválido\n' +
|
||||||
|
'URL que falhou:', u);
|
||||||
}
|
}
|
||||||
// try next
|
// try next
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const emsg = lastErr && typeof lastErr === 'object' && 'message' in lastErr ? (lastErr as any).message : String(lastErr ?? 'sem detalhes');
|
const emsg = lastErr && typeof lastErr === 'object' && 'message' in lastErr ? (lastErr as any).message : String(lastErr ?? 'sem detalhes');
|
||||||
throw new Error(`Falha ao criar paciente via create-user-with-password: ${emsg}. Verifique autenticação (token no localStorage/sessionStorage), CORS e se o endpoint /functions/v1/create-user-with-password está implementado e aceitando requisições do navegador.`);
|
|
||||||
|
// Mensagem de erro mais detalhada e útil
|
||||||
|
let friendlyMsg = `Falha ao criar paciente.`;
|
||||||
|
if (emsg.toLowerCase().includes('networkerror') || emsg.toLowerCase().includes('failed to fetch')) {
|
||||||
|
friendlyMsg += ` Erro de rede/CORS detectado. `;
|
||||||
|
friendlyMsg += `Verifique se:\n`;
|
||||||
|
friendlyMsg += `• A função /create-user-with-password existe no Supabase\n`;
|
||||||
|
friendlyMsg += `• Você está autenticado (token no localStorage)\n`;
|
||||||
|
friendlyMsg += `• CORS está configurado corretamente\n`;
|
||||||
|
friendlyMsg += `• A rede está disponível`;
|
||||||
|
} else {
|
||||||
|
friendlyMsg += ` ${emsg}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error(friendlyMsg);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function atualizarPaciente(id: string | number, input: PacienteInput): Promise<Paciente> {
|
export async function atualizarPaciente(id: string | number, input: PacienteInput): Promise<Paciente> {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user