Atualização no codigo

2025-09-25 20:23:34 -03:00 · 2025-09-25 20:23:34 -03:00 · b09b29c77d
commit b09b29c77d
parent 445a0ffe46
7 changed files with 119 additions and 62 deletions
--- a/src/components/AgendarConsulta/FormNovaConsulta.jsx
+++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx
@ -1,4 +1,3 @@
-
 import InputMask from "react-input-mask";
 import "./style/formagendamentos.css";
 import { useState, useEffect } from "react";
@ -77,6 +76,16 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
  }

+  
+  const FormatTelefones = (valor) => {
+    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+    return digits
+      .replace(/(\d)/, '($1')
+      .replace(/(\d{2})(\d)/, '$1) $2' )
+      .replace(/(\d)(\d{4})/, '$1 $2')
+      .replace(/(\d{4})(\d{4})/, '$1-$2')
+  }
+

  const BuscarCPFnoBancodeDados = async (cpf) => {

@ -145,7 +154,13 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
        email:value
      }})

-    }else{
+    } else if(name === 'telefone'){
+      setPaciente({...paciente, contato:{
+        ...paciente.contato,
+        telefone1:FormatTelefones(value)
+      }})
+    }
+    else{
    setPaciente({...paciente,[name]:value})
    }
  }
@ -189,9 +204,7 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {

          <div className="campo-de-input">
            <label>Telefone</label>
-            <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
-              {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
-            </InputMask>
+            <input type="tel" name="telefone" placeholder="(99) 99999-9999" value={paciente.contato?.telefone1} onChange={handleChange} />
          </div>

          <div className="campo-de-input">
@ -221,7 +234,7 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
      </div>

        <h3 className="section-subtitle">Informações adicionais</h3>
-        <button type="button" className="btn-secondary">Documentos e anexos</button>
+      
          <label htmlFor="anexo-input" className="btn btn-secondary">Adicionar Anexo</label>
          <input
            type="file"
@ -351,4 +364,4 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
  );
 };

-export default FormNovaConsulta;
+export default FormNovaConsulta;
--- a/src/components/AgendarConsulta/style/formagendamentos.css
+++ b/src/components/AgendarConsulta/style/formagendamentos.css
@ -140,11 +140,12 @@ svg{

 .btn-secondary {
  margin: 10px 0;
-  background: #f3f4f6;
+  background: #4d78cd;
  padding: 8px 14px;
-  border: 1px solid #9ca3af;
+  border: 1px solid #5d739a;
  border-radius: 6px;
  cursor: pointer;
+  max-width: 200px;
 }

 .btn-secondary:hover {
@ -208,3 +209,15 @@ select[name=solicitante]{
 .campo-de-input{
  width:120%
 }
+
+.form-container {
+  width: 100%;
+  max-width: none;
+  margin: 0;                  /* >>> sem espaço para encostar no topo <<< */
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  border: 10px solid #ffffff;
+  box-sizing: border-box;
+}
--- a/src/components/doctors/DoctorForm.jsx
+++ b/src/components/doctors/DoctorForm.jsx
@ -194,15 +194,15 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
    <>
      {/* Modal de feedback */}
      {showModal && (
-        <div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
-          <div className="modal-dialog modal-dialog-centered">
+        <div className="modal fade show" style={{ display: 'block', alignItems: 'flex-start', justifyContent: 'center' }} tabIndex="-1">
+          <div className="modal-dialog" style={{ marginTop: '32px' }}>
            <div className="modal-content">
-              <div className="modal-header">
-                <h5 className="modal-title">Atenção</h5>
-                <button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
+              <div className="modal-header" style={{ backgroundColor: '#  ' }}>
+                <h5 className="modal-title text-black">Atenção</h5>
+                <button type="button" className="btn-close" style={{ filter: 'invert(0)' }} onClick={() => setShowModal(false)}></button>
              </div>
-              <div className="modal-body">
-                <p style={{ color: '#23336f', fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
+              <div className="modal-body text-black">
+                <p style={{ fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
--- a/src/components/patients/PatientForm.jsx
+++ b/src/components/patients/PatientForm.jsx
@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';

 function PatientForm({ onSave, onCancel, formData, setFormData }) {
+  const [errorModalMsg, setErrorModalMsg] = useState("");
  // Estado para controlar a exibição do modal e os dados do paciente existente
  const [showModal, setShowModal] = useState(false);
  const [showModal404, setShowModal404] = useState(false);
  const [pacienteExistente, setPacienteExistente] = useState(null);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);

  const FormatTelefones = (valor) => {
    const digits = String(valor).replace(/\D/g, '').slice(0, 11);
@ -204,7 +206,8 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {

  const handleSubmit = async () => {
    if (!formData.nome || !formData.cpf || !formData.sexo || !formData.data_nascimento){
-      alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.'); 
+      setErrorModalMsg('Por favor, preencha Nome, CPF, Gênero e data de nascimento.');
+      setShowModal404(true);
      return;
    }

@ -246,6 +249,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
        pacienteVip: formData.pacienteVip, 
      },
    });
+    setShowSuccessModal(true);
  };
  
  return (
@ -313,7 +317,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
-              <input type="date" className="form-control" name="data_nascimento" value={formData.data_nascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <input type="date" className="form-control" name="data_nascimento" value={formData.data_nascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }}  />
            </div>
            <div className="col-md-6 mb-3">
              <label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
@ -665,20 +669,41 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
        </div>
      )}

-      {/* Erro 404 */}
+      {/* Modal de sucesso ao salvar paciente */}
+      {showSuccessModal && (
+        <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
+          <div className="modal-dialog">
+            <div className="modal-content">
+              <div className="modal-header" style={{ backgroundColor: '#f2fa0dff' }}>
+                <h5 className="modal-title">Paciente salvo com sucesso!</h5>
+                <button type="button" className="btn-close btn-close-white" onClick={() => setShowSuccessModal(false)}></button>
+              </div>
+              <div className="modal-body">
+                <p style={{ color: '#111', fontSize: '1.4rem' }}>O cadastro do paciente foi realizado com sucesso.</p>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn" style={{ backgroundColor: '#1e3a8a', color: '#fff' }} onClick={() => setShowSuccessModal(false)}>
+                  Fechar
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
      {showModal404 && (
        <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
          <div className="modal-dialog">
            <div className="modal-content">
-              <div className="modal-header bg-danger text-white">
-                <h5 className="modal-title">Erro de validação</h5>
-                <button type="button" className="btn-close btn-close-white" onClick={() => setShowModal404(false)}></button>
+              <div className="modal-header" style={{ backgroundColor: '#f2fa0dff' }}>
+                <h5 className="modal-title"><span className="text-dark">Atenção</span></h5>
+                <button type="button" className="btn-close btn-close-black" onClick={() => setShowModal404(false)}></button>
              </div>
              <div className="modal-body">
-                <p style={{ fontSize: '1.4rem' }}>(Erro 404).Por favor,tente novamente mais tarde</p>
+                <p style={{ color: '#111', fontSize: '1.4rem' }}>{errorModalMsg || '(Erro 404).Por favor, tente novamente mais tarde'}</p>
              </div>
              <div className="modal-footer">
-                <button type="button" className="btn btn-secondary" onClick={() => setShowModal404(false)}>
+                <button type="button" className="btn btn-primary" onClick={() => setShowModal404(false)}>
                  Fechar
                </button>
              </div>
--- a/src/pages/DoctorTable.jsx
+++ b/src/pages/DoctorTable.jsx
@ -213,8 +213,8 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
        >
          <div className="modal-dialog modal-dialog-centered">
            <div className="modal-content">
-              <div className="modal-header bg-danger bg-opacity-25">
-                <h5 className="modal-title text-danger"> Confirmação de Exclusão</h5>
+              <div className="modal-header" style={{ backgroundColor: '#b91c1c' }}>
+                <h5 className="modal-title text-dark"> Confirmação de Exclusão</h5>
                <button
                  type="button"
                  className="btn-close"
@ -222,7 +222,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                ></button>
              </div>
              <div className="modal-body">
-                <p className="mb-0 fs-5">
+                <p className="mb-0 fs-5" style={{ color: '#111' }}>
                  Tem certeza que deseja excluir este médico?
                </p>
              </div>
--- a/src/pages/PatientCadastroManager.jsx
+++ b/src/pages/PatientCadastroManager.jsx
@ -24,10 +24,10 @@ function PatientCadastroManager( {setCurrentPage} ) {
  };

  try {
-    const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions);
+    const response = await fetch("https://mock.apidog.com/m1/1053378-0-dault/pacientes", requestOptions);
    const result = await response.json();   
    console.log("Paciente salvo no backend:", result);
-    setCurrentPage('table')
+    
    return result;
  } catch (error) {
    console.error("Erro ao salvar paciente:", error);
--- a/src/pages/Table.jsx
+++ b/src/pages/Table.jsx
@ -1,6 +1,8 @@
 import React, { useState, useEffect } from "react";

 function TablePaciente({ setCurrentPage, setPatientID }) {
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deleteId, setDeleteId] = useState(null);
  const [pacientes, setPacientes] = useState([]);
  const [search, setSearch] = useState("");
  const [filtroConvenio, setFiltroConvenio] = useState("Todos");
@ -62,24 +64,31 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
    }
  }

-  const deletePatient = async (id) => {
-    DeleteAnexo(id);
+  const handleDeleteClick = (id) => {
+    setDeleteId(id);
+    setShowDeleteModal(true);
+  };
+
+  const confirmDeletePatient = async () => {
+    if (!deleteId) return;
+    await DeleteAnexo(deleteId);
    const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
-    if (!window.confirm("Tem certeza que deseja excluir este paciente?")) return;
    await fetch(
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
+      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${deleteId}`,
      requestOptionsDelete
    )
      .then((response) => {
        if (!response.ok) {
          setShowError404(true);
-          setTimeout(() => setShowError404(false), 5000); // Esconde a mensagem após 5 segundos
+          setTimeout(() => setShowError404(false), 5000);
          throw new Error('Erro 404');
        }
        return response.text();
      })
      .then((mensage) => console.log(mensage))
      .catch((error) => console.log("Deu problema", error));
+    setShowDeleteModal(false);
+    setDeleteId(null);
  };

  const toggleVIP = async (id, atual) => {
@ -108,33 +117,9 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
      .catch((error) => console.log("Erro ao atualizar VIP:", error));
  };

-  const updateConvenio = async (id, convenio) => {
-    await fetch(
-      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
-      {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ convenio }),
-      }
-    )
-      .then((response) => {
-        if (!response.ok) {
-          setShowError404(true);
-          setTimeout(() => setShowError404(false), 5000);
-          throw new Error('Erro 404');
-        }
-        return response.json();
-      })
-      .then(() => {
-        setPacientes((prev) =>
-          prev.map((p) => (p.id === id ? { ...p, convenio } : p))
-        );
-      })
-      .catch((error) => console.log("Erro ao atualizar convênio:", error));
-  };
-
+ 
  useEffect(() => {
-    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
+    fetch("https://mock.apidog.com/m1053378-0-det/pacientes")
      .then((response) => {
        if (!response.ok) {
          setShowError404(true);
@ -173,6 +158,28 @@ function TablePaciente({ setCurrentPage, setPatientID }) {

  return (
    <>
+      {/* Modal de confirmação de exclusão */}
+      {showDeleteModal && (
+        <div className="modal fade show d-flex align-items-center justify-content-center" style={{ display: 'flex', backgroundColor: 'rgba(0,0,0,0.5)', position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', zIndex: 1050 }} tabIndex="-1">
+          <div className="modal-dialog">
+            <div className="modal-content">
+              <div className="modal-header" style={{ backgroundColor: '#b91c1c' }}>
+                <h5 className="modal-title text-dark">Confirmação de Exclusão</h5>
+                <button type="button" className="btn-close" onClick={() => setShowDeleteModal(false)}></button>
+              </div>
+              <div className="modal-body">
+                <p className="mb-0 fs-5" style={{ color: '#111' }}>
+                  Tem certeza que deseja excluir este paciente?
+                </p>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn" style={{ backgroundColor: '#1e3a8a', color: '#fff' }} onClick={() => setShowDeleteModal(false)}>Cancelar</button>
+                <button type="button" className="btn btn-danger" onClick={confirmDeletePatient}>Excluir</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
      <div className="page-heading">
        <h3>Lista de Pacientes</h3>
      </div>
@ -261,7 +268,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                        <th>CPF</th>
                        <th>Email</th>
                        <th>Telefone</th>
-                        <th>Status</th>
                        <th>Ações</th>
                      </tr>
                    </thead>
@ -317,7 +323,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                                    backgroundColor: "#F8D7DA",
                                    color: "#721C24",
                                  }}
-                                  onClick={() => deletePatient(paciente.id)}
+                                  onClick={() => handleDeleteClick(paciente.id)}
                                >
                                  <i className="bi bi-trash me-1"></i> Excluir
                                </button>