susconecta/app/(main-routes)/consultas/page.tsx

@@ -55,7 +55,7 @@ import {
 } from "@/components/ui/select";
 
 import { mockProfessionals } from "@/lib/mocks/appointment-mocks";
-import { listarAgendamentos, buscarPacientesPorIds, buscarMedicosPorIds, atualizarAgendamento } from "@/lib/api";
+import { listarAgendamentos, buscarPacientesPorIds, buscarMedicosPorIds, atualizarAgendamento, buscarAgendamentoPorId } from "@/lib/api";
 import { CalendarRegistrationForm } from "@/components/forms/calendar-registration-form";
 
 const formatDate = (date: string | Date) => {
@@ -76,6 +76,7 @@ const capitalize = (s: string) => {
 
 export default function ConsultasPage() {
   const [appointments, setAppointments] = useState<any[]>([]);
+  const [searchValue, setSearchValue] = useState<string>('');
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [showForm, setShowForm] = useState(false);
   const [editingAppointment, setEditingAppointment] = useState<any | null>(null);
@@ -84,22 +85,28 @@ export default function ConsultasPage() {
   const [localForm, setLocalForm] = useState<any | null>(null);
 
   const mapAppointmentToFormData = (appointment: any) => {
-    const appointmentDate = new Date(appointment.time || appointment.scheduled_at || Date.now());
+    // prefer scheduled_at (ISO) if available
+    const scheduledBase = appointment.scheduled_at || appointment.time || appointment.created_at || null;
+    const baseDate = scheduledBase ? new Date(scheduledBase) : new Date();
+    const duration = appointment.duration_minutes ?? appointment.duration ?? 30;
+
+    // compute start and end times (HH:MM)
+    const appointmentDateStr = baseDate.toISOString().split("T")[0];
+    const startTime = `${String(baseDate.getHours()).padStart(2, '0')}:${String(baseDate.getMinutes()).padStart(2, '0')}`;
+    const endDate = new Date(baseDate.getTime() + duration * 60000);
+    const endTime = `${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}`;
 
     return {
       id: appointment.id,
       patientName: appointment.patient,
       patientId: appointment.patient_id || appointment.patientId || null,
       professionalName: appointment.professional || "",
-      appointmentDate: appointmentDate.toISOString().split("T")[0],
+      appointmentDate: appointmentDateStr,
-      startTime: appointmentDate.toTimeString().split(" ")[0].substring(0, 5),
+      startTime,
-      endTime: new Date(appointmentDate.getTime() + (appointment.duration || 30) * 60000)
+      endTime,
-        .toTimeString()
-        .split(" ")[0]
-        .substring(0, 5),
       status: appointment.status,
-      appointmentType: appointment.type,
+      appointmentType: appointment.appointment_type || appointment.type,
-      notes: appointment.notes || "",
+      notes: appointment.notes || appointment.patient_notes || "",
       cpf: "",
       rg: "",
       birthDate: "",
@@ -107,6 +114,15 @@ export default function ConsultasPage() {
       phoneNumber: "",
       email: "",
       unit: "nei",
+      // API-editable fields (populate so the form shows existing values)
+      duration_minutes: duration,
+      chief_complaint: appointment.chief_complaint ?? null,
+      patient_notes: appointment.patient_notes ?? null,
+      insurance_provider: appointment.insurance_provider ?? null,
+      checked_in_at: appointment.checked_in_at ?? null,
+      completed_at: appointment.completed_at ?? null,
+      cancelled_at: appointment.cancelled_at ?? null,
+      cancellation_reason: appointment.cancellation_reason ?? appointment.cancellationReason ?? "",
     };
   };
 
@@ -175,12 +191,21 @@ export default function ConsultasPage() {
       const mapped = {
         id: updated.id,
         patient: formData.patientName || existing.patient || '',
-        time: updated.scheduled_at || updated.created_at || scheduled_at,
+        patient_id: existing.patient_id ?? null,
-        duration: updated.duration_minutes || duration_minutes,
+        // preserve server-side fields so future edits read them
-        type: updated.appointment_type || formData.appointmentType || existing.type || 'presencial',
+        scheduled_at: updated.scheduled_at ?? scheduled_at,
-        status: updated.status || formData.status || existing.status,
+        duration_minutes: updated.duration_minutes ?? duration_minutes,
+        appointment_type: updated.appointment_type ?? formData.appointmentType ?? existing.type ?? 'presencial',
+        status: updated.status ?? formData.status ?? existing.status,
         professional: existing.professional || formData.professionalName || '',
-        notes: updated.notes || updated.patient_notes || formData.notes || existing.notes || '',
+        notes: updated.notes ?? updated.patient_notes ?? formData.notes ?? existing.notes ?? '',
+        chief_complaint: updated.chief_complaint ?? formData.chief_complaint ?? existing.chief_complaint ?? null,
+        patient_notes: updated.patient_notes ?? formData.patient_notes ?? existing.patient_notes ?? null,
+        insurance_provider: updated.insurance_provider ?? formData.insurance_provider ?? existing.insurance_provider ?? null,
+        checked_in_at: updated.checked_in_at ?? formData.checked_in_at ?? existing.checked_in_at ?? null,
+        completed_at: updated.completed_at ?? formData.completed_at ?? existing.completed_at ?? null,
+        cancelled_at: updated.cancelled_at ?? formData.cancelled_at ?? existing.cancelled_at ?? null,
+        cancellation_reason: updated.cancellation_reason ?? formData.cancellation_reason ?? existing.cancellation_reason ?? null,
       };
 
       setAppointments((prev) => prev.map((a) => (a.id === mapped.id ? mapped : a)));
@@ -197,13 +222,9 @@ export default function ConsultasPage() {
     }
   };
 
-  useEffect(() => {
+  // Fetch and map appointments (used at load and when clearing search)
-    let mounted = true;
+  const fetchAndMapAppointments = async () => {
-
-    async function load() {
-      try {
     const arr = await listarAgendamentos("select=*&order=scheduled_at.desc&limit=200");
-        if (!mounted) return;
 
     // Collect unique patient_ids and doctor_ids
     const patientIds = new Set<string>();
@@ -243,30 +264,129 @@ export default function ConsultasPage() {
         id: a.id,
         patient,
         patient_id: a.patient_id,
-            time: a.scheduled_at || a.created_at || "",
+        // keep some server-side fields so edit can access them later
-            duration: a.duration_minutes || 30,
+        scheduled_at: a.scheduled_at ?? a.time ?? a.created_at ?? null,
-            type: a.appointment_type || "presencial",
+        duration_minutes: a.duration_minutes ?? a.duration ?? null,
-            status: a.status || "requested",
+        appointment_type: a.appointment_type ?? a.type ?? null,
+        status: a.status ?? "requested",
         professional,
         notes: a.notes || a.patient_notes || "",
+        // additional editable fields
+        chief_complaint: a.chief_complaint ?? null,
+        patient_notes: a.patient_notes ?? null,
+        insurance_provider: a.insurance_provider ?? null,
+        checked_in_at: a.checked_in_at ?? null,
+        completed_at: a.completed_at ?? null,
+        cancelled_at: a.cancelled_at ?? null,
+        cancellation_reason: a.cancellation_reason ?? a.cancellationReason ?? null,
       };
     });
 
+    return mapped;
+  };
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        const mapped = await fetchAndMapAppointments();
+        if (!mounted) return;
         setAppointments(mapped);
         setIsLoading(false);
       } catch (err) {
         console.warn("[ConsultasPage] Falha ao carregar agendamentos, usando mocks", err);
+        if (!mounted) return;
         setAppointments([]);
         setIsLoading(false);
       }
-    }
+    })();
-
+    return () => { mounted = false; };
-    load();
-    return () => {
-      mounted = false;
-    };
   }, []);
 
+  // Search box: allow fetching a single appointment by ID when pressing Enter
+  const performSearch = async (val: string) => {
+    const trimmed = String(val || '').trim();
+    if (!trimmed) return;
+    setIsLoading(true);
+    try {
+      const ap = await buscarAgendamentoPorId(trimmed, '*');
+      // resolve patient and doctor names if possible
+      let patient = ap.patient_id || '';
+      let professional = ap.doctor_id || '';
+      try {
+        if (ap.patient_id) {
+          const list = await buscarPacientesPorIds([ap.patient_id]);
+          if (list && list.length) patient = list[0].full_name || String(ap.patient_id);
+        }
+      } catch (e) {
+        // ignore
+      }
+      try {
+        if (ap.doctor_id) {
+          const list = await buscarMedicosPorIds([ap.doctor_id]);
+          if (list && list.length) professional = list[0].full_name || String(ap.doctor_id);
+        }
+      } catch (e) {}
+
+      const mappedSingle = [{
+        id: ap.id,
+        patient,
+        patient_id: ap.patient_id,
+        scheduled_at: ap.scheduled_at,
+        duration_minutes: ap.duration_minutes ?? null,
+        appointment_type: ap.appointment_type ?? null,
+        status: ap.status ?? 'requested',
+        professional,
+        notes: ap.notes ?? ap.patient_notes ?? '',
+        chief_complaint: ap.chief_complaint ?? null,
+        patient_notes: ap.patient_notes ?? null,
+        insurance_provider: ap.insurance_provider ?? null,
+        checked_in_at: ap.checked_in_at ?? null,
+        completed_at: ap.completed_at ?? null,
+        cancelled_at: ap.cancelled_at ?? null,
+        cancellation_reason: ap.cancellation_reason ?? null,
+      }];
+
+      setAppointments(mappedSingle as any[]);
+    } catch (err) {
+      console.warn('[ConsultasPage] buscarAgendamentoPorId falhou:', err);
+      alert('Agendamento não encontrado');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSearchKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      await performSearch(searchValue);
+    } else if (e.key === 'Escape') {
+      setSearchValue('');
+      setIsLoading(true);
+      try {
+        const mapped = await fetchAndMapAppointments();
+        setAppointments(mapped);
+      } catch (err) {
+        setAppointments([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const handleClearSearch = async () => {
+    setSearchValue('');
+    setIsLoading(true);
+    try {
+      const mapped = await fetchAndMapAppointments();
+      setAppointments(mapped);
+    } catch (err) {
+      setAppointments([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   // Keep localForm synchronized with editingAppointment
   useEffect(() => {
     if (showForm && editingAppointment) {
@@ -325,9 +445,33 @@ export default function ConsultasPage() {
           <CardTitle>Consultas Agendadas</CardTitle>
           <CardDescription>Visualize, filtre e gerencie todas as consultas da clínica.</CardDescription>
           <div className="pt-4 flex flex-wrap items-center gap-4">
-            <div className="relative flex-1 min-w-[250px]">
+            <div className="flex-1 min-w-[250px] flex gap-2 items-center">
+              <div className="relative flex-1">
                 <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input type="search" placeholder="Buscar por..." className="pl-8 w-full" />
+                <Input
+                  type="search"
+                  placeholder="Buscar por..."
+                  className="pl-8 pr-4 w-full shadow-sm border border-border bg-transparent mr-2"
+                  value={searchValue}
+                  onChange={(e) => setSearchValue(e.target.value)}
+                  onKeyDown={handleSearchKeyDown}
+                />
+              </div>
+              <div className="flex-shrink-0 flex items-center gap-2">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-8 px-3 rounded-md bg-muted/10 hover:bg-muted/20 border border-border shadow-sm"
+                  onClick={() => performSearch(searchValue)}
+                  aria-label="Buscar agendamento"
+                >
+                  <Search className="h-4 w-4 mr-1" />
+                  <span className="hidden sm:inline">Buscar</span>
+                </Button>
+                <Button size="sm" variant="outline" className="h-8 px-3" onClick={handleClearSearch}>
+                  Limpar
+                </Button>
+              </div>
             </div>
             <Select>
               <SelectTrigger className="w-[180px]">

susconecta/lib/api.ts

@@ -1009,6 +1009,23 @@ export async function listarAgendamentos(query?: string): Promise<Appointment[]>
   return await parse<Appointment[]>(res);
 }
 
+/**
+ * Buscar agendamento por ID (GET /rest/v1/appointments?id=eq.<id>)
+ * Retorna o primeiro agendamento encontrado ou lança erro 404.
+ */
+export async function buscarAgendamentoPorId(id: string | number, select: string = '*'): Promise<Appointment> {
+  const sId = String(id || '').trim();
+  if (!sId) throw new Error('ID é obrigatório para buscar agendamento');
+  const params = new URLSearchParams();
+  if (select) params.set('select', select);
+  params.set('limit', '1');
+  const url = `${REST}/appointments?id=eq.${encodeURIComponent(sId)}&${params.toString()}`;
+  const headers = baseHeaders();
+  const arr = await fetchWithFallback<Appointment[]>(url, headers);
+  if (arr && arr.length) return arr[0];
+  throw new Error('404: Agendamento não encontrado');
+}
+
 /**
  * Buscar relatório por ID (tenta múltiplas estratégias: id, order_number, patient_id)
  * Retorna o primeiro relatório encontrado ou lança erro 404 quando não achar.