Merge branch 'main' into aperfeicoamento-do-design

src/PagesMedico/DoctorAgendamentoManager.jsx

@@ -10,15 +10,13 @@ import isBetween from 'dayjs/plugin/isBetween';
 import localeData from 'dayjs/plugin/localeData';
 import { Search, ChevronLeft, ChevronRight, Edit, Trash2, CheckCircle } from 'lucide-react';
 import "../pages/style/Agendamento.css";
-import '../pages/style/FilaEspera.css';
+import "../pages/style/FilaEspera.css";
-import Spinner from '../components/Spinner.jsx';
+import Spinner from "../components/Spinner.jsx";
 
-
+dayjs.locale("pt-br");
-dayjs.locale('pt-br');
 dayjs.extend(isBetween);
 dayjs.extend(localeData);
 
-
 const Agendamento = () => {
   const navigate = useNavigate();
   const { getAuthorizationHeader, user } = useAuth();
@@ -28,21 +26,23 @@ const Agendamento = () => {
     const ID_MEDICO_ESPECIFICO = "078d2a67-b4c1-43c8-ae32-c1e75bb5b3df";
 
   const [listaTodosAgendamentos, setListaTodosAgendamentos] = useState([]);
-    const [selectedID, setSelectedId] = useState('0');
+  const [selectedID, setSelectedId] = useState("0");
   const [filaEsperaData, setFilaEsperaData] = useState([]);
   const [FiladeEspera, setFiladeEspera] = useState(false);
   const [PageNovaConsulta, setPageConsulta] = useState(false);
-    const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({});
+  const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState(
+    {}
+  );
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [ListaDeMedicos, setListaDeMedicos] = useState([]);
   const [FiltredTodosMedicos, setFiltredTodosMedicos] = useState([]);
-    const [searchTermDoctor, setSearchTermDoctor] = useState('');
+  const [searchTermDoctor, setSearchTermDoctor] = useState("");
   const [MedicoFiltrado, setMedicoFiltrado] = useState({ id: "vazio" });
   const [motivoCancelamento, setMotivoCancelamento] = useState("");
   const [showSpinner, setShowSpinner] = useState(true);
-    const [waitlistSearch, setWaitlistSearch] = useState('');
+  const [waitlistSearch, setWaitlistSearch] = useState("");
   const [waitSortKey, setWaitSortKey] = useState(null);
-    const [waitSortDir, setWaitSortDir] = useState('asc');
+  const [waitSortDir, setWaitSortDir] = useState("asc");
   const [waitPage, setWaitPage] = useState(1);
   const [waitPerPage, setWaitPerPage] = useState(10);
   const [cacheMedicos, setCacheMedicos] = useState({});
@@ -52,7 +52,7 @@ const Agendamento = () => {
   const [agendamentoParaEdicao, setAgendamentoParaEdicao] = useState(null);
   const [quickJump, setQuickJump] = useState({
     month: currentDate.month(),
-        year: currentDate.year()
+    year: currentDate.year(),
   });
 
 
@@ -72,60 +72,84 @@ const Agendamento = () => {
       const data = await res.json();
       setListaTodosAgendamentos(data || []);
     } catch (err) {
-            console.error('Erro ao buscar agendamentos', err);
+      console.error("Erro ao buscar agendamentos", err);
       setListaTodosAgendamentos([]);
     } finally {
       setShowSpinner(false);
     }
   }, [authHeader, ID_MEDICO_ESPECIFICO]);
 
-
+  const updateAppointmentStatus = useCallback(
-    const updateAppointmentStatus = useCallback(async (id, updates) => {
+    async (id, updates) => {
       setShowSpinner(true);
       const myHeaders = new Headers();
       myHeaders.append("Authorization", authHeader);
       myHeaders.append("apikey", API_KEY);
       myHeaders.append("Content-Type", "application/json");
       myHeaders.append("Prefer", "return=representation");
-        const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };
+      const requestOptions = {
+        method: "PATCH",
+        headers: myHeaders,
+        body: JSON.stringify(updates),
+      };
       try {
-            const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions);
+        const response = await fetch(
+          `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`,
+          requestOptions
+        );
         if (response.ok) {
           await fetchAppointments();
           return true;
         } else {
-                console.error('Erro ao atualizar agendamento:', await response.text());
+          console.error(
+            "Erro ao atualizar agendamento:",
+            await response.text()
+          );
           return false;
         }
       } catch (error) {
-            console.error('Erro de rede/servidor:', error);
+        console.error("Erro de rede/servidor:", error);
         return false;
       } finally {
         setShowSpinner(false);
       }
-    }, [authHeader, fetchAppointments]);
+    },
+    [authHeader, fetchAppointments]
+  );
 
-
+  const deleteConsulta = useCallback(
-    const deleteConsulta = useCallback(async (id) => {
+    async (id) => {
-        const success = await updateAppointmentStatus(id, { status: "cancelled", cancellation_reason: motivoCancelamento, updated_at: new Date().toISOString() });
+      const success = await updateAppointmentStatus(id, {
+        status: "cancelled",
+        cancellation_reason: motivoCancelamento,
+        updated_at: new Date().toISOString(),
+      });
       if (success) {
         setShowDeleteModal(false);
         setMotivoCancelamento("");
-            setSelectedId('0');
+        setSelectedId("0");
       } else {
         alert("Falha ao cancelar a consulta.");
       }
-    }, [motivoCancelamento, updateAppointmentStatus]);
+    },
+    [motivoCancelamento, updateAppointmentStatus]
+  );
 
-
+  const confirmConsulta = useCallback(
-    const confirmConsulta = useCallback(async (id) => {
+    async (id) => {
-        const success = await updateAppointmentStatus(id, { status: "agendado", cancellation_reason: null, updated_at: new Date().toISOString() });
+      const success = await updateAppointmentStatus(id, {
+        status: "agendado",
+        cancellation_reason: null,
+        updated_at: new Date().toISOString(),
+      });
       if (success) {
-            setSelectedId('0');
+        setSelectedId("0");
       } else {
         alert("Falha ao reverter o cancelamento.");
       }
-    }, [updateAppointmentStatus]);
+    },
+    [updateAppointmentStatus]
+  );
 
     useEffect(() => {
         if(authHeader) {
@@ -158,7 +182,7 @@ const Agendamento = () => {
       const patientIdsToFetch = new Set();
       const doctorIdsToFetch = new Set();
 
-            appointmentsToShow.forEach(ag => {
+      appointmentsToShow.forEach((ag) => {
         if (ag.patient_id && !cachePacientes[ag.patient_id]) {
           patientIdsToFetch.add(ag.patient_id);
         }
@@ -181,11 +205,14 @@ const Agendamento = () => {
             }
 
       if (doctorIdsToFetch.size > 0) {
-                const query = `id=in.(${Array.from(doctorIdsToFetch).join(',')})`;
+        const query = `id=in.(${Array.from(doctorIdsToFetch).join(",")})`;
         fetchPromises.push(
-                    fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?${query}&select=id,full_name`, {
+          fetch(
-                         headers: { apikey: API_KEY, Authorization: authHeader }
+            `https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?${query}&select=id,full_name`,
-                    }).then(res => res.json())
+            {
+              headers: { apikey: API_KEY, Authorization: authHeader },
+            }
+          ).then((res) => res.json())
         );
       } else {
         fetchPromises.push(Promise.resolve(null));
@@ -194,10 +221,11 @@ const Agendamento = () => {
       const [newPatients, newDoctors] = await Promise.all(fetchPromises);
 
       const updatedPatientCache = { ...cachePacientes };
-            if (newPatients) newPatients.forEach(p => updatedPatientCache[p.id] = p);
+      if (newPatients)
+        newPatients.forEach((p) => (updatedPatientCache[p.id] = p));
 
       const updatedDoctorCache = { ...cacheMedicos };
-            if (newDoctors) newDoctors.forEach(d => updatedDoctorCache[d.id] = d);
+      if (newDoctors) newDoctors.forEach((d) => (updatedDoctorCache[d.id] = d));
 
       setCachePacientes(updatedPatientCache);
       setCacheMedicos(updatedDoctorCache);
@@ -213,22 +241,29 @@ const Agendamento = () => {
 
         const agendamentoMelhorado = {
           ...agendamento,
-                    medico_nome: medico.full_name || 'N/A',
+          medico_nome: medico.full_name || "N/A",
-                    paciente_nome: paciente.full_name || 'N/A',
+          paciente_nome: paciente.full_name || "N/A",
-                    paciente_cpf: paciente.cpf || 'N/A'
+          paciente_cpf: paciente.cpf || "N/A",
         };
 
         if (agendamento.status === "requested") {
-                    newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
+          newFila.push({
+            agendamento: agendamentoMelhorado,
+            Infos: agendamentoMelhorado,
+          });
         } else {
-                    const DiaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
+          const DiaAgendamento = dayjs(agendamento.scheduled_at).format(
+            "YYYY-MM-DD"
+          );
           if (!newDict[DiaAgendamento]) newDict[DiaAgendamento] = [];
           newDict[DiaAgendamento].push(agendamentoMelhorado);
         }
       }
 
       for (const key in newDict) {
-                newDict[key].sort((a, b) => new Date(a.scheduled_at) - new Date(b.scheduled_at));
+        newDict[key].sort(
+          (a, b) => new Date(a.scheduled_at) - new Date(b.scheduled_at)
+        );
       }
 
       setAgendamentosOrganizados(newDict);
@@ -249,7 +284,7 @@ const Agendamento = () => {
   const handleSearchMedicos = (term) => {
     setSearchTermDoctor(term);
     if (term.trim()) {
-            const filtered = ListaDeMedicos.filter(medico =>
+      const filtered = ListaDeMedicos.filter((medico) =>
         medico.nomeMedico.toLowerCase().includes(term.toLowerCase())
       );
       setFiltredTodosMedicos(filtered);
@@ -261,11 +296,11 @@ const Agendamento = () => {
 
   const generateDateGrid = () => {
     const grid = [];
-        const startOfMonth = currentDate.startOf('month');
+    const startOfMonth = currentDate.startOf("month");
-        let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
+    let currentDay = startOfMonth.subtract(startOfMonth.day(), "day");
     for (let i = 0; i < 42; i++) {
       grid.push(currentDay);
-            currentDay = currentDay.add(1, 'day');
+      currentDay = currentDay.add(1, "day");
     }
     return grid;
   };
@@ -293,46 +328,62 @@ const DeleteModal = () => (
             </div>
         </div>
     </div>
-);
+  );
-
 
   useEffect(() => {
     setQuickJump({
       month: currentDate.month(),
-            year: currentDate.year()
+      year: currentDate.year(),
     });
   }, [currentDate]);
 
   const filaEsperaFiltrada = useMemo(() => {
     if (!waitlistSearch.trim()) return filaEsperaData;
     const term = waitlistSearch.toLowerCase();
-        return filaEsperaData.filter(item =>
+    return filaEsperaData.filter(
-            (item?.Infos?.paciente_nome?.toLowerCase() || '').includes(term) ||
+      (item) =>
-            (item?.Infos?.paciente_cpf?.toLowerCase() || '').includes(term) ||
+        (item?.Infos?.paciente_nome?.toLowerCase() || "").includes(term) ||
-            (item?.Infos?.medico_nome?.toLowerCase() || '').includes(term)
+        (item?.Infos?.paciente_cpf?.toLowerCase() || "").includes(term) ||
+        (item?.Infos?.medico_nome?.toLowerCase() || "").includes(term)
     );
   }, [waitlistSearch, filaEsperaData]);
 
-    const applySortingWaitlist = useCallback((arr) => {
+  const applySortingWaitlist = useCallback(
+    (arr) => {
       if (!Array.isArray(arr) || !waitSortKey) return arr;
       const copy = [...arr];
       const key = waitSortKey;
-        const dir = waitSortDir === 'asc' ? 1 : -1;
+      const dir = waitSortDir === "asc" ? 1 : -1;
       copy.sort((a, b) => {
-            const valA = key === 'data' ? new Date(a.agendamento.scheduled_at) : (a.Infos?.[`${key}_nome`] || '');
+        const valA =
-            const valB = key === 'data' ? new Date(b.agendamento.scheduled_at) : (b.Infos?.[`${key}_nome`] || '');
+          key === "data"
+            ? new Date(a.agendamento.scheduled_at)
+            : a.Infos?.[`${key}_nome`] || "";
+        const valB =
+          key === "data"
+            ? new Date(b.agendamento.scheduled_at)
+            : b.Infos?.[`${key}_nome`] || "";
         if (valA < valB) return -1 * dir;
         if (valA > valB) return 1 * dir;
         return 0;
       });
       return copy;
-    }, [waitSortKey, waitSortDir]);
+    },
+    [waitSortKey, waitSortDir]
+  );
 
-    const filaEsperaOrdenada = useMemo(() => applySortingWaitlist(filaEsperaFiltrada), [filaEsperaFiltrada, applySortingWaitlist]);
+  const filaEsperaOrdenada = useMemo(
-    const waitTotalPages = Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
+    () => applySortingWaitlist(filaEsperaFiltrada),
+    [filaEsperaFiltrada, applySortingWaitlist]
+  );
+  const waitTotalPages =
+    Math.ceil(filaEsperaOrdenada.length / waitPerPage) || 1;
   const waitIndiceInicial = (waitPage - 1) * waitPerPage;
   const waitIndiceFinal = waitIndiceInicial + waitPerPage;
-    const filaEsperaPaginada = filaEsperaOrdenada.slice(waitIndiceInicial, waitIndiceFinal);
+  const filaEsperaPaginada = filaEsperaOrdenada.slice(
+    waitIndiceInicial,
+    waitIndiceFinal
+  );
 
   const gerarNumerosWaitPages = () => {
     const paginas = [];
@@ -344,10 +395,12 @@ const DeleteModal = () => (
     return paginas;
   };
 
-    useEffect(() => { setWaitPage(1); }, [waitlistSearch, waitSortKey, waitSortDir]);
+  useEffect(() => {
+    setWaitPage(1);
+  }, [waitlistSearch, waitSortKey, waitSortDir]);
 
   const handleQuickJumpChange = (type, value) => {
-        setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
+    setQuickJump((prev) => ({ ...prev, [type]: Number(value) }));
   };
 
   const applyQuickJump = () => {

src/pages/FinanceiroDashboard.jsx

@@ -169,7 +169,7 @@ export default function FinanceiroDashboard() {
         recebido += valorLiquido;
         descontos += p.desconto;
       } else {
-        aReceber += p.valor; 
+        aReceber += valorLiquido; 
       }
     });
 
@@ -244,8 +244,7 @@ export default function FinanceiroDashboard() {
             <option value="vencido">Vencido</option>
           </select>
           <button 
-            className="action-btn" 
+            className="btn btn-primary"
-            style={{ background: "#3b82f6", color: "#fff", borderColor: "#3b82f6" }}
             onClick={() => { 
               setModalPagamento({
                 paciente: { nome:"", convenio: CONVENIOS_LIST[0] }, 
@@ -284,7 +283,7 @@ export default function FinanceiroDashboard() {
               <tbody>
                 {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>
@@ -295,16 +294,16 @@ export default function FinanceiroDashboard() {
                     <td>
                       <div className="action-group"> 
                         <button 
-                          className="action-btn" 
+                          className="btn-view" 
                           onClick={() => { setModalPagamento({...p}); setNovoPagamento(false); }}
                         >
-                          Ver / Editar
+                          <i className="bi bi-eye me-1"></i> Ver / Editar
                         </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>
@@ -416,15 +415,14 @@ export default function FinanceiroDashboard() {
             </div>
 
             <div className="modal-footer">
-              <button className="action-btn" onClick={() => handleSave(modalPagamento)}>
+              <button className="btn-view" onClick={() => handleSave(modalPagamento)}>
-                Salvar
+                <i className="bi bi-check-circle me-1"></i> Salvar
               </button>
               <button 
-                className="action-btn" 
+                className="btn-delete" 
                 onClick={closeModal}
-                style={{ borderColor: '#d1d5db', color: '#4b5563' }}
               >
-                Cancelar
+                <i className="bi bi-x-circle me-1"></i> Cancelar
               </button>
             </div>
           </div>

src/pages/style/Agendamento.css

@@ -273,6 +273,7 @@
   justify-content: space-between;
   align-items: center;
   margin: 15px 0 20px;
+  color: #fff;
 }
 
 .tabs-agenda-fila {

src/pages/style/FinanceiroDashboard.css

@@ -39,6 +39,7 @@
     margin: 0 0 8px 0;
     font-size: 14px;
     font-weight: 500;
+    color: #fff;
     opacity: 0.9;
 }
 
@@ -107,35 +108,79 @@
 }
 
 /* Botões de ação */
-.action-group {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
 
-.action-btn {
+.btn-view {
-    cursor: pointer;
+  background-color: #E6F2FF !important;
-    padding: 6px 12px;
+  color: #004085 !important;
+  border: 1px solid #B8D4F0 !important;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
   border-radius: 6px;
-    border: 1px solid #d7e6fb;
+  cursor: pointer;
-    background: #fff;
+  transition: all 0.15s ease-in-out;
-    transition: all 0.2s ease;
+  text-decoration: none;
-    font-size: 13px;
+  display: inline-block;
+  text-align: center;
 }
 
-.action-btn:hover {
+.btn-view:hover {
-    background: #f6f9fc;
+  background-color: #D1E7FF !important;
-    border-color: #93c5fd;
+  border-color: #9EC5FE !important;
 }
 
-.action-btn.delete {
+.btn-edit {
-    border-color: #fca5a5;
+  background-color: #FFF3CD !important;
-    color: #b91c1c;
+  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:hover {
+.btn-edit:hover {
-    background: #fee2e2;
+  background-color: #FFEEBA !important;
-    border-color: #ef4444;
+  border-color: #FFE087 !important;
+}
+
+.btn-delete:hover {
+  background-color: #F1B0B7 !important;
+  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 */
@@ -182,7 +227,7 @@
     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);
@@ -208,6 +253,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 +292,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 +331,18 @@ 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%;
+}
+
+.modal-card .input-field,
+.modal-card .select-field,
+.modal-card textarea {
+    width: 100%;
+}
+
 /* Mensagem quando não há pagamentos */
 .empty {
     text-align: center;

src/pages/style/Inicio.css

@@ -70,10 +70,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 {