add-search-in-patient-page

This commit is contained in:
João Gustavo 2025-11-12 15:55:12 -03:00
parent 734de0e562
commit 9739fc5687
4 changed files with 299 additions and 55 deletions

View File

@ -19,6 +19,9 @@ export default function RootLayout({
}) {
return (
<html lang="pt-BR" className="antialiased" suppressHydrationWarning>
<head>
<meta charSet="utf-8" />
</head>
<body style={{ fontFamily: "var(--font-geist-sans)" }}>
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
<AuthProvider>

View File

@ -19,7 +19,7 @@ import Link from 'next/link'
import ProtectedRoute from '@/components/shared/ProtectedRoute'
import { useAuth } from '@/hooks/useAuth'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { buscarPacientes, buscarPacientePorUserId, getUserInfo, listarAgendamentos, buscarMedicosPorIds, buscarMedicos, atualizarPaciente, buscarPacientePorId, getDoctorById, atualizarAgendamento, deletarAgendamento, addDeletedAppointmentId } from '@/lib/api'
import { buscarPacientes, buscarPacientePorUserId, getUserInfo, listarAgendamentos, buscarMedicosPorIds, buscarMedicos, atualizarPaciente, buscarPacientePorId, getDoctorById, atualizarAgendamento, deletarAgendamento, addDeletedAppointmentId, listarTodosMedicos } from '@/lib/api'
import { CalendarRegistrationForm } from '@/components/features/forms/calendar-registration-form'
import { buscarRelatorioPorId, listarRelatoriosPorMedico } from '@/lib/reports'
import { ENV_CONFIG } from '@/lib/env-config'
@ -309,9 +309,15 @@ export default function PacientePage() {
setIsEditingProfile(false)
}
function DashboardCards() {
const router = useRouter()
const [nextAppt, setNextAppt] = useState<string | null>(null)
const [examsCount, setExamsCount] = useState<number | null>(null)
const [loading, setLoading] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const [medicos, setMedicos] = useState<any[]>([])
const [searchLoading, setSearchLoading] = useState(false)
const [especialidades, setEspecialidades] = useState<string[]>([])
const [especialidadesLoading, setEspecialidadesLoading] = useState(true)
useEffect(() => {
let mounted = true
@ -429,37 +435,200 @@ export default function PacientePage() {
return () => { mounted = false }
}, [])
return (
<div className="grid grid-cols-1 gap-3 sm:gap-4 md:gap-4 mb-6 md:grid-cols-2">
<Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
<div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
<div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
<Calendar className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
</div>
{/* rótulo e número com mesma fonte e mesmo tamanho (harmônico) */}
<span className="text-base sm:text-lg md:text-lg font-semibold text-muted-foreground tracking-wide">
{strings.proximaConsulta}
</span>
<span className="text-base sm:text-lg md:text-xl font-semibold text-foreground" aria-live="polite">
{loading ? strings.carregando : (nextAppt ?? '-')}
</span>
</div>
</Card>
// Carregar especialidades únicas dos médicos ao montar
useEffect(() => {
let mounted = true
setEspecialidadesLoading(true)
;(async () => {
try {
console.log('[DashboardCards] Carregando especialidades...')
const todos = await listarTodosMedicos().catch((err) => {
console.error('[DashboardCards] Erro ao buscar médicos:', err)
return []
})
console.log('[DashboardCards] Médicos carregados:', todos?.length || 0, todos)
if (!mounted) return
// Mapeamento de correções para especialidades com encoding errado
const specialtyFixes: Record<string, string> = {
'Cl\u00EDnica Geral': 'Clínica Geral',
'Cl\u00E3nica Geral': 'Clínica Geral',
'Cl?nica Geral': 'Clínica Geral',
'Cl©nica Geral': 'Clínica Geral',
'Cl\uFFFDnica Geral': 'Clínica Geral',
};
let specs: string[] = []
if (Array.isArray(todos) && todos.length > 0) {
// Extrai TODAS as especialidades únicas do campo specialty
specs = Array.from(new Set(
todos
.map((m: any) => {
let spec = m.specialty || m.speciality || ''
// Aplica correções conhecidas
for (const [wrong, correct] of Object.entries(specialtyFixes)) {
spec = String(spec).replace(new RegExp(wrong, 'g'), correct)
}
// Normaliza caracteres UTF-8 e limpa
try {
const normalized = String(spec || '').normalize('NFC').trim()
return normalized
} catch (e) {
return String(spec || '').trim()
}
})
.filter((s: string) => s && s.length > 0)
))
}
console.log('[DashboardCards] Especialidades encontradas:', specs)
setEspecialidades(specs.length > 0 ? specs.sort() : [])
} catch (e) {
console.error('[DashboardCards] erro ao carregar especialidades', e)
if (mounted) setEspecialidades([])
} finally {
if (mounted) setEspecialidadesLoading(false)
}
})()
return () => { mounted = false }
}, [])
<Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
<div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
<div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
<FileText className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
// Debounced search por médico
useEffect(() => {
let mounted = true
const term = String(searchQuery || '').trim()
const handle = setTimeout(async () => {
if (!mounted) return
if (!term || term.length < 2) {
setMedicos([])
return
}
try {
setSearchLoading(true)
const results = await buscarMedicos(term).catch(() => [])
if (!mounted) return
setMedicos(Array.isArray(results) ? results : [])
} catch (e) {
if (mounted) setMedicos([])
} finally {
if (mounted) setSearchLoading(false)
}
}, 300)
return () => { mounted = false; clearTimeout(handle) }
}, [searchQuery])
const handleSearchMedico = (medico: any) => {
const qs = new URLSearchParams()
qs.set('tipo', 'teleconsulta')
if (medico?.full_name) qs.set('medico', medico.full_name)
if (medico?.specialty) qs.set('especialidade', medico.specialty || medico.especialidade || '')
qs.set('origin', 'paciente')
router.push(`/paciente/resultados?${qs.toString()}`)
setSearchQuery('')
setMedicos([])
}
const handleEspecialidadeClick = (especialidade: string) => {
const qs = new URLSearchParams()
qs.set('tipo', 'teleconsulta')
qs.set('especialidade', especialidade)
qs.set('origin', 'paciente')
router.push(`/paciente/resultados?${qs.toString()}`)
}
return (
<div className="space-y-4 sm:space-y-6">
{/* Hero Section com Busca */}
<section className="rounded-2xl sm:rounded-3xl bg-linear-to-br from-primary to-primary/90 p-4 sm:p-6 md:p-8 text-primary-foreground shadow-lg">
<div className="max-w-4xl mx-auto space-y-4 sm:space-y-6">
<div className="text-center space-y-2 sm:space-y-3">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold">Encontre especialistas e clínicas</h2>
<p className="text-sm sm:text-base md:text-lg opacity-90">Busque por médico, especialidade ou localização</p>
</div>
{/* Search Bar */}
<div className="relative">
<Input
placeholder="Buscar médico, especialidade..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full px-4 sm:px-5 md:px-6 py-3 sm:py-3.5 md:py-4 rounded-xl bg-white text-foreground placeholder:text-muted-foreground text-sm sm:text-base border-0 shadow-md"
/>
{searchQuery && medicos.length > 0 && (
<div className="absolute top-full left-0 right-0 mt-2 bg-white rounded-xl border border-border shadow-lg z-50 max-h-64 overflow-y-auto">
{medicos.map((medico) => (
<button
key={medico.id}
onClick={() => handleSearchMedico(medico)}
className="w-full text-left px-4 py-3 sm:py-4 hover:bg-primary/10 border-b border-border/50 last:border-0 transition-colors text-foreground text-sm sm:text-base"
>
<div className="font-semibold">{medico.full_name || 'Médico'}</div>
<div className="text-xs sm:text-sm text-muted-foreground">{medico.specialty || medico.especialidade || ''}</div>
</button>
))}
</div>
)}
</div>
{/* Especialidades */}
<div className="space-y-3 sm:space-y-4">
<p className="text-sm sm:text-base font-semibold opacity-90">Especialidades populares</p>
{especialidadesLoading ? (
<div className="flex gap-2 flex-wrap">
{[1, 2, 3, 4, 5, 6].map((i) => (
<div key={i} className="h-10 w-24 bg-white/20 rounded-full animate-pulse"></div>
))}
</div>
) : especialidades && especialidades.length > 0 ? (
<div className="flex flex-wrap gap-2 sm:gap-3">
{especialidades.map((esp) => (
<button
key={esp}
onClick={() => handleEspecialidadeClick(esp)}
className="px-4 sm:px-5 py-2 sm:py-2.5 rounded-full bg-white/20 hover:bg-white/30 text-white font-medium text-xs sm:text-sm transition-colors border border-white/30 whitespace-nowrap"
>
{esp}
</button>
))}
</div>
) : (
<p className="text-sm opacity-75">Nenhuma especialidade disponível</p>
)}
</div>
<span className="text-base sm:text-lg md:text-lg font-semibold text-muted-foreground tracking-wide">
{strings.ultimosExames}
</span>
<span className="text-base sm:text-lg md:text-xl font-semibold text-foreground" aria-live="polite">
{loading ? strings.carregando : (examsCount !== null ? String(examsCount) : '-')}
</span>
</div>
</Card>
</div>
</section>
{/* Cards com Informações */}
<div className="grid grid-cols-1 gap-3 sm:gap-4 md:gap-4 md:grid-cols-2">
<Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
<div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
<div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
<Calendar className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
</div>
<span className="text-base sm:text-lg md:text-lg font-semibold text-muted-foreground tracking-wide">
{strings.proximaConsulta}
</span>
<span className="text-base sm:text-lg md:text-xl font-semibold text-foreground" aria-live="polite">
{loading ? strings.carregando : (nextAppt ?? '-')}
</span>
</div>
</Card>
<Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
<div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
<div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
<FileText className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
</div>
<span className="text-base sm:text-lg md:text-lg font-semibold text-muted-foreground tracking-wide">
{strings.ultimosExames}
</span>
<span className="text-base sm:text-lg md:text-xl font-semibold text-foreground" aria-live="polite">
{loading ? strings.carregando : (examsCount !== null ? String(examsCount) : '-')}
</span>
</div>
</Card>
</div>
</div>
)
}
@ -726,26 +895,6 @@ export default function PacientePage() {
return (
<div className="space-y-6">
{/* Hero Section */}
<section className="bg-linear-to-br from-card to-card/95 shadow-lg rounded-2xl border border-primary/10 p-4 sm:p-6 md:p-8">
<div className="max-w-3xl mx-auto space-y-4 sm:space-y-6 md:space-y-8">
<header className="text-center space-y-2 sm:space-y-3 md:space-y-4">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-foreground">Agende sua próxima consulta</h2>
<p className="text-sm sm:text-base md:text-lg text-muted-foreground leading-relaxed">Escolha o formato ideal, selecione a especialidade e encontre o profissional perfeito para você.</p>
</header>
<div className="space-y-4 sm:space-y-6 rounded-2xl border border-primary/15 bg-linear-to-r from-primary/5 to-primary/10 p-4 sm:p-6 md:p-8 shadow-sm">
<div className="flex justify-center">
<Button asChild className="w-full sm:w-auto px-6 sm:px-8 md:px-10 py-2 sm:py-2.5 md:py-3 bg-primary text-white hover:bg-primary/90! hover:text-white! transition-all duration-200 font-semibold text-sm sm:text-base rounded-lg shadow-md hover:shadow-lg active:scale-95">
<Link href={buildResultadosHref()} prefetch={false}>
Pesquisar Médicos
</Link>
</Button>
</div>
</div>
</div>
</section>
{/* Consultas Agendadas Section */}
<section className="bg-card shadow-md rounded-lg border border-border p-4 sm:p-5 md:p-6">
<div className="space-y-4 sm:space-y-5 md:space-y-6">

View File

@ -62,6 +62,8 @@ export default function ResultadosClient() {
const [bairro, setBairro] = useState<string>('Todos')
// Busca por nome do médico
const [searchQuery, setSearchQuery] = useState<string>('')
// Filtro de médico específico vindo da URL (quando clicado no dashboard)
const [medicoFiltro, setMedicoFiltro] = useState<string | null>(null)
// Track if URL params have been synced to avoid race condition
const [paramsSync, setParamsSync] = useState(false)
@ -117,6 +119,10 @@ export default function ResultadosClient() {
const especialidadeParam = params.get('especialidade')
if (especialidadeParam) setEspecialidadeHero(especialidadeParam)
// Ler filtro de médico específico da URL
const medicoParam = params.get('medico')
if (medicoParam) setMedicoFiltro(medicoParam)
// Mark params as synced
setParamsSync(true)
}, [params])
@ -163,9 +169,10 @@ export default function ResultadosClient() {
}, [])
// 4) Re-fetch doctors when especialidade changes (after initial sync)
// SKIP this if medicoFiltro está definido (médico específico selecionado)
useEffect(() => {
// Skip if this is the initial render or if user is searching by name
if (!paramsSync || (searchQuery && String(searchQuery).trim().length > 1)) return
// Skip if this is the initial render or if user is searching by name or if a specific doctor is selected
if (!paramsSync || medicoFiltro || (searchQuery && String(searchQuery).trim().length > 1)) return
let mounted = true
;(async () => {
@ -191,10 +198,13 @@ export default function ResultadosClient() {
}
})()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [especialidadeHero, paramsSync])
}, [especialidadeHero, paramsSync, medicoFiltro])
// 5) Debounced search by doctor name
// SKIP this if medicoFiltro está definido
useEffect(() => {
if (medicoFiltro) return // Skip se médico específico foi selecionado
let mounted = true
const term = String(searchQuery || '').trim()
const handle = setTimeout(async () => {
@ -216,7 +226,35 @@ export default function ResultadosClient() {
}
}, 350)
return () => { mounted = false; clearTimeout(handle) }
}, [searchQuery])
}, [searchQuery, medicoFiltro])
// 5b) Quando um médico específico é selecionado, fazer uma busca por ele (PRIORIDADE MÁXIMA)
useEffect(() => {
if (!medicoFiltro || !paramsSync) return
let mounted = true
;(async () => {
try {
setLoadingMedicos(true)
// Resetar agenda e expandidas quando mudar o médico
setAgendaByDoctor({})
setAgendasExpandida({})
console.log('[ResultadosClient] Buscando médico específico:', medicoFiltro)
// Tentar buscar pelo nome do médico
const list = await buscarMedicos(medicoFiltro).catch(() => [])
if (!mounted) return
console.log('[ResultadosClient] Médicos encontrados:', list?.length || 0)
setMedicos(Array.isArray(list) ? list : [])
} catch (e: any) {
console.warn('[ResultadosClient] Erro ao buscar médico:', e)
showToast('error', e?.message || 'Falha ao buscar profissional')
} finally {
if (mounted) setLoadingMedicos(false)
}
})()
return () => { mounted = false }
}, [medicoFiltro, paramsSync])
// 3) Carregar horários disponíveis para um médico (próximos 7 dias) e agrupar por dia
async function loadAgenda(doctorId: string): Promise<{ iso: string; label: string } | null> {
@ -618,12 +656,24 @@ export default function ResultadosClient() {
// Filtro visual (convenio/bairro são cosméticos; quando sem dado, mantemos tudo)
const profissionais = useMemo(() => {
return (medicos || []).filter((m: any) => {
let filtered = (medicos || []).filter((m: any) => {
if (convenio !== 'Todos' && m.convenios && !m.convenios.includes(convenio)) return false
if (bairro !== 'Todos' && m.neighborhood && String(m.neighborhood).toLowerCase() !== String(bairro).toLowerCase()) return false
return true
})
}, [medicos, convenio, bairro])
// Se um médico específico foi selecionado no dashboard, filtrar apenas por ele
if (medicoFiltro) {
filtered = filtered.filter((m: any) => {
// Comparar nome completo com flexibilidade
const nomeMedico = String(m.full_name || m.name || '').toLowerCase()
const filtro = String(medicoFiltro).toLowerCase()
return nomeMedico.includes(filtro) || filtro.includes(nomeMedico.split(' ')[0]) // comparar por primeiro nome também
})
}
return filtered
}, [medicos, convenio, bairro, medicoFiltro])
// Paginação local para a lista de médicos
const [currentPage, setCurrentPage] = useState(1)

View File

@ -1847,6 +1847,48 @@ export async function buscarMedicos(termo: string): Promise<Medico[]> {
return results.slice(0, 20); // Limita a 20 resultados
}
export async function listarTodosMedicos(): Promise<Medico[]> {
try {
const url = `${REST}/doctors?limit=1000`;
const headers = baseHeaders();
const res = await fetch(url, { method: 'GET', headers });
const arr = await parse<Medico[]>(res);
// Mapeamento de correções para especialidades com encoding errado
const specialtyFixes: Record<string, string> = {
'Cl\u00EDnica Geral': 'Clínica Geral',
'Cl\u00E3nica Geral': 'Clínica Geral',
'Cl?nica Geral': 'Clínica Geral',
'Cl©nica Geral': 'Clínica Geral',
'Cl\uFFFDnica Geral': 'Clínica Geral',
};
// Sanitiza caracteres UTF-8 nos especialties
if (Array.isArray(arr)) {
return arr.map((medico: any) => {
if (medico.specialty && typeof medico.specialty === 'string') {
try {
// Primeiro tenta aplicar mapeamento
let spec = medico.specialty;
for (const [wrong, correct] of Object.entries(specialtyFixes)) {
spec = spec.replace(new RegExp(wrong, 'g'), correct);
}
// Depois normaliza
medico.specialty = spec.normalize('NFC');
} catch (e) {
// Se falhar, mantém original
}
}
return medico;
});
}
return Array.isArray(arr) ? arr : [];
} catch (error) {
console.error('[API] Erro ao listar todos os médicos:', error);
return [];
}
}
export async function buscarMedicoPorId(id: string | number): Promise<Medico | null> {
// Primeiro tenta buscar no Supabase (dados reais)
const uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;