Verificação do cpf e colocar o erro 404

This commit is contained in:
GilenoNeto901 2025-09-24 22:17:46 -03:00
parent bd20c2d811
commit 63659b69cc
4 changed files with 6442 additions and 183 deletions

6151
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import InputMask from "react-input-mask";
function DoctorForm({ onSave, onCancel, PatientDict }) {

View File

@ -1,18 +1,98 @@
import React, { useState, useEffect } from 'react';
// componente de Modal para CPF duplicado
const DuplicatePatientModal = ({ show, onClose, onGoToDetails, patient }) => {
if (!show || !patient) {
return null;
}
const patientName = patient.nome || patient.nome_completo || 'Paciente sem nome';
const patientCpf = patient.cpf || 'Não informado';
const patientId = patient.id || 'Não informado';
const patientDob = patient.data_nascimento || 'Não informada';
const patientPhone = patient.contato?.telefone1 || 'Não informado';
const patientPhoto = patient.foto || null;
return (
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header bg-danger text-white">
<h5 className="modal-title">CPF Cadastrado</h5>
<button type="button" className="btn-close" onClick={onClose} style={{ filter: 'invert(1)' }}></button>
</div>
<div className="modal-body">
<div className="d-flex align-items-center mb-3">
{patientPhoto ? (
<img src={patientPhoto} alt="Foto do Paciente" className="rounded-circle me-3" style={{ width: '80px', height: '80px', objectFit: 'cover' }} />
) : (
<div className="rounded-circle me-3 d-flex align-items-center justify-content-center" style={{ width: '80px', height: '80px', backgroundColor: '#e9ecef', fontSize: '2rem' }}>
&#x1F464;
</div>
)}
<div>
<p className="mb-1"><strong>Nome:</strong> {patientName}</p>
<p className="mb-1"><strong>CPF:</strong> {patientCpf}</p>
<p className="mb-1"><strong>ID:</strong> {patientId}</p>
</div>
</div>
<p className="mb-1"><strong>Data de Nascimento:</strong> {patientDob}</p>
<p className="mb-1"><strong>Telefone:</strong> {patientPhone}</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-primary" onClick={onClose}>
Continuar Cadastro
</button>
<button type="button" className="btn btn-primary" onClick={() => onGoToDetails(patientId)}>
Visualizar Paciente
</button>
</div>
</div>
</div>
</div>
);
};
// Modal para Erro 404
const Error404Modal = ({ show, onClose }) => {
if (!show) {
return null;
}
return (
<div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
<div className="modal-dialog modal-dialog-centered">
<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" onClick={onClose} style={{ filter: 'invert(1)' }}></button>
</div>
<div className="modal-body">
<p className="text-danger" style={{ fontSize: '1.4rem' }}>(Erro 404). Por favor, tente novamente mais tarde.</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-primary" onClick={onClose}>
Fechar
</button>
</div>
</div>
</div>
</div>
);
};
function PatientForm({ onSave, onCancel,formData, setFormData }) {
function PatientForm({ onSave, onCancel, formData, setFormData }) {
const [showDuplicateModal, setShowDuplicateModal] = useState(false);
const [duplicatePatientData, setDuplicatePatientData] = useState(null);
const [show404Modal, setShow404Modal] = useState(false);
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{2})(\d)/, '$1) $2')
.replace(/(\d)(\d{4})/, '$1 $2')
.replace(/(\d{4})(\d{4})/, '$1-$2')
}
const ReceberRespostaAPIdoCPF = async (cpf) =>{
.replace(/(\d{4})(\d{4})/, '$1-$2');
};
const ReceberRespostaAPIdoCPF = async (cpf) => {
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
myHeaders.append("Content-Type", "application/json");
@ -28,56 +108,83 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
redirect: 'follow'
};
const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions)
const result = await response.json()
return result.data
const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions);
}
if (response.status === 404) {
throw new Error("404 Not Found");
}
const result = await response.json();
return result.data;
};
const fetchPatientById = async (id) => {
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
try {
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions);
const result = await response.json();
return result.data;
} catch (error) {
console.error("Erro ao buscar paciente por ID:", error);
return null;
}
};
const ValidarCPF = async (cpf) => {
let aviso
let Erro = false
let aviso = '';
let Erro = false;
let patientData = null;
const resutadoAPI = await ReceberRespostaAPIdoCPF(cpf)
try {
const resultadoAPI = await ReceberRespostaAPIdoCPF(cpf);
const { valido, existe, id } = resultadoAPI;
const valido = resutadoAPI.valido
const ExisteNoBancoDeDados = resutadoAPI.existe
if(valido === false){
aviso = 'CPF inválido'
Erro = true
if (!valido) {
aviso = 'CPF inválido';
Erro = true;
} else if (existe) {
aviso = 'O CPF informado já está presente no sistema.';
Erro = true;
patientData = await fetchPatientById(id);
}
} catch (e) {
if (e.message === "404 Not Found") {
setShow404Modal(true);
Erro = true;
} else {
aviso = 'Erro ao validar o CPF. Tente novamente.';
Erro = true;
}
}
else if(ExisteNoBancoDeDados === true){
aviso = 'O CPF informado já está presente no sistema'
Erro = true
}
return [Erro,aviso]
}
return { Erro, aviso, patientData };
};
const FormatCPF = (valor) => {
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})$/, '$1-$2');
}
// Estado para armazenar a URL da foto do avatar
};
const [avatarUrl, setAvatarUrl] = useState(null);
// Estado para controlar quais seções estão colapsadas
const [collapsedSections, setCollapsedSections] = useState({
dadosPessoais: true, // Alterado para true para a seção ficar aberta por padrão
dadosPessoais: true,
infoMedicas: false,
infoConvenio: false,
endereco: false,
contato: false,
});
// Função para alternar o estado de colapso de uma seção
const handleToggleCollapse = (section) => {
setCollapsedSections(prevState => ({
...prevState,
@ -95,28 +202,20 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
} else {
setFormData(prev => ({ ...prev, imc: '' }));
}
}, [formData.peso, formData.altura]);
}, [formData.peso, formData.altura, setFormData]);
const [enderecoData, setEnderecoData] = useState({});
useEffect(() => { setEnderecoData(formData.endereco || {}); }, [formData.endereco]);
const [enderecoData, setEnderecoData] = useState({})
useEffect(() => {setEnderecoData(formData.endereco || {}); console.log(enderecoData)}, [formData.endereco])
const [contato, setContato] = useState({})
useEffect(() => {setContato(formData.contato || {})}, [formData.contato])
const [contato, setContato] = useState({});
useEffect(() => { setContato(formData.contato || {}); }, [formData.contato]);
const handleChange = (e) => {
const { name, value, type, checked, files } = e.target;
console.log(formData, name)
if (type === 'checkbox') {
setFormData({ ...formData, [name]: checked });
} else if (type === 'file') {
setFormData({ ...formData, [name]: files[0] });
// Lógica para pré-visualizar a imagem no avatar
if (name === 'foto' && files[0]) {
const reader = new FileReader();
reader.onloadend = () => {
@ -124,26 +223,22 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
};
reader.readAsDataURL(files[0]);
} else if (name === 'foto' && !files[0]) {
setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado
}}
setAvatarUrl(null);
}
}
if (name.includes('cpf')) {
setFormData({...formData, cpf:FormatCPF(value) });
setFormData({ ...formData, cpf: FormatCPF(value) });
} else if (name.includes('telefone')) {
let telefoneFormatado = FormatTelefones(value);
setContato(prev => ({ ...prev, [name]: telefoneFormatado }));
}else if (name === 'email') {
setContato(prev => ({ ...prev, email: value }));
}else if(name.includes('endereco')) {
} else if (name === 'email') {
setContato(prev => ({ ...prev, email: value }));
} else if (name.includes('endereco')) {
setEnderecoData(prev => ({ ...prev, [name.split('.')[1]]: value }));
}else{
} else {
setFormData({ ...formData, [name]: value });
}
}
};
const handleCepBlur = async () => {
const cep = formData.cep.replace(/\D/g, '');
if (cep.length === 8) {
@ -166,20 +261,25 @@ 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.');
if (!formData.nome || !formData.cpf || !formData.sexo || !formData.data_nascimento) {
alert('Por favor, preencha Nome, CPF, Gênero e data de nascimento.');
return;
}
const CPFinvalido = await ValidarCPF(formData.cpf)
console.log(CPFinvalido)
if(CPFinvalido[0] === true){
alert(CPFinvalido[1])
return
}
const { Erro, aviso, patientData } = await ValidarCPF(formData.cpf);
if (Erro) {
if (patientData) {
setDuplicatePatientData(patientData);
setShowDuplicateModal(true);
} else {
if (aviso) {
alert(aviso);
}
}
return;
}
onSave({
...formData,
@ -211,11 +311,11 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
numeroMatricula: formData.numeroMatricula,
validadeCarteira: formData.validadeCarteira,
validadeIndeterminada: formData.validadeIndeterminada,
pacienteVip: formData.pacienteVip,
pacienteVip: formData.pacienteVip,
},
});
};
return (
<div className="card p-3">
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
@ -230,41 +330,41 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
</h4>
<div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
<div className="row mt-3">
{/* AVATAR E INPUT DE FOTO */}
<div className="col-md-6 mb-3 d-flex align-items-center">
<div className="me-3">
{/* AVATAR E INPUT DE FOTO */}
{avatarUrl ? (
<img
src={avatarUrl}
alt="Avatar do Paciente"
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
<img
src={avatarUrl}
alt="Avatar do Paciente"
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
/>
) : (
<div
style={{
width: '100px',
height: '100px',
borderRadius: '50%',
backgroundColor: '#e0e0e0',
display: 'flex',
alignItems: 'center',
<div
style={{
width: '100px',
height: '100px',
borderRadius: '50%',
backgroundColor: '#e0e0e0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '3.5rem',
color: '#9e9e9e'
}}
>
&#x2624;
&#x2624;
</div>
)}
</div>
<div>
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
<input
type="file"
className="form-control d-none"
name="foto"
id="foto-input"
onChange={handleChange}
<input
type="file"
className="form-control d-none"
name="foto"
id="foto-input"
onChange={handleChange}
accept="image/*"
/>
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
@ -294,7 +394,7 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
</div>
<div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>CPF: *</label>
<input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} style={{ fontSize: '1.1rem' }} />
<input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div>
<div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>RG:</label>
@ -386,7 +486,6 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
</label>
</div>
</div>
{/* CAMPOS MOVIDOS */}
<div className="col-md-12 mb-3 mt-3">
<label style={{ fontSize: '1.1rem' }}>Observações:</label>
@ -395,16 +494,14 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
<div className="col-md-12 mb-3">
<label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
<div>
<label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem' }}>Escolher arquivo</label>
<label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem', background: '#9ca3af' }}>Escolher arquivo</label>
<input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
<span className="ms-2" style={{ fontSize: '1.1rem' }}>{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
</div>
</div>
</div>
</div>
</div>
{/* INFORMAÇÕES MÉDICAS */}
<div className="mb-5 p-4 border rounded shadow-sm">
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoMedicas')} style={{ fontSize: '1.8rem' }}>
@ -448,7 +545,6 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
</div>
</div>
</div>
{/* INFORMAÇÕES DE CONVÊNIO */}
<div className="mb-5 p-4 border rounded shadow-sm">
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoConvenio')} style={{ fontSize: '1.8rem' }}>
@ -501,7 +597,6 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
</div>
</div>
</div>
{/* ENDEREÇO */}
<div className="mb-5 p-4 border rounded shadow-sm">
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}>
@ -543,7 +638,6 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
</div>
</div>
</div>
{/* CONTATO */}
<div className="mb-5 p-4 border rounded shadow-sm">
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}>
@ -573,7 +667,24 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
</div>
</div>
</div>
{/* Modal para CPF duplicado */}
<DuplicatePatientModal
show={showDuplicateModal}
onClose={() => setShowDuplicateModal(false)}
onGoToDetails={(id) => {
console.log(`Navegando para a página de detalhes do paciente com ID: ${id}`);
setShowDuplicateModal(false);
}}
patient={duplicatePatientData}
/>
{/*404 Error Modal */}
<Error404Modal
show={show404Modal}
onClose={() => setShow404Modal(false)}
/>
{/* Botões */}
<div className="mt-3 text-center">
<button className="btn btn-success me-3" onClick={handleSubmit} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>

View File

@ -7,88 +7,83 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
const [filtroVIP, setFiltroVIP] = useState(false);
const [filtroAniversariante, setFiltroAniversariante] = useState(false);
// Estado para controlar a exibição do erro 404
const [showError404, setShowError404] = useState(false);
const GetAnexos = async (id) => {
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
try {
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}/anexos`, requestOptions);
const result = await response.json();
return result.data; // agora retorna corretamente
} catch (error) {
console.log('error', error);
return [];
}
}
const DeleteAnexo = async (patientID) => {
const RespostaGetAnexos = await GetAnexos(patientID)
for(let i = 0; i < RespostaGetAnexos.length; i++){
const idAnexo = RespostaGetAnexos[i].id;
console.log('anexos',RespostaGetAnexos)
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
var requestOptions = {
method: 'DELETE',
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${idAnexo}`, requestOptions)
.then(response => response.text())
.then(result => console.log('anexo excluido com sucesso',result))
.catch(error => console.log('error', error));
try {
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}/anexos`, requestOptions);
if (!response.ok) {
setShowError404(true);
setTimeout(() => setShowError404(false), 5000); // Esconde a mensagem após 5 segundos
throw new Error('Erro 404');
}
const result = await response.json();
return result.data;
} catch (error) {
console.log('error', error);
return [];
}
}
const DeleteAnexo = async (patientID) => {
const RespostaGetAnexos = await GetAnexos(patientID);
for (let i = 0; i < RespostaGetAnexos.length; i++) {
const idAnexo = RespostaGetAnexos[i].id;
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
var requestOptions = {
method: 'DELETE',
headers: myHeaders,
redirect: 'follow'
};
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${idAnexo}`, requestOptions)
.then(response => {
if (!response.ok) {
setShowError404(true);
setTimeout(() => setShowError404(false), 5000); // Esconde a mensagem após 5 segundos
throw new Error('Erro 404');
}
return response.text();
})
.then(result => console.log('anexo excluido com sucesso', result))
.catch(error => console.log('error', error));
}
}
// Função para excluir paciente
const deletePatient = async (id) => {
DeleteAnexo(id)
DeleteAnexo(id);
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}`,
requestOptionsDelete
)
.then((response) => response.text())
.then((response) => {
if (!response.ok) {
setShowError404(true);
setTimeout(() => setShowError404(false), 5000); // Esconde a mensagem após 5 segundos
throw new Error('Erro 404');
}
return response.text();
})
.then((mensage) => console.log(mensage))
.catch((error) => console.log("Deu problema", error));
};
// Função para marcar/desmarcar VIP
const toggleVIP = async (id, atual) => {
const novoStatus = atual === true ? false : true;
await fetch(
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
{
@ -97,7 +92,14 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
body: JSON.stringify({ vip: novoStatus }),
}
)
.then((response) => response.json())
.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, vip: novoStatus } : p))
@ -106,7 +108,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
.catch((error) => console.log("Erro ao atualizar VIP:", error));
};
// Função para atualizar convênio/particular
const updateConvenio = async (id, convenio) => {
await fetch(
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
@ -116,7 +117,14 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
body: JSON.stringify({ convenio }),
}
)
.then((response) => response.json())
.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))
@ -125,32 +133,34 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
.catch((error) => console.log("Erro ao atualizar convênio:", error));
};
// Requisição inicial para buscar pacientes
useEffect(() => {
fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
.then((response) => response.json())
.then((response) => {
if (!response.ok) {
setShowError404(true);
setTimeout(() => setShowError404(false), 5000);
throw new Error('Erro 404');
}
return response.json();
})
.then((result) => setPacientes(result["data"]))
.catch((error) =>
console.log("Erro para encontrar pacientes no banco de dados", error)
);
}, []);
// Função para verificar se hoje é aniversário do paciente
const ehAniversariante = (dataNascimento) => {
if (!dataNascimento) return false;
const hoje = new Date();
const nascimento = new Date(dataNascimento);
return (
hoje.getDate() === nascimento.getDate() &&
hoje.getMonth() === nascimento.getMonth()
);
};
const pacientesFiltrados = pacientes.filter((paciente) => {
const texto = `${paciente.nome}`.toLowerCase();
const passaBusca = texto.includes(search.toLowerCase());
const passaVIP = filtroVIP ? paciente.vip === true : true;
const passaConvenio =
@ -158,7 +168,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
const passaAniversario = filtroAniversariante
? ehAniversariante(paciente.data_nascimento)
: true;
return passaBusca && passaVIP && passaConvenio && passaAniversario;
});
@ -182,11 +191,15 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
</div>
<div className="card-body">
{showError404 && (
<div className="alert alert-danger" role="alert">
(Erro 404). Por favor, tente novamente mais tarde.
</div>
)}
<div className="card p-3 mb-3">
<h5 className="mb-3">
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
</h5>
<div
className="d-flex flex-nowrap align-items-center gap-2"
style={{ overflowX: "auto", paddingBottom: "6px" }}
@ -204,7 +217,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
flex: "0 0 auto",
}}
/>
<select
className="form-select"
value={filtroConvenio}
@ -220,16 +232,13 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
<option>Hapvida</option>
<option>Unimed</option>
</select>
<button
className={`btn ${filtroVIP ? "btn-primary" : "btn-outline-primary"
}`}
className={`btn ${filtroVIP ? "btn-primary" : "btn-outline-primary"}`}
onClick={() => setFiltroVIP(!filtroVIP)}
style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
>
<i className="bi bi-award me-1"></i> VIP
</button>
<button
className={`btn ${filtroAniversariante
? "btn-primary"
@ -244,8 +253,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
</button>
</div>
</div>
<div className="table-responsive">
<table className="table table-striped table-hover">
<thead>
@ -254,6 +261,8 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
<th>CPF</th>
<th>Email</th>
<th>Telefone</th>
<th>Status</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
@ -276,7 +285,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
</td>
<td>
<div className="d-flex gap-2">
<button
className="btn btn-sm"
style={{
@ -290,8 +298,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
>
<i className="bi bi-eye me-1"></i> Ver Detalhes
</button>
<button
className="btn btn-sm"
style={{
@ -305,7 +311,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
>
<i className="bi bi-pencil me-1"></i> Editar
</button>
<button
className="btn btn-sm"
style={{
@ -322,7 +327,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
))
) : (
<tr>
<td colSpan="8" className="text-center">
<td colSpan="6" className="text-center">
Nenhum paciente encontrado.
</td>
</tr>
@ -339,4 +344,4 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
);
}
export default TablePaciente;
export default TablePaciente;