consertando algumas coisas

package.json

@@ -14,6 +14,7 @@
     "@fullcalendar/react": "^6.1.19",
     "@fullcalendar/timegrid": "^6.1.19",
     "@jitsi/react-sdk": "^1.4.0",
+    "@supabase/supabase-js": "^2.86.0",
     "@sweetalert2/theme-dark": "^5.0.27",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
@@ -33,6 +34,7 @@
     "express": "^5.1.0",
     "firebase": "^12.5.0",
     "flatpickr": "^4.6.13",
+    "helmet": "^8.1.0",
     "html2pdf.js": "^0.12.1",
     "lucide-react": "^0.543.0",
     "node-fetch": "^3.3.2",

src/PagesAdm/gestao.css

@@ -1,4 +1,3 @@
-
 .dashboard-container {
   padding: 2rem;
   font-family: 'Arial', sans-serif;
@@ -6,7 +5,6 @@
   min-height: 100vh;
 }
 
-
 .dashboard-header {
   display: flex;
   justify-content: space-between;
@@ -34,143 +32,133 @@
   border: none;
   border-radius: 8px;
   font-size: 1rem;
+  font-weight: 600;
   cursor: pointer;
-  transition: background-color 0.3s, transform 0.25s ease, box-shadow 0.25s ease;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.3);
 }
 
 .new-user-btn:hover {
   background-color: #162d6b;
   transform: translateY(-2px);
-  box-shadow: 0px 4px 12px rgba(30, 58, 138, 0.3);
+  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.4);
 }
 
-
 .filters-container {
   background: #fff;
   border-radius: 12px;
-  padding: 1.5rem;
+  padding: 1.2rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   margin-bottom: 2rem;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.filters-container:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
 .filters-title {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: bold;
   margin-bottom: 0.3rem;
   color: #333;
 }
 
 .filters-subtitle {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   color: #666;
   margin-bottom: 1rem;
 }
 
 .filters-content {
   display: flex;
-  gap: 1rem;
+  gap: 0.8rem;
   align-items: center;
 }
 
 .filters-input {
   flex: 1;
-  padding: 0.6rem 1rem;
+  padding: 0.5rem 0.8rem;
   border: 1px solid #d1d5db;
-  border-radius: 8px;
+  border-radius: 6px;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   color: #333;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  min-width: 200px;
+  transition: all 0.2s ease;
 }
 
 .filters-input:focus {
   border-color: #1e3a8a;
-  box-shadow: 0px 0px 0px 3px rgba(30, 58, 138, 0.2);
+  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
   outline: none;
 }
 
 .filters-select {
-  padding: 0.6rem 1rem;
+  padding: 0.5rem 0.8rem;
   border: 1px solid #d1d5db;
-  border-radius: 8px;
+  border-radius: 6px;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   background: #fff;
   color: #333;
   cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  min-width: 140px;
+  transition: all 0.2s ease;
 }
 
 .filters-select:focus {
   border-color: #1e3a8a;
-  box-shadow: 0px 0px 0px 3px rgba(30, 58, 138, 0.2);
+  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
   outline: none;
 }
 
-
 .cards-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
+  gap: 1.2rem;
   margin-bottom: 2rem;
 }
 
 .card {
   background-color: white;
-  padding: 1.5rem;
+  padding: 1.2rem;
-  border-radius: 12px;
+  border-radius: 10px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   border: 1px solid transparent;
-  transition: transform 0.25s ease, box-shadow 0.25s ease, border 0.25s ease, background 0.25s ease;
+  transition: all 0.25s ease;
   cursor: pointer;
 }
 
 .highlight:hover {
-  transform: translateY(-6px);
+  transform: translateY(-4px);
-  box-shadow: 0 8px 20px rgba(30, 58, 138, 0.2);
+  box-shadow: 0 6px 16px rgba(30, 58, 138, 0.2);
   background: #f8faff;
   border: 1px solid #1e3a8a33;
 }
 
 .card-label {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   color: #999;
   margin-bottom: 0.5rem;
 }
 
 .card-value {
-  font-size: 1.8rem;
+  font-size: 1.6rem;
   font-weight: bold;
   margin: 0;
   color: #333;
 }
 
 .card-extra {
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   color: #666;
 }
 
 .card-extra.positive {
   color: #1e3a8a;
+  font-weight: 600;
 }
 
-
 .user-table-container {
   background: #fff;
   border-radius: 12px;
-  padding: 1.5rem;
+  padding: 1.2rem;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   margin-top: 2rem;
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
-}
-
-.user-table-container:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
 }
 
 .user-table-container h2 {
@@ -193,7 +181,7 @@
 
 .user-table th,
 .user-table td {
-  padding: 12px 15px;
+  padding: 10px 12px;
   text-align: left;
   border-bottom: 1px solid #e0e0e0;
 }
@@ -202,10 +190,11 @@
   background-color: #f3f4f6;
   color: #333;
   font-weight: 600;
+  font-size: 0.9rem;
 }
 
 .user-table tr {
-  transition: background-color 0.25s ease;
+  transition: background-color 0.2s ease;
 }
 
 .user-table tr:hover {
@@ -214,44 +203,115 @@
 
 .profile-badge {
   background-color: #1e3a8a;
-  color: #f7f7f7;
+  color: white;
-  padding: 3px 8px;
+  padding: 4px 10px;
-  border-radius: 8px;
+  border-radius: 6px;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
+  font-weight: 500;
   display: inline-block;
 }
 
 .status-badge {
-  padding: 3px 8px;
+  padding: 4px 10px;
-  border-radius: 8px;
+  border-radius: 6px;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   color: #fff;
+  font-weight: 500;
   display: inline-block;
   text-transform: capitalize;
 }
 
 .status-badge.ativo {
-  background-color: #28a745;
+  background-color: #1e3a8a;
 }
 
 .status-badge.inativo {
-  background-color: #dc3545;
+  background-color: #6c757d;
 }
 
 .actions {
   display: flex;
-  gap: 10px;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 
-.action-icon {
+.action-btn {
+  border: none;
+  padding: 6px 12px;
+  font-size: 0.8rem;
+  font-weight: 500;
   cursor: pointer;
-  color: #555;
+  transition: all 0.2s ease;
-  transition: color 0.2s, transform 0.2s;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
-.action-icon:hover {
+.action-btn.detalhes {
-  color: #1e3a8a;
+  background-color: #e6f2ff;
-  transform: scale(1.2);
+  color: #004085;
+  border: 1px solid #b8d4ff;
+}
+
+.action-btn.detalhes:hover {
+  background-color: #cce4ff;
+  transform: translateY(-1px);
+}
+
+.action-btn.editar {
+  background-color: #fff3cd;
+  color: #856405;
+  border: 1px solid #ffeaa7;
+}
+
+.action-btn.editar:hover {
+  background-color: #ffeaa7;
+  transform: translateY(-1px);
+}
+
+.action-btn.excluir {
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f1b0b7;
+}
+
+.action-btn.excluir:hover {
+  background-color: #f1b0b7;
+  transform: translateY(-1px);
+}
+
+.save-btn {
+  background-color: #1e3a8a;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.save-btn:hover {
+  background-color: #162d6b;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(30, 58, 138, 0.3);
+}
+
+.edit-btn {
+  background-color: #fff3cd;
+  color: #856405;
+  border: 1px solid #ffeaa7;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.edit-btn:hover {
+  background-color: #ffeaa7;
+  transform: translateY(-1px);
 }
 
 html[data-bs-theme="dark"] .dashboard-container {
@@ -266,18 +326,17 @@ html[data-bs-theme="dark"] .dashboard-subtitle {
 }
 
 html[data-bs-theme="dark"] .new-user-btn {
-  background-color: #2563eb;
+  background-color: #1e3a8a;
-  color: #fff;
 }
 
 html[data-bs-theme="dark"] .new-user-btn:hover {
-  background-color: #1e40af;
+  background-color: #162d6b;
 }
 
 html[data-bs-theme="dark"] .filters-container,
 html[data-bs-theme="dark"] .user-table-container {
   background: #1a1a1a;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.4);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
 }
 
 html[data-bs-theme="dark"] .filters-title,
@@ -299,19 +358,19 @@ html[data-bs-theme="dark"] .filters-select {
 
 html[data-bs-theme="dark"] .filters-input:focus,
 html[data-bs-theme="dark"] .filters-select:focus {
-  border-color: #2563eb;
+  border-color: #1e3a8a;
-  box-shadow: 0px 0px 0px 3px rgba(37, 99, 235, 0.2);
+  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
 }
 
 html[data-bs-theme="dark"] .cards-container .card {
   background-color: #181818;
   color: #e0e0e0;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.4);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
 }
 
 html[data-bs-theme="dark"] .highlight:hover {
-  background: #232a3a;
+  background: #1a1f2e;
-  border: 1px solid #2563eb33;
+  border: 1px solid #1e3a8a33;
 }
 
 html[data-bs-theme="dark"] .card-label {
@@ -327,7 +386,7 @@ html[data-bs-theme="dark"] .card-extra {
 }
 
 html[data-bs-theme="dark"] .card-extra.positive {
-  color: #2563eb;
+  color: #1e3a8a;
 }
 
 html[data-bs-theme="dark"] .user-table th {
@@ -341,26 +400,39 @@ html[data-bs-theme="dark"] .user-table td {
 }
 
 html[data-bs-theme="dark"] .user-table tr:hover {
-  background-color: #232a3a;
+  background-color: #1a1f2e;
 }
 
 html[data-bs-theme="dark"] .profile-badge {
-  background-color: #2563eb;
+  background-color: #1e3a8a;
-  color: #fff;
 }
 
-html[data-bs-theme="dark"] .status-badge.ativo {
+html[data-bs-theme="dark"] .action-btn.detalhes {
-  background-color: #28a745;
+  background-color: #e6f2ff;
+  color: #004085;
+  border: 1px solid #b8d4ff;
 }
 
-html[data-bs-theme="dark"] .status-badge.inativo {
+html[data-bs-theme="dark"] .action-btn.detalhes:hover {
-  background-color: #dc3545;
+  background-color: #cce4ff;
 }
 
-html[data-bs-theme="dark"] .action-icon {
+html[data-bs-theme="dark"] .action-btn.editar {
-  color: #bdbdbd;
+  background-color: #fff3cd;
+  color: #856405;
+  border: 1px solid #ffeaa7;
 }
 
-html[data-bs-theme="dark"] .action-icon:hover {
+html[data-bs-theme="dark"] .action-btn.editar:hover {
-  color: #2563eb;
+  background-color: #ffeaa7;
+}
+
+html[data-bs-theme="dark"] .action-btn.excluir {
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f1b0b7;
+}
+
+html[data-bs-theme="dark"] .action-btn.excluir:hover {
+  background-color: #f1b0b7;
 }

src/PagesAdm/gestao.jsx

@@ -1,14 +1,9 @@
-
 import React from "react";
 import "./gestao.css";
-import { FaEdit, FaTrash } from "react-icons/fa";
-
 
 function UserDashboard() {
   return (
-    
+    <div className="dashboard-container">
-        <div className="dashboard-container">
-
       <div className="dashboard-header">
         <div>
           <h1 className="dashboard-title">Gestão de Usuários</h1>
@@ -91,8 +86,9 @@ function UserDashboard() {
               <td><span className="status-badge ativo">Ativo</span></td>
               <td>20/12/2024, 08:30</td>
               <td className="actions">
-                <span className="action-icon"></span>
+                <button className="action-btn detalhes">Ver Detalhes</button>
-                <span className="action-icon"></span>
+                <button className="action-btn editar">Editar</button>
+                <button className="action-btn excluir">Excluir</button>
               </td>
             </tr>
             <tr>
@@ -103,8 +99,9 @@ function UserDashboard() {
               <td><span className="status-badge ativo">Ativo</span></td>
               <td>19/12/2024, 14:20</td>
               <td className="actions">
-                <span className="action-icon"></span>
+                <button className="action-btn detalhes">Ver Detalhes</button>
-                <span className="action-icon"></span>
+                <button className="action-btn editar">Editar</button>
+                <button className="action-btn excluir">Excluir</button>
               </td>
             </tr>
             <tr>
@@ -115,8 +112,9 @@ function UserDashboard() {
               <td><span className="status-badge ativo">Ativo</span></td>
               <td>20/12/2024, 07:45</td>
               <td className="actions">
-                <span className="action-icon"></span>
+                <button className="action-btn detalhes">Ver Detalhes</button>
-                <span className="action-icon"></span>
+                <button className="action-btn editar">Editar</button>
+                <button className="action-btn excluir">Excluir</button>
               </td>
             </tr>
             <tr>
@@ -127,8 +125,9 @@ function UserDashboard() {
               <td><span className="status-badge inativo">Inativo</span></td>
               <td>15/12/2024, 16:30</td>
               <td className="actions">
-                <span className="action-icon"></span>
+                <button className="action-btn detalhes">Ver Detalhes</button>
-                <span className="person-badge-fill"></span>
+                <button className="action-btn editar">Editar</button>
+                <button className="action-btn excluir">Excluir</button>
               </td>
             </tr>
           </tbody>
@@ -138,5 +137,4 @@ function UserDashboard() {
   );
 }
 
-
 export default UserDashboard;

src/PagesMedico/FormNovoRelatorio.jsx

@@ -1,5 +1,6 @@
+// src/PagesMedico/FormNovoRelatorio.jsx
 import React, { useEffect, useState, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import API_KEY from '../components/utils/apiKeys';
 import { useAuth } from '../components/utils/AuthProvider';
 import TiptapEditor from './TiptapEditor';
@@ -12,6 +13,7 @@ const FormNovoRelatorio = () => {
   const { getAuthorizationHeader } = useAuth();
   const authHeader = getAuthorizationHeader();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const [patients, setPatients] = useState([]);
   const [doctors, setDoctors] = useState([]);
@@ -33,6 +35,7 @@ const FormNovoRelatorio = () => {
   const [showDoctorDropdown, setShowDoctorDropdown] = useState(false);
   const patientRef = useRef();
   const doctorRef = useRef();
+  const [lockedFromAppointment, setLockedFromAppointment] = useState(false);
 
   useEffect(() => {
     let mounted = true;
@@ -129,7 +132,24 @@ const FormNovoRelatorio = () => {
 
   const handleEditorChange = (html) => setForm(prev => ({ ...prev, contentHtml: html }));
 
-  // 🔹 Agora com created_by sendo o ID do usuário logado
+  useEffect(() => {
+    if (location && location.state && location.state.appointment) {
+      const appt = location.state.appointment;
+      const paciente_nome = location.state.paciente_nome || appt.paciente_nome || '';
+      const medico_nome = location.state.medico_nome || appt.medico_nome || '';
+      setForm(prev => ({
+        ...prev,
+        patient_id: appt.patient_id || prev.patient_id,
+        patient_name: paciente_nome || prev.patient_name,
+        patient_birth: prev.patient_birth || '',
+        doctor_id: appt.doctor_id || prev.doctor_id,
+        doctor_name: medico_nome || prev.doctor_name,
+        contentHtml: generateTemplate(paciente_nome, prev.patient_birth || '', medico_nome)
+      }));
+      setLockedFromAppointment(true);
+    }
+  }, [location]);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!form.patient_id) return alert('Selecione o paciente (clicando no item) antes de salvar.');
@@ -149,7 +169,6 @@ const FormNovoRelatorio = () => {
         requested_by: form.doctor_name || ''
       };
 
-      // Busca o id do usuário logado (via token)
       let userId = null;
       try {
         const token = authHeader?.replace(/^Bearer\s+/i, '') || '';
@@ -189,8 +208,6 @@ const FormNovoRelatorio = () => {
       }
 
       const created = await res.json();
-      console.log('Relatório criado:', created);
-
       window.dispatchEvent(new Event('reports:refresh'));
       alert('Relatório criado com sucesso!');
       navigate('/medico/relatorios');
@@ -211,11 +228,12 @@ const FormNovoRelatorio = () => {
             <input
               className="form-control"
               placeholder="Comece a digitar (ex.: m para pacientes que começam com m)"
-              value={patientQuery}
+              value={lockedFromAppointment ? form.patient_name : patientQuery}
-              onChange={(e) => { setPatientQuery(e.target.value); setShowPatientDropdown(true); }}
+              onChange={(e) => { if (!lockedFromAppointment) { setPatientQuery(e.target.value); setShowPatientDropdown(true); } }}
-              onFocus={() => setShowPatientDropdown(true)}
+              onFocus={() => { if (!lockedFromAppointment) setShowPatientDropdown(true); }}
+              disabled={lockedFromAppointment}
             />
-            {showPatientDropdown && patientQuery && (
+            {!lockedFromAppointment && showPatientDropdown && patientQuery && (
               <ul className="list-group position-absolute" style={{ zIndex: 50, maxHeight: 220, overflowY: 'auto', width: '100%' }}>
                 {filteredPatients.length > 0 ? filteredPatients.map(p => (
                   <li key={p.id} className="list-group-item list-group-item-action" onClick={() => choosePatient(p)}>
@@ -232,11 +250,12 @@ const FormNovoRelatorio = () => {
             <input
               className="form-control"
               placeholder="Comece a digitar o nome do médico"
-              value={doctorQuery}
+              value={lockedFromAppointment ? form.doctor_name : doctorQuery}
-              onChange={(e) => { setDoctorQuery(e.target.value); setShowDoctorDropdown(true); }}
+              onChange={(e) => { if (!lockedFromAppointment) { setDoctorQuery(e.target.value); setShowDoctorDropdown(true); } }}
-              onFocus={() => setShowDoctorDropdown(true)}
+              onFocus={() => { if (!lockedFromAppointment) setShowDoctorDropdown(true); }}
+              disabled={lockedFromAppointment}
             />
-            {showDoctorDropdown && doctorQuery && (
+            {!lockedFromAppointment && showDoctorDropdown && doctorQuery && (
               <ul className="list-group position-absolute" style={{ zIndex: 50, maxHeight: 220, overflowY: 'auto', width: '100%' }}>
                 {filteredDoctors.length > 0 ? filteredDoctors.map(d => (
                   <li key={d.id} className="list-group-item list-group-item-action" onClick={() => chooseDoctor(d)}>
@@ -261,4 +280,4 @@ const FormNovoRelatorio = () => {
   );
 };
 
-export default FormNovoRelatorio;
+export default FormNovoRelatorio;

src/PagesMedico/NovoRelatorioAudio.jsx

@@ -0,0 +1,215 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import html2pdf from 'html2pdf.js';
+import './styleMedico/NovoRelatorioAudio.css';
+
+const NovoRelatorioAudio = () => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  
+  const [formData, setFormData] = useState({
+    paciente_nome: '',
+    data_exame: new Date().toISOString().split('T')[0],
+    exam: '',
+    diagnostico: '',
+    conclusao: '',
+    medico_nome: 'Dr.______________________'
+  });
+
+  const handleAudioUpload = async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    setLoading(true);
+    const data = new FormData();
+    data.append('audio', file);
+
+    try {
+      const response = await fetch('http://localhost:3001/api/transcrever-relatorio', {
+        method: 'POST',
+        body: data,
+      });
+
+      if (!response.ok) throw new Error('Erro na comunicação com a API');
+
+      const result = await response.json();
+
+      setFormData(prev => ({
+        ...prev,
+        exam: result.exam || prev.exam,
+        diagnostico: result.diagnostico || prev.diagnostico,
+        conclusao: result.conclusao || prev.conclusao
+      }));
+
+    } catch (error) {
+      console.error(error);
+      alert("Erro: Verifique se o backend (porta 3001) está rodando.");
+    } finally {
+      setLoading(false);
+      e.target.value = null; 
+    }
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handlePrintPDF = () => {
+    const element = document.getElementById('documento-final');
+    const opt = {
+      margin: 0,
+      filename: `Laudo_${formData.paciente_nome || 'SemNome'}.pdf`,
+      image: { type: 'jpeg', quality: 0.98 },
+      html2canvas: { scale: 2 },
+      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+    };
+    html2pdf().set(opt).from(element).save();
+  };
+
+  return (
+    <div className="ai-editor-container">
+      
+      <div className="editor-sidebar">
+        <div>
+            <h4><i className="bi bi-robot me-2"></i>AI Report</h4>
+            <p className="text-muted small">Gerador de laudos automatizado</p>
+        </div>
+
+        <div className="ai-upload-box">
+             {loading ? (
+                <div className="spinner-border text-info" role="status"></div>
+             ) : (
+                 <>
+                    <label htmlFor="audioFile" style={{cursor:'pointer', width:'100%', display:'block'}}>
+                        <i className="bi bi-mic fs-2 text-info"></i>
+                        <div style={{color:'#fff', fontWeight:'bold', marginTop:'10px'}}>Gravar / Enviar Áudio</div>
+                        <div className="small text-muted mt-1">Clique para selecionar</div>
+                    </label>
+                    <input 
+                        id="audioFile" 
+                        type="file" 
+                        accept="audio/*" 
+                        style={{display:'none'}} 
+                        onChange={handleAudioUpload}
+                    />
+                 </>
+             )}
+        </div>
+
+        <hr className="border-secondary" />
+
+        <div className="form-group">
+            <label>NOME DO PACIENTE</label>
+            <input 
+                type="text" 
+                name="paciente_nome" 
+                className="form-control dark-input" 
+                value={formData.paciente_nome} 
+                onChange={handleChange}
+                placeholder="Ex: Maria Silva"
+            />
+        </div>
+
+        <div className="form-group">
+            <label>EXAME REALIZADO</label>
+            <input 
+                type="text" 
+                name="exam" 
+                className="form-control dark-input" 
+                value={formData.exam} 
+                onChange={handleChange}
+            />
+        </div>
+
+        <div className="form-group">
+            <label>DIAGNÓSTICO (TEXTO)</label>
+            <textarea 
+                name="diagnostico" 
+                rows="5" 
+                className="form-control dark-input" 
+                value={formData.diagnostico} 
+                onChange={handleChange}
+            ></textarea>
+        </div>
+
+        <div className="form-group">
+            <label>CONCLUSÃO</label>
+            <textarea 
+                name="conclusao" 
+                rows="3" 
+                className="form-control dark-input" 
+                value={formData.conclusao} 
+                onChange={handleChange}
+            ></textarea>
+        </div>
+
+        <div className="mt-auto d-flex gap-2">
+            <button className="btn btn-outline-light flex-grow-1" onClick={() => navigate(-1)}>Voltar</button>
+            <button className="btn btn-info flex-grow-1 fw-bold" onClick={handlePrintPDF}>
+                <i className="bi bi-printer me-2"></i>PDF
+            </button>
+        </div>
+      </div>
+
+      <div className="preview-area">
+        <div id="documento-final" className="paper-a4">
+            
+            <div style={{borderBottom: '2px solid #000', paddingBottom: '20px', marginBottom: '30px', display:'flex', justifyContent:'space-between'}}>
+                <div>
+                    <h2 style={{margin:0, fontSize:'18pt', fontWeight:'bold'}}>CLÍNICA RISE UP</h2>
+                    <p style={{margin:0, fontSize:'10pt'}}>Excelência em Diagnóstico por Imagem</p>
+                </div>
+                <div style={{textAlign:'right', fontSize:'10pt'}}>
+                    <p style={{margin:0}}><strong>{formData.medico_nome}</strong></p>
+                    <p style={{margin:0}}>CRM/SP 123456</p>
+                    <p style={{margin:0}}>{new Date().toLocaleDateString()}</p>
+                </div>
+            </div>
+
+            <div style={{backgroundColor:'#f8f9fa', padding:'15px', borderRadius:'4px', marginBottom:'30px'}}>
+                <table style={{width:'100%', fontSize:'11pt'}}>
+                    <tbody>
+                        <tr>
+                            <td style={{width:'15%', fontWeight:'bold'}}>Paciente:</td>
+                            <td>{formData.paciente_nome || '__________________________'}</td>
+                        </tr>
+                        <tr>
+                            <td style={{fontWeight:'bold'}}>Exame:</td>
+                            <td>{formData.exam || '__________________________'}</td>
+                        </tr>
+                        <tr>
+                            <td style={{fontWeight:'bold'}}>Data:</td>
+                            <td>{new Date(formData.data_exame).toLocaleDateString('pt-BR')}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <div className="laudo-body">
+                <h4 style={{textTransform:'uppercase', borderBottom:'1px solid #ccc', paddingBottom:'5px', marginBottom:'15px'}}>Relatório Médico</h4>
+                
+                <p style={{fontWeight:'bold', marginBottom:'5px'}}>Análise:</p>
+                <p style={{marginBottom:'25px', textAlign:'justify', whiteSpace:'pre-wrap'}}>
+                    {formData.diagnostico || <span style={{color:'#ccc'}}>O diagnóstico aparecerá aqui após o processamento do áudio...</span>}
+                </p>
+
+                <p style={{fontWeight:'bold', marginBottom:'5px'}}>Conclusão:</p>
+                <p style={{marginBottom:'40px', textAlign:'justify', fontWeight:'500'}}>
+                    {formData.conclusao}
+                </p>
+            </div>
+
+            <div style={{marginTop:'50px', textAlign:'center', pageBreakInside:'avoid'}}>
+                <p style={{marginBottom:0}}>________________________________________</p>
+                <p style={{fontWeight:'bold', margin:0}}>{formData.medico_nome}</p>
+                <p style={{fontSize:'10pt', color:'#666'}}>Assinatura Eletrônica</p>
+            </div>
+
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NovoRelatorioAudio;

src/PagesMedico/styleMedico/Agendamento.css

@@ -6,18 +6,58 @@
 /* --- Posiciona a barra de busca corretamente --- */
 .busca-atendimento {
   display: flex;
-  align-items: center; /* Alinha os itens verticalmente */
+  align-items: center;
-  margin-top: 20px; /* Espaço acima da barra de busca */
+  margin-top: 20px;
-  padding: 0 10px; /* Adiciona um padding lateral para alinhar com o resto */
+  padding: 0 10px;
   gap: 15px;
 }
 
 .busca-atendimento > div:first-child {
-    width: 400px; /* Define um tamanho para a barra de pesquisa */
+    width: 400px;
     display: flex;
     align-items: center;
 }
 
+@media (max-width: 768px) {
+  .busca-atendimento {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  
+  .busca-atendimento > div:first-child {
+    width: 100%;
+  }
+  
+  .btns-e-legenda-container {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  
+  .legenda-tabela {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+}
+
+@media (max-width: 576px) {
+  .busca-atendimento {
+    padding: 0 5px;
+  }
+  
+  .btns-e-legenda-container {
+    padding: 0 5px;
+  }
+  
+  .btn-selecionar-tabeladia,
+  .btn-selecionar-tabelasemana,
+  .btn-selecionar-tabelames {
+    padding: 6px 8px;
+    font-size: medium;
+  }
+}
+
 .busca-atendimento input {
   margin-left: 8px;
   border-radius: 8px;
@@ -126,13 +166,20 @@
 }
 
 .container-btns-agenda-fila_esepera {
-  margin-top: 30px;
   display: flex;
   flex-direction: row;
+  justify-content: space-between; 
+  align-items: flex-end;
   gap: 20px;
-  margin-left: 20px;
+
+  margin-top: 0;        
+  margin-bottom: 0;    
+  margin-left: 0;       
+  padding: 0 20px 0;    
+  border-bottom: 1px solid #edf1f7; 
 }
 
+
 .btn-fila-espera,
 .btn-agenda {
   background-color: transparent;
@@ -140,6 +187,7 @@
   border-bottom: 3px solid transparent;
   padding: 8px;
   border-radius: 10px 10px 0px 0px;
+  color: #fff;
   font-weight: bold;
   cursor: pointer;
 }
@@ -228,4 +276,10 @@ html[data-bs-theme="dark"] .legenda-item-agendado {
   background-color: #2e2e1e;
   border: 3px solid #4d4d2e;
   color: #f7f7c4;
-}
+}
+.calendar-legend {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}

src/PagesMedico/styleMedico/NovoRelatorioAudio.css

@@ -0,0 +1,119 @@
+/* Container que ocupa toda a altura da tela (menos o header do site) */
+.ai-editor-container {
+    display: flex;
+    min-height: calc(100vh - 80px); /* Ajuste conforme seu header */
+    background-color: #e9ecef; /* Cor de "Mesa" */
+    overflow: hidden;
+}
+
+/* --- LADO ESQUERDO: PAINEL DE CONTROLE --- */
+.editor-sidebar {
+    width: 400px;
+    background-color: #212529; /* Dark Mode para o painel */
+    color: #fff;
+    padding: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    box-shadow: 4px 0 10px rgba(0,0,0,0.1);
+}
+
+.editor-sidebar h4 {
+    color: #0dcaf0; /* Ciano para destaque */
+    margin-bottom: 20px;
+    font-weight: 700;
+}
+
+.editor-sidebar label {
+    font-size: 0.85rem;
+    color: #adb5bd;
+    margin-bottom: 5px;
+}
+
+/* Estilo customizado para inputs no fundo escuro */
+.dark-input {
+    background-color: #343a40;
+    border: 1px solid #495057;
+    color: #fff;
+    border-radius: 6px;
+}
+.dark-input:focus {
+    background-color: #3b4248;
+    color: #fff;
+    border-color: #0dcaf0;
+    box-shadow: none;
+}
+
+/* Área de Upload Destacada */
+.ai-upload-box {
+    border: 2px dashed #0dcaf0;
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+    background: rgba(13, 202, 240, 0.1);
+    transition: 0.3s;
+    cursor: pointer;
+}
+.ai-upload-box:hover {
+    background: rgba(13, 202, 240, 0.2);
+}
+
+/* --- LADO DIREITO: PREVIEW A4 --- */
+.preview-area {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 40px;
+    overflow-y: auto;
+}
+
+.paper-a4 {
+    width: 210mm;
+    min-height: 297mm;
+    background: white;
+    padding: 25mm;
+    box-shadow: 0 0 20px rgba(0,0,0,0.15);
+    color: #000;
+    font-family: 'Georgia', serif; /* Fonte mais séria para o documento */
+    font-size: 12pt;
+    line-height: 1.6;
+}
+
+/* Responsividade: Em celular vira coluna única */
+@media (max-width: 900px) {
+    .ai-editor-container {
+        flex-direction: column;
+        min-height: auto;
+    }
+    .editor-sidebar {
+        width: 100%;
+        height: auto;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    }
+    .preview-area {
+        padding: 20px;
+    }
+    .paper-a4 {
+        width: 100%;
+        min-height: auto;
+        padding: 15mm;
+        box-shadow: none;
+    }
+}
+
+@media (max-width: 576px) {
+    .ai-editor-container {
+        padding: 0;
+    }
+    .editor-sidebar {
+        padding: 15px;
+    }
+    .preview-area {
+        padding: 10px;
+    }
+    .paper-a4 {
+        padding: 10mm;
+    }
+}

src/PagesPaciente/ConsultaCadastroManager.jsx

@@ -1,83 +1,110 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react';
-import FormConsultaPaciente from './FormConsultaPaciente'
+import { useNavigate } from 'react-router-dom';
-import { useState, useEffect } from 'react'
+import dayjs from 'dayjs';
-import { useNavigate } from 'react-router-dom'
+
-import { useAuth } from '../components/utils/AuthProvider'
+import FormConsultaPaciente from './FormConsultaPaciente';
-import API_KEY from '../components/utils/apiKeys'
+import { useAuth } from '../components/utils/AuthProvider';
+import API_KEY from '../components/utils/apiKeys';
+import { UserInfos } from '../components/utils/Functions-Endpoints/General';
 
-import dayjs from 'dayjs'
-import { UserInfos } from '../components/utils/Functions-Endpoints/General'
 const ConsultaCadastroManager = () => {
-    
+  const { getAuthorizationHeader, user } = useAuth();
-    const {getAuthorizationHeader} = useAuth()
+  const navigate = useNavigate();
-    const [Dict, setDict] = useState({})
-    const navigate = useNavigate()
-    const [idUsuario, setIDusuario] = useState("")  
-    
-      let authHeader = getAuthorizationHeader() 
-    
 
+  const [Dict, setDict] = useState({});
+  // patient_id fixo do Pedro Abravanel
+  const [patientId, setPatientId] = useState('bf7d8323-05e1-437a-817c-f08eb5f174ef');
+  const [idUsuario, setIDusuario] = useState('');
+
+  const authHeader = getAuthorizationHeader();
+
+  // Opcional: ainda tenta buscar infos do usuário, mas NÃO mostra mais alerta
   useEffect(() => {
-    const ColherInfoUsuario =async () => {
+    const ColherInfoUsuario = async () => {
-      const result = await UserInfos(authHeader)
+      try {
-    
+        if (!authHeader) return;
-      setIDusuario(result?.profile?.id)
-    
-    }
-    ColherInfoUsuario()
-    
 
-  }, [])
+        const result = await UserInfos(authHeader);
 
-      const handleSave = (Dict) => {
+        const pid =
-        
+          result?.patient_id ||
-        let DataAtual = dayjs()
+          result?.profile?.id ||
-        var myHeaders = new Headers();
+          user?.patient_id ||
-        myHeaders.append("apikey", API_KEY);
+          user?.profile?.id ||
-        myHeaders.append("Authorization", authHeader);
+          user?.user?.id;
-        myHeaders.append("Content-Type", "application/json");
-    
 
-    var raw = JSON.stringify({
+        if (pid) {
-       "patient_id": "6e7f8829-0574-42df-9290-8dbb70f75ada",
+          setPatientId(pid);
-       "doctor_id": Dict.doctor_id,
+        }
-       "scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
+
-       "duration_minutes": 30,
+        setIDusuario(result?.profile?.id || pid || '');
-       "appointment_type": Dict.tipo_consulta,
+      } catch (e) {
-       
+        console.error('Erro ao colher infos do usuário:', e);
-       "patient_notes": "Prefiro horário pela manhã",
-       "insurance_provider": Dict.convenio,
-       "status": "confirmed",
-       "created_by": idUsuario
-    });
-    
-    var requestOptions = {
-       method: 'POST',
-       headers: myHeaders,
-       body: raw,
-       redirect: 'follow'
-    };
-    
-    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions)
-       .then(response => response.text())
-       .then(result => console.log(result))
-       .catch(error => console.log('error', error));
-    
       }
+    };
 
+    ColherInfoUsuario();
+  }, [authHeader, user]);
 
-    
+  const handleSave = (Dict) => {
-  
+    // se por algum motivo não tiver, usa o fixo do Pedro
-  
+    const finalPatientId = patientId || 'bf7d8323-05e1-437a-817c-f08eb5f174ef';
-  
-    return (
 
+    const myHeaders = new Headers();
+    myHeaders.append('apikey', API_KEY);
+    myHeaders.append('Authorization', authHeader);
+    myHeaders.append('Content-Type', 'application/json');
 
+    const raw = JSON.stringify({
+      patient_id: finalPatientId,          // paciente Pedro
+      doctor_id: Dict.doctor_id,
+      scheduled_at: `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
+      duration_minutes: 30,
+      appointment_type: Dict.tipo_consulta,
+      patient_notes: 'Prefiro horário pela manhã',
+      insurance_provider: Dict.convenio,
+      status: 'confirmed',
+      created_by: idUsuario || finalPatientId,
+    });
 
+    const requestOptions = {
+      method: 'POST',
+      headers: myHeaders,
+      body: raw,
+      redirect: 'follow',
+    };
+
+    fetch(
+      'https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments',
+      requestOptions
+    )
+      .then(async (response) => {
+        if (!response.ok) {
+          const text = await response.text();
+          throw new Error(`Erro ao salvar consulta: ${response.status} - ${text}`);
+        }
+        return response.text();
+      })
+      .then(() => {
+        alert('Consulta solicitada com sucesso!');
+        navigate('/paciente/agendamento/'); // volta para o calendário
+      })
+      .catch((error) => {
+        console.error('error', error);
+        alert('Erro ao salvar a consulta. Tente novamente.');
+      });
+  };
+
+  return (
     <div>
-        <FormConsultaPaciente agendamento={Dict} setAgendamento={setDict} onSave={handleSave} onCancel={() => navigate("/paciente/agendamento/")}/>
+      <FormConsultaPaciente
+        agendamento={Dict}
+        setAgendamento={setDict}
+        onSave={handleSave}
+        onCancel={() => navigate('/paciente/agendamento/')}
+      />
     </div>
-  )
+  );
-}
+};
 
-export default ConsultaCadastroManager
+export default ConsultaCadastroManager;

src/PagesPaciente/style.css

@@ -1,14 +1,71 @@
 
 /* Estilo geral do card para agrupar e dar um formato */
 .card-consulta {
-    background-color: #007bff; /* Um tom de azul padrão */
+    background-color: #007bff;
-    display: flex; /* Para   colocar horário e info lado a lado */
+    display: flex;
-    border-radius: 10px; /* Cantos arredondados */
+    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    overflow: hidden; /* Garante que o fundo azul não 'vaze' */
+    overflow: hidden;
-   /* width: 280px; /* Largura de exemplo */
     margin: 20px;
-    font-family: Arial, sans-serif; /* Fonte legível */
+    font-family: Arial, sans-serif;
+}
+
+@media (max-width: 768px) {
+  .card-consulta {
+    flex-direction: column;
+    margin: 10px;
+  }
+  
+  .horario-container {
+    border-right: none;
+    border-bottom: 1px solid #0056b3;
+    padding: 10px 15px;
+  }
+  
+  .horario {
+    font-size: 1.8em;
+  }
+  
+  .info-container {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 15px;
+  }
+  
+  .actions-container {
+    opacity: 1;
+    visibility: visible;
+    background: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border: none;
+    box-shadow: none;
+    margin-left: 0;
+    padding: 0;
+    justify-content: flex-start;
+    margin-top: 10px;
+  }
+  
+  .card-consulta:hover .actions-container {
+    transform: none;
+  }
+}
+
+@media (max-width: 576px) {
+  .horario {
+    font-size: 1.5em;
+  }
+  
+  .informacao {
+    font-size: 1em;
+  }
+  
+  .btn-edit-custom-style,
+  .btn-delete-custom-style {
+    padding: 6px 10px;
+    font-size: 0.8rem;
+  }
 }
 
 /* 1. Estilo para o Horário (Fundo Azul e Texto Branco/Grande) */

src/components/AgendarConsulta/FormNovaConsulta.jsx

@@ -6,98 +6,156 @@ import { GetAllDoctors } from "../utils/Functions-Endpoints/Doctor";
 import { useAuth } from "../utils/AuthProvider";
 import API_KEY from "../utils/apiKeys";
 
-
 const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => {
   const { getAuthorizationHeader } = useAuth();
 
   const [sessoes, setSessoes] = useState(1);
   const [tempoBaseConsulta] = useState(30);
-  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [horarioInicio, setHorarioInicio] = useState("");
+  const [horarioTermino, setHorarioTermino] = useState("");
+  const [horariosDisponiveis, sethorariosDisponiveis] = useState([]);
+  const [status, setStatus] = useState(agendamento?.status || "confirmed");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   const [todosProfissionais, setTodosProfissionais] = useState([]);
   const [profissionaisFiltrados, setProfissionaisFiltrados] = useState([]);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false); 
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [horarioInicio, setHorarioInicio] = useState('');
-  const [horarioTermino, setHorarioTermino] = useState('');
-  const [horariosDisponiveis, sethorariosDisponiveis] = useState([]);
 
-  const [todosPacientes, setTodosPacientes] = useState([])
+  const [todosPacientes, setTodosPacientes] = useState([]);
-  const [pacientesFiltrados, setPacientesFiltrados] = useState([])
+  const [pacientesFiltrados, setPacientesFiltrados] = useState([]);
-  const [isDropdownPacienteOpen, setIsDropdownPacienteOpen] = useState(false)
+  const [isDropdownPacienteOpen, setIsDropdownPacienteOpen] = useState(false);
 
-  const [status, setStatus] = useState("confirmed")
+  const authHeader = getAuthorizationHeader();
 
-  let authHeader = getAuthorizationHeader()
- 
   const FormatCPF = (valor) => {
-    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+    const digits = String(valor).replace(/\D/g, "").slice(0, 11);
     return digits
-      .replace(/(\d{3})(\d)/, '$1.$2')
+      .replace(/(\d{3})(\d)/, "$1.$2")
-      .replace(/(\d{3})(\d)/, '$1.$2')
+      .replace(/(\d{3})(\d)/, "$1.$2")
-      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+      .replace(/(\d{3})(\d{1,2})$/, "$1-$2");
   };
 
   const handleChange = (e) => {
     const { value, name } = e.target;
-    
+
-    if (name === 'email') {
+    if (name === "email") {
-      setAgendamento(prev => ({
+      setAgendamento((prev) => ({
-        ...prev, 
-        contato: { ...prev.contato, email: value }
-      }));
-    } else if (name === 'status') {
-      setAgendamento(prev => ({
         ...prev,
-        status: prev.status === 'requested' ? 'confirmed' : 'requested'
+        contato: {
+          ...(prev.contato || {}),
+          email: value,
+        },
       }));
-    } else if (name === 'paciente_cpf') {
+    } else if (name === "status") {
+      setAgendamento((prev) => ({
+        ...prev,
+        status: prev.status === "requested" ? "confirmed" : "requested",
+      }));
+      setStatus((prev) => (prev === "confirmed" ? "requested" : "confirmed"));
+    } else if (name === "paciente_cpf") {
       const cpfFormatted = FormatCPF(value);
       const fetchPatient = async () => {
         const patientData = await GetPatientByCPF(cpfFormatted, authHeader);
         if (patientData) {
-          setAgendamento(prev => ({
+          setAgendamento((prev) => ({
             ...prev,
             paciente_nome: patientData.full_name,
-            patient_id: patientData.id
+            patient_id: patientData.id,
           }));
         }
       };
-      setAgendamento(prev => ({ ...prev, paciente_cpf: cpfFormatted }));
+      setAgendamento((prev) => ({ ...prev, paciente_cpf: cpfFormatted }));
       fetchPatient();
-    } else if (name === 'convenio') {
+    } else if (name === "convenio") {
-      setAgendamento(prev => ({ ...prev, insurance_provider: value }));
+      setAgendamento((prev) => ({ ...prev, insurance_provider: value }));
     } else {
-      setAgendamento(prev => ({ ...prev, [name]: value }));
+      setAgendamento((prev) => ({ ...prev, [name]: value }));
     }
   };
 
   const ChamarMedicos = useCallback(async () => {
     const Medicos = await GetAllDoctors(authHeader);
-    setTodosProfissionais(Medicos);
+    setTodosProfissionais(Medicos || []);
   }, [authHeader]);
 
-  const ChamarPacientes = useCallback (async () => {
+  const ChamarPacientes = useCallback(async () => {
-	const Pacientes = await GetAllPatients(authHeader);
+    const Pacientes = await GetAllPatients(authHeader);
-	  setTodosPacientes(Pacientes)
+    setTodosPacientes(Pacientes || []);
-	console.log("pacientes")
+  }, [authHeader]);
-	console.log(Pacientes)
+
-  }, [authHeader])
+  // AUTOCOMPLETE PACIENTE
+  const handleSearchPaciente = (e) => {
+    const term = e.target.value;
+    setAgendamento((prev) => ({ ...prev, paciente_nome: term }));
+
+    if (term.trim() === "") {
+      setPacientesFiltrados([]);
+      setIsDropdownPacienteOpen(false);
+      return;
+    }
+
+    const filtered = todosPacientes.filter((p) =>
+      p.full_name.toLowerCase().includes(term.toLowerCase())
+    );
+
+    setPacientesFiltrados(filtered);
+    setIsDropdownPacienteOpen(filtered.length > 0);
+  };
+
+  const handleSelectPaciente = (paciente) => {
+    setAgendamento((prev) => ({
+      ...prev,
+      patient_id: paciente.id,
+      paciente_nome: paciente.full_name,
+      paciente_cpf: paciente.cpf,
+    }));
+    setPacientesFiltrados([]);
+    setIsDropdownPacienteOpen(false);
+  };
+
+  // AUTOCOMPLETE PROFISSIONAL
+  const handleSearchProfissional = (e) => {
+    const term = e.target.value;
+    handleChange(e);
+
+    if (term.trim() === "") {
+      setProfissionaisFiltrados([]);
+      setIsDropdownOpen(false);
+      return;
+    }
+
+    const filtered = todosProfissionais.filter((p) =>
+      p.full_name.toLowerCase().includes(term.toLowerCase())
+    );
+
+    setProfissionaisFiltrados(filtered);
+    setIsDropdownOpen(filtered.length > 0);
+  };
+
+  const handleSelectProfissional = (profissional) => {
+    setAgendamento((prev) => ({
+      ...prev,
+      doctor_id: profissional.id,
+      nome_medico: profissional.full_name,
+    }));
+    setProfissionaisFiltrados([]);
+    setIsDropdownOpen(false);
+  };
+
+  const formatarHora = (datetimeString) => {
+    return datetimeString?.substring(11, 16) || "";
+  };
 
   useEffect(() => {
-   
+    if (agendamento?.scheduled_at) {
-    console.log("Horario","tessssste"  )
+      setHorarioInicio(formatarHora(agendamento.scheduled_at));
-      if (agendamento?.scheduled_at) {
+    }
-    setHorarioInicio(formatarHora(agendamento.scheduled_at));
+  }, []);
-  }
-  }, [])
 
-  useEffect(() =>  {
+  useEffect(() => {
     ChamarMedicos();
-  }, [ChamarMedicos]);
+    ChamarPacientes();
-
+  }, [ChamarMedicos, ChamarPacientes]);
-  useEffect(() => {
-
-    ChamarPacientes()
-  }, [ChamarPacientes])
 
   useEffect(() => {
     if (!agendamento.dataAtendimento || !agendamento.doctor_id) return;
@@ -105,7 +163,7 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
     const myHeaders = new Headers();
     myHeaders.append("Content-Type", "application/json");
     myHeaders.append("apikey", API_KEY);
-    myHeaders.append("Authorization", `Bearer ${authHeader.split(' ')[1]}`);
+    myHeaders.append("Authorization", `Bearer ${authHeader.split(" ")[1]}`);
 
     const raw = JSON.stringify({
       doctor_id: agendamento.doctor_id,
@@ -114,321 +172,304 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
     });
 
     const requestOptions = {
-      method: 'POST',
+      method: "POST",
       headers: myHeaders,
       body: raw,
     };
 
-    fetch("https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/get-available-slots", requestOptions)
+    fetch(
-      .then(response => response.json())
+      "https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/get-available-slots",
-      .then(result => sethorariosDisponiveis(result))
+      requestOptions
-      .catch(error => console.log('error', error));
+    )
+      .then((response) => response.json())
+      .then((result) => {
+        sethorariosDisponiveis(result);
+      })
+      .catch((error) => console.log("error", error));
   }, [agendamento.dataAtendimento, agendamento.doctor_id, authHeader]);
 
-  const handleSearchProfissional = (e) => {
+  const slotsArray = Array.isArray(horariosDisponiveis)
-    const term = e.target.value;    
+    ? horariosDisponiveis
-    handleChange(e); 
+    : horariosDisponiveis?.slots || [];
-    
-    if (term.trim() === '') {
-      setProfissionaisFiltrados([]);
-      setIsDropdownOpen(false);
-      return;
-    }
 
-    const filtered = todosProfissionais.filter(p => 
+  const opcoesDeHorario = slotsArray.map((item) => ({
-      p.full_name.toLowerCase().includes(term.toLowerCase())
-    );
-    
-    setProfissionaisFiltrados(filtered);
-    setIsDropdownOpen(filtered.length > 0);
-  };
-
-   const handleSearchPaciente = (e) => {
-     const term = e.target.value;    
-    handleChange(e); 
-    
-    if (term.trim() === '') {
-      setPacientesFiltrados([]);
-      setIsDropdownPacienteOpen(false);
-      return;
-    }
-
-    const filtered = todosPacientes.filter(p => 
-      p.full_name.toLowerCase().includes(term.toLowerCase())
-    );
-    console.log(filtered.length > 0, "filtrados")
-    
-    setPacientesFiltrados(filtered);
-    setIsDropdownPacienteOpen(filtered.length > 0);
-   }
-
-  const handleSelectProfissional = (profissional) => {
-    setAgendamento(prev => ({
-      ...prev,
-      doctor_id: profissional.id,
-      nome_medico: profissional.full_name
-    }));
-    setProfissionaisFiltrados([]);
-    setIsDropdownOpen(false);
-  };
-
-  const handleSelectPaciente = (paciente) => {
-    setAgendamento(prev => ({
-      ...prev,
-      patient_id:paciente.id,
-      paciente_nome: paciente.full_name,
-      paciente_cpf: paciente.cpf    
-    }))
-    setProfissionaisFiltrados([])
-    setIsDropdownPacienteOpen(false)
-
-  }
-
-  const formatarHora = (datetimeString) => {
-    return datetimeString?.substring(11, 16) || '';
-  };
-
-  const opcoesDeHorario = horariosDisponiveis?.slots?.map(item => ({
     value: formatarHora(item.datetime),
     label: formatarHora(item.datetime),
-    disabled: !item.available
+    disabled: !item.available,
-  })) || [];
+  }));
 
-  const calcularHorarioTermino = useCallback((inicio, sessoes, tempoBase) => {
+  const calcularHorarioTermino = useCallback((inicio, sessoesParam, tempoBase) => {
-    if (!inicio || inicio.length !== 5 || !inicio.includes(':')) return '';
+    if (!inicio || inicio.length !== 5 || !inicio.includes(":")) return "";
 
-    const [horas, minutos] = inicio.split(':').map(Number);
+    const [horas, minutos] = inicio.split(":").map(Number);
-    const minutosInicio = (horas * 60) + minutos;
+    const minutosInicio = horas * 60 + minutos;
-    const duracaoTotalMinutos = sessoes * tempoBase;
+    const duracaoTotalMinutos = sessoesParam * tempoBase;
     const minutosTermino = minutosInicio + duracaoTotalMinutos;
 
     const horaTermino = Math.floor(minutosTermino / 60) % 24;
     const minutoTermino = minutosTermino % 60;
 
-    const formatar = (num) => String(num).padStart(2, '0');
+    const formatar = (num) => String(num).padStart(2, "0");
     return `${formatar(horaTermino)}:${formatar(minutoTermino)}`;
+
   }, []);
 
   useEffect(() => {
-    const novoTermino = calcularHorarioTermino(horarioInicio, sessoes, tempoBaseConsulta);
+   const novoTermino = calcularHorarioTermino(
+  horarioInicio,
+  sessoes,
+  tempoBaseConsulta
+);
+
     setHorarioTermino(novoTermino);
-    setAgendamento(prev => ({
+    setAgendamento((prev) => ({
       ...prev,
-      horarioTermino: novoTermino 
+      horarioTermino: novoTermino,
     }));
-  }, [horarioInicio, sessoes, tempoBaseConsulta, setAgendamento, calcularHorarioTermino]);
+  }, [horarioInicio, sessoes, tempoBaseConsulta, calcularHorarioTermino, setAgendamento]);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    setShowSuccessModal(true);
+    if (isSubmitting) return;
-  };
 
-  const handleCloseModal = () => {
+    if (
-    setShowSuccessModal(false);
+      !agendamento.doctor_id ||
-    onSave({ ...agendamento, horarioInicio: horarioInicio, status:status });
+      !agendamento.patient_id ||
+      !agendamento.dataAtendimento ||
+      !horarioInicio
+    ) {
+      alert(
+        "Por favor, preencha o profissional, paciente, data e horário de início."
+      );
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    const payload = {
+      ...agendamento,
+      horarioInicio,
+      status,
+      duration_minutes: sessoes * tempoBaseConsulta,
+    };
+
+    onSave?.(payload);
+    setIsSubmitting(false);
   };
 
   const handleCheckbox = () => {
-    if(status === "confirmed"){
+    if (status === "confirmed") {
-      setStatus("requested")
+      setStatus("requested");
-    }else{
+      setAgendamento((prev) => ({ ...prev, status: "requested" }));
-      setStatus("confirmed")
+    } else {
+      setStatus("confirmed");
+      setAgendamento((prev) => ({ ...prev, status: "confirmed" }));
     }
-  
+  };
-  }
 
-  return (<div className="form-container">
+  return (
-  {showSuccessModal && (
+    <div className="form-container">
-    <div className="modal-overlay">
+      <form className="form-agendamento" onSubmit={handleSubmit}>
-      <div className="modal-content">
+        <h2 className="section-title">Informações do paciente</h2>
-        <div className="modal-header">
-          <h5 className="modal-title">Sucesso</h5>
-        </div>
-        <div className="modal-body">
-          <p className="modal-message">Agendamento salvo com sucesso!</p>
-        </div>
-        <div className="modal-footer">
-          <button onClick={handleCloseModal} className="modal-confirm-btn">Fechar</button>
-        </div>
-      </div>
-    </div>
-  )}
 
-  <form className="form-agendamento" onSubmit={handleSubmit}>
+        <div
-    <h2 className="section-title">Informações do paciente</h2>
+          className="campos-informacoes-paciente"
+          id="informacoes-paciente-linha-um"
+        >
+          <div className="campo-de-input-container">
+            <div className="campo-de-input">
+              <label>Nome *</label>
+              <input
+                type="text"
+                name="paciente_nome"
+                value={agendamento.paciente_nome || ""}
+                placeholder="Insira o nome do paciente"
+                required
+                onChange={handleSearchPaciente}
+                autoComplete="off"
+              />
+            </div>
 
-    <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
+            <div className="campo-de-input">
-      <div className="campo-de-input-container">
+              <label>CPF do paciente</label>
-      <div className="campo-de-input">
+              <InputMask
-        <label>Nome *</label>
+                mask="999.999.999-99"
-        <input
+                maskChar={null}
-          type="text"
+                type="text"
-          name="paciente_nome"
+                name="paciente_cpf"
-          placeholder="Insira o nome do paciente"
+                placeholder="000.000.000-00"
-          required
+                value={agendamento.paciente_cpf || ""}
-          onChange={(e) => handleSearchPaciente(e)}
+                onChange={handleChange}
-          value={agendamento?.paciente_nome || ""}
+                autoComplete="off"
-          autoComplete="off"
+              />
-        />
+            </div>
-      </div>
+
-       {isDropdownPacienteOpen && pacientesFiltrados.length > 0 && (
+            {isDropdownPacienteOpen && pacientesFiltrados.length > 0 && (
-          <div className="dropdown-pacientes">
+              <div className="dropdown-pacientes">
-            {pacientesFiltrados.map((paciente) => (
+                {pacientesFiltrados.map((paciente) => (
-              <div
+                  <div
-                key={paciente.id}
+                    key={paciente.id}
-                className="dropdown-item"
+                    className="dropdown-item"
-                onClick={() => handleSelectPaciente(paciente)}
+                    onClick={() => handleSelectPaciente(paciente)}
-              >
+                  >
-                {`${paciente.full_name.split(" ")[0]} ${paciente.full_name.split(" ")[1]}  - ${paciente.cpf}`}
+                    {`${paciente.full_name} - ${paciente.cpf}`}
+                  </div>
+                ))}
               </div>
-            ))}
+            )}
           </div>
-        )}
         </div>
 
-      <div className="campo-de-input campo-cpf">
+        <div
-        <label>CPF do paciente</label> 
+          className="campos-informacoes-paciente"
-        <input
+          id="informacoes-paciente-linha-tres"
-          type="text"
+        >
-          name="paciente_cpf"
+          <div>
-          placeholder="000.000.000-00"
+            <label>Convênio</label>
-          onChange={handleChange}
-          value={agendamento.paciente_cpf}
-        />
-      </div>
-    </div>
-
-    <div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
-      <div>
-        <label>Convênio</label>
-        <select name="convenio" onChange={handleChange} value={agendamento.insurance_provider}>
-          <option value="publico">Público</option>
-          <option value="unimed">Unimed</option>
-          <option value="bradesco_saude">Bradesco Saúde</option>
-          <option value="hapvida">Hapvida</option>
-        </select>
-      </div>
-    </div>
-
-    <h2 className="section-title">Informações do atendimento</h2>
-
-    <div className="campo-informacoes-atendimento">
-      <div className="campo-de-input-container">
-        <div className="campo-de-input">
-          <label>Nome do profissional *</label>
-          <input
-            type="text"
-            name="nome_medico"
-            onChange={handleSearchProfissional}
-            value={agendamento?.nome_medico || ''}
-            autoComplete="off"
-            required
-          />
-        </div>
-
-        {isDropdownOpen && profissionaisFiltrados.length > 0 && (
-          <div className="dropdown-profissionais">
-            {profissionaisFiltrados.map((profissional) => (
-              <div
-                key={profissional.id}
-                className="dropdown-item"
-                onClick={() => handleSelectProfissional(profissional)}
-              >
-                {profissional.full_name}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className="tipo_atendimento">
-        <label>Tipo de atendimento *</label>
-        <select name="tipo_atendimento" onChange={handleChange} value={agendamento.tipo_atendimento}>
-          <option value="presencial">Presencial</option>
-          <option value="teleconsulta">Teleconsulta</option>
-        </select>
-      </div>
-    </div>
-
-    <section id="informacoes-atendimento-segunda-linha">
-      <div className="campo-informacoes-atendimento">
-        <div className="campo-de-input">
-          <label>Data *</label>
-          <input
-            type="date"
-            name="dataAtendimento"
-            onChange={handleChange}
-            value={agendamento.dataAtendimento}
-            required
-          />
-        </div>
-
-        <div className="linha">
-          <div className="campo-de-input">
-            <label htmlFor="inicio">Início *</label>
             <select
-              id="inicio"
+              name="convenio"
-              name="inicio"
+              onChange={handleChange}
-              required
+              value={agendamento.insurance_provider || "publico"}
-              value={horarioInicio}
-              onChange={(e) => setHorarioInicio(e.target.value)}
             >
-              <option value="" disabled>Selecione a hora de início</option>
+              <option value="publico">Público</option>
-              {opcoesDeHorario.map((opcao, index) => (
+              <option value="unimed">Unimed</option>
-                <option key={index} value={opcao.value} disabled={opcao.disabled}>
+              <option value="bradesco_saude">Bradesco Saúde</option>
-                  {opcao.label}
+              <option value="hapvida">Hapvida</option>
-                  {opcao.disabled && " (Indisponível)"}
-                </option>
-              ))}
             </select>
           </div>
+        </div>
 
-          <div className="campo-de-input">
+        <h2 className="section-title">Informações do atendimento</h2>
-            <label htmlFor="termino">Término *</label>
+
-            <input
+        <div className="campo-informacoes-atendimento">
-              type="text"
+          <div className="campo-de-input-container">
-              id="termino"
+            <div className="campo-de-input">
-              name="termino"
+              <label>Nome do profissional *</label>
-              value={horarioTermino || '— —'}
+              <input
-              readOnly
+                type="text"
-              className="horario-termino-readonly"
+                name="nome_medico"
-            />
+                onChange={handleSearchProfissional}
+                value={agendamento?.nome_medico || ""}
+                autoComplete="off"
+                required
+              />
+            </div>
+
+            {isDropdownOpen && profissionaisFiltrados.length > 0 && (
+              <div className="dropdown-profissionais">
+                {profissionaisFiltrados.map((profissional) => (
+                  <div
+                    key={profissional.id}
+                    className="dropdown-item"
+                    onClick={() => handleSelectProfissional(profissional)}
+                  >
+                    {profissional.full_name}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="tipo_atendimento">
+            <label>Tipo de atendimento *</label>
+            <select
+              name="tipo_atendimento"
+              onChange={handleChange}
+              value={agendamento.tipo_atendimento || "presencial"}
+            >
+              <option value="presencial">Presencial</option>
+              <option value="teleconsulta">Teleconsulta</option>
+            </select>
           </div>
         </div>
-      </div>
 
-      <div className="campo-de-input observacoes">
+        <section id="informacoes-atendimento-segunda-linha">
-        <label>Observações</label>
+          <section id="informacoes-atendimento-segunda-linha-esquerda">
-        <textarea
+            <div className="campo-informacoes-atendimento">
-          name="observacoes"
+              <div className="campo-de-input">
-          rows="4"
+                <label>Data *</label>
-          cols="1"
+                <input
-          onChange={handleChange}
+                  type="date"
-          value={agendamento.observacoes || ''}
+                  name="dataAtendimento"
-        />
+                  onChange={handleChange}
-      </div>
+                  value={agendamento.dataAtendimento || ""}
-    </section>
+                  required
+                />
+              </div>
 
-    <div className="campo-de-input-check">
+              <div className="linha">
-      <input
+                <div className="campo-de-input">
-        className="form-check-input form-custom-check"
+                  <label htmlFor="inicio">Início *</label>
-        type="checkbox"
+                  <select
-        name="status"
+                    id="inicio"
-        onChange={handleCheckbox}
+                    name="inicio"
-        checked={status === "requested"}
+                    value={horarioInicio}
-      />
+                    onChange={(e) => setHorarioInicio(e.target.value)}
-      <label className="form-check-label checkbox-label" htmlFor="status">
+                    required
-        Adicionar à fila de espera
+                  >
-      </label>
+                    <option value="" disabled>
+                      Selecione a hora de início
+                    </option>
+                    {opcoesDeHorario.map((opcao, index) => (
+                      <option
+                        key={index}
+                        value={opcao.value}
+                        disabled={opcao.disabled}
+                      >
+                        {opcao.label}
+                        {opcao.disabled && " (Indisponível)"}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="campo-de-input">
+                  <label htmlFor="termino">Término *</label>
+                  <input
+                    type="text"
+                    id="termino"
+                    name="termino"
+                    value={horarioTermino || "— —"}
+                    readOnly
+                    className="horario-termino-readonly"
+                  />
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section className="informacoes-atendimento-segunda-linha-direita">
+            <div className="campo-de-input">
+              <label>Observações</label>
+              <textarea
+                name="observacoes"
+                rows="4"
+                cols="1"
+                onChange={handleChange}
+                value={agendamento.observacoes || ""}
+              ></textarea>
+            </div>
+          </section>
+        </section>
+
+        <div className="form-actions">
+          <button
+            type="submit"
+            className="btn-primary"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? "Salvando..." : "Salvar agendamento"}
+          </button>
+          <button
+            type="button"
+            className="btn-cancel"
+            onClick={onCancel}
+          >
+            Cancelar
+          </button>
+        </div>
+      </form>
     </div>
-
-    <div className="form-actions">
-      <button type="submit" className="btn-primary">Salvar agendamento</button>
-      <button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
-    </div>
-  </form>
-</div>
-
   );
 };
 

src/components/AgendarConsulta/style/card-consulta.css

@@ -1,3 +1,10 @@
+@media (max-width: 768px) {
+  .container-cardconsulta {
+    padding-right: 80px; /* Espaço para os botões */
+    position: relative;
+  }
+}
+
 .actions-container {
   display: flex;
   gap: 8px;
@@ -84,4 +91,50 @@
 .tabelamensal .container-cardconsulta{
   width: 24rem;
 
+}
+
+@media (max-width: 768px) {
+  .actions-container {
+    opacity: 1;
+    visibility: visible;
+    background: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border: none;
+    box-shadow: none;
+    margin-left: 0;
+    padding: 0;
+    justify-content: flex-end;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  .container-cardconsulta:hover .actions-container {
+    transform: none;
+  }
+
+  .tabelamensal .container-cardconsulta {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 576px) {
+  .container-cardconsulta {
+    padding-right: 10px; /* Remove o padding extra para telas muito pequenas */
+  }
+
+  .actions-container {
+    position: static;
+    margin-top: 10px;
+    justify-content: flex-start;
+  }
+  
+  .btn-edit-custom-style,
+  .btn-delete-custom-style,
+  .btn-confirm-style {
+    padding: 6px 10px;
+    font-size: 0.8rem;
+  }
 }

src/components/AgendarConsulta/style/formagendamentos.css

@@ -183,6 +183,67 @@ textarea{
   gap: 16px;
 }
 
+@media (max-width: 768px) {
+  .campos-informacoes-paciente,
+  .campo-informacoes-atendimento {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  #informacoes-atendimento-segunda-linha {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  #informacoes-atendimento-segunda-linha-esquerda select[name="unidade"],
+  input[type="time"],
+  select[name=solicitante],
+  .campo-de-input {
+    width: 100% !important;
+    max-width: 100%;
+  }
+  
+  .tipo_atendimento {
+    margin-left: 0;
+  }
+  
+  .linha {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  
+  .sessao-contador {
+    width: 100px;
+  }
+}
+
+@media (max-width: 576px) {
+  .form-container {
+    padding: 15px;
+  }
+  
+  .form-title {
+    font-size: 22px;
+  }
+  
+  .form-agendamento input,
+  .form-agendamento select,
+  .form-agendamento textarea {
+    font-size: 13px;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .btn-primary,
+  .btn-cancel {
+    width: 100%;
+  }
+}
+
 .campo-de-input {
   flex: 1;
   display: flex;
@@ -689,4 +750,94 @@ input[name="paciente_cpf"]{
     z-index: 100;
     max-height: 200px;
     overflow-y: auto;
-}
+}
+#informacoes-atendimento-segunda-linha .linha-horarios {
+  display: flex;
+  gap: 16px;
+  align-items: flex-end; /* alinha pela base dos inputs */
+}
+
+#informacoes-atendimento-segunda-linha .linha-horarios .campo-de-input {
+  flex: 1;
+}
+.campo-de-input-container {
+  display: flex;
+  gap: 16px;          /* nome e cpf na mesma linha */
+  flex-wrap: wrap;
+}
+
+.campo-de-input {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+}
+
+.campo-de-input label {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.campo-de-input input,
+.campo-de-input select,
+.campo-de-input textarea {
+  width: 220px;              /* ajuste pro layout que você quer */
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  font-size: 14px;
+}
+
+/* placeholder visível e suave */
+.campo-de-input input::placeholder {
+  color: #999;
+  opacity: 1;                /* garante no Firefox */
+}
+/* bloco da coluna esquerda (Data, Início, Término) */
+#informacoes-atendimento-segunda-linha-esquerda {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* linha com Início e Término */
+#informacoes-atendimento-segunda-linha-esquerda .linha {
+  display: flex;
+  gap: 16px;
+  align-items: flex-end;
+}
+
+/* mesma largura pros três campos */
+#informacoes-atendimento-segunda-linha-esquerda .campo-de-input input,
+#informacoes-atendimento-segunda-linha-esquerda .campo-de-input select {
+  width: 230px;
+  box-sizing: border-box;
+}
+.informacoes-atendimento-segunda-linha-direita {
+  width: 100%;
+}
+
+.informacoes-atendimento-segunda-linha-direita .campo-de-input textarea {
+  width: 100%;        /* ocupa toda a coluna da direita */
+  min-height: 150px;  /* aumenta a altura (muda pra 200, 250 se quiser maior) */
+  resize: vertical;
+  box-sizing: border-box;
+}
+#informacoes-atendimento-segunda-linha {
+  display: grid;
+  grid-template-columns: auto 1.8fr; /* coluna da direita grande, mas não infinita */
+  gap: 24px;
+}
+
+/* garante que o container da direita não estoure */
+.informacoes-atendimento-segunda-linha-direita {
+  max-width: 800px;    /* ajusta se quiser menor/maior */
+  width: 100%;
+}
+
+.informacoes-atendimento-segunda-linha-direita .campo-de-input textarea {
+  width: 100%;
+  min-height: 150px;
+  resize: vertical;
+  box-sizing: border-box;
+}

src/components/FormRelatorio.jsx

@@ -1,55 +1,97 @@
-import React from 'react'
+import React, { useState } from 'react'
 import '../PagesMedico/styleMedico/FormNovoRelatorio.css'
-import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuth } from '../components/utils/AuthProvider'
 import { GetPatientByCPF } from '../components/utils/Functions-Endpoints/Patient'
 import { FormatCPF } from '../components/utils/Formatar/Format'
 import html2pdf from 'html2pdf.js'
 
-const FormRelatorio = ({onSave, DictInfo, setDictInfo }) => {
+const FormRelatorio = ({ onSave, DictInfo, setDictInfo }) => {
-    const {getAuthorizationHeader} = useAuth()
+    const { getAuthorizationHeader } = useAuth()
     let authHeader = getAuthorizationHeader()
-  const navigate= useNavigate()
+    const navigate = useNavigate()
-    
+
     const [showModal, setShowModal] = useState(false)
+    
+    // --- NOVO: Estado para controlar o loading da transcrição ---
+    const [isTranscribing, setIsTranscribing] = useState(false);
+
+    // --- NOVA FUNÇÃO: Envia o áudio e preenche o formulário ---
+    const handleAudioUpload = async (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        setIsTranscribing(true); // Ativa o spinner
+
+        const formData = new FormData();
+        formData.append('audio', file); // 'audio' deve ser o nome esperado no backend
+
+        try {
+            // ⚠️ ATENÇÃO: Substitua essa URL pela rota do seu backend que criamos
+            const response = await fetch('http://localhost:3001/api/transcrever-relatorio', {
+                method: 'POST',
+                body: formData,
+                // headers: { 'Authorization': authHeader } // Descomente se seu backend precisar de token
+            });
+
+            if (!response.ok) throw new Error("Falha na transcrição");
+
+            const data = await response.json();
+
+            // Atualiza o DictInfo com os dados vindos da IA
+            setDictInfo((prev) => ({
+                ...prev,
+                exam: data.exam || prev.exam,              // Preenche se a IA achou, senão mantém o antigo
+                diagnostico: data.diagnostico || prev.diagnostico,
+                conclusao: data.conclusao || prev.conclusao
+            }));
+
+        } catch (error) {
+            console.error("Erro no upload de áudio:", error);
+            alert("Não foi possível gerar o relatório por áudio. Verifique o backend.");
+        } finally {
+            setIsTranscribing(false); // Desativa o spinner
+            e.target.value = null; // Limpa o input para permitir enviar o mesmo arquivo novamente se quiser
+        }
+    };
+    // -----------------------------------------------------------
 
     const BaixarPDFdoRelatorio = () => {
         const elemento = document.getElementById("folhaA4"); // tua div do relatório
-    const opt = {
+        const opt = {
-    margin: 0,
+            margin: 0,
-    filename: `relatorio_${DictInfo?.paciente_nome || "paciente"}.pdf`,
+            filename: `relatorio_${DictInfo?.paciente_nome || "paciente"}.pdf`,
-    html2canvas: { scale: 2 },
+            html2canvas: { scale: 2 },
-    jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
+            jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
-  };
+        };
 
-  html2pdf().set(opt).from(elemento).save();
+        html2pdf().set(opt).from(elemento).save();
     }
 
     const handleChange = (e) => {
         const { name, value } = e.target;
         console.log(name, value)
-        if(name === 'paciente_cpf') {
+        if (name === 'paciente_cpf') {
-          const formattedCPF = FormatCPF(value);
+            const formattedCPF = FormatCPF(value);
-          setDictInfo((prev) => ({ ...prev, [name]: formattedCPF }));
+            setDictInfo((prev) => ({ ...prev, [name]: formattedCPF }));
 
-          const fetchPatient = async () => {
+            const fetchPatient = async () => {
-            const patientData = await GetPatientByCPF(formattedCPF, authHeader);
+                const patientData = await GetPatientByCPF(formattedCPF, authHeader);
-            if (patientData) {
+                if (patientData) {
-              setDictInfo((prev) => ({
+                    setDictInfo((prev) => ({
-                ...prev,
+                        ...prev,
-                paciente_cpf:value,
+                        paciente_cpf: value,
-                paciente_nome: patientData.full_name,
+                        paciente_nome: patientData.full_name,
-                paciente_id: patientData.id
+                        paciente_id: patientData.id
-              }));
+                    }));
+                }
+
+            };
+            if (formattedCPF.length === 14) {
+                fetchPatient();
             }
-           
+        } else {
-          };
+            setDictInfo((prev) => ({ ...prev, [name]: value }));
-          if(formattedCPF.length === 14){
-          fetchPatient();
-          }
-        }else{
-          setDictInfo((prev) => ({ ...prev, [name]: value }));
         }
     }
 
@@ -57,145 +99,164 @@ const FormRelatorio = ({onSave, DictInfo, setDictInfo }) => {
         e.preventDefault();
         console.log(DictInfo)
         setShowModal(true)
-       
-
-onSave({
-   "patient_id": DictInfo.paciente_id,
-   
-   "exam": DictInfo.exam,
-   "diagnosis": DictInfo.diagnosis,
-   "conclusion": DictInfo.conclusao,
-   "status": "draft",
-   "requested_by": DictInfo.requested_by,
-   
-   "hide_date": false,
-   "hide_signature": false,
-});
 
+        onSave({
+            "patient_id": DictInfo.paciente_id,
+            "exam": DictInfo.exam,
+            "diagnosis": DictInfo.diagnostico, // Garanta que o backend espera 'diagnosis' mas seu state usa 'diagnostico'
+            "conclusion": DictInfo.conclusao,
+            "status": "draft",
+            "requested_by": DictInfo.requested_by,
+            "hide_date": false,
+            "hide_signature": false,
+        });
     }
 
-  return (
+    return (
-    <div>
+        <div>
-       {showModal &&(
+            {showModal && (
-          <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
+                <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
-            <div className="modal-dialog">
+                    <div className="modal-dialog">
-              <div className="modal-content">
+                        <div className="modal-content">
-                <div className="modal-header bg-success text-white">
+                            <div className="modal-header bg-success text-white">
-                  <h5 className="modal-title ">Relatório criado com sucesso</h5>
+                                <h5 className="modal-title ">Relatório criado com sucesso</h5>
-                  <button 
+                                <button
-                    type="button" 
+                                    type="button"
-                    className="btn-close" 
+                                    className="btn-close"
-                    onClick={() => setShowModal(false)}
+                                    onClick={() => setShowModal(false)}
-                  ></button>
+                                ></button>
+                            </div>
+                            <div className="modal-body">
+                                <p>Você também pode baixa-lo agora em pdf</p>
+                            </div>
+                            <div className="modal-footer">
+                                <button className="btn btn-primary" onClick={BaixarPDFdoRelatorio}><i className='bi bi-file-pdf-fill'></i> baixar em pdf</button>
+
+                                <button
+                                    type="button"
+                                    className="btn btn-primary"
+                                    onClick={() => { setShowModal(false); navigate(('/medico/relatorios')) }}
+                                >
+                                    Fechar
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div className="modal-body">
+            )}
-                  <p>Você também pode baixa-lo agora em pdf</p>
-                </div>
-                <div className="modal-footer">
-                  <button className="btn btn-primary" onClick={ BaixarPDFdoRelatorio}><i className='bi bi-file-pdf-fill'></i> baixar em pdf</button>
 
-                  <button 
-                    type="button" 
-                    className="btn btn-primary" 
-                    onClick={() => {setShowModal(false); navigate(('/medico/relatorios'))}}
-                  >
-                    Fechar
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-        
 
-    <div className='card'>
+            <div className='card'>
-
-        <form action="" onSubmit={handleSubmit}>
-            <div id='primeiraLinha'>
-
-                <div className="col-md-2 mb-3">
-                    <label >Nome do paciente:</label>
-                    <input type="text" step="0.1" className="form-control" name="paciente_nome" onChange={handleChange} value={DictInfo.paciente_nome || ''}  required />
-                </div>
-
-            <div className="col-md-2 mb-3">
-                <label >CPF do paciente:</label>
-                <input type="text" step="0.1" className="form-control" name="paciente_cpf" onChange={handleChange} value={DictInfo.paciente_cpf || ''}  required />
-                </div>
-          
-            
-            <div className="col-md-2 mb-3">
-                <label >Nome do médico:</label>
-                <input type="text" step="0.1" className="form-control" name="requested_by" onChange={handleChange} value={DictInfo.requested_by || ''}   required />
-            </div>
-            
-            <div className="col-md-2 mb-3">
-              <label >Exame:</label>
-              <input type="text" className="form-control" name="exam" onChange={handleChange}   />
-            </div>
-
-            
-            <div className="col-md-2 mb-3">
-              <label >Data do exame:</label>
-              <input type="date" className="form-control" name="data_exame" onChange={handleChange} value={DictInfo.data_exame || ''}   />
-            </div>
-           
-        </div>
-
-        <div className='row'>
-            <div className="col-md-2 mb-3">
-              <label htmlFor='diagnostico'>Diagnostico:</label>
-              <textarea name="diagnostico" id="diagnostico" onChange={handleChange} cols="30" rows="5" value={DictInfo.diagnostico || ''}></textarea>
-            </div>
-
-            <div className="col-md-2 mb-3">
-              <label htmlFor='conclusao'>Conclusão:</label>
-             <textarea name="conclusao" id="conclusao" onChange={handleChange} cols="30" rows="5" value={DictInfo.conclusao || ''}></textarea>
-             </div>
-        </div>
-
-         <button
-            className="btn btn-success  submitButton"
-            type='submit'
-          >
-            Salvar
-          </button>
                 
-    </form>    
+                {/* --- ÁREA DE UPLOAD DE ÁUDIO (INSERIDA AQUI) --- */}
-    </div>
+                <div className="p-3 mb-3 border-bottom bg-light">
+                    <label className="form-label fw-bold">🎙️ Preenchimento Automático via Áudio</label>
+                    <div className="d-flex align-items-center gap-3">
+                        {isTranscribing ? (
+                            <div className="d-flex align-items-center text-primary">
+                                <div className="spinner-border spinner-border-sm me-2" role="status"></div>
+                                <span>A IA está gerando o relatório... aguarde.</span>
+                            </div>
+                        ) : (
+                            <input 
+                                type="file" 
+                                className="form-control" 
+                                accept="audio/*" 
+                                onChange={handleAudioUpload} 
+                            />
+                        )}
+                    </div>
+                    <small className="text-muted">Envie um áudio ditando o exame, diagnóstico e conclusão.</small>
+                </div>
+                {/* ----------------------------------------------- */}
 
-    <h3>Modelo do relatório</h3>
+                <form action="" onSubmit={handleSubmit}>
-  <div id="folhaA4">
+                    <div id='primeiraLinha'>
 
-    <div id='header-relatorio'>
+                        <div className="col-md-2 mb-3">
-        <p>Clinica Rise up</p>
+                            <label >Nome do paciente:</label>
-        <p>Dr {DictInfo.requested_by} - CRM/SP 123456</p>
+                            <input type="text" step="0.1" className="form-control" name="paciente_nome" onChange={handleChange} value={DictInfo.paciente_nome || ''} required />
-        <p>Avenida - (79) 9 4444-4444</p>
+                        </div>
-    </div>
 
-    <div id='infoPaciente'>
+                        <div className="col-md-2 mb-3">
-        <p>Paciente: {DictInfo?.paciente_nome}</p>
+                            <label >CPF do paciente:</label>
-        <p>Data de nascimento: </p>
+                            <input type="text" step="0.1" className="form-control" name="paciente_cpf" onChange={handleChange} value={DictInfo.paciente_cpf || ''} required />
+                        </div>
 
-        <p>Data do exame: {DictInfo.data_exam}</p>
 
-        <p>Exame: {DictInfo.exam}</p>
+                        <div className="col-md-2 mb-3">
+                            <label >Nome do médico:</label>
+                            <input type="text" step="0.1" className="form-control" name="requested_by" onChange={handleChange} value={DictInfo.requested_by || ''} required />
+                        </div>
 
-        <p>Diagnostico: {DictInfo.diagnostico}</p>
+                        <div className="col-md-2 mb-3">
+                            <label >Exame:</label>
+                            <input type="text" className="form-control" name="exam" onChange={handleChange} value={DictInfo.exam || ''} />
+                        </div>
 
-        <p>Conclusão: {DictInfo.conclusao}</p>
-     
-    </div>
 
-    <div>
+                        <div className="col-md-2 mb-3">
-        <p>Dr {DictInfo.requested_by}</p>
+                            <label >Data do exame:</label>
-        <p>Emitido em: 0</p>
+                            <input type="date" className="form-control" name="data_exame" onChange={handleChange} value={DictInfo.data_exame || ''} />
-    </div>
+                        </div>
 
-  </div>
+                    </div>
-  
+
-  </div>
+                    <div className='row'>
-  )
+                        <div className="col-md-2 mb-3">
+                            <label htmlFor='diagnostico'>Diagnostico:</label>
+                            <textarea name="diagnostico" id="diagnostico" onChange={handleChange} cols="30" rows="5" value={DictInfo.diagnostico || ''}></textarea>
+                        </div>
+
+                        <div className="col-md-2 mb-3">
+                            <label htmlFor='conclusao'>Conclusão:</label>
+                            <textarea name="conclusao" id="conclusao" onChange={handleChange} cols="30" rows="5" value={DictInfo.conclusao || ''}></textarea>
+                        </div>
+                    </div>
+
+                    <button
+                        className="btn btn-success  submitButton"
+                        type='submit'
+                    >
+                        Salvar
+                    </button>
+
+                </form>
+            </div>
+
+            <h3>Modelo do relatório</h3>
+            <div id="folhaA4">
+
+                <div id='header-relatorio'>
+                    <p>Clinica Rise up</p>
+                    <p>Dr {DictInfo.requested_by} - CRM/SP 123456</p>
+                    <p>Avenida - (79) 9 4444-4444</p>
+                </div>
+
+                <div id='infoPaciente'>
+                    <p>Paciente: {DictInfo?.paciente_nome}</p>
+                    <p>Data de nascimento: </p>
+
+                    {/* Corrigi de data_exam para data_exame para bater com o state */}
+                    <p>Data do exame: {DictInfo.data_exame}</p> 
+
+                    <p>Exame: {DictInfo.exam}</p>
+
+                    <p>Diagnostico: {DictInfo.diagnostico}</p>
+
+                    <p>Conclusão: {DictInfo.conclusao}</p>
+
+                </div>
+
+                <div>
+                    <p>Dr {DictInfo.requested_by}</p>
+                    <p>Emitido em: {new Date().toLocaleDateString()}</p>
+                </div>
+
+            </div>
+
+        </div>
+    )
 }
 
 export default FormRelatorio

src/components/Header/Header.css

@@ -223,6 +223,8 @@
     z-index: 2001;
     margin-top: 80px;
     margin-right: 20px;
+    /* Adicionado para responsividade */
+    max-width: 90vw;
 }
 
 .suporte-card {
@@ -309,6 +311,8 @@
     z-index: 3001;
     margin-top: 80px;
     margin-right: 20px;
+    /* Adicionado para responsividade */
+    max-width: 90vw;
 }
 
 .chat-online {
@@ -461,116 +465,82 @@
     background-color: #0056b3;
 }
 
-/* Avatar Modal */
-.avatar-modal-content {
-    max-width: 500px;
-}
-
-.avatar-preview-container {
-    text-align: center;
-    margin: 20px 0;
-}
-
-.avatar-preview-wrapper {
-    width: 150px;
-    height: 150px;
-    margin: 0 auto 20px;
-    border-radius: 50%;
-    overflow: hidden;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.avatar-preview-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.avatar-preview-placeholder {
-    font-size: 4rem;
-    color: white;
-}
-
-.avatar-error-message {
-    color: #dc3545;
-    margin-bottom: 10px;
-    font-size: 0.9rem;
-}
-
-.avatar-file-input {
-    display: none;
-}
-
-.avatar-actions {
-    display: flex;
-    gap: 10px;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.avatar-upload-button {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 8px;
-    background: #007bff;
-    color: white;
-    cursor: pointer;
-    font-size: 0.9rem;
-    transition: background-color 0.2s;
-}
-
-.avatar-upload-button:hover {
-    background: #0056b3;
-}
-
-.avatar-upload-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-.avatar-remove-button {
-    padding: 10px 20px;
-    border: 1px solid #dc3545;
-    border-radius: 8px;
-    background: transparent;
-    color: #dc3545;
-    cursor: pointer;
-    font-size: 0.9rem;
-    transition: all 0.2s;
-}
-
-.avatar-remove-button:hover {
-    background: #dc3545;
-    color: white;
-}
-
-.avatar-remove-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-.avatar-info-text {
-    margin-top: 15px;
-    font-size: 0.85rem;
-    color: #666;
-}
-
-.avatar-actions-spacing {
-    margin-top: 20px;
-}
-
-.avatar-close-button {
-    background: #6c757d;
-}
-
-.avatar-close-button:hover {
-    background: #5a6268;
-}
-
 /* Responsividade */
+@media (max-width: 768px) {
+    .header-container {
+        padding: 10px 15px;
+    }
+    
+    .right-corner-elements {
+        gap: 15px;
+    }
+    
+    .profile-picture-container {
+        width: 40px;
+        height: 40px;
+    }
+    
+    .suporte-card-container,
+    .chat-container {
+        margin-top: 60px;
+        margin-right: 10px;
+        margin-left: 10px;
+    }
+    
+    .suporte-card,
+    .chat-online {
+        width: calc(100vw - 20px);
+        max-width: none;
+    }
+}
+
+@media (max-width: 576px) {
+    .header-container {
+        padding: 8px 10px;
+    }
+
+    .right-corner-elements {
+        gap: 10px;
+    }
+
+    .profile-picture-container {
+        width: 35px;
+        height: 35px;
+    }
+
+    .phone-icon-container {
+        font-size: 20px;
+    }
+
+    .suporte-card-container,
+    .chat-container {
+        margin-top: 50px;
+        margin-right: 5px;
+        margin-left: 5px;
+    }
+
+    .suporte-card {
+        padding: 1rem;
+    }
+
+    .chat-online {
+        width: calc(100vw - 10px);
+        height: 80vh; /* Limita a altura para telas pequenas */
+    }
+
+    .chat-input {
+        padding: 0.75rem;
+    }
+
+    .chat-campo {
+        padding: 0.5rem;
+    }
+
+    .chat-enviar {
+        padding: 0.5rem 1rem;
+    }
+}
+
 @media (max-width: 768px) {
     .header-container {
         padding: 10px 15px;
@@ -596,13 +566,41 @@
         width: calc(100vw - 20px);
         max-width: none;
     }
-    
+}
-    .avatar-modal-content {
+
-        max-width: 90%;
+.header-container {
-    }
+  pointer-events: none; 
-    
+}
-    .avatar-preview-wrapper {
+
-        width: 120px;
+
-        height: 120px;
+.phone-icon-container,
-    }
+.profile-section {
-}
+  pointer-events: auto;
+}
+
+
+.header-container { pointer-events: auto; }
+.phone-icon-container, .profile-section { pointer-events: auto; }
+
+
+.logout-modal-overlay, .suporte-card-overlay, .chat-overlay {
+  z-index: 110000 !important;
+  pointer-events: auto !important;
+}
+
+
+.logout-cancel-button {
+  padding: 10px 18px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  background: white;
+  cursor: pointer;
+}
+.logout-confirm-button {
+  padding: 10px 18px;
+  border-radius: 8px;
+  border: none;
+  background: #dc3545;
+  color: #fff;
+  cursor: pointer;
+}

src/components/Header/Header.jsx

@@ -1,11 +1,11 @@
+// src/components/Header/Header.jsx
 import React, { useState, useRef, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { createPortal } from 'react-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import './Header.css';
-import API_KEY from '../utils/apiKeys';
-
-const SUPABASE_URL = 'https://yuanqfswhberkoevtmfr.supabase.co';
 
 const Header = () => {
+  // --- hooks (sempre na mesma ordem) ---
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isSuporteCardOpen, setIsSuporteCardOpen] = useState(false);
   const [isChatOpen, setIsChatOpen] = useState(false);
@@ -13,142 +13,70 @@ const Header = () => {
   const [mensagens, setMensagens] = useState([]);
   const [showLogoutModal, setShowLogoutModal] = useState(false);
   const [avatarUrl, setAvatarUrl] = useState(null);
-  const [showAvatarModal, setShowAvatarModal] = useState(false);
+
-  const [isUploading, setIsUploading] = useState(false);
-  const [avatarError, setAvatarError] = useState(null);
   const navigate = useNavigate();
+  const location = useLocation();
+
   const chatInputRef = useRef(null);
   const mensagensContainerRef = useRef(null);
-  const fileInputRef = useRef(null);
-
-  const loadAvatarFromSupabase = async (userId) => {
-    const extensions = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
-    
-    for (const ext of extensions) {
-      try {
-        const avatarUrl = `${SUPABASE_URL}/storage/v1/object/public/avatars/${userId}/avatar.${ext}`;
-        
-        const response = await fetch(avatarUrl, {
-          method: 'GET',
-          mode: 'cors'
-        });
-        
-        if (response.ok) {
-          const blob = await response.blob();
-          const imageUrl = URL.createObjectURL(blob);
-          return imageUrl;
-        }
-      } catch (err) {
-        continue;
-      }
-    }
-    
-    return null;
-  };
-
-  useEffect(() => {
-    const loadAvatar = async () => {
-      let userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
-      
-      if (!userId) {
-        try {
-          const userData = localStorage.getItem('user') || localStorage.getItem('userData');
-          if (userData) {
-            const parsed = JSON.parse(userData);
-            userId = parsed.id || parsed.user_id || parsed.sub || parsed.userId;
-            
-            if (userId) {
-              localStorage.setItem('userId', userId);
-            }
-          }
-        } catch (e) {
-          console.error('Erro ao parsear dados do usuário:', e);
-        }
-      }
-      
-      if (!userId) {
-        try {
-          const token = localStorage.getItem('token') || 
-                        localStorage.getItem('authToken') || 
-                        localStorage.getItem('access_token');
-          
-          if (token) {
-            const myHeaders = new Headers();
-            myHeaders.append('apikey', API_KEY);
-            myHeaders.append('Authorization', token.startsWith('Bearer') ? token : `Bearer ${token}`);
-            
-            const response = await fetch(
-              'https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/user-info',
-              { method: 'GET', headers: myHeaders }
-            );
-            
-            if (response.ok) {
-              const userInfo = await response.json();
-              userId = userInfo.id || userInfo.user_id || userInfo.sub || userInfo.user?.id;
-              
-              if (userId) {
-                localStorage.setItem('userId', userId);
-              }
-            }
-          }
-        } catch (e) {
-          console.error('Erro ao buscar userId da API:', e);
-        }
-      }
-      
-      if (!userId) {
-        const localAvatar = localStorage.getItem('user_avatar');
-        if (localAvatar) {
-          setAvatarUrl(localAvatar);
-        }
-        return;
-      }
-
-      const localAvatar = localStorage.getItem('user_avatar');
-      if (localAvatar) {
-        setAvatarUrl(localAvatar);
-      }
-
-      try {
-        const supabaseAvatarUrl = await loadAvatarFromSupabase(userId);
-        if (supabaseAvatarUrl) {
-          setAvatarUrl(supabaseAvatarUrl);
-          localStorage.setItem('user_avatar', supabaseAvatarUrl);
-        }
-      } catch (error) {
-        console.error('Erro ao carregar avatar do Supabase:', error);
-      }
-    };
-
-    loadAvatar();
-
-    const handleStorageChange = () => {
-      loadAvatar();
-    };
-
-    window.addEventListener('storage', handleStorageChange);
-    return () => window.removeEventListener('storage', handleStorageChange);
-  }, []);
 
+  // foco quando abre chat
   useEffect(() => {
     if (isChatOpen && chatInputRef.current) {
       chatInputRef.current.focus();
     }
   }, [isChatOpen]);
 
+  // scroll automático quando nova mensagem
   useEffect(() => {
     if (mensagensContainerRef.current) {
       mensagensContainerRef.current.scrollTop = mensagensContainerRef.current.scrollHeight;
     }
   }, [mensagens]);
 
+  // carrega avatar se existir
+  useEffect(() => {
+    const loadAvatar = () => {
+      const localAvatar = localStorage.getItem('user_avatar');
+      if (localAvatar) setAvatarUrl(localAvatar);
+    };
+    loadAvatar();
+    const onStorage = () => loadAvatar();
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
+
+  // ESC fecha qualquer overlay/portal aberto (logout / suporte / chat)
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === 'Escape') {
+        if (showLogoutModal) setShowLogoutModal(false);
+        if (isSuporteCardOpen) setIsSuporteCardOpen(false);
+        if (isChatOpen) setIsChatOpen(false);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [showLogoutModal, isSuporteCardOpen, isChatOpen]);
+
+  // --- handlers logout (mantive comportamento) ---
   const handleLogoutClick = () => {
     setShowLogoutModal(true);
     setIsDropdownOpen(false);
   };
 
-  const handleLogoutCancel = () => {
+  const clearAuthData = () => {
-    setShowLogoutModal(false);
+    ["token","authToken","userToken","access_token","user","auth","userData"].forEach(key => {
+      localStorage.removeItem(key);
+      sessionStorage.removeItem(key);
+    });
+    if (window.caches) {
+      caches.keys().then(names => {
+        names.forEach(name => {
+          if (name.includes("auth") || name.includes("api")) caches.delete(name);
+        });
+      }).catch(()=>{});
+    }
   };
 
   const handleLogoutConfirm = async () => {
@@ -162,55 +90,34 @@ const Header = () => {
         sessionStorage.getItem("authToken");
 
       if (token) {
-        const response = await fetch(
+        try {
-          "https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout",
+          await fetch("https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout", {
-          {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
               Authorization: `Bearer ${token}`,
             },
-          }
+          });
-        );
+        } catch (err) {
-
+          // ignora erro de rede / endpoint — prossegue para limpar local
-        if (response.status === 204) console.log("Logout realizado com sucesso");
+          console.warn('logout endpoint error (ignored):', err);
-        else if (response.status === 401) console.log("Token inválido ou expirado");
-        else {
-          try {
-            const errorData = await response.json();
-            console.error("Erro no logout:", errorData);
-          } catch {
-            console.error("Erro no logout - status:", response.status);
-          }
         }
       }
 
       clearAuthData();
-      navigate("/login");
+      navigate('/login');
-    } catch (error) {
+    } catch (err) {
-      console.error("Erro durante logout:", error);
+      console.error('Erro no logout:', err);
       clearAuthData();
-      navigate("/login");
+      navigate('/login');
     } finally {
       setShowLogoutModal(false);
     }
   };
 
-  const clearAuthData = () => {
+  const handleLogoutCancel = () => setShowLogoutModal(false);
-    ["token", "authToken", "userToken", "access_token", "user", "auth", "userData", "user_avatar"].forEach(key => {
-      localStorage.removeItem(key);
-      sessionStorage.removeItem(key);
-    });
-
-    if (window.caches) {
-      caches.keys().then(names => {
-        names.forEach(name => {
-          if (name.includes("auth") || name.includes("api")) caches.delete(name);
-        });
-      });
-    }
-  };
 
+  // --- profile / suporte / chat handlers ---
   const handleProfileClick = () => {
     setIsDropdownOpen(!isDropdownOpen);
     if (isSuporteCardOpen) setIsSuporteCardOpen(false);
@@ -218,178 +125,17 @@ const Header = () => {
   };
 
   const handleViewProfile = () => {
-    setShowAvatarModal(true);
+    navigate('/perfil');
     setIsDropdownOpen(false);
   };
 
-  const handleAvatarUpload = async (event) => {
-    const file = event.target.files[0];
-    if (!file) return;
-
-    setAvatarError(null);
-
-    const MAX_FILE_SIZE = 5 * 1024 * 1024;
-    const ACCEPTED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
-
-    if (file.size > MAX_FILE_SIZE) {
-      setAvatarError("Arquivo muito grande. Máximo 5MB.");
-      return;
-    }
-
-    if (!ACCEPTED_TYPES.includes(file.type)) {
-      setAvatarError("Tipo de arquivo não suportado. Use JPEG, PNG, GIF ou WebP.");
-      return;
-    }
-
-    setIsUploading(true);
-
-    try {
-      let userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
-      
-      if (!userId) {
-        try {
-          const userData = localStorage.getItem('user') || localStorage.getItem('userData');
-          if (userData) {
-            const parsed = JSON.parse(userData);
-            userId = parsed.id || parsed.user_id || parsed.sub || parsed.userId;
-            if (userId) {
-              localStorage.setItem('userId', userId);
-            }
-          }
-        } catch (e) {
-          console.error('Erro ao buscar userId:', e);
-        }
-      }
-      
-      if (userId) {
-        try {
-          await uploadAvatarToSupabase(file, userId);
-          
-          const ext = file.name.split('.').pop();
-          const publicAvatarUrl = `${SUPABASE_URL}/storage/v1/object/public/avatars/${userId}/avatar.${ext}`;
-          
-          const response = await fetch(publicAvatarUrl);
-          if (response.ok) {
-            const blob = await response.blob();
-            const imageUrl = URL.createObjectURL(blob);
-            setAvatarUrl(imageUrl);
-            localStorage.setItem('user_avatar', imageUrl);
-            window.dispatchEvent(new Event('storage'));
-            return;
-          }
-        } catch (apiError) {
-          console.error('Erro ao enviar para Supabase:', apiError);
-        }
-      }
-
-  
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const imageDataUrl = e.target.result;
-        localStorage.setItem('user_avatar', imageDataUrl);
-        setAvatarUrl(imageDataUrl);
-        window.dispatchEvent(new Event('storage'));
-      };
-      reader.readAsDataURL(file);
-
-    } catch (error) {
-      console.error('Erro no processamento:', error);
-      setAvatarError('Erro ao processar imagem');
- 
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const imageDataUrl = e.target.result;
-        localStorage.setItem('user_avatar', imageDataUrl);
-        setAvatarUrl(imageDataUrl);
-      };
-      reader.readAsDataURL(file);
-    } finally {
-      setIsUploading(false);
-      if (event.target) event.target.value = '';
-    }
-  };
-
-  const uploadAvatarToSupabase = async (file, userId) => {
-    const ext = file.name.split('.').pop();
-    const filePath = `${userId}/avatar.${ext}`;
-
-    const myHeaders = new Headers();
-    myHeaders.append('apikey', API_KEY);
-    myHeaders.append('Content-Type', file.type);
-    
-    const token = localStorage.getItem('token') || localStorage.getItem('authToken');
-    if (token) {
-      myHeaders.append('Authorization', `Bearer ${token}`);
-    }
-
-    const response = await fetch(`${SUPABASE_URL}/storage/v1/object/avatars/${filePath}`, {
-      method: 'POST',
-      headers: myHeaders,
-      body: file
-    });
-
-    if (!response.ok) {
-  
-      const updateResponse = await fetch(`${SUPABASE_URL}/storage/v1/object/avatars/${filePath}`, {
-        method: 'PUT',
-        headers: myHeaders,
-        body: file
-      });
-      
-      if (!updateResponse.ok) {
-        throw new Error('Erro ao fazer upload do avatar');
-      }
-      return await updateResponse.json();
-    }
-
-    return await response.json();
-  };
-
-  const clearAvatar = async () => {
-    const userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
-    
-    if (userId) {
-      try {
-        const extensions = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
-        
-        for (const ext of extensions) {
-          const filePath = `${userId}/avatar.${ext}`;
-          const myHeaders = new Headers();
-          myHeaders.append('apikey', API_KEY);
-          
-          const token = localStorage.getItem('token') || localStorage.getItem('authToken');
-          if (token) {
-            myHeaders.append('Authorization', `Bearer ${token}`);
-          }
-
-          try {
-            await fetch(`${SUPABASE_URL}/storage/v1/object/avatars/${filePath}`, {
-              method: 'DELETE',
-              headers: myHeaders
-            });
-          } catch (e) {
-            continue;
-          }
-        }
-      } catch (error) {
-        console.error('Erro ao remover avatar da API:', error);
-      }
-    }
-
-    localStorage.removeItem('user_avatar');
-    setAvatarUrl(null);
-    window.dispatchEvent(new Event('storage'));
-  };
-
   const handleSuporteClick = () => {
-    setIsSuporteCardOpen(!isSuporteCardOpen);
+    setIsSuporteCardOpen((s) => !s);
-    if (isDropdownOpen) setIsDropdownOpen(false);
+    setIsDropdownOpen(false);
     if (isChatOpen) setIsChatOpen(false);
   };
 
-  const handleCloseSuporteCard = () => {
+  const handleCloseSuporteCard = () => setIsSuporteCardOpen(false);
-    setIsSuporteCardOpen(false);
-  };
 
   const handleChatClick = () => {
     setIsChatOpen(true);
@@ -397,7 +143,7 @@ const Header = () => {
     setMensagens([
       {
         id: 1,
-        texto: 'Olá! Me chamo Ágatha e sou sua assistente virtual. 👋 Bem-vindo ao suporte Mediconnect. Como posso te ajudar hoje?',
+        texto: 'Olá! Bem-vindo ao suporte Mediconnect. Como podemos ajudar você hoje?',
         remetente: 'suporte',
         hora: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
       }
@@ -409,11 +155,10 @@ const Header = () => {
     setMensagem('');
   };
 
-  const handleEnviarMensagem = async (e) => {
+  const handleEnviarMensagem = (e) => {
     e.preventDefault();
     if (mensagem.trim() === '') return;
 
-  
     const novaMensagemUsuario = {
       id: Date.now(),
       texto: mensagem,
@@ -424,37 +169,30 @@ const Header = () => {
     setMensagens(prev => [...prev, novaMensagemUsuario]);
     setMensagem('');
 
-    try {
+    setTimeout(() => {
-      const response = await fetch("http://localhost:5000/api/chat", {
+      if (chatInputRef.current) chatInputRef.current.focus();
-        method: "POST",
+    }, 0);
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ message: mensagem }),
-      });
-
-      const data = await response.json();
-
 
+    setTimeout(() => {
+      const respostas = [
+        'Entendi sua dúvida. Vou verificar isso para você.',
+        'Obrigado pela informação. Estou analisando seu caso.',
+        'Pode me dar mais detalhes sobre o problema?',
+        'Já encaminhei sua solicitação para nossa equipe técnica.',
+        'Vou ajudar você a resolver isso!'
+      ];
       const respostaSuporte = {
         id: Date.now() + 1,
-        texto: data.resposta || data.reply || "Desculpe, não consegui processar sua pergunta no momento 😅",
+        texto: respostas[Math.floor(Math.random() * respostas.length)],
         remetente: 'suporte',
         hora: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
       };
-
       setMensagens(prev => [...prev, respostaSuporte]);
-    } catch (error) {
+    }, 900);
-      console.error("Erro ao conectar com o servidor:", error);
-      const erroMsg = {
-        id: Date.now() + 1,
-        texto: "Ops!  Ocorreu um erro ao tentar falar com o suporte.",
-        remetente: 'suporte',
-        hora: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
-      };
-      setMensagens(prev => [...prev, erroMsg]);
-    }
   };
 
-  const SuporteCard = () => (
+  // --- subcomponentes (UI) ---
+  const SuporteCardContent = ({ onOpenChat }) => (
     <div className="suporte-card">
       <h2 className="suporte-titulo">Suporte</h2>
       <p className="suporte-subtitulo">Entre em contato conosco através dos canais abaixo</p>
@@ -473,7 +211,7 @@ const Header = () => {
         </div>
       </div>
 
-      <div className="contato-item clickable" onClick={handleChatClick}>
+      <div className="contato-item clickable" onClick={onOpenChat} role="button" tabIndex={0}>
         <div className="contato-info">
           <div className="contato-nome">Chat Online</div>
           <div className="contato-descricao">Disponível 24/7</div>
@@ -482,11 +220,11 @@ const Header = () => {
     </div>
   );
 
-  const ChatOnline = () => (
+  const ChatOnlineContent = ({ mensagens, onSend, onClose }) => (
-    <div className="chat-online">
+    <div className="chat-online" role="dialog" aria-modal="true">
       <div className="chat-header">
         <h3 className="chat-titulo">Chat de Suporte</h3>
-        <button type="button" className="fechar-chat" onClick={handleCloseChat}>×</button>
+        <button type="button" className="fechar-chat" onClick={onClose} aria-label="Fechar chat">×</button>
       </div>
 
       <div className="chat-mensagens" ref={mensagensContainerRef}>
@@ -498,7 +236,7 @@ const Header = () => {
         ))}
       </div>
 
-      <form className="chat-input" onSubmit={handleEnviarMensagem}>
+      <form className="chat-input" onSubmit={onSend}>
         <input
           ref={chatInputRef}
           type="text"
@@ -513,162 +251,165 @@ const Header = () => {
     </div>
   );
 
+  // --- portals: Logout / Suporte / Chat (garante top-most e clickable) ---
+  const PortalWrapper = ({ children, z = 99999 }) => {
+    if (typeof document === 'undefined') return null;
+    return createPortal(
+      <div style={{ position: 'fixed', inset: 0, zIndex: z }}>
+        {children}
+      </div>,
+      document.body
+    );
+  };
+
+  const LogoutModalPortal = ({ onCancel, onConfirm }) => {
+    if (typeof document === 'undefined') return null;
+    return createPortal(
+      <div
+        className="logout-modal-overlay"
+        style={{
+          position: 'fixed',
+          top: 0, left: 0, right: 0, bottom: 0,
+          backgroundColor: 'rgba(0,0,0,0.5)',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          zIndex: 110000
+        }}
+        onClick={onCancel}
+      >
+        <div
+          className="logout-modal-content"
+          style={{
+            backgroundColor: 'white',
+            padding: '1.6rem',
+            borderRadius: '12px',
+            boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
+            maxWidth: '480px',
+            width: '100%',
+            textAlign: 'center'
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <h3 style={{ marginTop: 0 }}>Confirmar Logout</h3>
+          <p>Tem certeza que deseja encerrar a sessão?</p>
+          <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', marginTop: '1rem' }}>
+            <button onClick={onCancel} className="logout-cancel-button">Cancelar</button>
+            <button onClick={onConfirm} className="logout-confirm-button">Sair</button>
+          </div>
+        </div>
+      </div>,
+      document.body
+    );
+  };
+
+  const SuportePortal = ({ onClose, children }) => {
+    if (typeof document === 'undefined') return null;
+    return createPortal(
+      <div
+        className="suporte-card-overlay"
+        style={{
+          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+          backgroundColor: 'transparent',
+          display: 'flex',
+          justifyContent: 'flex-end',
+          alignItems: 'flex-start',
+          zIndex: 105000,
+          pointerEvents: 'auto'
+        }}
+        onClick={onClose}
+      >
+        <div
+          className="suporte-card-container"
+          style={{ marginTop: '80px', marginRight: '20px' }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
+      </div>,
+      document.body
+    );
+  };
+
+  const ChatPortal = ({ onClose, children }) => {
+    if (typeof document === 'undefined') return null;
+    return createPortal(
+      <div
+        className="chat-overlay"
+        style={{
+          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+          backgroundColor: 'rgba(0,0,0,0.5)',
+          display: 'flex',
+          justifyContent: 'flex-end',
+          alignItems: 'flex-start',
+          zIndex: 115000,
+          pointerEvents: 'auto'
+        }}
+        onClick={onClose}
+      >
+        <div
+          className="chat-container"
+          style={{ marginTop: '80px', marginRight: '20px' }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
+      </div>,
+      document.body
+    );
+  };
+
+  // --- evita render na rota de login (mantendo hooks invocados) ---
+  if (location.pathname === '/login') {
+    return null;
+  }
+
+  // --- JSX principal (header visual) ---
   return (
-    <div className="header-container">
+    <div className="header-container" style={{ pointerEvents: 'auto' }}>
       <div className="right-corner-elements">
-        <div className="phone-icon-container" onClick={handleSuporteClick}>
+        <div
+          className="phone-icon-container"
+          onClick={handleSuporteClick}
+          role="button"
+          tabIndex={0}
+          style={{ pointerEvents: 'auto' }}
+        >
           <span className="phone-icon" role="img" aria-label="telefone">📞</span>
         </div>
 
-        <div className="profile-section">
+        <div className="profile-section" style={{ pointerEvents: 'auto' }}>
-          <div className="profile-picture-container" onClick={handleProfileClick}>
+          <div className="profile-picture-container" onClick={handleProfileClick} role="button" tabIndex={0}>
-            {avatarUrl ? (
+            <div className="profile-placeholder"></div>
-              <img 
-                src={avatarUrl} 
-                alt="Avatar" 
-                className="profile-photo" 
-                onError={() => {
-                  const userId = localStorage.getItem('userId') || localStorage.getItem('user_id');
-                  if (userId) {
-                    loadAvatarFromSupabase(userId).then(newUrl => {
-                      if (newUrl) {
-                        setAvatarUrl(newUrl);
-                        localStorage.setItem('user_avatar', newUrl);
-                      } else {
-                        setAvatarUrl(null);
-                        localStorage.removeItem('user_avatar');
-                      }
-                    });
-                  }
-                }}
-              />
-            ) : (
-              <div className="profile-placeholder">
-                <span className="placeholder-icon"></span>
-              </div>
-            )}
           </div>
 
           {isDropdownOpen && (
-            <div className="profile-dropdown">
+            <div className="profile-dropdown" onClick={(e) => e.stopPropagation()}>
-              <button type="button" onClick={handleViewProfile} className="dropdown-button">
+              <button type="button" onClick={handleViewProfile} className="dropdown-button">Ver Perfil</button>
-                Ver Perfil
+              <button type="button" onClick={handleLogoutClick} className="dropdown-button logout-button">Sair (Logout)</button>
-              </button>
-              <button type="button" onClick={handleLogoutClick} className="dropdown-button logout-button">
-                Sair (Logout)
-              </button>
             </div>
           )}
         </div>
       </div>
 
-      {showLogoutModal && (
+      {/* logout modal via portal */}
-        <div className="logout-modal-overlay">
+      {showLogoutModal && <LogoutModalPortal onCancel={handleLogoutCancel} onConfirm={handleLogoutConfirm} />}
-          <div className="logout-modal-content">
-            <h3>Confirmar Logout</h3>
-            <p>Tem certeza que deseja encerrar a sessão?</p>
-            <div className="logout-modal-buttons">
-              <button onClick={handleLogoutCancel} className="logout-cancel-button">
-                Cancelar
-              </button>
-              <button onClick={handleLogoutConfirm} className="logout-confirm-button">
-                Sair
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
 
+      {/* suporte portal */}
       {isSuporteCardOpen && (
-        <div className="suporte-card-overlay" onClick={handleCloseSuporteCard}>
+        <SuportePortal onClose={handleCloseSuporteCard}>
-          <div className="suporte-card-container" onClick={(e) => e.stopPropagation()}>
+          <SuporteCardContent onOpenChat={handleChatClick} />
-            <SuporteCard />
+        </SuportePortal>
-          </div>
-        </div>
       )}
 
+      {/* chat portal */}
       {isChatOpen && (
-        <div className="chat-overlay">
+        <ChatPortal onClose={handleCloseChat}>
-          <div className="chat-container">
+          <ChatOnlineContent mensagens={mensagens} onSend={handleEnviarMensagem} onClose={handleCloseChat} />
-            <ChatOnline />
+        </ChatPortal>
-          </div>
-        </div>
-      )}
-      {showAvatarModal && (
-        <div className="logout-modal-overlay" onClick={() => setShowAvatarModal(false)}>
-          <div className="logout-modal-content avatar-modal-content" onClick={(e) => e.stopPropagation()}>
-            <h3>Gerenciar Avatar</h3>
-            
-            <div className="avatar-preview-container">
-              <div className="avatar-preview-wrapper">
-                {avatarUrl ? (
-                  <img 
-                    src={avatarUrl} 
-                    alt="Avatar" 
-                    className="avatar-preview-image"
-                    onError={() => {
-                      setAvatarUrl(null);
-                      localStorage.removeItem('user_avatar');
-                    }}
-                  />
-                ) : (
-                  <span className="avatar-preview-placeholder">👤</span>
-                )}
-              </div>
-
-              {avatarError && (
-                <div className="avatar-error-message">
-                  {avatarError}
-                </div>
-              )}
-
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept="image/*"
-                onChange={handleAvatarUpload}
-                disabled={isUploading}
-                className="avatar-file-input"
-              />
-
-              <div className="avatar-actions">
-                <button
-                  onClick={() => fileInputRef.current?.click()}
-                  disabled={isUploading}
-                  className="avatar-upload-button"
-                >
-                  {isUploading ? 'Enviando...' : ' Alterar Foto'}
-                </button>
-
-                {avatarUrl && (
-                  <button
-                    onClick={clearAvatar}
-                    disabled={isUploading}
-                    className="avatar-remove-button"
-                  >
-                     Remover
-                  </button>
-                )}
-              </div>
-
-              <p className="avatar-info-text">
-                Formatos aceitos: JPEG, PNG, GIF, WebP (máx. 5MB)
-              </p>
-            </div>
-
-            <div className="logout-modal-buttons avatar-actions-spacing">
-              <button 
-                onClick={() => setShowAvatarModal(false)} 
-                className="logout-confirm-button avatar-close-button"
-              >
-                Fechar
-              </button>
-            </div>
-          </div>
-        </div>
       )}
     </div>
   );
 };
 
-export default Header;
+export default Header;

src/components/doctors/DoctorForm.css

@@ -198,4 +198,15 @@
     font-size: 1.1rem;
     padding: 0.6rem 1.2rem;
   }
+}
+
+@media (max-width: 576px) {
+  .doctor-form-container { padding: 0.75rem; }
+  .doctor-form-title { font-size: 1.75rem; }
+  .form-section { padding: 0.75rem; }
+  .section-header { font-size: 1.25rem; }
+  .form-label { font-size: 1rem; }
+  .form-control-custom { font-size: 1rem; }
+  .btns-container { display: flex; flex-direction: column; gap: 8px; }
+  .btn-submit, .btn-cancel { width: 100%; margin-right: 0; }
 }

src/components/doctors/DoctorForm.jsx

@@ -135,14 +135,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
   };
 
-  const handleAvailabilityUpdate = useCallback((newAvailability) => {
+const handleAvailabilityUpdate = useCallback((newAvailability) => {
-    setFormData((prev) => {
+    setFormData((prev) => { 
-      if (JSON.stringify(prev.availability) !== JSON.stringify(newAvailability)) {
         return { ...prev, availability: newAvailability };
-      }
-      return prev;
     });
-  }, []);
+}, [setFormData]);
 
   const handleCepBlur = async () => {
     const cep = formData.cep?.replace(/\D/g, "");
@@ -326,17 +323,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
 
     try {
-      const savedDoctor = await onSave({ ...formData });
+      // Chama a função onSave (handleSave no DoctorEditPage) com o formData completo.
-
+      // A lógica de salvamento do médico e da disponibilidade é responsabilidade do componente pai.
-      if (formData.availability && formData.availability.length > 0 && savedDoctor.id) {
+      await onSave({ ...formData });
-        if (formData.availabilityId) {
-
-          await handlePatchAvailability(formData.availabilityId, formData.availability);
-        } else {
-
-          await handleCreateAvailability(savedDoctor.id, formData.availability);
-        }
-      }
 
     } catch (error) {
       console.error("Erro ao salvar médico ou disponibilidade:", error);
@@ -760,7 +749,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   Defina seus horários de atendimento para cada dia da semana.
                   Marque um dia para começar a adicionar blocos de tempo.
                 </p>
-                <HorariosDisponibilidade
+               <HorariosDisponibilidade
                   initialAvailability={formData.availability}
                   onUpdate={handleAvailabilityUpdate}
                 />

src/components/doctors/HorariosDisponibilidade.css

@@ -151,4 +151,18 @@
 
 .btn-add:hover {
   background-color: #059669;
+}
+
+@media (max-width: 768px) {
+  .horarios-container { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 576px) {
+  .horarios-container { grid-template-columns: 1fr; gap: 10px; }
+  .day-card { height: auto; }
+  .day-header label { font-size: 13px; }
+  .time-inputs { flex-direction: column; }
+  .input-wrapper input { font-size: 12px; }
+  .btn-add { font-size: 12px; }
+  .btn-remove { font-size: 12px; }
 }

src/components/doctors/HorariosDisponibilidade.jsx

@@ -10,13 +10,13 @@ const initialBlockTemplate = {
 };
 
 const emptyAvailabilityTemplate = [
-  { dia: "Segunda-feira", isChecked: false, blocos: [] },
+  { dia: "Domingo", weekday: 0, isChecked: false, blocos: [] },
-  { dia: "Terça-feira", isChecked: false, blocos: [] },
+  { dia: "Segunda-feira", weekday: 1, isChecked: false, blocos: [] },
-  { dia: "Quarta-feira", isChecked: false, blocos: [] },
+  { dia: "Terça-feira", weekday: 2, isChecked: false, blocos: [] },
-  { dia: "Quinta-feira", isChecked: false, blocos: [] },
+  { dia: "Quarta-feira", weekday: 3, isChecked: false, blocos: [] },
-  { dia: "Sexta-feira", isChecked: false, blocos: [] },
+  { dia: "Quinta-feira", weekday: 4, isChecked: false, blocos: [] },
-  { dia: "Sábado", isChecked: false, blocos: [] },
+  { dia: "Sexta-feira", weekday: 5, isChecked: false, blocos: [] },
-  { dia: "Domingo", isChecked: false, blocos: [] },
+  { dia: "Sábado", weekday: 6, isChecked: false, blocos: [] },
 ];
 
 const HorariosDisponibilidade = ({
@@ -35,10 +35,18 @@ const HorariosDisponibilidade = ({
     }
   }, [initialAvailability]);
 
+  useEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
+    if (onUpdate) onUpdate(availability);
+  }, [availability, onUpdate]);
+
   const handleDayCheck = useCallback((dayIndex, currentIsChecked) => {
     const isChecked = !currentIsChecked;
-    setAvailability((prev) =>
+    setAvailability((prev) => {
-      prev.map((day, i) =>
+      const updated = prev.map((day, i) =>
         i === dayIndex
           ? {
               ...day,
@@ -56,8 +64,10 @@ const HorariosDisponibilidade = ({
                 : [],
             }
           : day
-      )
+      );
-    );
+      console.log('handleDayCheck - updated availability:', updated);
+      return updated;
+    });
   }, []);
 
   const handleAddBlock = useCallback((dayIndex) => {
@@ -107,9 +117,7 @@ const HorariosDisponibilidade = ({
     );
   }, []);
 
-  const handleSave = useCallback(() => {
+  
-    if (onUpdate) onUpdate(availability);
-  }, [availability, onUpdate]);
 
   return (
     <div className="horarios-container">

src/data/sidebar-items-adm.json

@@ -25,5 +25,10 @@
     "name": "Painel Administrativo",
     "icon": "file-bar-graph-fill",
     "url": "/admin/painel"
+  },
+  {
+    "name": "Gestão de Usuários",
+    "icon": "people-fill",
+    "url": "/admin/gestao"
   }
 ]

src/data/sidebar-items-medico.json

@@ -5,17 +5,26 @@
   "url": "/medico/agendamento"
 },
 
+
+
+ {
+    "name": "Relatório por Áudio",
+    "icon": "file-earmark-plus-fill",
+    "url": "/medico/novo-relatorio-audio"
+  },
+
  {
     "name": "Relatórios",
     "icon": "file-earmark-text-fill",
     "url": "/medico/relatorios"
   },
+    
 
    {
     "name": "Chat com pacientes",
     "icon": "chat-dots-fill",
     "url": "/medico/chat"
   }
-
+   
 
 ]

src/index.css

@@ -1,13 +1,19 @@
-body {
+*,
-  margin: 0;
+*::before,
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+*::after {
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  box-sizing: border-box;
-    sans-serif;
+}
-  -webkit-font-smoothing: antialiased;
+
-  -moz-osx-font-smoothing: grayscale;
+body {
-}
+  margin: 0;
-
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-code {
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    sans-serif;
-    monospace;
+  -webkit-font-smoothing: antialiased;
-}
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/pages/AgendamentoCadastroManager.jsx

@@ -4,179 +4,98 @@ import API_KEY from '../components/utils/apiKeys';
 import { useAuth } from '../components/utils/AuthProvider';
 import dayjs from 'dayjs';
 import { UserInfos } from '../components/utils/Functions-Endpoints/General';
-import { toast } from 'react-toastify'; 
-const AgendamentoCadastroManager = ({ setPageConsulta, agendamentoInicial }) => {
 
-    const { getAuthorizationHeader } = useAuth();
+const AgendamentoCadastroManager = ({ setPageConsulta, Dict, onSaved }) => {
+  const { getAuthorizationHeader, user } = useAuth();
+  const [agendamento, setAgendamento] = useState({ status: 'confirmed' });
+  const [idUsuario, setIDusuario] = useState('0');
+
+  // patient_id do paciente logado (ou fallback para o Pedro)
   
-    const [agendamento, setAgendamento] = useState({ status: 'agendado' });
+   const patientId = 'bf7d8323-05e1-437a-817c-f08eb5f174ef';
-    const [idUsuario, setIDusuario] = useState('0');
-    const [isEditMode, setIsEditMode] = useState(false); 
 
-    let authHeader = getAuthorizationHeader();
+  const authHeader = getAuthorizationHeader();
 
-    useEffect(() => {
+  useEffect(() => {
-        
+    if (!Dict) {
-      
+      setAgendamento({ status: 'confirmed' });
-        if (agendamentoInicial && agendamentoInicial.id) {
+    } else {
-           
+      setAgendamento(Dict);
-            const scheduled_at = dayjs(agendamentoInicial.scheduled_at);
-
-            setAgendamento({
-                ...agendamentoInicial,
-              
-                dataAtendimento: scheduled_at.format('YYYY-MM-DD'), 
-                horarioInicio: scheduled_at.format('HH:mm'),         
-                
-              
-                tipo_consulta: agendamentoInicial.appointment_type || 'Presencial',
-                convenio: agendamentoInicial.insurance_provider || 'Público',
-                
-              
-                paciente_nome: agendamentoInicial.paciente_nome || '',
-                paciente_cpf: agendamentoInicial.paciente_cpf || '',
-                medico_nome: agendamentoInicial.medico_nome || '',
-                
-                
-                patient_id: agendamentoInicial.patient_id, 
-                doctor_id: agendamentoInicial.doctor_id,
-                status: agendamentoInicial.status,
-            });
-            setIsEditMode(true);
-            
-        } else {
-          
-            setAgendamento({
-                status: 'agendado',
-                patient_id: null,
-                doctor_id: null,
-                dataAtendimento: dayjs().format('YYYY-MM-DD'),
-                horarioInicio: '',
-                tipo_consulta: 'Presencial',
-                convenio: 'Público',
-                paciente_nome: '',
-                paciente_cpf: '',
-                medico_nome: ''
-            });
-            setIsEditMode(false);
-        }
-
-        
-        const ColherInfoUsuario = async () => {
-            const result = await UserInfos(authHeader);
-            setIDusuario(result?.profile?.id);
-        };
-        ColherInfoUsuario();
-        
-       
-    }, [agendamentoInicial, authHeader]);
-    const handleSave = async (Dict) => {
-        var myHeaders = new Headers();
-        myHeaders.append("apikey", API_KEY);
-        myHeaders.append("Authorization", authHeader);
-        myHeaders.append("Content-Type", "application/json");
-        myHeaders.append("Prefer", "return=representation");
-   
-        var raw = JSON.stringify({
-            "patient_id": Dict.patient_id,
-            "doctor_id": Dict.doctor_id,
-            "scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
-            "duration_minutes": Dict.duration_minutes || 30, 
-            "appointment_type": Dict.tipo_consulta,
-            "insurance_provider": Dict.convenio,
-            "status": Dict.status || 'agendado', 
-            "created_by": idUsuario,
-            "created_at": dayjs().toISOString(),
-            
-        });
-        
-        var requestOptions = {
-            method: 'POST',
-            headers: myHeaders,
-            body: raw,
-            redirect: 'follow'
-        };
-        
-        try {
-            const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
-            if (response.ok) {
-                toast.success("Agendamento criado com sucesso! ✅");
-                setPageConsulta(false); 
-            } else {
-                const errorText = await response.text();
-                console.error('Erro ao cadastrar agendamento:', errorText);
-                toast.error(`Falha ao criar agendamento: ${JSON.parse(errorText)?.message || 'Erro desconhecido'}`);
-            }
-        } catch (error) {
-            console.error('Erro de rede:', error);
-            toast.error("Erro de rede ao salvar. ❌");
-        }
-    }
-    const handleUpdate = async (Dict) => {
-        const appointmentId = agendamentoInicial.id;
-        
-        var myHeaders = new Headers();
-        myHeaders.append("apikey", API_KEY);
-        myHeaders.append("Authorization", authHeader);
-        myHeaders.append("Content-Type", "application/json");
-        myHeaders.append("Prefer", "return=representation");
-    
-        var raw = JSON.stringify({
-            "patient_id": Dict.patient_id,
-            "doctor_id": Dict.doctor_id,
-            "scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
-            "duration_minutes": Dict.duration_minutes || 30,
-            "appointment_type": Dict.tipo_consulta,
-            "insurance_provider": Dict.convenio,
-            "status": Dict.status,
-            "updated_at": dayjs().toISOString(),
-            "updated_by": idUsuario, 
-        });
-        
-        var requestOptions = {
-            method: 'PATCH',
-            headers: myHeaders,
-            body: raw,
-            redirect: 'follow'
-        };
-        
-        try {
-            const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${appointmentId}`, requestOptions);
-            if (response.ok) {
-                toast.success("Agendamento atualizado com sucesso! 📝");
-                setPageConsulta(false); 
-            } else {
-                const errorText = await response.text();
-                console.error('Erro ao atualizar agendamento:', errorText);
-                toast.error(`Falha ao atualizar agendamento: ${JSON.parse(errorText)?.message || 'Erro desconhecido'}`);
-            }
-        } catch (error) {
-            console.error('Erro de rede:', error);
-            toast.error("Erro de rede ao atualizar. ❌");
-        }
-    }
-    const handleFormSubmit = (Dict) => {
-        if (isEditMode) {
-           
-            handleUpdate(Dict);
-        } else {
-         
-            handleSave(Dict);
-        }
     }
 
+    const ColherInfoUsuario = async () => {
+      try {
+        const result = await UserInfos(authHeader);
+        setIDusuario(result?.profile?.id);
+      } catch (e) {
+        console.error('Erro ao buscar infos do usuário:', e);
+      }
+    };
 
-    return (
+    if (authHeader) {
-        <div>
+      ColherInfoUsuario();
-            {}
+    }
-            <FormNovaConsulta 
+  }, [Dict, authHeader]);
-                onSave={handleFormSubmit} 
+
-                agendamento={agendamento} 
+  const handleSave = async (DictForm) => {
-                setAgendamento={setAgendamento} 
+    if (!authHeader) {
-                onCancel={() => setPageConsulta(false)}
+      alert('Sem autorização. Faça login novamente.');
-            />
+      return;
-        </div>
+    }
-    );
+
+    const myHeaders = new Headers();
+    myHeaders.append('apikey', API_KEY);
+    myHeaders.append('Authorization', authHeader);
+    myHeaders.append('Content-Type', 'application/json');
+
+    const raw = JSON.stringify({
+      patient_id: patientId, // paciente logado
+      doctor_id: DictForm.doctor_id,
+      scheduled_at: `${DictForm.dataAtendimento}T${DictForm.horarioInicio}:00`,
+      duration_minutes: 30,
+      appointment_type: DictForm.tipo_consulta,
+      patient_notes: '',
+      insurance_provider: DictForm.convenio,
+      status: 'confirmed', // ou 'confirmed'
+      created_by: idUsuario,
+      created_at: dayjs().toISOString(),
+    });
+
+    const requestOptions = {
+      method: 'POST',
+      headers: myHeaders,
+      body: raw,
+      redirect: 'follow',
+    };
+
+    try {
+      const response = await fetch(
+        'https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments',
+        requestOptions
+      );
+      if (response.ok) {
+        if (onSaved) onSaved(); // pai recarrega e fecha
+        else setPageConsulta(false);
+      } else {
+        console.error('Erro ao criar agendamento:', await response.text());
+        alert('Falha ao criar agendamento.');
+      }
+    } catch (error) {
+      console.error('Erro de rede:', error);
+      alert('Erro de rede ao salvar agendamento.');
+    }
+  };
+
+  return (
+    <div>
+      <FormNovaConsulta
+        onSave={handleSave}
+        agendamento={agendamento}
+        setAgendamento={setAgendamento}
+        onCancel={() => setPageConsulta(false)}
+      />
+    </div>
+  );
 };
 
-export default AgendamentoCadastroManager;
+export default AgendamentoCadastroManager;

src/pages/DisponibilidadesDoctorPage.jsx

@@ -1,349 +1,465 @@
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import HorariosDisponibilidade from "../components/doctors/HorariosDisponibilidade";
 import { useAuth } from "../components/utils/AuthProvider";
 import API_KEY from "../components/utils/apiKeys";
-import { GetAllDoctors } from "../components/utils/Functions-Endpoints/Doctor";
+import "./style/DisponibilidadesDoctorPage.css";
 
-const ENDPOINT =
+const ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
-  "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
+const DOCTORS_ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors";
 
-const diasDaSemana = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
+const diasDaSemana = [
+  "Domingo",
+  "Segunda",
+  "Terça",
+  "Quarta",
+  "Quinta",
+  "Sexta",
+  "Sábado"
+];
+const weekdayNumToStr = {
+  0: "sunday",
+  1: "monday",
+  2: "tuesday",
+  3: "wednesday",
+  4: "thursday",
+  5: "friday",
+  6: "saturday",
+};
+const weekdayStrToNum = Object.fromEntries(
+  Object.entries(weekdayNumToStr).map(([num, str]) => [str, Number(num)])
+);
 
 const DisponibilidadesDoctorPage = () => {
   const { getAuthorizationHeader } = useAuth();
   const [disponibilidades, setDisponibilidades] = useState([]);
-  const [loading, setLoading] = useState(false);
   const [doctors, setDoctors] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
-  const [selectedDoctor, setSelectedDoctor] = useState(null);
   const [editando, setEditando] = useState(null);
-  const [doctorsLoading, setDoctorsLoading] = useState(true);
+  const [expandedDoctors, setExpandedDoctors] = useState({});
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [availabilityEdit, setAvailabilityEdit] = useState([]);
+  // Add the missing state variables
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDisponibilidadeId, setSelectedDisponibilidadeId] = useState(null);
 
+  const getHeaders = () => {
+    const myHeaders = new Headers();
+    const authHeader = getAuthorizationHeader();
+    if (authHeader) myHeaders.append("Authorization", authHeader);
+    myHeaders.append("Content-Type", "application/json");
+    if (API_KEY) myHeaders.append("apikey", API_KEY);
+    myHeaders.append("Prefer", "return=representation");
+    return myHeaders;
+  };
+
   useEffect(() => {
     const fetchDoctors = async () => {
       try {
-        setDoctorsLoading(true);
+        const requestOptions = {
-        const data = await GetAllDoctors();
+          method: "GET",
-        console.log("Médicos recebidos:", data);
+          headers: getHeaders(),
-        setDoctors(Array.isArray(data) ? data : []);
+        };
+        const response = await fetch(DOCTORS_ENDPOINT, requestOptions);
+        const result = await response.json();
+        setDoctors(Array.isArray(result) ? result : []);
       } catch (error) {
-        console.error("Erro ao carregar médicos:", error);
         setDoctors([]);
-      } finally {
-        setDoctorsLoading(false);
       }
     };
     fetchDoctors();
-  }, []);
+  }, [getAuthorizationHeader]);
-
-  const resolveAuthHeader = () => {
-    try {
-      const h = getAuthorizationHeader();
-      return h || "";
-    } catch {
-      return "";
-    }
-  };
-
-  const getHeaders = () => {
-    const myHeaders = new Headers();
-    const authHeader = resolveAuthHeader();
-    if (authHeader) myHeaders.append("Authorization", authHeader);
-    myHeaders.append("Content-Type", "application/json");
-    if (API_KEY) myHeaders.append("apikey", API_KEY);
-    return myHeaders;
-  };
-
-  const fetchDisponibilidades = useCallback(async (doctorId = null) => {
-    setLoading(true);
-    let url = ENDPOINT;
-    if (doctorId) {
-      url += `?doctor_id=eq.${doctorId}&select=*&order=weekday.asc,start_time.asc`;
-    } else {
-      url += `?select=*&order=doctor_id.asc,weekday.asc,start_time.asc`;
-    }
-    try {
-      const res = await fetch(url, { method: "GET", headers: getHeaders() });
-      if (!res.ok) throw new Error(`Erro HTTP: ${res.status}`);
-      const data = await res.json();
-      setDisponibilidades(Array.isArray(data) ? data : []);
-    } catch (e) {
-      console.error("Erro ao buscar disponibilidades:", e);
-      alert("Erro ao carregar disponibilidades");
-      setDisponibilidades([]);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
 
   useEffect(() => {
-    if (selectedDoctor) {
+    const fetchDisponibilidades = async () => {
-      fetchDisponibilidades(selectedDoctor.id);
+      try {
-    } else {
+        const res = await fetch(ENDPOINT, { method: "GET", headers: getHeaders() });
-      fetchDisponibilidades(null);
+        if (res.ok) {
-    }
+          const data = await res.json();
-  }, [selectedDoctor, fetchDisponibilidades]);
+          setDisponibilidades(Array.isArray(data) ? data : []);
+        }
+      } catch (error) {
+        setDisponibilidades([]);
+      }
+    };
+    fetchDisponibilidades();
+  }, [getAuthorizationHeader]);
 
-  const atualizarDisponibilidade = async (id, dadosAtualizados) => {
+  const toggleExpandDoctor = (doctorId) => {
+    setExpandedDoctors((prev) => ({ ...prev, [doctorId]: !prev[doctorId] }));
+  };
+
+  const salvarTodasDisponibilidades = async (doctorId, horariosAtualizados) => {
     try {
-      const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
+      const headers = getHeaders();
-        method: "PATCH",
+      const promises = [];
-        headers: getHeaders(),
+      const currentIds = new Set();
-        body: JSON.stringify(dadosAtualizados),
+
+      for (const dia of horariosAtualizados) {
+        if (dia.isChecked && dia.blocos.length > 0) {
+          for (const bloco of dia.blocos) {
+            const inicio = bloco.inicio.includes(":") ? bloco.inicio : bloco.inicio + ":00";
+            const termino = bloco.termino.includes(":") ? bloco.termino : bloco.termino + ":00";
+            
+            const payload = {
+              doctor_id: doctorId,
+              weekday: weekdayNumToStr[dia.weekday],
+              start_time: inicio,
+              end_time: termino,
+              slot_minutes: bloco.slot_minutes || 30,
+              appointment_type: bloco.appointment_type || "presencial",
+              active: true,
+            };
+
+            if (bloco.id && !bloco.isNew) {
+              currentIds.add(bloco.id);
+              promises.push(
+                fetch(`${ENDPOINT}?id=eq.${bloco.id}`, {
+                  method: "PATCH",
+                  headers,
+                  body: JSON.stringify(payload),
+                }).then(() => ({ type: 'PATCH', id: bloco.id }))
+              );
+            } else {
+              promises.push(
+                fetch(ENDPOINT, {
+                  method: "POST",
+                  headers,
+                  body: JSON.stringify(payload),
+                })
+                .then(res => res.json())
+                .then(data => {
+                   const createdItem = Array.isArray(data) ? data[0] : data;
+                   return { type: 'POST', id: createdItem?.id };
+                })
+              );
+            }
+          }
+        }
+      }
+
+      const results = await Promise.all(promises);
+      
+      results.forEach(res => {
+          if (res.type === 'POST' && res.id) currentIds.add(res.id);
       });
+
+      const existingRes = await fetch(`${ENDPOINT}?doctor_id=eq.${String(doctorId)}`, { 
+          method: "GET", headers 
+      });
+      
+      if (existingRes.ok) {
+          const existingData = await existingRes.json();
+          const deletePromises = existingData
+              .filter(dbItem => !currentIds.has(dbItem.id))
+              .map(dbItem => 
+                  fetch(`${ENDPOINT}?id=eq.${dbItem.id}`, { method: "DELETE", headers })
+              );
+          await Promise.all(deletePromises);
+      }
+
+      setEditando(null);
+      setAvailabilityEdit([]);
+      const res = await fetch(ENDPOINT, { method: "GET", headers: getHeaders() });
       if (res.ok) {
-        alert("Disponibilidade atualizada com sucesso!");
+        const data = await res.json();
-        setEditando(null);
+        setDisponibilidades(Array.isArray(data) ? data : []);
-        if (selectedDoctor) fetchDisponibilidades(selectedDoctor.id);
-        else fetchDisponibilidades();
-      } else {
-        const errorData = await res.json();
-        console.error("Erro na resposta:", errorData);
-        alert("Erro ao atualizar disponibilidade");
       }
     } catch (error) {
-      console.error("Erro:", error);
+      console.error(error);
-      alert("Falha ao conectar com o servidor");
     }
   };
 
   const deletarDisponibilidade = async (id) => {
+    if (!window.confirm("Deseja realmente excluir esta disponibilidade?")) return;
     try {
-      const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
+      const res = await fetch(`${ENDPOINT}?id=eq.${id}`, { method: "DELETE", headers: getHeaders() });
-        method: "DELETE",
-        headers: getHeaders(),
-      });
       if (res.ok) {
-        alert("Disponibilidade excluída com sucesso!");
         setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
         setShowDeleteModal(false);
         setSelectedDisponibilidadeId(null);
-      } else {
-        const errorData = await res.json();
-        console.error("Erro na resposta:", errorData);
-        alert("Erro ao excluir disponibilidade");
       }
     } catch (error) {
-      console.error("Erro:", error);
+      console.error("Erro ao excluir disponibilidade:", error);
-      alert("Erro ao conectar com o servidor");
     }
   };
 
-  const initialAvailabilityParaEdicao = useMemo(
+  const handleOpenDeleteModal = (id) => {
-    () =>
+    setSelectedDisponibilidadeId(id);
-      diasDaSemana.map((dia, weekdayIndex) => {
+    setShowDeleteModal(true);
-        const blocosDoDia = disponibilidades
+  };
-          .filter((d) => d.weekday === weekdayIndex && d.active !== false)
+
-          .map((d) => ({
+  const handleCloseDeleteModal = () => {
-            id: d.id,
+    setShowDeleteModal(false);
-            inicio: d.start_time ? d.start_time.substring(0, 5) : "07:00",
+    setSelectedDisponibilidadeId(null);
-            termino: d.end_time ? d.end_time.substring(0, 5) : "17:00",
+  };
-            isNew: false,
+
-            slot_minutes: d.slot_minutes || 30,
+  const disponibilidadesAgrupadas = useMemo(() => {
-            appointment_type: d.appointment_type || "presencial",
+    const agrupadas = {};
-            active: d.active !== false,
+    doctors.forEach((doctor) => {
-          }));
+      agrupadas[doctor.id] = {
-        return {
+        doctor_id: doctor.id,
-          dia,
+        doctor_name: doctor.full_name || doctor.name,
-          weekday: weekdayIndex,
+        disponibilidades: [],
-          isChecked: blocosDoDia.length > 0,
+      };
-          blocos: blocosDoDia,
+    });
-        };
+    disponibilidades.forEach((disp) => {
-      }),
+      if (agrupadas[disp.doctor_id]) agrupadas[disp.doctor_id].disponibilidades.push(disp);
-    [disponibilidades]
+    });
-  );
+    Object.values(agrupadas).forEach((grupo) => {
+      if (grupo.disponibilidades.length === 0) {
+        grupo.disponibilidades.push({
+          id: `empty-${grupo.doctor_id}`,
+          doctor_id: grupo.doctor_id,
+          doctor_name: grupo.doctor_name,
+          is_empty: true,
+        });
+      }
+    });
+    let resultado = Object.values(agrupadas);
+    if (searchTerm) resultado = resultado.filter((grupo) => grupo.doctor_name.toLowerCase().includes(searchTerm.toLowerCase()));
+    return resultado;
+  }, [disponibilidades, doctors, searchTerm]);
+
+  const formatTime = (timeString) => {
+    if (!timeString) return "";
+    return timeString.includes(":") ? timeString.substring(0, 5) : timeString;
+  };
+
+  const getDiaSemana = (weekday) => {
+    const dias = {
+      0: "Domingo",
+      1: "Segunda",
+      2: "Terça",
+      3: "Quarta",
+      4: "Quinta",
+      5: "Sexta",
+      6: "Sábado",
+      sunday: "Domingo",
+      monday: "Segunda",
+      tuesday: "Terça",
+      wednesday: "Quarta",
+      thursday: "Quinta",
+      friday: "Sexta",
+      saturday: "Sábado",
+    };
+    const key = typeof weekday === "string" ? weekday.toLowerCase() : weekday;
+    return dias[key] || "Desconhecido";
+  };
+
+  const initialAvailabilityParaEdicao = useMemo(() => {
+    if (!editando) return [];
+    const disponibilidadesMedico = disponibilidades.filter((d) => String(d.doctor_id) === String(editando));
+    const blocosPorDia = {};
+    disponibilidadesMedico.forEach((d) => {
+      const num = typeof d.weekday === "string" ? weekdayStrToNum[d.weekday.toLowerCase()] : d.weekday;
+      if (num === undefined) return;
+      if (!blocosPorDia[num]) blocosPorDia[num] = [];
+      if (d.active !== false) {
+        blocosPorDia[num].push({
+          id: d.id,
+          inicio: formatTime(d.start_time) || "07:00",
+          termino: formatTime(d.end_time) || "17:00",
+          slot_minutes: d.slot_minutes || 30,
+          appointment_type: d.appointment_type || "presencial",
+          isNew: false,
+        });
+      }
+    });
+    const resultado = [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
+      const blocosDoDia = blocosPorDia[weekday] || [];
+      return {
+        dia: diasDaSemana[weekday],
+        weekday: weekday,
+        isChecked: blocosDoDia.length > 0,
+        blocos:
+          blocosDoDia.length > 0
+            ? blocosDoDia
+            : [
+                {
+                  id: null,
+                  inicio: "07:00",
+                  termino: "17:00",
+                  slot_minutes: 30,
+                  appointment_type: "presencial",
+                  isNew: true,
+                },
+              ],
+      };
+    });
+    return resultado;
+  }, [disponibilidades, editando]);
 
   const handleUpdateHorarios = (horariosAtualizados) => {
-    const bloco = horariosAtualizados
+    if (!editando) return;
-      .flatMap((d) => d.blocos)
+    setAvailabilityEdit(horariosAtualizados || []);
-      .find((b) => b.id === editando);
-    if (!bloco) return alert("Bloco não encontrado.");
-    const dadosAtualizados = {
-      start_time: bloco.inicio + ":00",
-      end_time: bloco.termino + ":00",
-      slot_minutes: bloco.slot_minutes,
-      appointment_type: bloco.appointment_type,
-      active: bloco.active,
-    };
-    atualizarDisponibilidade(editando, dadosAtualizados);
   };
 
   const filteredDoctors = useMemo(() => {
     if (!searchTerm) return doctors;
-    return doctors.filter((doc) =>
+    return doctors.filter((doc) => (doc.full_name || doc.name).toLowerCase().includes(searchTerm.toLowerCase()));
-      doc.name.toLowerCase().includes(searchTerm.toLowerCase())
-    );
   }, [doctors, searchTerm]);
 
-  return (
+  const handleCancelarEdicao = () => {
-    <div id="main-content">
+    setEditando(null);
-      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#333" }}>
+    setAvailabilityEdit([]);
-        Disponibilidades dos Médicos
+  };
-      </h1>
 
-      <div className="card p-3 mb-3 table-paciente-filters">
+  const handleDoctorSelect = (doctor) => {
-        <h5 className="mb-3">
+    setSearchTerm(doctor.full_name || doctor.name);
-          <i className="bi bi-funnel-fill me-2 text-primary"></i>
+    setShowSuggestions(false);
-          Filtrar por Médico
+  };
-        </h5>
+
-        <div className="position-relative">
+  const handleClearSearch = () => {
+    setSearchTerm("");
+    setShowSuggestions(false);
+  };
+
+  const getStatusBadgeClass = (disp) => {
+    if (disp.is_empty) return "status-badge status-not-configured";
+    if (disp.active === false) return "status-badge status-inactive";
+    return "status-badge status-active";
+  };
+
+  const getStatusText = (disp) => {
+    if (disp.is_empty) return "Não configurado";
+    if (disp.active === false) return "Inativa";
+    return "Ativa";
+  };
+
+  return (
+    <div className="disponibilidades-container">
+      <h1 className="disponibilidades-title">Disponibilidades dos Médicos</h1>
+
+      <div className="search-container">
+        <div className="search-input-container">
           <input
             type="text"
-            className="form-control"
+            placeholder="Buscar médico por nome..."
-            placeholder="Digite o nome do médico..."
             value={searchTerm}
             onChange={(e) => {
               setSearchTerm(e.target.value);
-              if (!e.target.value) setSelectedDoctor(null);
+              setShowSuggestions(true);
             }}
+            onFocus={() => setShowSuggestions(true)}
+            className="search-input"
           />
-          <small className="text-muted">Buscar médico para filtrar disponibilidades</small>
+          {searchTerm && (
-          
+            <button onClick={handleClearSearch} className="clear-search-btn">
-          {searchTerm && !selectedDoctor && filteredDoctors.length > 0 && (
+              ×
-            <div className="list-group position-absolute w-100" style={{ zIndex: 1000, maxHeight: '200px', overflowY: 'auto' }}>
-              {filteredDoctors.map((doc) => (
-                <button
-                  key={doc.id}
-                  type="button"
-                  className="list-group-item list-group-item-action"
-                  onClick={() => {
-                    setSelectedDoctor(doc);
-                    setSearchTerm(doc.name);
-                  }}
-                >
-                  {doc.name}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-        
-        <div className="mt-3 d-flex justify-content-between align-items-center">
-          <div>
-            {selectedDoctor && (
-              <span className="badge bg-primary me-2">
-                <i className="bi bi-person-check me-1"></i>
-                {selectedDoctor.name}
-              </span>
-            )}
-            <div className="contador-pacientes" style={{ display: 'inline-block' }}>
-              {disponibilidades.length} DISPONIBILIDADES ENCONTRADAS
-            </div>
-          </div>
-          
-          {selectedDoctor && (
-            <button
-              className="btn btn-outline-secondary btn-sm"
-              onClick={() => {
-                setSelectedDoctor(null);
-                setSearchTerm('');
-              }}
-            >
-              <i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtro
             </button>
           )}
         </div>
+
+        {showSuggestions && searchTerm && filteredDoctors.length > 0 && (
+          <div className="suggestions-dropdown">
+            {filteredDoctors.map((doc) => (
+              <div key={doc.id} onClick={() => handleDoctorSelect(doc)} className="suggestion-item">
+                {doc.full_name || doc.name}
+              </div>
+            ))}
+          </div>
+        )}
       </div>
 
       <section className="calendario-ou-filaespera">
         <div className="fila-container">
-          <h2 className="fila-titulo">
+          <h2 className="section-title">{editando ? `Editar Horários` : "Lista de Disponibilidades"}</h2>
-            {editando ? "Editar Disponibilidade" : "Lista de Disponibilidades"}{" "}
-            ({disponibilidades.length})
-          </h2>
 
-          {loading ? (
+          {doctors.length === 0 ? (
-            <p>Carregando...</p>
+            <p className="loading-text">Carregando médicos...</p>
-          ) : disponibilidades.length === 0 ? (
-            <p>Nenhuma disponibilidade encontrada.</p>
           ) : editando ? (
             <>
-              <HorariosDisponibilidade
+              <div className="edit-container">
-                initialAvailability={initialAvailabilityParaEdicao}
+                {initialAvailabilityParaEdicao.length > 0 ? (
-                onUpdate={handleUpdateHorarios}
+                  <HorariosDisponibilidade initialAvailability={initialAvailabilityParaEdicao} onUpdate={handleUpdateHorarios} onCancel={handleCancelarEdicao} />
-              />
+                ) : (
-              <button
+                  <p className="loading-text">Carregando horários para edição...</p>
-                onClick={() =>
+                )}
-                  handleUpdateHorarios(initialAvailabilityParaEdicao)
+              </div>
-                }
+
-                style={{
+              <div className="disp-buttons-container">
-                  marginTop: "20px",
+                <button
-                  padding: "10px 20px",
+                  onClick={() =>
-                  fontSize: "16px",
+                    salvarTodasDisponibilidades(editando, availabilityEdit.length > 0 ? availabilityEdit : initialAvailabilityParaEdicao)
-                  fontWeight: "bold",
+                  }
-                  borderRadius: "8px",
+                  className="disp-btn-primary"
-                  backgroundColor: "#3b82f6",
+                >
-                  color: "white",
+                  Salvar Alterações
-                  border: "none",
+                </button>
-                  cursor: "pointer",
+
-                }}
+                <button onClick={handleCancelarEdicao} className="disp-btn-danger">
-              >
+                  Cancelar
-                Salvar Alterações
+                </button>
-              </button>
+              </div>
             </>
           ) : (
-            <table className="fila-tabela">
+            <div className="doctor-group-container">
-              <thead>
+              {disponibilidadesAgrupadas.length === 0 ? (
-                <tr>
+                <p className="no-results">Nenhum médico encontrado</p>
-                  <th>Médico</th>
+              ) : (
-                  <th>Dia da Semana</th>
+                disponibilidadesAgrupadas.map((grupo) => (
-                  <th>Início</th>
+                  <div key={grupo.doctor_id} className={`doctor-group ${expandedDoctors[grupo.doctor_id] ? "expanded" : ""}`}>
-                  <th>Término</th>
+                    <div className="doctor-header" onClick={() => toggleExpandDoctor(grupo.doctor_id)}>
-                  <th>Intervalo (min)</th>
+                      <h3 className="doctor-name">
-                  <th>Tipo</th>
+                        {grupo.doctor_name}
-                  <th>Status</th>
+                        <span className="doctor-hours">({grupo.disponibilidades.filter((d) => !d.is_empty).length} horários)</span>
-                  <th>Ações</th>
+                      </h3>
-                </tr>
+                      <span className={`expand-icon ${expandedDoctors[grupo.doctor_id] ? "expanded" : ""}`}>▼</span>
-              </thead>
+                    </div>
-              <tbody>
-                {disponibilidades.map((disp) => {
-                  const medico = doctors.find((d) => d.id === disp.doctor_id);
-                  return (
-                    <tr key={disp.id}>
-                      <td>{medico ? medico.name : disp.doctor_id}</td>
-                      <td>{diasDaSemana[disp.weekday]}</td>
-                      <td>{disp.start_time}</td>
-                      <td>{disp.end_time}</td>
-                      <td>{disp.slot_minutes || 30}</td>
-                      <td>{disp.appointment_type || "presencial"}</td>
-                      <td>
-                        <span
-                          className={`badge ${
-                            disp.active === false
-                              ? "badge-inactive"
-                              : "badge-active"
-                          }`}
-                        >
-                          {disp.active === false ? "Inativa" : "Ativa"}
-                        </span>
-                      </td>
-                      <td>
-                        <div className="d-flex gap-2">
-                          <button
-                            className="btn btn-sm btn-edit"
-                            onClick={() => setEditando(disp.id)}
-                          >
-                            <i className="bi bi-pencil me-1"></i> Editar
-                          </button>
 
-                          <button
+                    {expandedDoctors[grupo.doctor_id] && (
-                            className="btn btn-sm btn-delete"
+                      <div className="doctor-content">
-                            onClick={() => {
+                        <div className="edit-btn-container">
-                              setSelectedDisponibilidadeId(disp.id);
+                          <button onClick={() => setEditando(grupo.doctor_id)} className="disp-btn-edit">
-                              setShowDeleteModal(true);
+                            {grupo.disponibilidades.some((d) => !d.is_empty) ? "Editar" : "Cadastrar Horários"}
-                            }}
-                          >
-                            <i className="bi bi-trash me-1"></i> Excluir
                           </button>
                         </div>
-                      </td>
+
-                    </tr>
+                        <div className="table-container">
-                  );
+                          <table className="disponibilidades-table">
-                })}
+                            <thead>
-              </tbody>
+                              <tr>
-            </table>
+                                <th>Dia da Semana</th>
+                                <th>Início</th>
+                                <th>Término</th>
+                                <th>Intervalo (min)</th>
+                                <th>Tipo</th>
+                                <th>Status</th>
+                                <th>Ações</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {grupo.disponibilidades.map((disp) => (
+                                <tr key={disp.id}>
+                                  <td>{disp.is_empty ? "Nenhum horário cadastrado" : getDiaSemana(disp.weekday)}</td>
+                                  <td>{disp.is_empty ? "-" : formatTime(disp.start_time)}</td>
+                                  <td>{disp.is_empty ? "-" : formatTime(disp.end_time)}</td>
+                                  <td>{disp.is_empty ? "-" : disp.slot_minutes || 30}</td>
+                                  <td>{disp.is_empty ? "-" : disp.appointment_type || "presencial"}</td>
+                                  <td>
+                                    <span className={getStatusBadgeClass(disp)}>{getStatusText(disp)}</span>
+                                  </td>
+                                  <td>
+                                    {!disp.is_empty && (
+                                      <button 
+                                        onClick={() => handleOpenDeleteModal(disp.id)} 
+                                        className="disp-btn-delete"
+                                      >
+                                        Excluir
+                                      </button>
+                                    )}
+                                  </td>
+                                </tr>
+                              ))}
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
           )}
         </div>
       </section>
@@ -375,10 +491,7 @@ const DisponibilidadesDoctorPage = () => {
                 <button
                   type="button"
                   className="btn btn-primary"
-                  onClick={() => {
+                  onClick={handleCloseDeleteModal}
-                    setShowDeleteModal(false);
-                    setSelectedDisponibilidadeId(null);
-                  }}
                 >
                   Cancelar
                 </button>
@@ -399,4 +512,4 @@ const DisponibilidadesDoctorPage = () => {
   );
 };
 
-export default DisponibilidadesDoctorPage;
+export default DisponibilidadesDoctorPage;

src/pages/DoctorEditPage.jsx

@@ -1,151 +1,333 @@
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useState, useEffect, useMemo } from "react";
-import { useParams, useSearchParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate, useLocation } from "react-router-dom";
-import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
 import DoctorForm from "../components/doctors/DoctorForm";
 import { useAuth } from "../components/utils/AuthProvider";
 import API_KEY from "../components/utils/apiKeys";
 
-const ENDPOINT_AVAILABILITY =
+const ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors";
-  "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
+const ENDPOINT_AVAILABILITY = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
 
-const DoctorEditPage = ({DictInfo}) => {
+const diasDaSemana = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
-  const { getAuthorizationHeader } = useAuth();
+const weekdayNumToStr = {
+  0: "sunday",
+  1: "monday",
+  2: "tuesday",
+  3: "wednesday",
+  4: "thursday",
+  5: "friday",
+  6: "saturday",
+};
+const weekdayStrToNum = Object.fromEntries(
+  Object.entries(weekdayNumToStr).map(([num, str]) => [str, Number(num)])
+);
+
+const EditDoctorPage = () => {
+  const { id } = useParams();
   const navigate = useNavigate();
-  const [DoctorToPUT, setDoctorPUT] = useState({});
+  const location = useLocation();
-  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const { getAuthorizationHeader } = useAuth();
+  
+  const [doctor, setDoctor] = useState(null);
+  const [availability, setAvailability] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
 
-  const Parametros = useParams();
+  const effectiveId = id;
-  const [searchParams] = useSearchParams();
- 
-  const DoctorID = "b24c88b2-1d51-4c04-8fe8-e75c3f2817d1";
-  const availabilityId = searchParams.get("availabilityId");
 
-  const [availabilityToPATCH, setAvailabilityToPATCH] = useState(null);
+  const getHeaders = () => {
-  const [mode, setMode] = useState("doctor");
+    const myHeaders = new Headers();
-  console.log("teste", DictInfo)
-
-  useEffect(() => {    
-   setDoctorPUT(DictInfo)
-  }, [DictInfo]);
-
-  const HandlePutDoctor = async () => {
     const authHeader = getAuthorizationHeader();
-
+    if (authHeader) myHeaders.append("Authorization", authHeader);
-    var myHeaders = new Headers();
-    myHeaders.append("apikey", API_KEY);
-    myHeaders.append("Authorization", authHeader);
     myHeaders.append("Content-Type", "application/json");
-
+    if (API_KEY) myHeaders.append("apikey", API_KEY);
-    var raw = JSON.stringify(DoctorToPUT);
+    myHeaders.append("Prefer", "return=representation");
-
+    return myHeaders;
-    console.log("Enviando médico para atualização (PUT):", DoctorToPUT);
-
-    var requestOptions = {
-      method: "PUT",
-      headers: myHeaders,
-      body: raw,
-      redirect: "follow",
-    };
-
-   fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DictInfo.id}`,requestOptions)
-   	.then(response => {
-      console.log(response)
-      if (response.ok) {
-        setShowSuccessModal(true)
-      }
-      return response
-    })
-    .catch(error => console.log("erro", error))
   };
 
-
+  const salvarDisponibilidades = async (doctorId, horariosAtualizados) => {
-  const HandlePatchAvailability = async (data) => {
-    const authHeader = getAuthorizationHeader();
-
-    var myHeaders = new Headers();
-    myHeaders.append("apikey", API_KEY);
-    myHeaders.append("Authorization", authHeader);
-    myHeaders.append("Content-Type", "application/json");
-
-    var raw = JSON.stringify(data);
-
-    console.log("Enviando disponibilidade para atualização (PATCH):", data);
-
-    var requestOptions = {
-      method: "PATCH",
-      headers: myHeaders,
-      body: raw,
-      redirect: "follow",
-    };
-
     try {
-      const response = await fetch(
+      const headers = getHeaders();
-        `${ENDPOINT_AVAILABILITY}?id=eq.${availabilityId}`,
+      const promises = [];
-        requestOptions
+      const currentIds = new Set();
+
+      for (const dia of horariosAtualizados) {
+        if (dia.isChecked && dia.blocos.length > 0) {
+          for (const bloco of dia.blocos) {
+            const inicio = bloco.inicio.includes(":") ? bloco.inicio : bloco.inicio + ":00";
+            const termino = bloco.termino.includes(":") ? bloco.termino : bloco.termino + ":00";
+
+            const payload = {
+              doctor_id: doctorId,
+              weekday: weekdayNumToStr[dia.weekday],
+              start_time: inicio,
+              end_time: termino,
+              slot_minutes: bloco.slot_minutes || 30,
+              appointment_type: bloco.appointment_type || "presencial",
+              active: true,
+            };
+
+            if (bloco.id && !bloco.isNew) {
+              currentIds.add(bloco.id);
+              promises.push(
+                fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${bloco.id}`, {
+                  method: "PATCH",
+                  headers,
+                  body: JSON.stringify(payload),
+                }).then((res) => {
+                  if (!res.ok) throw new Error(`Erro no PATCH: ${res.status}`);
+                  return { type: "PATCH", id: bloco.id };
+                })
+              );
+            } else {
+              promises.push(
+                fetch(ENDPOINT_AVAILABILITY, {
+                  method: "POST",
+                  headers,
+                  body: JSON.stringify(payload),
+                })
+                  .then((res) => res.json())
+                  .then((data) => {
+                     const createdItem = Array.isArray(data) ? data[0] : data;
+                     if (createdItem && createdItem.id) {
+                       return { type: "POST", id: createdItem.id };
+                     }
+                     return { type: "POST", id: null };
+                  })
+              );
+            }
+          }
+        }
+      }
+
+      const results = await Promise.all(promises);
+
+      results.forEach((res) => {
+        if (res.type === "POST" && res.id) currentIds.add(res.id);
+      });
+
+      const existingDisponibilidadesRes = await fetch(
+        `${ENDPOINT_AVAILABILITY}?doctor_id=eq.${String(doctorId)}`,
+        { method: "GET", headers }
       );
-      console.log("Resposta PATCH Disponibilidade:", response);
+      
-      alert("Disponibilidade atualizada com sucesso!");
+      if (existingDisponibilidadesRes.ok) {
+        const existingDisponibilidades = await existingDisponibilidadesRes.json();
+        
+        const deletePromises = existingDisponibilidades
+          .filter((disp) => !currentIds.has(disp.id))
+          .map((disp) =>
+            fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${disp.id}`, {
+              method: "DELETE",
+              headers,
+            })
+          );
+
+        await Promise.all(deletePromises);
+      }
+
+      const updatedResponse = await fetch(
+        `${ENDPOINT_AVAILABILITY}?doctor_id=eq.${doctorId}&order=weekday.asc,start_time.asc`,
+        { method: "GET", headers }
+      );
+
+      if (updatedResponse.ok) {
+        const updatedData = await updatedResponse.json();
+        setAvailability(updatedData);
+      }
     } catch (error) {
-      console.error("Erro ao atualizar disponibilidade:", error);
-      alert("Erro ao atualizar disponibilidade.");
       throw error;
     }
   };
 
-  return (
+  const normalizeAvailabilityForForm = (availabilityData) => {
-    <div>
+    if (!Array.isArray(availabilityData)) return [];
-      <DoctorForm
+
-        onSave={
+    const disponibilidadesMedico = availabilityData.filter((d) => 
-          mode === "availability" ? HandlePatchAvailability : HandlePutDoctor
+      String(d.doctor_id) === String(effectiveId) && d.active !== false
+    );
+    const blocosPorDia = {};
+    
+    disponibilidadesMedico.forEach((d) => {
+      const num = typeof d.weekday === "string" ? weekdayStrToNum[d.weekday.toLowerCase()] : d.weekday;
+      if (num === undefined || num === null) return;
+      if (!blocosPorDia[num]) blocosPorDia[num] = [];
+      blocosPorDia[num].push({
+        id: d.id,
+        inicio: d.start_time?.substring(0, 5) || "07:00",
+        termino: d.end_time?.substring(0, 5) || "17:00",
+        slot_minutes: d.slot_minutes || 30,
+        appointment_type: d.appointment_type || "presencial",
+        isNew: false,
+      });
+    });
+    
+    const resultado = [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
+      const blocosDoDia = blocosPorDia[weekday] || [];
+      return {
+        dia: diasDaSemana[weekday],
+        weekday: weekday,
+        isChecked: blocosDoDia.length > 0,
+        blocos:
+          blocosDoDia.length > 0
+            ? blocosDoDia
+            : [
+                {
+                  id: null,
+                  inicio: "07:00",
+                  termino: "17:00",
+                  slot_minutes: 30,
+                  appointment_type: "presencial",
+                  isNew: true,
+                },
+              ],
+      };
+    });
+    
+    return resultado;
+  };
+
+  const availabilityFormatted = useMemo(() => {
+    return normalizeAvailabilityForForm(availability);
+  }, [availability, effectiveId]);
+
+  useEffect(() => {
+    const fetchDoctorData = async () => {
+      if (!effectiveId || effectiveId === "edit") {
+        alert("ID do médico não encontrado");
+        navigate("/secretaria/medicos");
+        return;
+      }
+
+      try {
+        const doctorResponse = await fetch(`${ENDPOINT}?id=eq.${effectiveId}`, {
+          method: "GET",
+          headers: getHeaders(),
+        });
+
+        if (!doctorResponse.ok) {
+          throw new Error("Erro ao carregar dados do médico");
         }
-        formData={mode === "availability" ? availabilityToPATCH : DoctorToPUT}
+
-        setFormData={
+        const doctorData = await doctorResponse.json();
-          mode === "availability" ? setAvailabilityToPATCH : setDoctorPUT
+        if (doctorData.length === 0) {
+          throw new Error("Médico não encontrado");
         }
-        isEditingAvailability={mode === "availability"}
-      />
 
-      {showSuccessModal && (
+        setDoctor(doctorData[0]);
-        <div
-          className="modal fade show delete-modal"
-          style={{
-            display: "block",
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-          }}
-          tabIndex="-1"
-        >
-          <div className="modal-dialog modal-dialog-centered">
-            <div className="modal-content">
-              <div className="modal-header" style={{ backgroundColor: '#1e3a8a', color: 'white' }}>
-                <h5 className="modal-title">
-                  Médico Editado
-                </h5>
-              </div>
 
-              <div className="modal-body">
+        const availabilityResponse = await fetch(
-                <p className="mb-0 fs-5">
+          `${ENDPOINT_AVAILABILITY}?doctor_id=eq.${effectiveId}&order=weekday.asc,start_time.asc`, 
-                  Médico editado com sucesso!
+          {
-                </p>
+            method: "GET",
-              </div>
+            headers: getHeaders(),
+          }
+        );
 
-              <div className="modal-footer">
+        if (availabilityResponse.ok) {
-                <button
+          const availabilityData = await availabilityResponse.json();
-                  type="button"
+          setAvailability(availabilityData);
-                  className="btn btn-primary"
+        } else {
-                  onClick={() => {
+          setAvailability([]);
-                    setShowSuccessModal(false)
+        }
-                    navigate(-1)
+
-                  }}
+      } catch (error) {
-                >
+        alert("Erro ao carregar dados do médico");
-                  OK
+        navigate("/secretaria/medicos");
-                </button>
+      } finally {
-              </div>
+        setIsLoading(false);
-            </div>
+      }
+    };
+
+    if (effectiveId) {
+      fetchDoctorData();
+    }
+  }, [effectiveId, navigate]);
+
+  const handleSave = async (formData) => {
+    const { availability: updatedAvailability, ...doctorDataToSave } = formData;
+    
+    try {
+      setIsSaving(true);
+
+      const response = await fetch(`${ENDPOINT}?id=eq.${effectiveId}`, {
+        method: "PATCH",
+        headers: getHeaders(),
+        body: JSON.stringify(doctorDataToSave),
+      });
+
+      if (!response.ok) {
+        throw new Error("Erro ao salvar dados do médico");
+      }
+      
+      if (updatedAvailability && updatedAvailability.length > 0) {
+        await salvarDisponibilidades(effectiveId, updatedAvailability);
+      }
+
+      alert("Médico e horários atualizados com sucesso!");
+      navigate("/secretaria/medicos");
+
+    } catch (error) {
+      alert(`Erro ao salvar dados: ${error.message}`);
+    } finally {
+      setIsSaving(false);
+    }
+    console.log('Horários a serem salvos:', updatedAvailability);
+  };
+
+  const handleCancel = () => {
+    navigate("/secretaria/medicos");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="container mt-4">
+        <div className="d-flex justify-content-center">
+          <div className="spinner-border" role="status">
+            <span className="visually-hidden">Carregando...</span>
           </div>
         </div>
-      )}
+        <p className="text-center mt-2">
+          Carregando dados do médico ID: {effectiveId || "..."}
+        </p>
+      </div>
+    );
+  }
+
+  if (!doctor) {
+    if (!isLoading) {
+      return (
+        <div className="container mt-4">
+          <div className="alert alert-danger">
+            Médico não encontrado
+          </div>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  const formData = {
+    ...doctor,
+    availability: (doctor && doctor.availability) ? doctor.availability : availabilityFormatted,
+  };
+
+  return (
+    <div className="container mt-4">
+      <div className="row">
+        <div className="col-12">
+          <h1>Editar Médico</h1>
+          <DoctorForm
+            formData={formData}
+            setFormData={setDoctor}
+            onSave={handleSave}
+            onCancel={handleCancel}
+            isLoading={isSaving}
+            isEditing={true}
+          />
+        </div>
+      </div>
     </div>
   );
 };
 
-export default DoctorEditPage;
+export default EditDoctorPage;

src/pages/DoctorTable.jsx

@@ -435,13 +435,13 @@ function TableDoctor({setDictInfo}) {
                             <td>{medico.email || 'Não informado'}</td>
                             <td>
                               <div className="d-flex gap-2">
-                                <Link to={`details`}>
+                                <Link to={`details/${medico.id}`}>
                                   <button className="btn btn-sm btn-view" onClick={() => setDictInfo({...medico})}>
                                     <i className="bi bi-eye me-1"></i> Ver Detalhes
                                   </button>
                                 </Link>
 
-                                <Link to={`edit`}>
+                                <Link to={`edit/${medico.id}`}>
                                   <button className="btn btn-sm btn-edit" onClick={() => setDictInfo({...medico})}>
                                     <i className="bi bi-pencil me-1"></i> Editar
                                   </button>

src/pages/FinanceiroDashboard.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
-import './style/FinanceiroDashboard.css';
+import "./style/FinanceiroDashboard.css";
 
 const CONVENIOS_LIST = [
   "Particular",
@@ -8,72 +8,77 @@ const CONVENIOS_LIST = [
   "SulAmérica",
   "Unimed",
   "Cassio",
-  "Outro"
+  "Outro",
 ];
 
 function CurrencyInput({ value, onChange, label, id }) {
   const formattedValue = useMemo(() => {
     let numericValue = Number(value) || 0;
-    
+
     let stringValue = String(numericValue);
     while (stringValue.length < 3) {
-      stringValue = '0' + stringValue;
+      stringValue = "0" + stringValue;
     }
 
     const integerPart = stringValue.slice(0, -2);
     const decimalPart = stringValue.slice(-2);
-    
+
-    const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
 
     return `R$ ${formattedInteger},${decimalPart}`;
   }, [value]);
 
-  const handleKeyDown = useCallback((e) => {
+  const handleKeyDown = useCallback(
-    const key = e.key;
+    (e) => {
+      const key = e.key;
 
-    if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) {
+      if (
-      if (key === 'Backspace' || key === 'Delete') {
+        ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(key)
+      ) {
+        if (key === "Backspace" || key === "Delete") {
           e.preventDefault();
           const numericValue = value || 0;
           let newValueString = String(numericValue);
           if (newValueString.length <= 1) {
-              onChange(0);
+            onChange(0);
           } else {
-              const newNumericValue = parseInt(newValueString.slice(0, -1)) || 0;
+            const newNumericValue = parseInt(newValueString.slice(0, -1)) || 0;
-              onChange(newNumericValue);
+            onChange(newNumericValue);
           }
+        }
+        return;
+      }
+
+      if (!/^\d$/.test(key)) {
+        e.preventDefault();
+        return;
       }
-      return;
-    }
 
-    if (!/^\d$/.test(key)) {
       e.preventDefault();
-      return;
-    }
-    
-    e.preventDefault();
-    
-    const digit = key;
-    const numericValue = value || 0;
 
-    let newValueString = String(numericValue) + digit;
+      const digit = key;
-    
+      const numericValue = value || 0;
-    if (newValueString.length > 10) return; 
 
-    const newNumericValue = parseInt(newValueString);
+      let newValueString = String(numericValue) + digit;
 
-    onChange(newNumericValue);
+      if (newValueString.length > 10) return;
-  }, [value, onChange]);
+
+      const newNumericValue = parseInt(newValueString);
+
+      onChange(newNumericValue);
+    },
+    [value, onChange]
+  );
 
   return (
     <div className="form-group">
       <label htmlFor={id}>{label}</label>
-      <input 
+      <input
         id={id}
-        className="input-field currency-input" 
+        className="input-field currency-input"
-        type="text" 
+        type="text"
-        value={formattedValue} 
+        value={formattedValue}
-        onChange={() => {}} 
+        onChange={() => {}}
         onKeyDown={handleKeyDown}
         placeholder="R$ 0,00"
       />
@@ -86,12 +91,12 @@ function mockFetchPagamentos() {
     {
       id: "PAY-001",
       paciente: { nome: "Sarah Oliveira", convenio: "Unimed" },
-      valor: 20000, 
+      valor: 20000,
       forma_pagamento: "Cartão",
       data_vencimento: "2025-09-30",
       status: "pendente",
       desconto: 0,
-      observacoes: "Pagamento parcelado em 2x"
+      observacoes: "Pagamento parcelado em 2x",
     },
     {
       id: "PAY-002",
@@ -100,8 +105,8 @@ function mockFetchPagamentos() {
       forma_pagamento: "Dinheiro",
       data_vencimento: "2025-09-15",
       status: "pago",
-      desconto: 1000, 
+      desconto: 1000,
-      observacoes: ""
+      observacoes: "",
     },
     {
       id: "PAY-003",
@@ -111,18 +116,18 @@ function mockFetchPagamentos() {
       data_vencimento: "2025-09-20",
       status: "vencido",
       desconto: 0,
-      observacoes: "Não respondeu ao contato"
+      observacoes: "Não respondeu ao contato",
     },
-      {
+    {
       id: "PAY-004",
       paciente: { nome: "Carlos Almeida", convenio: "Particular" },
       valor: 10000,
       forma_pagamento: "Transferência",
       data_vencimento: "2025-09-29",
       status: "pago",
-      desconto: 500, 
+      desconto: 500,
-      observacoes: "Desconto por pagamento adiantado"
+      observacoes: "Desconto por pagamento adiantado",
-    }
+    },
   ];
 }
 
@@ -132,7 +137,11 @@ export default function FinanceiroDashboard() {
   const [query, setQuery] = useState("");
   const [filtroStatus, setFiltroStatus] = useState("Todos");
   const [novoPagamento, setNovoPagamento] = useState(false);
-  const [summary, setSummary] = useState({ totalRecebido: 0, totalAReceber: 0, totalDescontos: 0 });
+  const [summary, setSummary] = useState({
+    totalRecebido: 0,
+    totalAReceber: 0,
+    totalDescontos: 0,
+  });
 
   useEffect(() => {
     const data = mockFetchPagamentos();
@@ -141,7 +150,13 @@ export default function FinanceiroDashboard() {
 
   function formatCurrency(centavos) {
     const valorEmReais = centavos / 100;
-    return "R$ " + valorEmReais.toFixed(2).replace(".", ",").replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    return (
+      "R$ " +
+      valorEmReais
+        .toFixed(2)
+        .replace(".", ",")
+        .replace(/\B(?=(\d{3})+(?!\d))/g, ".")
+    );
   }
 
   function getValorLiquido(valor, desconto) {
@@ -149,11 +164,12 @@ export default function FinanceiroDashboard() {
   }
 
   const filteredPagamentos = useMemo(() => {
-    return pagamentos.filter(p => {
+    return pagamentos.filter((p) => {
       const q = query.toLowerCase();
       const statusOk = filtroStatus === "Todos" || p.status === filtroStatus;
-      const buscaOk = p.paciente.nome.toLowerCase().includes(q) || 
+      const buscaOk =
-                      p.id.toLowerCase().includes(q); 
+        p.paciente.nome.toLowerCase().includes(q) ||
+        p.id.toLowerCase().includes(q);
       return statusOk && buscaOk;
     });
   }, [pagamentos, query, filtroStatus]);
@@ -163,47 +179,55 @@ export default function FinanceiroDashboard() {
     let aReceber = 0;
     let descontos = 0;
 
-    filteredPagamentos.forEach(p => {
+    filteredPagamentos.forEach((p) => {
       const valorLiquido = getValorLiquido(p.valor, p.desconto);
-      if (p.status === 'pago') {
+      if (p.status === "pago") {
         recebido += valorLiquido;
         descontos += p.desconto;
       } else {
-        aReceber += p.valor; 
+        aReceber += valorLiquido;
       }
     });
 
     setSummary({
       totalRecebido: recebido,
       totalAReceber: aReceber,
-      totalDescontos: descontos
+      totalDescontos: descontos,
     });
   }, [filteredPagamentos]);
 
   function handleDelete(id) {
     if (window.confirm("Tem certeza que deseja excluir este pagamento?")) {
-      setPagamentos(prev => prev.filter(p => p.id !== id));
+      setPagamentos((prev) => prev.filter((p) => p.id !== id));
       setModalPagamento(null);
     }
   }
 
   function handleSave(pagamento) {
-    if (!pagamento.paciente.nome || !pagamento.valor || !pagamento.data_vencimento || !pagamento.paciente.convenio) {
+    if (
-        alert("Preencha Paciente, Convênio, Valor e Data de Vencimento.");
+      !pagamento.paciente.nome ||
-        return;
+      !pagamento.valor ||
+      !pagamento.data_vencimento ||
+      !pagamento.paciente.convenio
+    ) {
+      alert("Preencha Paciente, Convênio, Valor e Data de Vencimento.");
+      return;
     }
 
     if (novoPagamento) {
-      const newId = "PAY-" + (pagamentos.length + 1).toString().padStart(3, "0");
+      const newId =
-      pagamento.id = newId; 
+        "PAY-" + (pagamentos.length + 1).toString().padStart(3, "0");
-      setPagamentos(prev => [...prev, pagamento]);
+      pagamento.id = newId;
+      setPagamentos((prev) => [...prev, pagamento]);
     } else {
-      setPagamentos(prev => prev.map(p => p.id === pagamento.id ? pagamento : p));
+      setPagamentos((prev) =>
+        prev.map((p) => (p.id === pagamento.id ? pagamento : p))
+      );
     }
     setModalPagamento(null);
     setNovoPagamento(false);
   }
-  
+
   const closeModal = () => {
     setModalPagamento(null);
     setNovoPagamento(false);
@@ -212,51 +236,54 @@ export default function FinanceiroDashboard() {
   return (
     <div className="financeiro-wrap">
       <h2>Controle Financeiro</h2>
-      
+
       <div className="summary-card-container">
         <div className="summary-card green">
-            <h3>Total Recebido (Filtrado)</h3>
+          <h3>Total Recebido (Filtrado)</h3>
-            <p className="value">{formatCurrency(summary.totalRecebido)}</p>
+          <p className="value">{formatCurrency(summary.totalRecebido)}</p>
         </div>
         <div className="summary-card red">
-            <h3>Total a Receber (Filtrado)</h3>
+          <h3>Total a Receber (Filtrado)</h3>
-            <p className="value">{formatCurrency(summary.totalAReceber)}</p>
+          <p className="value">{formatCurrency(summary.totalAReceber)}</p>
         </div>
         <div className="summary-card blue">
-            <h3>Descontos Aplicados</h3>
+          <h3>Descontos Aplicados</h3>
-            <p className="value">{formatCurrency(summary.totalDescontos)}</p>
+          <p className="value">{formatCurrency(summary.totalDescontos)}</p>
         </div>
       </div>
 
-      <div className="list-page-card"> 
+      <div className="list-page-card">
-        <div style={{ display:"flex", gap:12, marginBottom:20 }}>
+        <div style={{ display: "flex", gap: 12, marginBottom: 20 }}>
-          <input 
+          <input
             className="input-field"
-            placeholder="Buscar paciente" 
+            placeholder="Buscar paciente"
-            value={query} 
+            value={query}
-            onChange={e => setQuery(e.target.value)} 
+            onChange={(e) => setQuery(e.target.value)}
             style={{ flexGrow: 1 }}
           />
-          <select className="select-field" value={filtroStatus} onChange={e => setFiltroStatus(e.target.value)}>
+          <select
+            className="select-field"
+            value={filtroStatus}
+            onChange={(e) => setFiltroStatus(e.target.value)}
+          >
             <option value="Todos">Todos</option>
             <option value="pago">Pago</option>
             <option value="pendente">Pendente</option>
             <option value="vencido">Vencido</option>
           </select>
-          <button 
+          <button
-            className="action-btn" 
+            className="btn btn-primary"
-            style={{ background: "#3b82f6", color: "#fff", borderColor: "#3b82f6" }}
+            onClick={() => {
-            onClick={() => { 
               setModalPagamento({
-                paciente: { nome:"", convenio: CONVENIOS_LIST[0] }, 
+                paciente: { nome: "", convenio: CONVENIOS_LIST[0] },
-                valor:0, 
+                valor: 0,
-                forma_pagamento:"Dinheiro",
+                forma_pagamento: "Dinheiro",
-                data_vencimento: new Date().toISOString().split('T')[0],
+                data_vencimento: new Date().toISOString().split("T")[0],
-                status:"pendente",
+                status: "pendente",
-                desconto:0, 
+                desconto: 0,
-                observacoes:""
+                observacoes: "",
-              }); 
+              });
-              setNovoPagamento(true); 
+              setNovoPagamento(true);
             }}
           >
             + Adicionar Pagamento
@@ -269,12 +296,12 @@ export default function FinanceiroDashboard() {
           <div className="table-container">
             <table>
               <thead>
-                <tr> 
+                <tr>
                   <th>Paciente</th>
                   <th>Convênio</th>
                   <th>Valor Total (R$)</th>
                   <th>Desconto (R$)</th>
-                  <th>Valor Líquido (R$)</th> 
+                  <th>Valor Líquido (R$)</th>
                   <th>Forma</th>
                   <th>Vencimento</th>
                   <th>Status</th>
@@ -282,29 +309,38 @@ export default function FinanceiroDashboard() {
                 </tr>
               </thead>
               <tbody>
-                {filteredPagamentos.map(p => (
+                {filteredPagamentos.map((p) => (
                   <tr key={p.id}>
-                    <td>{p.paciente.nome}</td>
+                    <td style={{ fontWeight: 600 }}>{p.paciente.nome}</td>
                     <td>{p.paciente.convenio}</td>
                     <td>{formatCurrency(p.valor)}</td>
                     <td>{formatCurrency(p.desconto)}</td>
-                    <td style={{ fontWeight: 600 }}>{formatCurrency(getValorLiquido(p.valor, p.desconto))}</td>
+                    <td style={{ fontWeight: 600 }}>
+                      {formatCurrency(getValorLiquido(p.valor, p.desconto))}
+                    </td>
                     <td>{p.forma_pagamento}</td>
-                    <td>{p.data_vencimento.split('-').reverse().join('/')}</td>
+                    <td>{p.data_vencimento.split("-").reverse().join("/")}</td>
-                    <td><span className={`badge ${p.status}`}>{p.status.toUpperCase()}</span></td>
                     <td>
-                      <div className="action-group"> 
+                      <span className={`badge ${p.status}`}>
-                        <button 
+                        {p.status.toUpperCase()}
-                          className="action-btn" 
+                      </span>
-                          onClick={() => { setModalPagamento({...p}); setNovoPagamento(false); }}
+                    </td>
+                    <td>
+                      <div className="action-group">
+                        <button
+                          className="btn-view"
+                          onClick={() => {
+                            setModalPagamento({ ...p });
+                            setNovoPagamento(false);
+                          }}
                         >
-                          Ver / Editar
+                          <i className="bi bi-eye me-1"></i> Ver Detalhes
                         </button>
-                        <button 
+                        <button
-                          className="action-btn delete" 
+                          className="btn-delete"
                           onClick={() => handleDelete(p.id)}
                         >
-                          Excluir
+                          <i className="bi bi-trash me-1"></i> Excluir
                         </button>
                       </div>
                     </td>
@@ -317,21 +353,38 @@ export default function FinanceiroDashboard() {
       </div>
 
       {modalPagamento && (
-        <div className="modal" onClick={(e) => e.target.classList.contains('modal') && closeModal()}>
+        <div
+          className="modal"
+          onClick={(e) => e.target.classList.contains("modal") && closeModal()}
+        >
           <div className="modal-card">
             <div className="modal-header">
-              <h2>{novoPagamento ? "Adicionar Pagamento" : `Editar Pagamento - ${modalPagamento.paciente.nome}`}</h2>
+              <h2>
-              <button className="close-btn" onClick={closeModal}>×</button>
+                {novoPagamento
+                  ? "Adicionar Pagamento"
+                  : `Editar Pagamento - ${modalPagamento.paciente.nome}`}
+              </h2>
+              <button className="close-btn" onClick={closeModal}>
+                ×
+              </button>
             </div>
-            
+
             <div className="modal-body">
               <div className="form-group">
                 <label htmlFor="paciente_nome">Paciente</label>
-                <input 
+                <input
                   id="paciente_nome"
-                  className="input-field" 
+                  className="input-field"
-                  value={modalPagamento.paciente.nome} 
+                  value={modalPagamento.paciente.nome}
-                  onChange={e => setModalPagamento({...modalPagamento, paciente:{...modalPagamento.paciente, nome:e.target.value}})} 
+                  onChange={(e) =>
+                    setModalPagamento({
+                      ...modalPagamento,
+                      paciente: {
+                        ...modalPagamento.paciente,
+                        nome: e.target.value,
+                      },
+                    })
+                  }
                 />
               </div>
 
@@ -339,13 +392,23 @@ export default function FinanceiroDashboard() {
                 <label htmlFor="convenio">Convênio</label>
                 <select
                   id="convenio"
-                  className="select-field" 
+                  className="select-field"
-                  value={modalPagamento.paciente.convenio} 
+                  value={modalPagamento.paciente.convenio}
-                  onChange={e => setModalPagamento({...modalPagamento, paciente:{...modalPagamento.paciente, convenio:e.target.value}})}
+                  onChange={(e) =>
+                    setModalPagamento({
+                      ...modalPagamento,
+                      paciente: {
+                        ...modalPagamento.paciente,
+                        convenio: e.target.value,
+                      },
+                    })
+                  }
                 >
                   <option value="">Selecione</option>
-                  {CONVENIOS_LIST.map(conv => (
+                  {CONVENIOS_LIST.map((conv) => (
-                    <option key={conv} value={conv}>{conv}</option>
+                    <option key={conv} value={conv}>
+                      {conv}
+                    </option>
                   ))}
                 </select>
               </div>
@@ -353,23 +416,32 @@ export default function FinanceiroDashboard() {
                 id="valor"
                 label="Valor da consulta (R$)"
                 value={modalPagamento.valor}
-                onChange={newValue => setModalPagamento({...modalPagamento, valor: newValue})}
+                onChange={(newValue) =>
+                  setModalPagamento({ ...modalPagamento, valor: newValue })
+                }
               />
 
               <CurrencyInput
                 id="desconto"
                 label="Desconto aplicado (R$)"
                 value={modalPagamento.desconto}
-                onChange={newValue => setModalPagamento({...modalPagamento, desconto: newValue})}
+                onChange={(newValue) =>
+                  setModalPagamento({ ...modalPagamento, desconto: newValue })
+                }
               />
-              
+
               <div className="form-group">
                 <label htmlFor="forma">Forma de pagamento</label>
-                <select 
+                <select
                   id="forma"
-                  className="select-field" 
+                  className="select-field"
-                  value={modalPagamento.forma_pagamento} 
+                  value={modalPagamento.forma_pagamento}
-                  onChange={e => setModalPagamento({...modalPagamento, forma_pagamento:e.target.value})}
+                  onChange={(e) =>
+                    setModalPagamento({
+                      ...modalPagamento,
+                      forma_pagamento: e.target.value,
+                    })
+                  }
                 >
                   <option>Dinheiro</option>
                   <option>Cartão</option>
@@ -380,22 +452,32 @@ export default function FinanceiroDashboard() {
 
               <div className="form-group">
                 <label htmlFor="vencimento">Data de vencimento</label>
-                <input 
+                <input
                   id="vencimento"
-                  className="input-field" 
+                  className="input-field"
-                  type="date" 
+                  type="date"
-                  value={modalPagamento.data_vencimento} 
+                  value={modalPagamento.data_vencimento}
-                  onChange={e => setModalPagamento({...modalPagamento, data_vencimento:e.target.value})} 
+                  onChange={(e) =>
+                    setModalPagamento({
+                      ...modalPagamento,
+                      data_vencimento: e.target.value,
+                    })
+                  }
                 />
               </div>
 
               <div className="form-group">
                 <label htmlFor="status">Status do pagamento</label>
-                <select 
+                <select
                   id="status"
-                  className="select-field" 
+                  className="select-field"
-                  value={modalPagamento.status} 
+                  value={modalPagamento.status}
-                  onChange={e => setModalPagamento({...modalPagamento, status:e.target.value})}
+                  onChange={(e) =>
+                    setModalPagamento({
+                      ...modalPagamento,
+                      status: e.target.value,
+                    })
+                  }
                 >
                   <option value="pago">Pago</option>
                   <option value="pendente">Pendente</option>
@@ -405,27 +487,30 @@ export default function FinanceiroDashboard() {
 
               <div className="form-group">
                 <label htmlFor="observacoes">Observações financeiras</label>
-                <textarea 
+                <textarea
                   id="observacoes"
-                  className="input-field" 
+                  className="input-field"
-                  rows={3} 
+                  rows={3}
-                  value={modalPagamento.observacoes} 
+                  value={modalPagamento.observacoes}
-                  onChange={e => setModalPagamento({...modalPagamento, observacoes:e.target.value})} 
+                  onChange={(e) =>
+                    setModalPagamento({
+                      ...modalPagamento,
+                      observacoes: e.target.value,
+                    })
+                  }
                 />
               </div>
-            </div>
+              <div className="modal-footer">
-
+                <button
-            <div className="modal-footer">
+                  className="btn-view"
-              <button className="action-btn" onClick={() => handleSave(modalPagamento)}>
+                  onClick={() => handleSave(modalPagamento)}
-                Salvar
+                >
-              </button>
+                  <i className="bi bi-check-circle me-1"></i> Salvar
-              <button 
+                </button>
-                className="action-btn" 
+                <button className="btn-delete" onClick={closeModal}>
-                onClick={closeModal} 
+                  <i className="bi bi-x-circle me-1"></i> Cancelar
-                style={{ borderColor: '#d1d5db', color: '#4b5563' }}
+                </button>
-              >
+              </div>
-                Cancelar
-              </button>
             </div>
           </div>
         </div>

src/pages/inicioPaciente.jsx

@@ -1,9 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import { FaCalendarAlt, FaCalendarCheck, FaFileAlt, FaUserMd, FaClock } from 'react-icons/fa';
+import {
-import { useAuth } from '../components/utils/AuthProvider';
+  FaCalendarAlt,
-import API_KEY from '../components/utils/apiKeys';
+  FaCalendarCheck,
-import './style/inicioPaciente.css';
+  FaFileAlt,
+  FaUserMd,
+  FaClock,
+} from "react-icons/fa";
+import { useAuth } from "../components/utils/AuthProvider";
+import API_KEY from "../components/utils/apiKeys";
+import "./style/inicioPaciente.css";
 
 function InicioPaciente() {
   const navigate = useNavigate();
@@ -15,7 +21,8 @@ function InicioPaciente() {
   const [pacienteId, setPacienteId] = useState(null);
 
   useEffect(() => {
-    const userId = localStorage.getItem('user_id') || localStorage.getItem('patient_id');
+    const userId =
+      localStorage.getItem("user_id") || localStorage.getItem("patient_id");
     setPacienteId(userId);
   }, []);
 
@@ -23,57 +30,63 @@ function InicioPaciente() {
     const fetchMedicos = async () => {
       try {
         const authHeader = getAuthorizationHeader();
-        
+
         const myHeaders = new Headers();
         myHeaders.append("apikey", API_KEY);
         myHeaders.append("Authorization", authHeader);
 
         const requestOptions = {
-          method: 'GET',
+          method: "GET",
           headers: myHeaders,
-          redirect: 'follow'
+          redirect: "follow",
         };
 
-        const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions);
+        const response = await fetch(
-        
+          "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors",
+          requestOptions
+        );
+
         if (response.ok) {
           const data = await response.json();
           setMedicos(data);
-          console.log(' Médicos carregados:', data.length);
+          console.log(" Médicos carregados:", data.length);
         } else {
-          console.error(' Erro ao buscar médicos:', response.status);
+          console.error(" Erro ao buscar médicos:", response.status);
         }
       } catch (error) {
-        console.error(' Erro ao buscar médicos:', error);
+        console.error(" Erro ao buscar médicos:", error);
       }
     };
 
     const fetchAgendamentos = async () => {
       try {
         const authHeader = getAuthorizationHeader();
-        
+
         const myHeaders = new Headers();
         myHeaders.append("apikey", API_KEY);
         myHeaders.append("Authorization", authHeader);
 
         const requestOptions = {
-          method: 'GET',
+          method: "GET",
           headers: myHeaders,
-          redirect: 'follow'
+          redirect: "follow",
         };
 
         // Buscar todos os agendamentos (depois filtraremos pelo paciente)
-        const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
+        const response = await fetch(
-        
+          "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments",
+          requestOptions
+        );
+
         if (response.ok) {
           const data = await response.json();
           setAgendamentos(data);
-          console.log(' Agendamentos carregados:', data.length);
+          console.log(" Agendamentos carregados:", data.length);
         } else {
-          console.error(' Erro ao buscar agendamentos:', response.status);
+          console.error(" Erro ao buscar agendamentos:", response.status);
         }
       } catch (error) {
-        console.error(' Erro ao buscar agendamentos:', error);
+        console.error(" Erro ao buscar agendamentos:", error);
       } finally {
         setLoading(false);
       }
@@ -87,44 +100,50 @@ function InicioPaciente() {
 
   useEffect(() => {
     if (agendamentos.length > 0 && medicos.length > 0) {
-      const agendamentosComNomes = agendamentos.map(agendamento => {
+      const agendamentosComNomes = agendamentos.map((agendamento) => {
-        const medico = medicos.find(m => m.id === agendamento.doctor_id);
+        const medico = medicos.find((m) => m.id === agendamento.doctor_id);
         return {
           ...agendamento,
-          nomeMedico: medico?.full_name || 'Médico não encontrado',
+          nomeMedico: medico?.full_name || "Médico não encontrado",
-          especialidadeMedico: medico?.specialty || ''
+          especialidadeMedico: medico?.specialty || "",
         };
       });
       setAgendamentosComMedicos(agendamentosComNomes);
     }
   }, [agendamentos, medicos]);
 
-  const meusAgendamentos = agendamentosComMedicos.filter(a => 
+  const meusAgendamentos = agendamentosComMedicos.filter((a) =>
     pacienteId ? a.patient_id === pacienteId : true
   );
 
   const hoje = new Date();
   hoje.setHours(0, 0, 0, 0);
-  
+
-  const agendamentosFuturos = meusAgendamentos.filter(a => {
+  const agendamentosFuturos = meusAgendamentos
-    if (!a.scheduled_at) return false;
+    .filter((a) => {
-    const dataAgendamento = new Date(a.scheduled_at);
+      if (!a.scheduled_at) return false;
-    return dataAgendamento >= hoje && a.status !== 'cancelled' && a.status !== 'completed';
+      const dataAgendamento = new Date(a.scheduled_at);
-  }).sort((a, b) => new Date(a.scheduled_at) - new Date(b.scheduled_at));
+      return (
+        dataAgendamento >= hoje &&
+        a.status !== "cancelled" &&
+        a.status !== "completed"
+      );
+    })
+    .sort((a, b) => new Date(a.scheduled_at) - new Date(b.scheduled_at));
 
   const proximasConsultas = agendamentosFuturos.length;
-  const consultasHoje = agendamentosFuturos.filter(a => {
+  const consultasHoje = agendamentosFuturos.filter((a) => {
     const dataAgendamento = new Date(a.scheduled_at);
     dataAgendamento.setHours(0, 0, 0, 0);
     return dataAgendamento.getTime() === hoje.getTime();
   }).length;
 
-  const consultasPendentes = meusAgendamentos.filter(a => 
+  const consultasPendentes = meusAgendamentos.filter(
-    a.status === 'pending' || a.status === 'requested'
+    (a) => a.status === "pending" || a.status === "requested"
   ).length;
 
-  const historicoConsultas = meusAgendamentos.filter(a => 
+  const historicoConsultas = meusAgendamentos.filter(
-    a.status === 'completed'
+    (a) => a.status === "completed"
   ).length;
 
   return (
@@ -154,17 +173,19 @@ function InicioPaciente() {
             <FaCalendarCheck className="stat-paciente-icon" />
           </div>
         </div>
-        
+
         <div className="stat-paciente-card">
           <div className="stat-paciente-info">
             <span className="stat-paciente-label">Aguardando</span>
-            <span className="stat-paciente-value">{loading ? '...' : consultasPendentes}</span>
+            <span className="stat-paciente-value">
+              {loading ? "..." : consultasPendentes}
+            </span>
           </div>
           <div className="stat-paciente-icon-wrapper purple">
             <FaClock className="stat-paciente-icon" />
           </div>
         </div>
-        
+
         <div className="stat-paciente-card">
           <div className="stat-paciente-info">
             <span className="stat-paciente-label">Realizadas</span>
@@ -179,27 +200,42 @@ function InicioPaciente() {
       <div className="quick-actions-paciente">
         <h2>Acesso Rápido</h2>
         <div className="actions-paciente-grid">
-          <div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
+          <div
+            className="action-paciente-button"
+            onClick={() => navigate("/paciente/agendamento")}
+          >
             <FaCalendarCheck className="action-paciente-icon" />
             <div className="action-paciente-info">
               <span className="action-paciente-title">Minhas Consultas</span>
-              <span className="action-paciente-desc">Ver todos os agendamentos</span>
+              <span className="action-paciente-desc">
+                Ver todos os agendamentos
+              </span>
             </div>
           </div>
-          
+
-          <div className="action-paciente-button" onClick={() => navigate('/paciente/laudo')}>
+          <div
+            className="action-paciente-button"
+            onClick={() => navigate("/paciente/laudo")}
+          >
             <FaFileAlt className="action-paciente-icon" />
             <div className="action-paciente-info">
               <span className="action-paciente-title">Meus Laudos</span>
-              <span className="action-paciente-desc">Acessar documentos médicos</span>
+              <span className="action-paciente-desc">
+                Acessar documentos médicos
+              </span>
             </div>
           </div>
-          
+
-          <div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
+          <div
+            className="action-paciente-button"
+            onClick={() => navigate("/paciente/agendamento")}
+          >
             <FaUserMd className="action-paciente-icon" />
             <div className="action-paciente-info">
               <span className="action-paciente-title">Meus Médicos</span>
-              <span className="action-paciente-desc">Ver histórico de atendimentos</span>
+              <span className="action-paciente-desc">
+                Ver histórico de atendimentos
+              </span>
             </div>
           </div>
         </div>
@@ -213,22 +249,28 @@ function InicioPaciente() {
           </div>
         ) : agendamentosFuturos.length > 0 ? (
           <div className="consultas-paciente-list">
-            {agendamentosFuturos.slice(0, 3).map(agendamento => (
+            {agendamentosFuturos.slice(0, 3).map((agendamento) => (
               <div key={agendamento.id} className="consulta-paciente-item">
                 <div className="consulta-paciente-info">
                   <div className="consulta-paciente-time-date">
                     <p className="consulta-paciente-hora">
-                      {new Date(agendamento.scheduled_at).toLocaleTimeString('pt-BR', { 
+                      {new Date(agendamento.scheduled_at).toLocaleTimeString(
-                        hour: '2-digit', 
+                        "pt-BR",
-                        minute: '2-digit' 
+                        {
-                      })}
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        }
+                      )}
                     </p>
                     <p className="consulta-paciente-data">
-                      {new Date(agendamento.scheduled_at).toLocaleDateString('pt-BR', {
+                      {new Date(agendamento.scheduled_at).toLocaleDateString(
-                        day: '2-digit',
+                        "pt-BR",
-                        month: 'short',
+                        {
-                        year: 'numeric'
+                          day: "2-digit",
-                      })}
+                          month: "short",
+                          year: "numeric",
+                        }
+                      )}
                     </p>
                   </div>
                   <div className="consulta-paciente-detalhes">
@@ -242,16 +284,25 @@ function InicioPaciente() {
                       </p>
                     )}
                   </div>
-                  <span className={`consulta-paciente-status status-${agendamento.status}`}>
+                  <span
-                    {agendamento.status === 'scheduled' ? 'Confirmado' : 
+                    className={`consulta-paciente-status status-${agendamento.status}`}
-                     agendamento.status === 'pending' ? 'Aguardando' : 
+                  >
-                     agendamento.status === 'requested' ? 'Solicitado' : agendamento.status}
+                    {agendamento.status === "scheduled"
+                      ? "Confirmado"
+                      : agendamento.status === "pending"
+                      ? "Aguardando"
+                      : agendamento.status === "requested"
+                      ? "Solicitado"
+                      : agendamento.status}
                   </span>
                 </div>
               </div>
             ))}
             {agendamentosFuturos.length > 3 && (
-              <button className="view-all-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
+              <button
+                className="view-all-paciente-button"
+                onClick={() => navigate("/paciente/agendamento")}
+              >
                 Ver todas as consultas
               </button>
             )}
@@ -260,7 +311,10 @@ function InicioPaciente() {
           <div className="no-consultas-content">
             <FaCalendarCheck className="no-consultas-icon" />
             <p>Você não tem consultas agendadas</p>
-            <button className="agendar-paciente-button" onClick={() => navigate('/paciente/agendamento/criar')}>
+            <button
+              className="agendar-paciente-button"
+              onClick={() => navigate("/paciente/agendamento/criar")}
+            >
               Agendar Consulta
             </button>
           </div>
@@ -270,4 +324,4 @@ function InicioPaciente() {
   );
 }
 
-export default InicioPaciente;
+export default InicioPaciente;

src/pages/style/Agendamento.css

@@ -57,7 +57,7 @@
   background-color: transparent;
   border: 0;
   border-bottom: 2px solid transparent;
-  padding: 12px 24px;
+  padding: 10px 12px;
   border-radius: 0;
   font-weight: 600;
   color: #718096;
@@ -108,7 +108,9 @@
   font-family: 'Inter', sans-serif;
   margin-top: 20px;
 }
+
 .calendar-info-panel { flex: 0 0 300px; border-right: 1px solid #E2E8F0; padding-right: 24px; display: flex; flex-direction: column; }
+
 .info-date-display { background-color: #EDF2F7; border-radius: 8px; padding: 12px; text-align: center; margin-bottom: 16px; }
 .info-date-display span { font-weight: 600; color: #718096; text-transform: uppercase; font-size: 0.9rem; }
 .info-date-display strong { display: block; font-size: 2.5rem; font-weight: 700; color: #2D3748; }
@@ -135,6 +137,7 @@
 .nav-buttons button { padding: 8px 12px; border-radius: 6px; border: 1px solid #CBD5E0; background-color: #fff; font-weight: 600; cursor: pointer; transition: all 0.2s; }
 .nav-buttons button:hover { background-color: #EDF2F7; }
 .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
+
 .day-header { font-weight: 600; color: #718096; text-align: center; padding: 8px 0; font-size: 0.875rem; }
 .day-cell { min-height: 110px; border-radius: 8px; border: 1px solid #E2E8F0; padding: 8px; transition: background-color 0.2s, border-color 0.2s; cursor: pointer; position: relative; }
 .day-cell span { font-weight: 600; color: #4A5568; }
@@ -181,7 +184,6 @@
     color: #C53030;
 }
 
-
 .appointment-item {
     display: flex;
     align-items: center;
@@ -193,8 +195,8 @@
 }
 
 .appointment-actions {
-    display: flex;
+  display: flex;
-    gap: 8px;
+  gap: 8px;
 }
 
 .btn-action {
@@ -221,5 +223,197 @@
     color: #fff;
 }
 .btn-action.btn-delete:hover {
-    background-color: #C53030;
+  background-color: #C53030;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 600px; 
+}
+
+@media (max-width: 768px) {
+  .busca-atendimento {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .container-btns-agenda-fila_esepera {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .btns-gerenciamento-e-consulta {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .btn-adicionar-consulta {
+    padding: 8px 12px;
+    font-size: 0.8rem;
+    white-space: normal;
+    text-align: center;
+  }
+  
+  .unidade-selecionarprofissional { 
+    flex-direction: column; 
+    align-items: stretch; 
+    gap: 12px; 
+  }
+  
+  .calendar-wrapper {
+    flex-direction: column;
+    padding: 16px;
+  }
+  
+  .calendar-info-panel {
+    border-right: none;
+    border-bottom: 1px solid #E2E8F0;
+    padding-right: 0;
+    padding-bottom: 16px;
+  }
+  
+  .calendar-grid { grid-template-columns: repeat(4, 1fr); }
+  .calendar-controls { flex-direction: column; align-items: flex-start; gap: 8px; }
+}
+@media (max-width: 576px) {
+  .calendar-grid { grid-template-columns: 1fr; } 
+  .date-indicator h2 { font-size: 1.25rem; }
+  .legend-item { font-size: 0.75rem; padding: 4px 8px; }
+  .appointment-item { flex-direction: column; align-items: stretch; gap: 8px; }
+  .appointment-actions { width: 100%; }
+  .btn-action { width: 100%; }
+}
+
+@media (max-width: 425px) {
+  .calendar-main {
+    overflow-x: auto;
+  }
+  .calendar-grid {
+    min-width: 400px;
+    grid-template-columns: repeat(7, 1fr); 
+  }
+  .day-cell {
+    min-height: 80px; 
+  }
+  
+  
+  .table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    border: 1px solid #E2E8F0;
+    border-radius: 8px;
+    margin-bottom: 16px;
+  }
+  
+  table {
+    min-width: 600px; 
+    font-size: 0.875rem; 
+  }
+  
+  table th,
+  table td {
+    padding: 8px; 
+    white-space: nowrap; 
+}
+}
+.container-btns-agenda-fila_esepera {
+  display: flex;
+  justify-content: space-between; /* abas à esquerda, botões à direita */
+  align-items: center;
+  gap: 16px;              /* opcional: espaço entre os blocos */
+  width: 100%;
+}
+
+/* garante que os botões fiquem em linha */
+.btns-gerenciamento-e-consulta {
+  display: flex;
+  gap: 8px;
+}
+
+/* em telas muito pequenas, pode empilhar verticalmente */
+@media (max-width: 768px) {
+  .container-btns-agenda-fila_esepera {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .btns-gerenciamento-e-consulta {
+    justify-content: flex-start; /* ou center se preferir */
+    flex-wrap: wrap;
+  }
+}
+/* barra de abas + botões */
+.container-btns-agenda-fila_esepera {
+  margin-bottom: 0;   /* cola com a linha de baixo */
+}
+
+/* dá só um respiro pequeno entre as abas e o conteúdo,
+   mas igual para Agenda e Fila de espera */
+.calendario-ou-filaespera {
+  margin-top: 4px;    /* aumenta um pouquinho, não 20px */
+  padding-top: 0;
+}
+
+/* se o título "Fila de Espera" estiver mais distante,
+   aproxima só o conteúdo dessa área também */
+.page-content.table-paciente-container {
+  margin-top: 4px;
+}
+/* 1) container das abas + botões: encostado no topo */
+.container-btns-agenda-fila_esepera {
+  margin-bottom: 0;
+}
+
+/* 2) sempre cria um espaçamento logo DEPOIS das abas,
+      antes de qualquer conteúdo (Agenda ou Fila) */
+.container-btns-agenda-fila_esepera + .calendario-ou-filaespera {
+  margin-top: 8px;      /* aumenta ou diminui aqui */
+  padding-top: 0;
+}
+
+/* 3) garante que o primeiro filho da section não roube/colapse margens */
+.calendario-ou-filaespera > *:first-child {
+  margin-top: 0 !important;
+}
+/* mesmos blocos azuis e quadrados */
+.btn-consulta-paciente {
+  display: inline-flex;
+  align-items: center;       /* alinha ícone + texto verticalmente */
+  justify-content: center;
+  gap: 6px;                  /* espaço entre ícone e texto */
+  padding: 10px 22px;        /* altura/largura parecidas com os azuis */
+  border-radius: 6px;        /* se os outros forem 6px, mantém igual */
+  font-weight: 500;
+  border: none;
+}
+
+/* garante mesma cor dos blocos da secretaria */
+.btn-consulta-paciente.btn-primary {
+  background-color: #1d4ed8;   /* azul escuro do primeiro bloco */
+}
+
+/* se quiser hover igual */
+.btn-consulta-paciente.btn-primary:hover {
+  background-color: #1437a3;
+}
+.btn-consulta-paciente {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 22px;
+  border-radius: 6px;
+  font-weight: 500;
+  border: none;
 }

src/pages/style/DisponibilidadesDoctorPage.css

@@ -0,0 +1,394 @@
+.disponibilidades-container {
+    padding: 20px;
+    background: #f5f7fa;
+    min-height: 100vh;
+}
+
+.disponibilidades-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #2c3e50;
+    margin-bottom: 20px;
+}
+
+.search-container {
+    margin: 10px 0 25px 0;
+    position: relative;
+    background-color: white;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    border: 1px solid #e1e8ed;
+}
+
+.search-input-container {
+    position: relative;
+}
+
+.search-input {
+    border: 1px solid #dce1e6;
+    border-radius: 6px;
+    padding: 10px 40px 10px 12px;
+    width: 100%;
+    font-size: 14px;
+    box-sizing: border-box;
+    transition: border-color 0.2s;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: #3498db;
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+}
+
+.clear-search-btn {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    color: #7f8c8d;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+}
+
+.clear-search-btn:hover {
+    background-color: #f8f9fa;
+    color: #e74c3c;
+}
+
+.suggestions-dropdown {
+    border: 1px solid #e1e8ed;
+    border-radius: 6px;
+    background-color: white;
+    position: absolute;
+    z-index: 1000;
+    width: calc(100% - 30px);
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    left: 15px;
+    right: 15px;
+}
+
+.suggestion-item {
+    padding: 10px 12px;
+    cursor: pointer;
+    border-bottom: 1px solid #f8f9fa;
+    transition: background-color 0.2s;
+    font-size: 14px;
+    color: #2c3e50;
+}
+
+.suggestion-item:hover {
+    background-color: #f8f9fa;
+}
+
+.suggestion-item:last-child {
+    border-bottom: none;
+}
+
+/* Collapsible Styles */
+.doctor-group {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    margin-bottom: 8px;
+    overflow: hidden;
+    border: 1px solid #e1e8ed;
+}
+
+.doctor-header {
+    padding: 16px 20px;
+    background-color: #f1f3f5;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.2s;
+    border-bottom: 1px solid #e1e8ed;
+}
+
+.doctor-header:hover {
+    background-color: #e9ecef;
+}
+.doctor-name {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #2c3e50;
+    margin: 0;
+}
+
+.doctor-hours {
+    font-size: 0.9rem;
+    font-weight: normal;
+    color: #7f8c8d;
+    margin-left: 8px;
+}
+
+.expand-icon {
+    font-size: 1rem;
+    color: #7f8c8d;
+    transform: rotate(0deg);
+    transition: transform 0.3s ease;
+}
+
+.expand-icon.expanded {
+    transform: rotate(180deg);
+}
+
+.doctor-content {
+    padding: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+}
+
+.doctor-group.expanded .doctor-content {
+    max-height: 5000px;
+}
+
+/* Table Styles */
+.table-container {
+    overflow-x: auto;
+    padding: 0 10px 10px 10px;
+}
+
+.disponibilidades-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+    background-color: white;
+}
+
+.disponibilidades-table thead {
+    background-color: #f8f9fa;
+}
+
+.disponibilidades-table thead th {
+    padding: 6px 16px;
+    text-align: left;
+    font-weight: 600;
+    color: #2c3e50;
+    border-bottom: 1px solid #e1e8ed;
+    font-size: 0.875rem;
+}
+
+.disponibilidades-table tbody tr {
+    transition: background-color 0.2s;
+    border-bottom: 1px solid #f1f3f5;
+}
+
+.disponibilidades-table tbody tr:last-child {
+    border-bottom: none;
+}
+
+.disponibilidades-table tbody tr:hover {
+    background-color: #f8f9fa;
+}
+
+.disponibilidades-table td {
+    padding: 12px 16px;
+    color: #495057;
+    border-bottom: 1px solid #f1f3f5;
+}
+
+/* Status Badges */
+.status-badge {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: white;
+    display: inline-block;
+    text-align: center;
+    min-width: 80px;
+}
+
+.status-active {
+    background-color: #27ae60;
+}
+
+@media (max-width: 576px) {
+    .disponibilidades-container { padding: 12px; }
+    .disponibilidades-title { font-size: 1.25rem; }
+    .search-container { padding: 12px; }
+    .doctor-header { padding: 12px; }
+    .doctor-name { font-size: 1rem; }
+    .doctor-hours { display: none; }
+    .expand-icon { font-size: 0.9rem; }
+    .table-container { padding: 0 6px 6px 6px; }
+    .disponibilidades-table thead th { padding: 6px 8px; }
+    .disponibilidades-table td { padding: 10px 8px; font-size: 0.8125rem; }
+    .disponibilidades-table thead th:nth-child(4),
+    .disponibilidades-table thead th:nth-child(5),
+    .disponibilidades-table thead th:nth-child(7),
+    .disponibilidades-table tbody td:nth-child(4),
+    .disponibilidades-table tbody td:nth-child(5),
+    .disponibilidades-table tbody td:nth-child(7) {
+        display: none;
+    }
+    .disp-buttons-container { flex-direction: column; gap: 10px; }
+    .disp-btn-primary, .disp-btn-danger { width: 100%; }
+    .suggestions-dropdown { width: calc(100% - 30px); left: 15px; right: 15px; }
+}
+
+.status-inactive {
+    background-color: #e74c3c;
+}
+
+.status-not-configured {
+    background-color: #7f8c8d;
+}
+
+/* Buttons */
+.edit-btn-container {
+    padding: 8px 10px 0px 10px; 
+    background-color: #f8f9fa;
+}
+
+.disp-btn-edit {
+    background-color: #ffe8a1;
+    color: #2c3e50;
+    border: 1px solid #f0d860;
+    border-radius: 6px;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 0.875rem;
+    transition: all 0.2s;
+}
+
+.disp-btn-edit:hover {
+    background-color: #ffcc00;
+    border-color: #e6b800;
+}
+
+.disp-btn-delete {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+    border-radius: 4px;
+    padding: 6px 12px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 0.75rem;
+    transition: all 0.2s;
+}
+
+.disp-btn-delete:hover {
+    background-color: #f1b0b7;
+    border-color: #e89ca6;
+}
+
+/* Edit Mode Styles */
+.edit-container {
+    background-color: white;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e1e8ed;
+}
+
+.disp-buttons-container {
+    display: flex;
+    gap: 12px;
+    margin-top: 20px;
+    justify-content: flex-start;
+}
+
+.disp-btn-primary {
+    padding: 10px 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: 6px;
+    background-color: #3498db;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.disp-btn-primary:hover {
+    background-color: #2980b9;
+}
+
+.disp-btn-danger {
+    padding: 10px 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: 6px;
+    background-color: #fa273c;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.disp-btn-danger:hover {
+    background-color: #f41936;
+}
+
+/* Section Titles */
+.section-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #2c3e50;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #e1e8ed;
+}
+
+/* Loading and Empty States */
+.loading-text, .no-results {
+    text-align: center;
+    padding: 40px 20px;
+    color: #7f8c8d;
+    font-size: 1rem;
+}
+
+.no-results {
+    background-color: white;
+    border-radius: 8px;
+    margin: 20px 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .disponibilidades-container {
+        padding: 16px;
+    }
+    
+    .disponibilidades-table {
+        font-size: 0.75rem;
+    }
+    
+    .disponibilidades-table th,
+    .disponibilidades-table td {
+        padding: 8px 12px;
+    }
+    
+    .doctor-header {
+        padding: 12px 16px;
+    }
+    
+    .disp-buttons-container {
+        flex-direction: column;
+    }
+    
+    .disp-btn-primary,
+    .disp-btn-danger {
+        width: 100%;
+    }
+}

src/pages/style/FilaEspera.css

@@ -190,6 +190,12 @@ html, body {
 }
 
 /* ===== Fila de Espera ===== */
+
+@media (max-width: 992px) {
+  .fila-container {
+    overflow-x: auto;
+  }
+}
 .fila-container {
   width: 100%;
   max-width: none;
@@ -256,6 +262,15 @@ html, body {
     font-size: 1.5rem;
   }
 }
+@media (max-width: 576px) {
+  .unidade-selecionarprofissional { flex-direction: column; gap: 10px; }
+  .unidade-selecionarprofissional input,
+  .unidade-selecionarprofissional select { width: 100%; margin-left: 0; }
+  .busca-fila-espera { position: static; width: 100%; margin-bottom: 8px; }
+  .fila-header { height: auto; flex-direction: column; gap: 8px; }
+  .btns-e-legenda-container { flex-direction: column; gap: 10px; }
+  .legenda-tabela { justify-content: center; flex-wrap: wrap; }
+}
 .fila-header {
   position: relative;
   display: flex;
@@ -277,6 +292,13 @@ html, body {
   transition: border-color 0.2s;
 }
 
+@media (max-width: 768px) {
+  .busca-fila-espera {
+    width: 100%;
+    position: static;
+  }
+}
+
 .busca-fila-espera:focus {
   border-color: #888;
 }

src/pages/style/FinanceiroDashboard.css

@@ -21,6 +21,12 @@
     margin-bottom: 10px; 
 }
 
+@media (max-width: 1200px) {
+    .summary-card {
+        min-width: 180px;
+    }
+}
+
 .summary-card {
     flex: 1; 
     min-width: 200px; 
@@ -39,6 +45,7 @@
     margin: 0 0 8px 0;
     font-size: 14px;
     font-weight: 500;
+    color: #fff;
     opacity: 0.9;
 }
 
@@ -107,43 +114,87 @@
 }
 
 /* Botões de ação */
-.action-group {
+
-    display: flex;
+.btn-view {
-    gap: 8px;
+  background-color: #E6F2FF !important;
-    align-items: center;
+  color: #004085 !important;
+  border: 1px solid #B8D4F0 !important;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
 }
 
-.action-btn {
+.btn-view:hover {
-    cursor: pointer;
+  background-color: #D1E7FF !important;
-    padding: 6px 12px;
+  border-color: #9EC5FE !important;
-    border-radius: 6px;
-    border: 1px solid #d7e6fb;
-    background: #fff;
-    transition: all 0.2s ease;
-    font-size: 13px;
 }
 
-.action-btn:hover {
+.btn-edit {
-    background: #f6f9fc;
+  background-color: #FFF3CD !important;
-    border-color: #93c5fd;
+  color: #856404 !important;
+  border: 1px solid #FFEAA7 !important;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
 }
 
-.action-btn.delete {
+.btn-edit:hover {
-    border-color: #fca5a5;
+  background-color: #FFEEBA !important;
-    color: #b91c1c;
+  border-color: #FFE087 !important;
 }
 
-.action-btn.delete:hover {
+.btn-delete:hover {
-    background: #fee2e2;
+  background-color: #F1B0B7 !important;
-    border-color: #ef4444;
+  border-color: #ED969E !important;
+}
+.btn-delete {
+  background-color: #F8D7DA !important;
+  color: #721C24 !important;
+  border: 1px solid #F5C6CB !important;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
+}
+
+html[data-bs-theme="dark"] .btn-view {
+  background-color: #1e3a8a !important;
+  color: #e0e0e0 !important;
+  border-color: #374151 !important;
+}
+
+html[data-bs-theme="dark"] .btn-edit {
+  background-color: #78350f !important;
+  color: #fef3c7 !important;
+  border-color: #374151 !important;
+}
+
+html[data-bs-theme="dark"] .btn-delete {
+  background-color: #7f1d1d !important;
+  color: #fee2e2 !important;
+  border-color: #374151 !important;
 }
 
 /* Badges de status */
 .badge {
     display: inline-block;
-    padding: 4px 10px;
+    padding: 8px 18px !important;
     border-radius: 9999px;
-    font-size: 12px;
+    font-size: 14px !important;
     font-weight: 600;
     text-transform: uppercase;
 }
@@ -182,12 +233,18 @@
     padding: 24px;
     width: 100%;
     max-width: 550px;
-    max-height: 90vh;
+    max-height: 85vh; 
-    overflow-y: auto;
     box-sizing: border-box;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
 }
 
+@media (max-width: 576px) {
+    .modal-card {
+        padding: 16px;
+        max-height: 95vh;
+    }
+}
+
 .modal-header {
     display: flex;
     justify-content: space-between;
@@ -198,7 +255,7 @@
 .modal-header h2 {
     font-size: 20px;
     font-weight: 700;
-    color: #1f2937;
+    color: #fff;
     margin: 0;
 }
 
@@ -208,6 +265,12 @@
     gap: 16px;
 }
 
+.modal-card .input-field,
+.modal-card .select-field,
+.modal-card textarea {
+    width: 100%;
+}
+
 .form-group {
     display: flex;
     flex-direction: column;
@@ -241,12 +304,23 @@
     gap: 10px;
     margin-top: 24px;
 }
+.input-field,
+.select-field,
+textarea {
+    padding: 10px 12px;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    box-sizing: border-box;
+    font-size: 14px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    background-color: #fff;
+}
+
 
 /* Inputs e selects */
 .input-field,
 .select-field,
 textarea {
-    width: 100%;
     padding: 10px 12px;
     border: 1px solid #d1d5db;
     border-radius: 8px;
@@ -269,6 +343,26 @@ textarea {
     min-height: 80px;
 }
 
+.financeiro-wrap .input-field:not(.modal-card *),
+.financeiro-wrap .select-field:not(.modal-card *),
+.financeiro-wrap textarea:not(.modal-card *) {
+    width: 30%;
+}
+
+@media (max-width: 768px) {
+    .financeiro-wrap .input-field:not(.modal-card *),
+    .financeiro-wrap .select-field:not(.modal-card *),
+    .financeiro-wrap textarea:not(.modal-card *) {
+        width: 100%;
+    }
+}
+
+.modal-card .input-field,
+.modal-card .select-field,
+.modal-card textarea {
+    width: 100%;
+}
+
 /* Mensagem quando não há pagamentos */
 .empty {
     text-align: center;
@@ -366,4 +460,4 @@ html[data-bs-theme="dark"] textarea:focus {
     border-color: #3b82f6;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
     outline: none;
-}
+}

src/pages/style/Inicio.css

@@ -1,3 +1,134 @@
+/* Container Principal */
+
+/* Responsividade */
+@media (max-width: 1200px) {
+    .dashboard-container {
+        padding: 1.5rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .dashboard-container {
+        padding: 1rem;
+    }
+
+    .dashboard-header h1 {
+        font-size: 1.5rem;
+    }
+
+    .dashboard-header p {
+        margin-bottom: 1.5rem;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr 1fr; /* 2 colunas em tablets */
+        gap: 1rem;
+    }
+
+    .stat-value {
+        font-size: 1.5rem;
+    }
+
+    .stat-icon-wrapper {
+        width: 40px;
+        height: 40px;
+    }
+
+    .stat-icon {
+        font-size: 1rem;
+    }
+
+    .actions-grid {
+        grid-template-columns: 1fr; /* 1 coluna em tablets */
+        gap: 1rem;
+    }
+
+    .action-icon {
+        font-size: 1.8rem;
+    }
+
+    .action-title {
+        font-size: 0.9rem;
+    }
+
+    .appointments-section {
+        padding: 1.5rem;
+    }
+
+    .agendamento-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .agendamento-time-date {
+        flex-direction: row;
+        gap: 1rem;
+        min-width: auto;
+    }
+
+    .agendamento-detalhes {
+        min-width: auto;
+    }
+}
+
+@media (max-width: 576px) {
+    .dashboard-container {
+        padding: 0.5rem;
+    }
+
+    .dashboard-header h1 {
+        font-size: 1.3rem;
+    }
+
+    .dashboard-header p {
+        margin-bottom: 1rem;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr; /* 1 coluna em celulares */
+    }
+
+    .stat-card {
+        padding: 1rem;
+    }
+
+    .stat-value {
+        font-size: 1.3rem;
+    }
+
+    .action-button {
+        padding: 1rem;
+    }
+
+    .appointments-section {
+        padding: 1rem;
+    }
+
+    .agendamento-item {
+        padding: 0.75rem 1rem;
+    }
+
+    .agendamento-hora {
+        font-size: 1.1rem;
+    }
+
+    .agendamento-data {
+        font-size: 0.7rem;
+    }
+
+    .agendamento-paciente,
+    .agendamento-medico {
+        font-size: 0.85rem;
+    }
+
+    .manage-button,
+    .view-all-button {
+        padding: 0.6rem 1.2rem;
+        font-size: 0.8rem;
+    }
+}
+
 /* Container Principal */
 .dashboard-container {
     padding: 2rem;
@@ -70,10 +201,10 @@
 }
 
 /* Cores dos ícones */
-.stat-icon-wrapper.blue { background-color: #5d5dff; }
+.stat-icon-wrapper.blue { background-color: #1D3B88; }
-.stat-icon-wrapper.green { background-color: #30d158; }
+.stat-icon-wrapper.green { background-color: #399CE5; }
-.stat-icon-wrapper.purple { background-color: #a272ff; }
+.stat-icon-wrapper.purple { background-color: #5F5DF2; }
-.stat-icon-wrapper.orange { background-color: #f1952e; }
+.stat-icon-wrapper.orange { background-color: #051AFF; }
 
 /* Seção de Ações Rápidas */
 .quick-actions h2 {

src/pages/style/TableDoctor.css

@@ -2,6 +2,17 @@
   line-height: 2.5;
 }
 
+/* Adiciona responsividade para a tabela */
+@media (max-width: 992px) {
+  .table-doctor-card {
+    overflow-x: auto;
+  }
+}
+
+.table-doctor-container {
+  line-height: 2.5;
+}
+
 .table-doctor-card {
   border: none;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
@@ -160,6 +171,17 @@
   gap: 0.75rem;
 }
 
+@media (max-width: 576px) {
+  .table-doctor-card .card-header { padding: 0.75rem 1rem; }
+  .table-doctor-table th, .table-doctor-table td { padding: 8px 6px; }
+  .table-doctor-table thead th:nth-child(2),
+  .table-doctor-table thead th:nth-child(4),
+  .table-doctor-table tbody td:nth-child(2),
+  .table-doctor-table tbody td:nth-child(4) { display: none; }
+  .filter-buttons-container { width: 100%; }
+  .filter-btn { width: 100%; }
+}
+
 @media (max-width: 768px) {
   .table-doctor-table {
     font-size: 0.875rem;

src/pages/style/TablePaciente.css

@@ -2,6 +2,17 @@
   line-height: 2.5;
 }
 
+/* Adiciona responsividade para a tabela */
+@media (max-width: 992px) {
+  .table-paciente-card {
+    overflow-x: auto;
+  }
+}
+
+.table-paciente-container {
+  line-height: 2.5;
+}
+
 .table-paciente-card {
   border: none;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
@@ -337,4 +348,14 @@
   font-size: 0.75em;
   padding: 0.4em 0.65em;
   margin-bottom: 0.25rem;
+}
+
+@media (max-width: 576px) {
+  .table-paciente-card .card-header { padding: 0.75rem 1rem; }
+  .table-paciente-table th, .table-paciente-table td { padding: 8px 6px; }
+  .table-paciente-table thead th:nth-child(2),
+  .table-paciente-table thead th:nth-child(4),
+  .table-paciente-table tbody td:nth-child(2),
+  .table-paciente-table tbody td:nth-child(4) { display: none; }
+  .table-paciente-filters .btn-sm { width: 100%; }
 }

src/pages/style/inicioPaciente.css

@@ -25,7 +25,7 @@
 /* Estatísticas - Paciente */
 .stats-paciente-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
     gap: 1.5rem;
     margin-bottom: 2.5rem;
 }
@@ -81,10 +81,10 @@
 }
 
 /* Cores dos ícones - Paciente */
-.stat-paciente-icon-wrapper.blue { background-color: #5d5dff; }
+.stat-paciente-icon-wrapper.blue { background-color: #051AFF; }
-.stat-paciente-icon-wrapper.green { background-color: #30d158; }
+.stat-paciente-icon-wrapper.green { background-color: #5F5DF2; }
 .stat-paciente-icon-wrapper.purple { background-color: #a272ff; }
-.stat-paciente-icon-wrapper.orange { background-color: #f1952e; }
+.stat-paciente-icon-wrapper.orange { background-color: #0065FF; }
 
 /* Ações Rápidas - Paciente */
 .quick-actions-paciente h2 {
@@ -96,7 +96,7 @@
 
 .actions-paciente-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
     gap: 1.5rem;
     margin-bottom: 2.5rem;
 }
@@ -180,7 +180,7 @@
     display: flex;
     align-items: center;
     gap: 2rem;
-    flex-wrap: wrap;
+    flex-wrap: wrap; 
 }
 
 .consulta-paciente-time-date {
@@ -432,14 +432,6 @@ html[data-bs-theme="dark"] .view-all-paciente-button:hover {
         padding: 1rem;
     }
 
-    .stats-paciente-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .actions-paciente-grid {
-        grid-template-columns: 1fr;
-    }
-
     .consulta-paciente-info {
         flex-direction: column;
         align-items: flex-start;
@@ -451,4 +443,4 @@ html[data-bs-theme="dark"] .view-all-paciente-button:hover {
         flex-direction: row;
         justify-content: space-around;
     }
-}
+}

src/perfis/Perfil_medico/PerfilMedico.jsx

@@ -9,6 +9,7 @@ import Chat from "../../PagesMedico/Chat";
 import DoctorItems from "../../data/sidebar-items-medico.json";
 import FormNovoRelatorio from "../../PagesMedico/FormNovoRelatorio";
 import EditPageRelatorio from "../../PagesMedico/EditPageRelatorio";
+import NovoRelatorioAudio from "../../PagesMedico/NovoRelatorioAudio";
 import BotaoVideoChamada from '../../components/BotaoVideoChamada'; 
 
 import DoctorAgendamentoEditPage from "../../PagesMedico/DoctorAgendamentoEditPage";
@@ -25,6 +26,8 @@ function PerfilMedico() {
         <div id="main">
           <Routes>
             <Route path="/" element={<DoctorRelatorioManager />} />
+            <Route path="/novo-relatorio" element={<FormNovoRelatorio />} />
+            <Route path="/novo-relatorio-audio" element={<NovoRelatorioAudio />} />
             <Route path="/relatorios/criar" element={<FormNovoRelatorio />} />
             <Route path="/relatorios/:id/edit" element={<EditPageRelatorio />} />
             <Route path="/prontuario" element={<Prontuario />} />

src/perfis/perfil_secretaria/PerfilSecretaria.jsx

@@ -34,8 +34,8 @@ function PerfilSecretaria({ onLogout }) {
             <Route path="medicos" element={<DoctorTable setDictInfo={setDictInfo} />} />
             <Route path="pacientes/details" element={<Details DictInfo={DictInfo}/>} />
             <Route path="pacientes/edit" element={<EditPage DictInfo={DictInfo}/>} />
-            <Route path="medicos/details" element={<DoctorDetails doctor={DictInfo} />} />
+            <Route path="medicos/details/:id" element={<DoctorDetails doctor={DictInfo} />} />
-            <Route path="medicos/edit" element={<DoctorEditPage DictInfo={DictInfo} />} />
+            <Route path="medicos/edit/:id" element={<DoctorEditPage DictInfo={DictInfo} />} />
             <Route path="agendamento" element={<Agendamento setDictInfo={setDictInfo}/>} />
             <Route path="agendamento/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
             <Route path="laudo" element={<LaudoManager />} />