fix-appoiments

susconecta/app/paciente/page.tsx

@@ -17,7 +17,7 @@ import Link from 'next/link'
 import ProtectedRoute from '@/components/ProtectedRoute'
 import { useAuth } from '@/hooks/useAuth'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { buscarPacientes, buscarPacientePorUserId, getUserInfo, listarMensagensPorPaciente } from '@/lib/api'
+import { buscarPacientes, buscarPacientePorUserId, getUserInfo, listarMensagensPorPaciente, listarAgendamentos, buscarMedicosPorIds } from '@/lib/api'
 import { useReports } from '@/hooks/useReports'
 // Simulação de internacionalização básica
 const strings = {
@@ -265,37 +265,11 @@ export default function PacientePage() {
     )
   }
 
-  // Consultas fictícias
+  // Consultas (fetched from server for the logged-in patient)
   const [currentDate, setCurrentDate] = useState(new Date())
-  const consultasFicticias = [
+  const [consultas, setConsultas] = useState<any[]>([])
-    {
+  const [consultasLoading, setConsultasLoading] = useState(false)
-      id: 1,
+  const [consultasError, setConsultasError] = useState<string | null>(null)
-      medico: "Dr. Carlos Andrade",
-      especialidade: "Cardiologia",
-      local: "Clínica Coração Feliz",
-      data: new Date().toISOString().split('T')[0],
-      hora: "09:00",
-      status: "Confirmada"
-    },
-    {
-      id: 2,
-      medico: "Dra. Fernanda Lima",
-      especialidade: "Dermatologia",
-      local: "Clínica Pele Viva",
-      data: new Date().toISOString().split('T')[0],
-      hora: "14:30",
-      status: "Pendente"
-    },
-    {
-      id: 3,
-      medico: "Dr. João Silva",
-      especialidade: "Ortopedia",
-      local: "Hospital Ortopédico",
-      data: (() => { let d = new Date(); d.setDate(d.getDate()+1); return d.toISOString().split('T')[0] })(),
-      hora: "11:00",
-      status: "Cancelada"
-    },
-  ];
 
   function formatDatePt(date: Date) {
     return date.toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
@@ -311,7 +285,17 @@ export default function PacientePage() {
   }
 
   const todayStr = currentDate.toISOString().split('T')[0];
-  const consultasDoDia = consultasFicticias.filter(c => c.data === todayStr);
+  // compute appointments for the selected day (normalize scheduled_at to local YYYY-MM-DD)
+  const consultasDoDia = consultas.filter(c => {
+    try {
+      const scheduled = c.scheduled_at || c.time || c.data || c.date || null
+      if (!scheduled) return false
+      const d = new Date(scheduled)
+      if (isNaN(d.getTime())) return false
+      const y = d.getFullYear(); const m = String(d.getMonth()+1).padStart(2,'0'); const day = String(d.getDate()).padStart(2,'0')
+      return `${y}-${m}-${day}` === todayStr
+    } catch (e) { return false }
+  })
 
   function Consultas() {
     const router = useRouter()
@@ -338,6 +322,74 @@ export default function PacientePage() {
       router.push(`/agenda?origin=consultas&${params.toString()}`)
     }
 
+    // helper: fetch raw appointment data and enrich with doctor objects (returns array)
+    async function fetchConsultasData(): Promise<any[]> {
+      try {
+        const qs = `?select=*&patient_id=eq.${encodeURIComponent(String(patientId))}&order=scheduled_at.asc&limit=200`
+        const appts = await listarAgendamentos(qs).catch(() => [])
+
+        const doctorIds = Array.from(new Set((appts || []).map((a:any) => String(a.doctor_id || a.doctor || a.requested_by || '').trim()).filter(Boolean)))
+        let doctorMap = new Map<string, any>()
+        if (doctorIds.length) {
+          try {
+            const docs = await buscarMedicosPorIds(doctorIds).catch(() => [])
+            for (const d of docs || []) if (d && d.id) doctorMap.set(String(d.id), d)
+          } catch (e) {
+            console.warn('[PacientePage] falha ao buscar medicos para agendamentos', e)
+          }
+        }
+
+        const normalized = (appts || []).map((a:any) => ({ ...a, doctor: a.doctor || doctorMap.get(String(a.doctor_id || a.doctor || a.requested_by || '')) || undefined }))
+        return normalized
+      } catch (err) {
+        console.warn('[PacientePage] fetchConsultasData error', err)
+        throw err
+      }
+    }
+
+    // wrapper that updates component state (safe to call from button or useEffect)
+    async function loadAndSetConsultas() {
+      if (!patientId) { setConsultas([]); return }
+      setConsultasLoading(true)
+      setConsultasError(null)
+      try {
+        const data = await fetchConsultasData()
+        setConsultas(data)
+      } catch (err:any) {
+        setConsultasError('Falha ao carregar consultas.')
+      } finally {
+        setConsultasLoading(false)
+      }
+    }
+
+    useEffect(() => {
+      let mounted = true
+      if (!mostrarAgendadas) return
+      // only load when dialog is requested
+      loadAndSetConsultas()
+      return () => { mounted = false }
+    }, [mostrarAgendadas, patientId])
+
+    // click handler for the "Ver consultas agendadas" button
+    const [dbgClicks, setDbgClicks] = useState(0)
+    const [dbgLastAt, setDbgLastAt] = useState<string | null>(null)
+    async function handleOpenAgendadas() {
+      try {
+        // quick debug log so we can see the click happened
+        // eslint-disable-next-line no-console
+        console.debug('[PacientePage] abrir dialog de consultas')
+        setMostrarAgendadas(true)
+        // record a visible debug pill so it's obvious this ran even if console is closed
+        setDbgClicks(c => c + 1)
+        setDbgLastAt(new Date().toLocaleTimeString())
+        // load data but don't block UI
+        loadAndSetConsultas().catch(() => {})
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('[PacientePage] handleOpenAgendadas failed', e)
+      }
+    }
+
     return (
       <section className="bg-card shadow-md rounded-lg border border-border p-6">
         <div className="max-w-3xl mx-auto space-y-8">
@@ -413,7 +465,12 @@ export default function PacientePage() {
               variant="ghost"
               size="sm"
               className="transition duration-200 bg-white text-[#1e293b] border border-black/10 rounded-md shadow-[0_2px_6px_rgba(0,0,0,0.03)] hover:bg-[#2563eb] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2563eb] dark:bg-slate-800 dark:text-slate-100 dark:border-white/10 dark:hover:bg-[#2563eb] dark:hover:text-white"
-              onClick={() => setMostrarAgendadas(true)}
+              id="ver-consultas-btn"
+              onClick={() => handleOpenAgendadas()}
+              onPointerDown={() => handleOpenAgendadas()}
+              onMouseDown={() => handleOpenAgendadas()}
+              onTouchStart={() => handleOpenAgendadas()}
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleOpenAgendadas() }}
             >
               Ver consultas agendadas
             </Button>
@@ -421,12 +478,117 @@ export default function PacientePage() {
         </div>
 
         <Dialog open={mostrarAgendadas} onOpenChange={open => setMostrarAgendadas(open)}>
-          <DialogContent className="max-w-3xl space-y-6 sm:max-h-[85vh] overflow-hidden">
+            <DialogContent className="max-w-3xl space-y-6 sm:max-h-[85vh] overflow-hidden">
             <DialogHeader>
               <DialogTitle className="text-2xl font-semibold text-foreground">Consultas agendadas</DialogTitle>
               <DialogDescription>Gerencie suas consultas confirmadas, pendentes ou canceladas.</DialogDescription>
             </DialogHeader>
 
+            {/* visible debug pill to show handler ran (appears after first click) */}
+            {dbgClicks > 0 && (
+              <div className="fixed top-16 right-4 z-[9999] bg-primary text-primary-foreground px-3 py-1 rounded shadow">
+                Clicks: {dbgClicks} • último: {dbgLastAt}
+              </div>
+            )}
+
+              <div className="flex flex-col gap-4 rounded-lg border border-border bg-muted/40 p-4 sm:flex-row sm:items-center sm:justify-between">
+
+                <div className="flex items-center gap-3">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    onClick={() => navigateDate('prev')}
+                    aria-label="Dia anterior"
+                    className={`group shadow-sm ${hoverPrimaryIconClass}`}
+                  >
+                    <ChevronLeft className="h-4 w-4 transition group-hover:text-white" />
+                  </Button>
+                  <span className="text-lg font-medium text-foreground">{formatDatePt(currentDate)}</span>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    onClick={() => navigateDate('next')}
+                    aria-label="Próximo dia"
+                    className={`group shadow-sm ${hoverPrimaryIconClass}`}
+                  >
+                    <ChevronRight className="h-4 w-4 transition group-hover:text-white" />
+                  </Button>
+                  {isSelectedDateToday && (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={goToToday}
+                      className="border border-border text-foreground focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97] hover:bg-transparent hover:text-foreground"
+                    >
+                      Hoje
+                    </Button>
+                  )}
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  {consultasDoDia.length} consulta{consultasDoDia.length !== 1 ? 's' : ''} agendada{consultasDoDia.length !== 1 ? 's' : ''}
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-4 overflow-y-auto max-h-[70vh] pr-1 sm:pr-2">
+                {consultasLoading ? (
+                  <div className="text-center py-10 text-muted-foreground">Carregando consultas...</div>
+                ) : consultasError ? (
+                  <div className="text-center py-10 text-red-600">{consultasError}</div>
+                ) : consultasDoDia.length === 0 ? (
+                  <div className="text-center py-10 text-muted-foreground">
+                    <Calendar className="h-12 w-12 mx-auto mb-4 opacity-60" />
+                    <p className="text-lg font-medium">Nenhuma consulta agendada para este dia</p>
+                    <p className="text-sm">Use a busca para marcar uma nova consulta.</p>
+                  </div>
+                ) : (
+                  consultasDoDia.map(consulta => {
+                    // normalize fields for display
+                    const doctorName = consulta.doctor_name || consulta.medico || consulta.medico_name || (consulta.doctor && (consulta.doctor.full_name || consulta.doctor.name)) || 'Médico'
+                    const specialty = consulta.specialty || consulta.especialidade || consulta.especialidade || consulta.type || ''
+                    const location = consulta.unit || consulta.location || consulta.local || ''
+                    const scheduled = consulta.scheduled_at || consulta.time || consulta.date || consulta.data || ''
+                    let timeDisplay = ''
+                    try { const dt = new Date(scheduled); if (!isNaN(dt.getTime())) timeDisplay = `${String(dt.getHours()).padStart(2,'0')}:${String(dt.getMinutes()).padStart(2,'0')}` } catch {}
+                    const status = (consulta.status || consulta.state || consulta.status_label || '').toString() || 'Confirmada'
+
+                    return (
+                      <div key={consulta.id || JSON.stringify(consulta)} className="rounded-xl border border-black/5 dark:border-white/10 bg-card shadow-[0_4px_12px_rgba(0,0,0,0.05)] dark:shadow-none p-5">
+                        <div className="grid gap-4 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.4fr)] items-start">
+                          <div className="flex items-start gap-3">
+                            <span className="mt-1 h-3 w-3 flex-shrink-0 rounded-full" style={{ backgroundColor: status.toLowerCase().includes('confirm') ? '#22c55e' : status.toLowerCase().includes('pend') ? '#fbbf24' : '#ef4444' }} />
+                            <div className="space-y-1">
+                              <div className="font-medium flex items-center gap-2 text-foreground">
+                                <Stethoscope className="h-4 w-4 text-muted-foreground" />
+                                {doctorName}
+                              </div>
+                              <p className="text-sm text-muted-foreground break-words">{specialty} • {location}</p>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center gap-2 text-foreground">
+                            <Clock className="h-4 w-4 text-muted-foreground" />
+                            <span className="font-medium">{timeDisplay}</span>
+                          </div>
+
+                          <div className="flex items-center">
+                            <span className={`px-3 py-1 rounded-full text-sm font-medium text-white ${status.toLowerCase().includes('confirm') ? 'bg-green-600' : status.toLowerCase().includes('pend') ? 'bg-yellow-500' : 'bg-red-600'}`}>{status}</span>
+                          </div>
+
+                          <div className="flex flex-wrap items-center justify-end gap-2">
+                            <Button type="button" variant="outline" size="sm" className="border border-[#2563eb]/40 text-[#2563eb] hover:bg-transparent hover:text-[#2563eb] focus-visible:ring-2 focus-visible:ring-[#2563eb]/40 active:scale-[0.97]">Detalhes</Button>
+                            {status.toLowerCase() !== 'cancelada' && (<Button type="button" variant="secondary" size="sm" className={hoverPrimaryClass}>Reagendar</Button>)}
+                            {status.toLowerCase() !== 'cancelada' && (<Button type="button" variant="destructive" size="sm" className="transition duration-200 hover:bg-[#dc2626] focus-visible:ring-2 focus-visible:ring-[#dc2626]/60 active:scale-[0.97]">Cancelar</Button>)}
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  })
+                )}
+              </div>
+
             <div className="flex flex-col gap-4 rounded-lg border border-border bg-muted/40 p-4 sm:flex-row sm:items-center sm:justify-between">
               <div className="flex items-center gap-3">
                 <Button