forked from RiseUP/riseup-squad23
Adição das rotas com react-router
This commit is contained in:
jp-lima
parent
b09b29c77d
commit
54c337aaae
90
src/App.js
90
src/App.js
@ -1,66 +1,42 @@
|
||||
import React, { useState } from 'react';
|
||||
import Sidebar from './components/Sidebar';
|
||||
//import Header from './components/Header';
|
||||
import TablePaciente from "./pages/Table";
|
||||
|
||||
import Inicio from './pages/Inicio';
|
||||
import PatientCadastroManager from './pages/PatientCadastroManager';
|
||||
import EditPage from './pages/EditPage';
|
||||
import DoctorEditPage from './pages/DoctorEditPage';
|
||||
|
||||
import Details from './pages/Details';
|
||||
import DoctorDetails from './pages/DoctorDetails';
|
||||
|
||||
import DoctorTable from './pages/DoctorTable';
|
||||
import DoctorCadastroManager from './pages/DoctorCadastroManager';
|
||||
import Agendamento from './pages/Agendamento'
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
|
||||
import Sidebar from "./components/Sidebar";
|
||||
import Inicio from "./pages/Inicio";
|
||||
import TablePaciente from "./pages/TablePaciente";
|
||||
import PatientCadastroManager from "./pages/PatientCadastroManager";
|
||||
import DoctorCadastroManager from "./pages/DoctorCadastroManager";
|
||||
import DoctorTable from "./pages/DoctorTable";
|
||||
import Agendamento from "./pages/Agendamento";
|
||||
import LaudoManager from "./pages/LaudoManager";
|
||||
import Details from "./pages/Details";
|
||||
import EditPage from "./pages/EditPage";
|
||||
import DoctorDetails from "./pages/DoctorDetails";
|
||||
import DoctorEditPage from "./pages/DoctorEditPage";
|
||||
|
||||
function App() {
|
||||
const [isSidebarActive] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState('Inicio');
|
||||
const [patientID, setPatientID] = useState(null);
|
||||
|
||||
|
||||
const renderPageContent = () => {
|
||||
switch (currentPage) {
|
||||
case 'Inicio':
|
||||
return <Inicio setCurrentPage={setCurrentPage} />;
|
||||
case 'agendamento':
|
||||
return <Agendamento/>;
|
||||
case 'form-layout':
|
||||
return <PatientCadastroManager setCurrentPage={setCurrentPage}/>;
|
||||
case 'doctor-form-layout':
|
||||
return <DoctorCadastroManager />;
|
||||
case 'table':
|
||||
return <TablePaciente setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
|
||||
case 'doctor-table':
|
||||
return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
|
||||
case 'details-page-paciente':
|
||||
return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
|
||||
case 'details-page-doctor':
|
||||
return <DoctorDetails patientID={patientID} setCurrentPage={setCurrentPage} />;
|
||||
case 'edit-page-paciente':
|
||||
return <EditPage id={patientID} setCurrentPage={setCurrentPage}/>;
|
||||
case 'edit-page-doctor':
|
||||
return <DoctorEditPage id={patientID} />;
|
||||
case 'laudo-manager':
|
||||
return <LaudoManager />;
|
||||
default:
|
||||
return <Inicio setCurrentPage={setCurrentPage} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="app" className={isSidebarActive ? 'active' : ''}>
|
||||
<Sidebar isSidebarActive={isSidebarActive} setCurrentPage={setCurrentPage} />
|
||||
<div id="main">
|
||||
|
||||
{renderPageContent()}
|
||||
<Router>
|
||||
<div id="app" className="active">
|
||||
<Sidebar />
|
||||
<div id="main">
|
||||
<Routes>
|
||||
<Route path="/" element={<Inicio />} />
|
||||
<Route path="/pacientes/cadastro" element={<PatientCadastroManager />} />
|
||||
<Route path="/medicos/cadastro" element={<DoctorCadastroManager />} />
|
||||
<Route path="/pacientes" element={<TablePaciente />} />
|
||||
<Route path="/medicos" element={<DoctorTable />} />
|
||||
<Route path="/pacientes/:id" element={<Details />} />
|
||||
<Route path="/pacientes/:id/edit" element={<EditPage />} />
|
||||
<Route path="/medicos/:id" element={<DoctorDetails />} />
|
||||
<Route path="/medicos/:id/edit" element={<DoctorEditPage />} />
|
||||
<Route path="/agendamento" element={<Agendamento />} />
|
||||
<Route path="/laudo" element={<LaudoManager />} />
|
||||
<Route path="*" element={<h2>Página não encontrada</h2>} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
||||
@ -1,131 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
// ADIÇÃO 1: Importar o arquivo JSON com os itens do menu
|
||||
import menuItems from '../data/sidebar-items.json'; // <-- ATENÇÃO: ajuste o caminho para o seu arquivo!
|
||||
|
||||
// ADIÇÃO 2: A função agora precisa receber 'props' para ter acesso ao setCurrentPage
|
||||
function Sidebar(props) {
|
||||
const [isActive, setIsActive] = useState(true);
|
||||
const [openSubmenu, setOpenSubmenu] = useState(null);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
setIsActive(!isActive);
|
||||
};
|
||||
|
||||
const handleSubmenuClick = (submenuName) => {
|
||||
setOpenSubmenu(openSubmenu === submenuName ? null : submenuName);
|
||||
};
|
||||
|
||||
// =====================================================
|
||||
// renderLink atualizado para suportar Table.jsx
|
||||
// =====================================================
|
||||
const renderLink = (item) => {
|
||||
if (item.url && !item.url.includes('.html') && !item.url.startsWith('http')) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
className="sidebar-link"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
props.setCurrentPage(item.url); // agora passa "table" corretamente
|
||||
}}
|
||||
>
|
||||
{item.icon && <i className={`bi bi-${item.icon}`}></i>}
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<a href={item.url} className="sidebar-link">
|
||||
{item.icon && <i className={`bi bi-${item.icon}`}></i>}
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="sidebar" className={isActive ? 'active' : ''}>
|
||||
<div className="sidebar-wrapper active">
|
||||
<div className="sidebar-header">
|
||||
<div className="d-flex justify-content-between">
|
||||
<div className="logo">
|
||||
{/* Logo volta pro Dashboard */}
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
props.setCurrentPage('dashboard');
|
||||
}}
|
||||
>
|
||||
<h1>MediConnect</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div className="toggler">
|
||||
<a
|
||||
href="#"
|
||||
className="sidebar-hide d-xl-none d-block"
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<i className="bi bi-x bi-middle"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-menu">
|
||||
<ul className="menu">
|
||||
{menuItems.map((item, index) => {
|
||||
if (item.isTitle) {
|
||||
return (
|
||||
<li key={index} className="sidebar-title">
|
||||
{item.name}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
if (item.submenu) {
|
||||
return (
|
||||
<li
|
||||
key={index}
|
||||
className={`sidebar-item has-sub ${
|
||||
openSubmenu === item.key ? 'active' : ''
|
||||
}`}
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
className="sidebar-link"
|
||||
onClick={() => handleSubmenuClick(item.key)}
|
||||
>
|
||||
<i className={`bi bi-${item.icon}`}></i>
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
<ul
|
||||
className={`submenu ${
|
||||
openSubmenu === item.key ? 'active' : ''
|
||||
}`}
|
||||
>
|
||||
{item.submenu.map((subItem, subIndex) => (
|
||||
<li key={subIndex} className="submenu-item">
|
||||
{renderLink(subItem)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<li key={index} className="sidebar-item">
|
||||
{renderLink(item)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button className="sidebar-toggler btn x">
|
||||
<i data-feather="x"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar;
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import {Link} from 'react-router-dom'
|
||||
|
||||
function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
|
||||
@ -458,9 +458,11 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
<button className="btn btn-success me-3" onClick={handleSubmit} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
Salvar Paciente
|
||||
</button>
|
||||
<button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
Cancelar
|
||||
</button>
|
||||
<Link to={'/medicos'}>
|
||||
<button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
Cancelar
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {Link} from 'react-router-dom'
|
||||
|
||||
function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
const [errorModalMsg, setErrorModalMsg] = useState("");
|
||||
@ -615,11 +616,15 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
<button className="btn btn-success me-3" onClick={handleSubmit} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
Salvar Paciente
|
||||
</button>
|
||||
<button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
<Link to='/'>
|
||||
<button className="btn btn-light" style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
Cancelar
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Modal para paciente existente */}
|
||||
{showModal && pacienteExistente && (
|
||||
<div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||
@ -703,6 +708,8 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
<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-primary" onClick={() => setShowModal404(false)}>
|
||||
Fechar
|
||||
</button>
|
||||
|
||||
@ -6,43 +6,43 @@
|
||||
|
||||
{
|
||||
"name":"Início",
|
||||
"url": "Inicio",
|
||||
"url": "/",
|
||||
"icon": "house"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Cadastro de Pacientes",
|
||||
"url": "form-layout",
|
||||
"url": "/pacientes/cadastro",
|
||||
"icon": "heart-pulse-fill"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Cadastro do Médico",
|
||||
"url": "doctor-form-layout",
|
||||
"url": "/medicos/cadastro",
|
||||
"icon": "capsule"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Lista de Pacientes",
|
||||
"icon": "clipboard-heart-fill",
|
||||
"url": "table"
|
||||
"url": "/pacientes"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Lista de Médico",
|
||||
"icon": "hospital-fill",
|
||||
"url": "doctor-table"
|
||||
"url": "/medicos"
|
||||
},
|
||||
{
|
||||
"name": "Agendar consulta",
|
||||
"icon": "calendar-plus-fill",
|
||||
"url": "agendamento"
|
||||
"url": "/agendamento"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Laudo do Paciente",
|
||||
"icon": "table",
|
||||
"url": "laudo-manager"
|
||||
"url": "/laudo"
|
||||
}
|
||||
|
||||
]
|
||||
@ -42,7 +42,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
useEffect(() => {
|
||||
fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
|
||||
.then((response) => response.json())
|
||||
.then((result) => setMedicos(result["data"]))
|
||||
.then((result) => console.log('nada'))
|
||||
.catch((error) =>
|
||||
console.log("Erro para encontrar médicos no banco de dados", error)
|
||||
);
|
||||
|
||||
@ -11,7 +11,8 @@ function Inicio({ setCurrentPage }) {
|
||||
try {
|
||||
const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes");
|
||||
const data = await res.json();
|
||||
setPacientes(data.data);
|
||||
console.log(data)
|
||||
//setPacientes(data.data);
|
||||
} catch (error) {
|
||||
console.error("Erro ao buscar pacientes:", error);
|
||||
}
|
||||
|
||||
@ -1,353 +0,0 @@
|
||||
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");
|
||||
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);
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteClick = (id) => {
|
||||
setDeleteId(id);
|
||||
setShowDeleteModal(true);
|
||||
};
|
||||
|
||||
const confirmDeletePatient = async () => {
|
||||
if (!deleteId) return;
|
||||
await DeleteAnexo(deleteId);
|
||||
const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
|
||||
await fetch(
|
||||
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${deleteId}`,
|
||||
requestOptionsDelete
|
||||
)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
setShowError404(true);
|
||||
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) => {
|
||||
const novoStatus = atual === true ? false : true;
|
||||
await fetch(
|
||||
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ vip: novoStatus }),
|
||||
}
|
||||
)
|
||||
.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))
|
||||
);
|
||||
})
|
||||
.catch((error) => console.log("Erro ao atualizar VIP:", error));
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetch("https://mock.apidog.com/m1053378-0-det/pacientes")
|
||||
.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)
|
||||
);
|
||||
}, []);
|
||||
|
||||
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 =
|
||||
filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
|
||||
const passaAniversario = filtroAniversariante
|
||||
? ehAniversariante(paciente.data_nascimento)
|
||||
: true;
|
||||
return passaBusca && passaVIP && passaConvenio && passaAniversario;
|
||||
});
|
||||
|
||||
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>
|
||||
<div className="page-content">
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<div className="card-header d-flex justify-content-between align-items-center">
|
||||
<h4 className="card-title mb-0">Pacientes Cadastrados</h4>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => setCurrentPage("form-layout")}
|
||||
>
|
||||
<i className="bi bi-plus-circle"></i> Adicionar Paciente
|
||||
</button>
|
||||
</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" }}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Buscar por nome..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
style={{
|
||||
minWidth: 250,
|
||||
maxWidth: 300,
|
||||
width: 260,
|
||||
flex: "0 0 auto",
|
||||
}}
|
||||
/>
|
||||
<select
|
||||
className="form-select"
|
||||
value={filtroConvenio}
|
||||
onChange={(e) => setFiltroConvenio(e.target.value)}
|
||||
style={{
|
||||
minWidth: 200,
|
||||
width: 180,
|
||||
flex: "0 0 auto",
|
||||
}}
|
||||
>
|
||||
<option>Todos os Convênios</option>
|
||||
<option>Bradesco Saúde</option>
|
||||
<option>Hapvida</option>
|
||||
<option>Unimed</option>
|
||||
</select>
|
||||
<button
|
||||
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"
|
||||
: "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() =>
|
||||
setFiltroAniversariante(!filtroAniversariante)
|
||||
}
|
||||
style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
|
||||
>
|
||||
<i className="bi bi-calendar me-1"></i> Aniversariantes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>CPF</th>
|
||||
<th>Email</th>
|
||||
<th>Telefone</th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{pacientesFiltrados.length > 0 ? (
|
||||
pacientesFiltrados.map((paciente) => (
|
||||
<tr key={paciente.id}>
|
||||
<td>{paciente.nome}</td>
|
||||
<td>{paciente.cpf}</td>
|
||||
<td>{paciente.email}</td>
|
||||
<td>{paciente.telefone}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge ${paciente.ativo === "ativo"
|
||||
? "bg-success"
|
||||
: "bg-danger"
|
||||
}`}
|
||||
>
|
||||
{paciente.ativo}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="d-flex gap-2">
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "#E6F2FF",
|
||||
color: "#004085",
|
||||
}}
|
||||
onClick={() => {
|
||||
setCurrentPage("details-page-paciente");
|
||||
setPatientID(paciente.id);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-eye me-1"></i> Ver Detalhes
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "#FFF3CD",
|
||||
color: "#856404",
|
||||
}}
|
||||
onClick={() => {
|
||||
setCurrentPage("edit-page-paciente");
|
||||
setPatientID(paciente.id);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "#F8D7DA",
|
||||
color: "#721C24",
|
||||
}}
|
||||
onClick={() => handleDeleteClick(paciente.id)}
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan="6" className="text-center">
|
||||
Nenhum paciente encontrado.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TablePaciente;
|
||||
Loading…
x
Reference in New Issue
Block a user