forked from RiseUP/riseup-squad20
Merge pull request 'feature/add-search' (#79) from feature/add-search into develop
Reviewed-on: RiseUP/riseup-squad20#79
This commit is contained in:
commit
d32cf44191
@ -19,6 +19,9 @@ export default function RootLayout({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="pt-BR" className="antialiased" suppressHydrationWarning>
|
<html lang="pt-BR" className="antialiased" suppressHydrationWarning>
|
||||||
|
<head>
|
||||||
|
<meta charSet="utf-8" />
|
||||||
|
</head>
|
||||||
<body style={{ fontFamily: "var(--font-geist-sans)" }}>
|
<body style={{ fontFamily: "var(--font-geist-sans)" }}>
|
||||||
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
|
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
|
||||||
<AuthProvider>
|
<AuthProvider>
|
||||||
|
|||||||
@ -19,7 +19,7 @@ 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, 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 { 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'
|
||||||
@ -309,9 +309,15 @@ export default function PacientePage() {
|
|||||||
setIsEditingProfile(false)
|
setIsEditingProfile(false)
|
||||||
}
|
}
|
||||||
function DashboardCards() {
|
function DashboardCards() {
|
||||||
|
const router = useRouter()
|
||||||
const [nextAppt, setNextAppt] = useState<string | null>(null)
|
const [nextAppt, setNextAppt] = useState<string | null>(null)
|
||||||
const [examsCount, setExamsCount] = useState<number | null>(null)
|
const [examsCount, setExamsCount] = useState<number | null>(null)
|
||||||
const [loading, setLoading] = useState(false)
|
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(() => {
|
useEffect(() => {
|
||||||
let mounted = true
|
let mounted = true
|
||||||
@ -429,37 +435,200 @@ export default function PacientePage() {
|
|||||||
return () => { mounted = false }
|
return () => { mounted = false }
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
// Carregar especialidades únicas dos médicos ao montar
|
||||||
<div className="grid grid-cols-1 gap-3 sm:gap-4 md:gap-4 mb-6 md:grid-cols-2">
|
useEffect(() => {
|
||||||
<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">
|
let mounted = true
|
||||||
<div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
|
setEspecialidadesLoading(true)
|
||||||
<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">
|
;(async () => {
|
||||||
<Calendar className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
|
try {
|
||||||
</div>
|
console.log('[DashboardCards] Carregando especialidades...')
|
||||||
{/* rótulo e número com mesma fonte e mesmo tamanho (harmônico) */}
|
const todos = await listarTodosMedicos().catch((err) => {
|
||||||
<span className="text-base sm:text-lg md:text-lg font-semibold text-muted-foreground tracking-wide">
|
console.error('[DashboardCards] Erro ao buscar médicos:', err)
|
||||||
{strings.proximaConsulta}
|
return []
|
||||||
</span>
|
})
|
||||||
<span className="text-base sm:text-lg md:text-xl font-semibold text-foreground" aria-live="polite">
|
console.log('[DashboardCards] Médicos carregados:', todos?.length || 0, todos)
|
||||||
{loading ? strings.carregando : (nextAppt ?? '-')}
|
if (!mounted) return
|
||||||
</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">
|
// Mapeamento de correções para especialidades com encoding errado
|
||||||
<div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
|
const specialtyFixes: Record<string, string> = {
|
||||||
<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">
|
'Cl\u00EDnica Geral': 'Clínica Geral',
|
||||||
<FileText className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
|
'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 }
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// 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-card 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>
|
</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>
|
</div>
|
||||||
</Card>
|
</section>
|
||||||
</div>
|
|
||||||
|
{/* 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 (
|
return (
|
||||||
<div className="space-y-6">
|
<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 */}
|
{/* Consultas Agendadas Section */}
|
||||||
<section className="bg-card shadow-md rounded-lg border border-border p-4 sm:p-5 md:p-6">
|
<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">
|
<div className="space-y-4 sm:space-y-5 md:space-y-6">
|
||||||
|
|||||||
@ -16,14 +16,9 @@ import {
|
|||||||
Building2,
|
Building2,
|
||||||
Filter,
|
Filter,
|
||||||
Globe,
|
Globe,
|
||||||
HeartPulse,
|
|
||||||
Languages,
|
|
||||||
MapPin,
|
MapPin,
|
||||||
ShieldCheck,
|
|
||||||
Star,
|
Star,
|
||||||
Stethoscope,
|
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
UserRound
|
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import {
|
import {
|
||||||
@ -62,6 +57,8 @@ export default function ResultadosClient() {
|
|||||||
const [bairro, setBairro] = useState<string>('Todos')
|
const [bairro, setBairro] = useState<string>('Todos')
|
||||||
// Busca por nome do médico
|
// Busca por nome do médico
|
||||||
const [searchQuery, setSearchQuery] = useState<string>('')
|
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
|
// Track if URL params have been synced to avoid race condition
|
||||||
const [paramsSync, setParamsSync] = useState(false)
|
const [paramsSync, setParamsSync] = useState(false)
|
||||||
@ -117,6 +114,10 @@ export default function ResultadosClient() {
|
|||||||
const especialidadeParam = params.get('especialidade')
|
const especialidadeParam = params.get('especialidade')
|
||||||
if (especialidadeParam) setEspecialidadeHero(especialidadeParam)
|
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
|
// Mark params as synced
|
||||||
setParamsSync(true)
|
setParamsSync(true)
|
||||||
}, [params])
|
}, [params])
|
||||||
@ -163,9 +164,10 @@ export default function ResultadosClient() {
|
|||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// 4) Re-fetch doctors when especialidade changes (after initial sync)
|
// 4) Re-fetch doctors when especialidade changes (after initial sync)
|
||||||
|
// SKIP this if medicoFiltro está definido (médico específico selecionado)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Skip if this is the initial render or if user is searching by name
|
// Skip if this is the initial render or if user is searching by name or if a specific doctor is selected
|
||||||
if (!paramsSync || (searchQuery && String(searchQuery).trim().length > 1)) return
|
if (!paramsSync || medicoFiltro || (searchQuery && String(searchQuery).trim().length > 1)) return
|
||||||
|
|
||||||
let mounted = true
|
let mounted = true
|
||||||
;(async () => {
|
;(async () => {
|
||||||
@ -191,10 +193,13 @@ export default function ResultadosClient() {
|
|||||||
}
|
}
|
||||||
})()
|
})()
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [especialidadeHero, paramsSync])
|
}, [especialidadeHero, paramsSync, medicoFiltro])
|
||||||
|
|
||||||
// 5) Debounced search by doctor name
|
// 5) Debounced search by doctor name
|
||||||
|
// SKIP this if medicoFiltro está definido
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (medicoFiltro) return // Skip se médico específico foi selecionado
|
||||||
|
|
||||||
let mounted = true
|
let mounted = true
|
||||||
const term = String(searchQuery || '').trim()
|
const term = String(searchQuery || '').trim()
|
||||||
const handle = setTimeout(async () => {
|
const handle = setTimeout(async () => {
|
||||||
@ -216,7 +221,35 @@ export default function ResultadosClient() {
|
|||||||
}
|
}
|
||||||
}, 350)
|
}, 350)
|
||||||
return () => { mounted = false; clearTimeout(handle) }
|
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
|
// 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> {
|
async function loadAgenda(doctorId: string): Promise<{ iso: string; label: string } | null> {
|
||||||
@ -618,12 +651,24 @@ export default function ResultadosClient() {
|
|||||||
|
|
||||||
// Filtro visual (convenio/bairro são cosméticos; quando sem dado, mantemos tudo)
|
// Filtro visual (convenio/bairro são cosméticos; quando sem dado, mantemos tudo)
|
||||||
const profissionais = useMemo(() => {
|
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 (convenio !== 'Todos' && m.convenios && !m.convenios.includes(convenio)) return false
|
||||||
if (bairro !== 'Todos' && m.neighborhood && String(m.neighborhood).toLowerCase() !== String(bairro).toLowerCase()) return false
|
if (bairro !== 'Todos' && m.neighborhood && String(m.neighborhood).toLowerCase() !== String(bairro).toLowerCase()) return false
|
||||||
return true
|
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
|
// Paginação local para a lista de médicos
|
||||||
const [currentPage, setCurrentPage] = useState(1)
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
@ -633,12 +678,21 @@ export default function ResultadosClient() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCurrentPage(1)
|
setCurrentPage(1)
|
||||||
}, [profissionais, itemsPerPage])
|
}, [profissionais, itemsPerPage])
|
||||||
|
|
||||||
const totalPages = Math.max(1, Math.ceil((profissionais || []).length / itemsPerPage))
|
const totalPages = Math.max(1, Math.ceil((profissionais || []).length / itemsPerPage))
|
||||||
const paginatedProfissionais = (profissionais || []).slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
|
const paginatedProfissionais = (profissionais || []).slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
|
||||||
const startItem = (profissionais || []).length ? (currentPage - 1) * itemsPerPage + 1 : 0
|
const startItem = (profissionais || []).length ? (currentPage - 1) * itemsPerPage + 1 : 0
|
||||||
const endItem = Math.min(currentPage * itemsPerPage, (profissionais || []).length)
|
const endItem = Math.min(currentPage * itemsPerPage, (profissionais || []).length)
|
||||||
|
|
||||||
|
// Memoized map para calcular próximos 3 horários para cada médico
|
||||||
|
const proximosHorariosPorMedico = useMemo(() => {
|
||||||
|
const result: Record<string, Array<{ iso: string; label: string }>> = {}
|
||||||
|
for (const id in agendaByDoctor) {
|
||||||
|
const slots = agendaByDoctor[id]?.flatMap(d => d.horarios) || []
|
||||||
|
result[id] = slots.slice(0, 3)
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}, [agendaByDoctor])
|
||||||
|
|
||||||
// Render
|
// Render
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
@ -696,36 +750,49 @@ export default function ResultadosClient() {
|
|||||||
<Button variant="outline" onClick={() => setBookingSuccessOpen(false)}>Fechar</Button>
|
<Button variant="outline" onClick={() => setBookingSuccessOpen(false)}>Fechar</Button>
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog> {/* Hero section com barra de busca */}
|
||||||
|
<section className="rounded-2xl sm:rounded-3xl bg-gradient-to-r from-primary to-primary/80 p-6 sm:p-8 text-primary-foreground shadow-lg">
|
||||||
{/* Hero de filtros (mantido) */}
|
<div className="space-y-4">
|
||||||
<section className="rounded-2xl sm:rounded-3xl bg-primary p-4 sm:p-6 text-primary-foreground shadow-lg">
|
|
||||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-xl font-semibold sm:text-2xl md:text-3xl">Resultados da procura</h1>
|
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold">Encontre o profissional ideal</h1>
|
||||||
<p className="text-sm text-primary-foreground/80">Qual especialização você deseja?</p>
|
<p className="text-sm sm:text-base text-primary-foreground/90 mt-1">Busque por nome, especialidade ou disponibilidade</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Barra de busca principal */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder={especialidadeHero && especialidadeHero !== 'Veja mais' ? especialidadeHero : 'Buscar médico por nome ou especialidade'}
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
|
||||||
|
className="flex-1 h-11 rounded-full bg-primary-foreground/15 border border-primary-foreground/30 text-primary-foreground placeholder:text-primary-foreground/60 focus:bg-primary-foreground/20"
|
||||||
|
/>
|
||||||
|
{searchQuery && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="h-11 px-6 rounded-full text-primary-foreground hover:bg-primary-foreground/20"
|
||||||
|
onClick={async () => {
|
||||||
|
setSearchQuery('')
|
||||||
|
setCurrentPage(1)
|
||||||
|
try {
|
||||||
|
setLoadingMedicos(true)
|
||||||
|
setMedicos([])
|
||||||
|
setAgendaByDoctor({})
|
||||||
|
setAgendasExpandida({})
|
||||||
|
// Manter a especialidade da URL se existir
|
||||||
|
const termo = (especialidadeHero && especialidadeHero !== 'Veja mais') ? especialidadeHero : (params?.get('q') || 'medico')
|
||||||
|
const list = await buscarMedicos(termo).catch(() => [])
|
||||||
|
setMedicos(Array.isArray(list) ? list : [])
|
||||||
|
} catch (e: any) {
|
||||||
|
showToast('error', e?.message || 'Falha ao buscar profissionais')
|
||||||
|
} finally {
|
||||||
|
setLoadingMedicos(false)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Limpar
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="rounded-full border-primary-foreground/30 bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground! hover:text-primary! transition-colors"
|
|
||||||
>
|
|
||||||
Ajustar filtros
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="mt-4 sm:mt-6 flex flex-wrap gap-2 sm:gap-3">
|
|
||||||
{especialidadesHero.map(item => (
|
|
||||||
<button
|
|
||||||
key={item}
|
|
||||||
type="button"
|
|
||||||
onClick={() => setEspecialidadeHero(item)}
|
|
||||||
className={cn(
|
|
||||||
'rounded-full px-4 sm:px-5 py-2 text-sm font-medium transition focus-visible:ring-2 focus-visible:ring-primary-foreground/80',
|
|
||||||
especialidadeHero === item ? 'bg-primary-foreground text-primary' : 'bg-primary-foreground/10'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{item}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -774,51 +841,6 @@ export default function ResultadosClient() {
|
|||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Busca por nome + Mais filtros/Limpar */}
|
|
||||||
<div className="sm:col-span-6 lg:col-span-4">
|
|
||||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
|
|
||||||
<Input
|
|
||||||
placeholder="Buscar médico por nome"
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
|
|
||||||
className="w-full sm:min-w-[220px] rounded-full"
|
|
||||||
/>
|
|
||||||
{searchQuery ? (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="h-10 w-full sm:w-auto rounded-full"
|
|
||||||
onClick={async () => {
|
|
||||||
setSearchQuery('')
|
|
||||||
setCurrentPage(1)
|
|
||||||
try {
|
|
||||||
setLoadingMedicos(true)
|
|
||||||
setMedicos([])
|
|
||||||
setAgendaByDoctor({})
|
|
||||||
setAgendasExpandida({})
|
|
||||||
const termo = (especialidadeHero && especialidadeHero !== 'Veja mais') ? especialidadeHero : (params?.get('q') || 'medico')
|
|
||||||
const list = await buscarMedicos(termo).catch(() => [])
|
|
||||||
setMedicos(Array.isArray(list) ? list : [])
|
|
||||||
} catch (e: any) {
|
|
||||||
showToast('error', e?.message || 'Falha ao buscar profissionais')
|
|
||||||
} finally {
|
|
||||||
setLoadingMedicos(false)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Limpar
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="h-10 w-full sm:w-auto rounded-full border border-primary/30 bg-primary/5 text-primary hover:bg-primary hover:text-primary-foreground"
|
|
||||||
>
|
|
||||||
<Filter className="mr-2 h-4 w-4" />
|
|
||||||
Mais filtros
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bairro */}
|
{/* Bairro */}
|
||||||
<div className="sm:col-span-6 lg:col-span-4">
|
<div className="sm:col-span-6 lg:col-span-4">
|
||||||
<Select value={bairro} onValueChange={setBairro}>
|
<Select value={bairro} onValueChange={setBairro}>
|
||||||
@ -834,6 +856,17 @@ export default function ResultadosClient() {
|
|||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Mais filtros / Voltar */}
|
||||||
|
<div className="sm:col-span-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="h-10 w-full rounded-full border border-primary/30 bg-primary/5 text-primary hover:bg-primary hover:text-primary-foreground"
|
||||||
|
>
|
||||||
|
<Filter className="mr-2 h-4 w-4" />
|
||||||
|
Mais filtros
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Voltar */}
|
{/* Voltar */}
|
||||||
<div className="sm:col-span-12">
|
<div className="sm:col-span-12">
|
||||||
<Button
|
<Button
|
||||||
@ -854,133 +887,131 @@ export default function ResultadosClient() {
|
|||||||
<Card className="flex items-center justify-center border border-dashed border-border bg-card/60 p-12 text-muted-foreground">
|
<Card className="flex items-center justify-center border border-dashed border-border bg-card/60 p-12 text-muted-foreground">
|
||||||
Buscando profissionais...
|
Buscando profissionais...
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
)} {!loadingMedicos && paginatedProfissionais.map((medico) => {
|
||||||
|
|
||||||
{!loadingMedicos && paginatedProfissionais.map((medico) => {
|
|
||||||
const id = String(medico.id)
|
const id = String(medico.id)
|
||||||
const agenda = agendaByDoctor[id]
|
const agenda = agendaByDoctor[id]
|
||||||
const isLoadingAgenda = !!agendaLoading[id]
|
const isLoadingAgenda = !!agendaLoading[id]
|
||||||
const atendeLocal = true // dados ausentes → manter visual
|
const atendeLocal = true
|
||||||
const atendeTele = true
|
const atendeTele = true
|
||||||
const nome = medico.full_name || 'Profissional'
|
const nome = medico.full_name || 'Profissional'
|
||||||
const esp = (medico as any).specialty || medico.especialidade || '—'
|
const esp = (medico as any).specialty || medico.especialidade || '—'
|
||||||
const crm = [medico.crm, (medico as any).crm_uf].filter(Boolean).join(' / ')
|
const crm = [medico.crm, (medico as any).crm_uf].filter(Boolean).join(' ')
|
||||||
const convenios = '—'
|
|
||||||
const endereco = [medico.street, medico.number].filter(Boolean).join(', ') || medico.street || '—'
|
const endereco = [medico.street, medico.number].filter(Boolean).join(', ') || medico.street || '—'
|
||||||
const cidade = [medico.city, medico.state].filter(Boolean).join(' • ')
|
const cidade = medico.city || '—'
|
||||||
const precoLocal = '—'
|
const precoTipoConsulta = tipoConsulta === 'local' ? 'R$ —' : 'R$ —'
|
||||||
const precoTeleconsulta = '—'
|
|
||||||
|
// Usar os próximos 3 horários já memoizados
|
||||||
|
const proximos3Horarios = proximosHorariosPorMedico[id] || []
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
key={id}
|
key={id}
|
||||||
className="flex flex-col gap-4 border border-border bg-card/80 p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
|
className="flex flex-col gap-4 border border-border bg-card/80 p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
|
||||||
>
|
>
|
||||||
<div className="flex flex-wrap items-start gap-4">
|
{/* Header com Avatar, Nome, Especialidade e Botão Ver Perfil */}
|
||||||
<Avatar className="h-14 w-14 border border-primary/20 bg-primary/5">
|
<div className="flex gap-4 items-start">
|
||||||
<AvatarFallback className="bg-primary/10 text-primary">
|
<Avatar className="h-20 w-20 border-2 border-primary/20 bg-primary/5 flex-shrink-0">
|
||||||
<UserRound className="h-6 w-6" />
|
<AvatarFallback className="bg-primary/10 text-primary text-lg font-semibold">
|
||||||
|
{nome.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase()}
|
||||||
</AvatarFallback>
|
</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<div className="flex flex-1 flex-col gap-2">
|
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex-1 flex flex-col gap-2">
|
||||||
<h2 className="text-lg font-semibold text-foreground">{nome}</h2>
|
<div className="flex items-start justify-between">
|
||||||
<Badge className="rounded-full bg-primary/10 text-primary">{esp}</Badge>
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-foreground">{nome}</h2>
|
||||||
|
<p className="text-sm text-primary font-medium">{esp}</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="text-primary hover:bg-primary/10"
|
||||||
|
onClick={() => {
|
||||||
|
setMedicoSelecionado(medico)
|
||||||
|
setAbaDetalhe('experiencia')
|
||||||
|
if (!agendaByDoctor[id]) loadAgenda(id)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Mais
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
|
|
||||||
<span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1 text-primary">
|
{/* Rating e Info */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
<Star className="h-4 w-4 fill-primary text-primary" />
|
<Star className="h-4 w-4 fill-primary text-primary" />
|
||||||
{/* sem avaliação → travar layout */}
|
<span className="text-sm font-medium text-primary">4.9</span>
|
||||||
{'4.9'} • {'23'} avaliações
|
<span className="text-xs text-muted-foreground">• 23 avaliações</span>
|
||||||
</span>
|
</div>
|
||||||
<span>{crm || '—'}</span>
|
|
||||||
<span>{convenios}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* CRM */}
|
||||||
|
<p className="text-xs text-muted-foreground">CRM: {crm || '—'}</p>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="ml-0 sm:ml-auto w-full sm:w-auto h-fit rounded-full text-primary hover:bg-primary! hover:text-white! transition-colors"
|
|
||||||
onClick={() => {
|
|
||||||
setMedicoSelecionado(medico)
|
|
||||||
setAbaDetalhe('experiencia')
|
|
||||||
// carregar agenda para o diálogo
|
|
||||||
if (!agendaByDoctor[id]) loadAgenda(id)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Ver perfil completo
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{tipoConsulta === 'local' && atendeLocal && (
|
{/* Endereço */}
|
||||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border bg-muted/40 p-4 text-sm text-muted-foreground">
|
{tipoConsulta === 'local' && (
|
||||||
<span className="inline-flex items-center gap-2 text-foreground">
|
<div className="flex items-start gap-2 px-3 py-2 rounded-lg bg-muted/30 border border-border/50">
|
||||||
|
<MapPin className="h-4 w-4 text-primary flex-shrink-0 mt-0.5" />
|
||||||
|
<div className="flex-1 text-sm">
|
||||||
|
<p className="font-medium text-foreground">{endereco}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">{cidade}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Tipo de Consulta */}
|
||||||
|
<div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-primary/20 bg-primary/5">
|
||||||
|
{tipoConsulta === 'teleconsulta' ? (
|
||||||
|
<>
|
||||||
|
<Globe className="h-4 w-4 text-primary" />
|
||||||
|
<span className="text-sm font-medium text-primary">Teleconsulta</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<MapPin className="h-4 w-4 text-primary" />
|
<MapPin className="h-4 w-4 text-primary" />
|
||||||
{endereco}
|
<span className="text-sm font-medium text-primary">Consulta presencial</span>
|
||||||
</span>
|
</>
|
||||||
<div className="flex flex-col text-right">
|
)}
|
||||||
<span className="text-xs text-muted-foreground">{cidade || '—'}</span>
|
<span className="ml-auto text-sm font-semibold text-primary">{precoTipoConsulta}</span>
|
||||||
<span className="text-sm font-semibold text-primary">{precoLocal}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{tipoConsulta === 'teleconsulta' && atendeTele && (
|
|
||||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-primary/30 bg-primary/5 p-4 text-primary">
|
|
||||||
<span className="inline-flex items-center gap-2 font-medium">
|
|
||||||
<Globe className="h-4 w-4" />
|
|
||||||
Teleconsulta
|
|
||||||
</span>
|
|
||||||
<span className="text-sm font-semibold">{precoTeleconsulta}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
|
|
||||||
<span className="inline-flex items-center gap-1 rounded-full bg-muted px-3 py-1">
|
|
||||||
<Languages className="h-3.5 w-3.5 text-primary" />
|
|
||||||
Idiomas: Português, Inglês
|
|
||||||
</span>
|
|
||||||
<span className="inline-flex items-center gap-1 rounded-full bg-muted px-3 py-1">
|
|
||||||
<HeartPulse className="h-3.5 w-3.5 text-primary" />
|
|
||||||
Acolhimento em cada consulta
|
|
||||||
</span>
|
|
||||||
<span className="inline-flex items-center gap-1 rounded-full bg-muted px-3 py-1">
|
|
||||||
<ShieldCheck className="h-3.5 w-3.5 text-primary" />
|
|
||||||
Pagamento seguro
|
|
||||||
</span>
|
|
||||||
<span className="inline-flex items-center gap-1 rounded-full bg-muted px-3 py-1">
|
|
||||||
<Stethoscope className="h-3.5 w-3.5 text-primary" />
|
|
||||||
Especialista recomendado
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Quick action: nearest available slot */}
|
{/* Próximos horários */}
|
||||||
{nearestSlotByDoctor[id] && (
|
{!isLoadingAgenda && (
|
||||||
<div className="mb-2 flex items-center gap-3">
|
<div className="space-y-2">
|
||||||
<span className="text-sm text-muted-foreground">Próximo horário:</span>
|
<p className="text-xs font-semibold text-muted-foreground">Próximos horários disponíveis:</p>
|
||||||
<Button className="h-9 rounded-full bg-primary/10 text-primary" onClick={() => openConfirmDialog(id, nearestSlotByDoctor[id]!.iso)}>
|
{proximos3Horarios.length > 0 ? (
|
||||||
{nearestSlotByDoctor[id]!.label}
|
<div className="flex gap-2 flex-wrap">
|
||||||
</Button>
|
{proximos3Horarios.map(slot => (
|
||||||
|
<button
|
||||||
|
key={slot.iso}
|
||||||
|
type="button"
|
||||||
|
className="px-3 py-1.5 text-xs font-medium rounded-lg bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition"
|
||||||
|
onClick={() => openConfirmDialog(id, slot.iso)}
|
||||||
|
>
|
||||||
|
{slot.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs text-muted-foreground">Carregando horários...</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-3 pt-2">
|
{/* Ações */}
|
||||||
|
<div className="flex gap-2 pt-2">
|
||||||
<Button
|
<Button
|
||||||
className="h-11 w-full sm:w-auto rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
|
className="flex-1 h-10 rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
// If we don't have the agenda loaded, load it and try to open the nearest slot.
|
|
||||||
if (!agendaByDoctor[id]) {
|
if (!agendaByDoctor[id]) {
|
||||||
const nearest = await loadAgenda(id)
|
const nearest = await loadAgenda(id)
|
||||||
if (nearest) {
|
if (nearest) {
|
||||||
openConfirmDialog(id, nearest.iso)
|
openConfirmDialog(id, nearest.iso)
|
||||||
return
|
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]
|
const nearest = nearestSlotByDoctor[id]
|
||||||
if (nearest) {
|
if (nearest) {
|
||||||
openConfirmDialog(id, nearest.iso)
|
openConfirmDialog(id, nearest.iso)
|
||||||
@ -990,33 +1021,19 @@ export default function ResultadosClient() {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Agendar consulta
|
Agendar
|
||||||
</Button>
|
|
||||||
<Button variant="outline" className="h-11 w-full sm:w-auto rounded-full border-primary/40 bg-primary/10 text-primary hover:bg-primary! hover:text-white! transition-colors">
|
|
||||||
Enviar mensagem
|
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="outline"
|
||||||
className="h-11 w-full sm:w-auto rounded-full text-primary hover:bg-primary! hover:text-white! transition-colors"
|
className="flex-1 h-10 rounded-full border-primary/40 text-primary hover:bg-primary/10"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const willOpen = !agendasExpandida[id]
|
setMoreTimesForDoctor(id)
|
||||||
setAgendasExpandida(prev => ({ ...prev, [id]: !prev[id] }))
|
void fetchSlotsForDate(id, moreTimesDate)
|
||||||
if (!agendaByDoctor[id]) loadAgenda(id)
|
|
||||||
// open the "more times" modal when expanding
|
|
||||||
if (willOpen) {
|
|
||||||
setMoreTimesForDoctor(id)
|
|
||||||
// prefetch for the default date
|
|
||||||
void fetchSlotsForDate(id, moreTimesDate)
|
|
||||||
} else {
|
|
||||||
setMoreTimesForDoctor(null)
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{agendasExpandida[id] ? 'Ocultar horários' : 'Mostrar mais horários'}
|
Mais horários
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Horários compactos removidos conforme solicitação do design (colunas HOJE/AMANHÃ/etc.). */}
|
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|||||||
@ -1847,6 +1847,48 @@ export async function buscarMedicos(termo: string): Promise<Medico[]> {
|
|||||||
return results.slice(0, 20); // Limita a 20 resultados
|
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> {
|
export async function buscarMedicoPorId(id: string | number): Promise<Medico | null> {
|
||||||
// Primeiro tenta buscar no Supabase (dados reais)
|
// 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}$/;
|
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}$/;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user