fixing-patient-page

susconecta/app/paciente/page.tsx

@@ -18,7 +18,8 @@ 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 } 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 { ENV_CONFIG } from '@/lib/env-config'
 import { listarRelatoriosPorPaciente } from '@/lib/reports'
@@ -35,7 +36,6 @@ const strings = {
   ultimosExames: 'Últimos Exames',
   mensagensNaoLidas: 'Mensagens Não Lidas',
   agendar: 'Agendar',
-  reagendar: 'Reagendar',
   cancelar: 'Cancelar',
   detalhes: 'Detalhes',
   adicionarCalendario: 'Adicionar ao calendário',
@@ -445,11 +445,10 @@ export default function PacientePage() {
             </span>
           </div>
         </Card>
-      </div>
+  </div>
     )
   }
 
-  // Consultas fictícias
   const [currentDate, setCurrentDate] = useState(new Date())
 
   // helper: produce a local YYYY-MM-DD key (uses local timezone, not toISOString UTC)
@@ -519,10 +518,15 @@ export default function PacientePage() {
     const selectedDate = new Date(currentDate); selectedDate.setHours(0, 0, 0, 0);
     const isSelectedDateToday = selectedDate.getTime() === today.getTime()
 
-    // 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 [loadingAppointments, setLoadingAppointments] = useState(false)
+  const [doctorsMap, setDoctorsMap] = useState<Record<string, any>>({}) // Store doctor info by ID
-    const [appointmentsError, setAppointmentsError] = useState<string | null>(null)
+  const [loadingAppointments, setLoadingAppointments] = useState(false)
+  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(() => {
       let mounted = true
@@ -608,6 +612,7 @@ export default function PacientePage() {
             }
           })
 
+          setDoctorsMap(doctorsMap)
           setAppointments(mapped)
         } catch (err: any) {
           console.warn('[Consultas] falha ao carregar agendamentos', err)
@@ -638,6 +643,60 @@ export default function PacientePage() {
     const _dialogSource = (appointments !== null ? appointments : consultasFicticias)
     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 (
       <div className="space-y-6">
         {/* 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-red-500 to-red-600 shadow-red-500/20'
                           }`}>
-                            {consulta.status}
+                            {statusLabel(consulta.status)}
                           </span>
                         </div>
 
@@ -781,28 +840,43 @@ export default function PacientePage() {
                             type="button"
                             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"
+                            onClick={() => setSelectedAppointment(consulta)}
                           >
                             Detalhes
                           </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' && (
                             <Button
                               type="button"
                               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"
+                              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
                             </Button>
                           )}
                         </div>
+
+                        {/* Inline detalhes removed: modal will show details instead */}
+
                       </div>
                     </div>
                   ))
@@ -811,6 +885,45 @@ export default function PacientePage() {
             </div>
           </div>
         </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>
     )
   }
@@ -1262,7 +1375,7 @@ export default function PacientePage() {
       setReportsPage(1)
     }, [reports])
 
-    return (
+    return (<>
       <section className="bg-card shadow-md rounded-lg border border-border p-6">
         <h2 className="text-2xl font-bold mb-6">Laudos</h2>
 
@@ -1334,10 +1447,13 @@ export default function PacientePage() {
           )}
         </div>
  
+        </section>
+
+        
         <Dialog open={!!selectedReport} onOpenChange={open => !open && setSelectedReport(null)}>
           <DialogContent>
-              <DialogHeader>
+            <DialogHeader>
-                <DialogTitle>
+              <DialogTitle>
                   {selectedReport && (
                     (() => {
                       const looksLikeIdStr = (s: any) => {
@@ -1422,7 +1538,7 @@ export default function PacientePage() {
               </DialogFooter>
             </DialogContent>
         </Dialog>
-      </section>
+    </>
     )
   }
 

susconecta/app/paciente/resultados/ResultadosClient.tsx

@@ -148,7 +148,7 @@ export default function ResultadosClient() {
       try {
         setLoadingMedicos(true)
         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)
           return []
         })
@@ -175,7 +175,7 @@ export default function ResultadosClient() {
         setAgendaByDoctor({})
         setAgendasExpandida({})
         // 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)
         const list = await buscarMedicos(termo).catch((err) => {
           console.error('[ResultadosClient] buscarMedicos error:', err)
@@ -219,9 +219,9 @@ export default function ResultadosClient() {
   }, [searchQuery])
 
   // 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 }))
     try {
       // janela de 7 dias
@@ -271,10 +271,12 @@ export default function ResultadosClient() {
         nearest = { iso: s.iso, label: s.label }
       }
 
-      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) {
       showToast('error', e?.message || 'Falha ao buscar horários')
+      return null
     } finally {
       setAgendaLoading((s) => ({ ...s, [doctorId]: false }))
     }
@@ -752,19 +754,7 @@ export default function ResultadosClient() {
             </SelectContent>
           </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">
             <Input
               placeholder="Buscar médico por nome"
@@ -806,6 +796,18 @@ export default function ResultadosClient() {
             )}
           </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
             variant="ghost"
             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">
                   <Button
                     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
                   </Button>