Funcionamento das barras de pesquisa
This commit is contained in:
RafaelMTA13
parent
84c14fdb06
commit
f793e29272
@ -1,19 +1,27 @@
|
||||
import React, { useState, useMemo } from "react";
|
||||
import dayjs from "dayjs";
|
||||
import React, { useState, useMemo } from 'react';
|
||||
|
||||
// Importe os componentes que você está usando
|
||||
import TabelaAgendamentoDia from "../components/AgendarConsulta/TabelaAgendamentoDia";
|
||||
import TabelaAgendamentoSemana from "../components/AgendarConsulta/TabelaAgendamentoSemana";
|
||||
import TabelaAgendamentoMes from "../components/AgendarConsulta/TabelaAgendamentoMes";
|
||||
import FormNovaConsulta from "../components/AgendarConsulta/FormNovaConsulta";
|
||||
import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
|
||||
import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
|
||||
import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
|
||||
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
|
||||
|
||||
// ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
|
||||
import AgendamentosMes from '../components/AgendarConsulta/DadosConsultasMock.js';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
// Importe os estilos
|
||||
import "./styleMedico/Agendamento.css";
|
||||
import "./styleMedico/FilaEspera.css";
|
||||
|
||||
// --- DADOS E FUNÇÕES FORA DO COMPONENTE ---
|
||||
const Agendamento = () => {
|
||||
|
||||
const filaEsperaData = [
|
||||
const [FiladeEspera, setFiladeEspera] = useState(false);
|
||||
const [tabela, setTabela] = useState('diario');
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
// Dados da fila de espera (sem alteração)
|
||||
const filaEsperaData = [
|
||||
{ nome: 'Ricardo Pereira', email: 'ricardo.pereira@gmail.com', cpf: '444.777.666-55', telefone: '(79) 99123-4567', entrada: '25/09/2025 às 08:00' },
|
||||
{ nome: 'Ana Costa', email: 'ana.costa@gmail.com', cpf: '321.654.987-00', telefone: '(79) 97777-3333', entrada: '25/09/2025 às 08:30' },
|
||||
{ nome: 'Lucas Martins', email: 'lucas.martins@gmail.com', cpf: '777.666.555-33', telefone: '(79) 99654-3210', entrada: '25/09/2025 às 09:00' },
|
||||
@ -22,52 +30,63 @@ const filaEsperaData = [
|
||||
{ nome: 'Fernanda Lima', email: 'fernanda.lima@gmail.com', cpf: '888.999.000-22', telefone: '(79) 98877-6655', entrada: '26/09/2025 às 09:30' },
|
||||
{ nome: 'Carlos Andrade', email: 'carlos.andrade@gmail.com', cpf: '222.555.888-11', telefone: '(79) 99876-5432', entrada: '26/09/2025 às 10:00' },
|
||||
{ nome: 'Juliana Oliveira', email: 'juliana.o@gmail.com', cpf: '111.222.333-44', telefone: '(79) 98765-1234', entrada: '26/09/2025 às 11:30' },
|
||||
];
|
||||
|
||||
const ListarDiasdoMes = (ano, mes) => {
|
||||
const diasDaSemana = [[], [], [], [], [], [], []]; // 0: Domingo, 1: Segunda, ...
|
||||
const base = dayjs(`${ano}-${mes}-01`);
|
||||
const diasNoMes = base.daysInMonth();
|
||||
|
||||
for (let d = 1; d <= diasNoMes; d++) {
|
||||
const data = dayjs(`${ano}-${mes}-${d}`);
|
||||
const diaDaSemana = data.day(); // Retorna um número de 0 (Dom) a 6 (Sáb)
|
||||
diasDaSemana[diaDaSemana].push(d);
|
||||
}
|
||||
|
||||
// Retornando apenas os dias úteis (Segunda a Sexta)
|
||||
return [
|
||||
diasDaSemana[1], // Segundas
|
||||
diasDaSemana[2], // Terças
|
||||
diasDaSemana[3], // Quartas
|
||||
diasDaSemana[4], // Quintas
|
||||
diasDaSemana[5], // Sextas
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
// --- COMPONENTE PRINCIPAL ---
|
||||
|
||||
const Agendamento = () => {
|
||||
const [FiladeEspera, setFiladeEspera] = useState(false);
|
||||
const [tabela, setTabela] = useState('diario');
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
const filteredFila = useMemo(() =>
|
||||
filaEsperaData.filter(item =>
|
||||
// Filtro da fila de espera (sem alteração)
|
||||
const filteredFila = filaEsperaData.filter(item =>
|
||||
item.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
item.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
item.cpf.includes(searchTerm) ||
|
||||
item.telefone.includes(searchTerm)
|
||||
), [searchTerm]);
|
||||
);
|
||||
|
||||
// Lógica para filtrar os dados da AGENDA (AgendamentosMes)
|
||||
const filteredAgendamentos = useMemo(() => {
|
||||
if (!searchTerm.trim()) {
|
||||
return AgendamentosMes;
|
||||
}
|
||||
|
||||
const lowerCaseSearchTerm = searchTerm.toLowerCase();
|
||||
const filteredData = {};
|
||||
|
||||
for (const semana in AgendamentosMes) {
|
||||
filteredData[semana] = {};
|
||||
for (const dia in AgendamentosMes[semana]) {
|
||||
filteredData[semana][dia] = AgendamentosMes[semana][dia].filter(agendamento =>
|
||||
agendamento.status === 'vazio' ||
|
||||
(agendamento.paciente && agendamento.paciente.toLowerCase().includes(lowerCaseSearchTerm))
|
||||
);
|
||||
}
|
||||
}
|
||||
return filteredData;
|
||||
}, [searchTerm]);
|
||||
|
||||
const ListarDiasdoMes = (ano, mes) => {
|
||||
let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
|
||||
const base = dayjs(`${ano}-${mes}-01`)
|
||||
const DiasnoMes = base.daysInMonth()
|
||||
for (let d = 1; d <= DiasnoMes; d++) {
|
||||
const data = dayjs(`${ano}-${mes}-${d}`)
|
||||
const dia = data.format('dddd')
|
||||
switch (dia) {
|
||||
case 'Monday': segundas.push(d); break
|
||||
case 'Tuesday': tercas.push(d); break
|
||||
case 'Wednesday': quartas.push(d); break
|
||||
case 'Thursday': quintas.push(d); break
|
||||
case 'Friday': sextas.push(d); break
|
||||
default: break
|
||||
}
|
||||
}
|
||||
let ListaDiasDatas = [segundas, tercas, quartas, quintas, sextas]
|
||||
return ListaDiasDatas
|
||||
}
|
||||
|
||||
const handleClickAgendamento = (agendamento) => {
|
||||
if (agendamento.status !== 'vazio') return;
|
||||
setPageConsulta(true);
|
||||
};
|
||||
if (agendamento.status !== 'vazio') return
|
||||
else setPageConsulta(true)
|
||||
}
|
||||
|
||||
const handleClickCancel = () => setPageConsulta(false);
|
||||
const handleClickCancel = () => setPageConsulta(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
@ -75,60 +94,71 @@ const Agendamento = () => {
|
||||
|
||||
{!PageNovaConsulta ? (
|
||||
<div className='atendimento-eprocura'>
|
||||
<div className='busca-atendimento'>
|
||||
<div>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar atendimento por paciente..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<select>
|
||||
<option value="" disabled selected>Agendar</option>
|
||||
<option value="">Atendimento</option>
|
||||
<option value="">Sessões</option>
|
||||
<option value="">Urgência</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ✅ BARRA DE BUSCA E FILTRO FOI MOVIDA PARA DENTRO DO CALENDÁRIO */}
|
||||
|
||||
{/* ✅ BARRA DE UNIDADE E PROFISSIONAL REMOVIDA (COMENTADA) */}
|
||||
{/*
|
||||
<div className='unidade-selecionarprofissional'>
|
||||
<select defaultValue="">
|
||||
<option value="" disabled >Unidade</option>
|
||||
<option value="central">Unidade Central</option>
|
||||
<option value="norte">Unidade Zona Norte</option>
|
||||
<option value="oeste">Unidade Zona Oeste</option>
|
||||
<select>
|
||||
<option value="" disabled selected >Unidade</option>
|
||||
<option value="">Unidade Central</option>
|
||||
<option value="">Unidade Zona Norte</option>
|
||||
<option value="">Unidade Zona Oeste</option>
|
||||
</select>
|
||||
<input type="text" placeholder='Selecionar profissional' />
|
||||
</div>
|
||||
*/}
|
||||
|
||||
{/* Botões para alternar Agenda / Fila de Espera */}
|
||||
<div className='container-btns-agenda-fila_esepera'>
|
||||
<button
|
||||
className={`btn-agenda ${!FiladeEspera ? "opc-agenda-ativo" : ""}`}
|
||||
onClick={() => setFiladeEspera(false)}
|
||||
className={`btn-agenda ${FiladeEspera === false ? "opc-agenda-ativo" : ""}`}
|
||||
onClick={() => {
|
||||
setFiladeEspera(false);
|
||||
setSearchTerm('');
|
||||
}}
|
||||
>
|
||||
Agenda
|
||||
</button>
|
||||
<button
|
||||
className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`}
|
||||
onClick={() => setFiladeEspera(true)}
|
||||
className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
|
||||
onClick={() => {
|
||||
setFiladeEspera(true);
|
||||
setSearchTerm('');
|
||||
}}
|
||||
>
|
||||
Fila de espera
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section className='calendario-ou-filaespera'>
|
||||
{!FiladeEspera ? (
|
||||
{FiladeEspera === false ?
|
||||
(
|
||||
<div className='calendario'>
|
||||
<div>
|
||||
<section className='btns-e-legenda-container'>
|
||||
<div>
|
||||
<button
|
||||
className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
|
||||
onClick={() => setTabela("diario")}
|
||||
>
|
||||
<button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`} onClick={() => setTabela("diario")}>
|
||||
<i className="fa-solid fa-calendar-day"></i> Dia
|
||||
</button>
|
||||
<button
|
||||
className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`}
|
||||
onClick={() => setTabela("semanal")}
|
||||
>
|
||||
<button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`} onClick={() => setTabela("semanal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i> Semana
|
||||
</button>
|
||||
<button
|
||||
className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`}
|
||||
onClick={() => setTabela("mensal")}
|
||||
>
|
||||
<button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`} onClick={() => setTabela("mensal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i> Mês
|
||||
</button>
|
||||
</div>
|
||||
@ -140,33 +170,19 @@ const Agendamento = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ✅ BARRA DE BUSCA MOVIDA PARA CÁ */}
|
||||
<div className='busca-atendimento'>
|
||||
<div>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
<input type="text" placeholder="Buscar atendimento" />
|
||||
</div>
|
||||
<div>
|
||||
<select defaultValue="" >
|
||||
<option value="" disabled>Agendar</option>
|
||||
<option value="atendimento">Atendimento</option>
|
||||
<option value="sessoes">Sessões</option>
|
||||
<option value="urgencia">Urgência</option>
|
||||
</select>
|
||||
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={filteredAgendamentos} />}
|
||||
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={filteredAgendamentos} />}
|
||||
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={filteredAgendamentos} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} />}
|
||||
{tabela === 'semanal' && <TabelaAgendamentoSemana />}
|
||||
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} />}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
)
|
||||
:
|
||||
(
|
||||
<div className="fila-container">
|
||||
<div className="fila-header">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar..."
|
||||
placeholder="Pesquisar na fila de espera..."
|
||||
className="busca-fila-espera"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
@ -196,14 +212,15 @@ const Agendamento = () => {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
)
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
) : (
|
||||
<FormNovaConsulta onCancel={handleClickCancel} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Agendamento;
|
||||
@ -91,6 +91,7 @@ const App = () => {
|
||||
const [conversations, setConversations] = useState(conversationsData);
|
||||
const [activeConversationId, setActiveConversationId] = useState(1);
|
||||
const [newMessage, setNewMessage] = useState('');
|
||||
const [searchTerm, setSearchTerm] = useState(''); // ✅ 1. Estado para a busca
|
||||
const chatEndRef = useRef(null);
|
||||
|
||||
const activeConversation = conversations.find(c => c.id === activeConversationId);
|
||||
@ -134,6 +135,11 @@ const App = () => {
|
||||
setConversations(updatedConversations);
|
||||
};
|
||||
|
||||
// ✅ 2. Lógica para filtrar as conversas
|
||||
const filteredConversations = conversations.filter(conversation =>
|
||||
conversation.patientName.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="chat-app-container">
|
||||
{/* Barra Lateral de Conversas */}
|
||||
@ -141,12 +147,20 @@ const App = () => {
|
||||
<header className="sidebar-header">
|
||||
<h1>Mensagens</h1>
|
||||
<div className="search-container">
|
||||
<input type="text" placeholder="Pesquisar paciente..." className="search-input" />
|
||||
{/* ✅ 3. Conecta o input ao estado e à função de atualização */}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar paciente..."
|
||||
className="search-input"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<svg className="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
||||
</div>
|
||||
</header>
|
||||
<div className="conversation-list">
|
||||
{conversations.map(convo => (
|
||||
{/* ✅ 4. Usa a lista filtrada para renderizar os itens */}
|
||||
{filteredConversations.map(convo => (
|
||||
<ConversationListItem
|
||||
key={convo.id}
|
||||
conversation={convo}
|
||||
@ -192,7 +206,12 @@ const App = () => {
|
||||
</>
|
||||
) : (
|
||||
<div className="no-conversation-selected">
|
||||
{/* Adicionado uma verificação para quando a busca não encontra resultados */}
|
||||
{searchTerm && filteredConversations.length === 0 ? (
|
||||
<p>Nenhum paciente encontrado com o nome "{searchTerm}".</p>
|
||||
) : (
|
||||
<p>Selecione uma conversa para começar.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
@ -201,4 +220,3 @@ const App = () => {
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
|
||||
@ -1,48 +1,37 @@
|
||||
import React from 'react'
|
||||
import CardConsulta from './CardConsulta'
|
||||
import AgendamentosMes from './DadosConsultasMock'
|
||||
import React from 'react';
|
||||
import CardConsulta from './CardConsulta';
|
||||
import "./style/styleTabelas/tabeladia.css";
|
||||
|
||||
const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
|
||||
|
||||
let agendamentosDessaSemana = AgendamentosMes.semana1
|
||||
|
||||
let agendamentos = agendamentosDessaSemana.segunda
|
||||
|
||||
console.log(agendamentos)
|
||||
const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos }) => {
|
||||
const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
|
||||
const nomeMedico = agendamentosDoDia.find(item => item.medico)?.medico || 'Profissional';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<table className='tabeladiaria'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>{agendamentos.medico}</th>
|
||||
<th>Horário</th>
|
||||
<th>{}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
{agendamentos.map((agendamento) => (
|
||||
<tr key={agendamento.id} border='2' >
|
||||
<td ><p>{agendamento.horario}</p></td>
|
||||
{agendamentosDoDia.map((agendamento, index) => (
|
||||
<tr key={index}>
|
||||
<td><p>{agendamento.horario}</p></td>
|
||||
<td className='mostrar-horario'>
|
||||
|
||||
<div onClick={() => handleClickAgendamento(agendamento)} >
|
||||
<div onClick={() => handleClickAgendamento(agendamento)}>
|
||||
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} />
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
))}
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
)
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TabelaAgendamentoDia
|
||||
export default TabelaAgendamentoDia;
|
||||
@ -1,29 +1,29 @@
|
||||
import React from 'react'
|
||||
import AgendamentosMes from './DadosConsultasMock'
|
||||
import dayjs from "dayjs"
|
||||
import CardConsulta from './CardConsulta'
|
||||
import React from 'react';
|
||||
// ✏️ REMOVIDO: A importação do mock não é mais necessária aqui.
|
||||
// import AgendamentosMes from './DadosConsultasMock';
|
||||
import dayjs from "dayjs";
|
||||
import CardConsulta from './CardConsulta';
|
||||
import "./style/styleTabelas/tabelames.css";
|
||||
|
||||
const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
// ✨ MODIFICADO: Recebe 'agendamentos' como prop, além de 'ListarDiasdoMes'
|
||||
const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
|
||||
|
||||
const dataHoje = dayjs();
|
||||
const AnoAtual = dataHoje.year();
|
||||
const mes = dataHoje.month() + 1;
|
||||
|
||||
const dataHoje = dayjs()
|
||||
const AnoAtual = dataHoje.year()
|
||||
const mes = dataHoje.month() + 1
|
||||
|
||||
let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes)
|
||||
let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes);
|
||||
|
||||
let segundas = ListaDiasDatas[0];
|
||||
let tercas = ListaDiasDatas[1];
|
||||
let quartas = ListaDiasDatas[2];
|
||||
let quintas = ListaDiasDatas[3];
|
||||
let sextas = ListaDiasDatas[4]
|
||||
|
||||
console.log(AnoAtual, 'ano', mes, 'mes')
|
||||
let sextas = ListaDiasDatas[4];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<table className='tabelamensal'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Seg</th>
|
||||
<th>Ter</th>
|
||||
@ -31,14 +31,18 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
<th>Qui</th>
|
||||
<th>Sex</th>
|
||||
</tr>
|
||||
|
||||
{Object.entries(AgendamentosMes).map(([semanas, dias], index) => (
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* ✨ MODIFICADO: Itera sobre a prop 'agendamentos' em vez do mock importado.
|
||||
O 'agendamentos &&' garante que o código não quebre se a prop ainda não chegou. */}
|
||||
{agendamentos && Object.entries(agendamentos).map(([semana, dias], index) => (
|
||||
<tr key={index}>
|
||||
{/* Coluna de Segunda-feira */}
|
||||
<td>
|
||||
<div>
|
||||
<p>{segundas[index]}</p>
|
||||
<div>
|
||||
{dias.segunda.slice(0,4).map((consulta, idx) => (
|
||||
{(dias.segunda || []).slice(0, 3).map((consulta, idx) => (
|
||||
<CardConsulta
|
||||
key={idx}
|
||||
DadosConsulta={consulta}
|
||||
@ -46,17 +50,18 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{dias.segunda.length > 3 ?
|
||||
<div><p className='cards-que-faltam'>+ {dias.segunda.length - 3}</p></div>
|
||||
{(dias.segunda || []).length > 3 ?
|
||||
<div><p className='cards-que-faltam'>+ {(dias.segunda || []).length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Coluna de Terça-feira */}
|
||||
<td>
|
||||
<div>
|
||||
{tercas[index]}
|
||||
<p>{tercas[index]}</p>
|
||||
<div>
|
||||
{dias.terca.slice(0,4).map((consulta, idx) => (
|
||||
{(dias.terca || []).slice(0, 3).map((consulta, idx) => (
|
||||
<CardConsulta
|
||||
key={idx}
|
||||
DadosConsulta={consulta}
|
||||
@ -64,17 +69,18 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{dias.terca.length > 3 ?
|
||||
<div><p className='cards-que-faltam'>+ {dias.terca.length - 3}</p></div>
|
||||
{(dias.terca || []).length > 3 ?
|
||||
<div><p className='cards-que-faltam'>+ {(dias.terca || []).length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Coluna de Quarta-feira */}
|
||||
<td>
|
||||
<div>
|
||||
{quartas[index]}
|
||||
<p>{quartas[index]}</p>
|
||||
<div>
|
||||
{dias.quarta.slice(0,4).map((consulta, idx) => (
|
||||
{(dias.quarta || []).slice(0, 3).map((consulta, idx) => (
|
||||
<CardConsulta
|
||||
key={idx}
|
||||
DadosConsulta={consulta}
|
||||
@ -82,17 +88,18 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{dias.quarta.length > 3 ?
|
||||
<div><p className='cards-que-faltam'>+ {dias.quarta.length - 3}</p></div>
|
||||
{(dias.quarta || []).length > 3 ?
|
||||
<div><p className='cards-que-faltam'>+ {(dias.quarta || []).length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Coluna de Quinta-feira */}
|
||||
<td>
|
||||
<div>
|
||||
{quintas[index]}
|
||||
<p>{quintas[index]}</p>
|
||||
<div>
|
||||
{dias.quinta.slice(0,4).map((consulta, idx) => (
|
||||
{(dias.quinta || []).slice(0, 3).map((consulta, idx) => (
|
||||
<CardConsulta
|
||||
key={idx}
|
||||
DadosConsulta={consulta}
|
||||
@ -100,17 +107,18 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{dias.quinta.length > 3 ?
|
||||
<div><p className='cards-que-faltam'>+ {dias.quinta.length - 3}</p></div>
|
||||
{(dias.quinta || []).length > 3 ?
|
||||
<div><p className='cards-que-faltam'>+ {(dias.quinta || []).length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Coluna de Sexta-feira */}
|
||||
<td>
|
||||
<div>
|
||||
{sextas[index]}
|
||||
<p>{sextas[index]}</p>
|
||||
<div>
|
||||
{dias.sexta.slice(0,4).map((consulta, idx) => (
|
||||
{(dias.sexta || []).slice(0, 3).map((consulta, idx) => (
|
||||
<CardConsulta
|
||||
key={idx}
|
||||
DadosConsulta={consulta}
|
||||
@ -118,16 +126,17 @@ const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{dias.sexta.length > 3 ?
|
||||
<div><p className='cards-que-faltam'>+ {dias.sexta.length - 3}</p></div>
|
||||
{(dias.sexta || []).length > 3 ?
|
||||
<div><p className='cards-que-faltam'>+ {(dias.sexta || []).length - 3}</p></div>
|
||||
: null}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabelaAgendamentoMes
|
||||
export default TabelaAgendamentoMes;
|
||||
@ -1,54 +1,75 @@
|
||||
import React from 'react'
|
||||
|
||||
import AgendamentosMes from './DadosConsultasMock'
|
||||
import CardConsulta from './CardConsulta'
|
||||
import React from 'react';
|
||||
// ✏️ REMOVIDO: A importação do mock foi removida.
|
||||
// import AgendamentosMes from './DadosConsultasMock';
|
||||
import CardConsulta from './CardConsulta';
|
||||
import "./style/styleTabelas/tabelasemana.css";
|
||||
|
||||
const TabelaAgendamentoSemana = () => {
|
||||
// ✨ MODIFICADO: Recebe 'agendamentos' como prop
|
||||
const TabelaAgendamentoSemana = ({ agendamentos }) => {
|
||||
|
||||
let AgendamentosDesseMes = AgendamentosMes
|
||||
// ✨ MODIFICADO: Usa os dados da prop, com fallback para um objeto vazio para evitar erros.
|
||||
// Continua usando a 'semana1' como no seu código original.
|
||||
const agendamentoSemana = agendamentos?.semana1 || {};
|
||||
|
||||
let AgendamentoSemana = AgendamentosDesseMes.semana1
|
||||
|
||||
|
||||
let AgendamentosdeSegunda = AgendamentoSemana.segunda
|
||||
let AgendamentosdeTerca = AgendamentoSemana.terca
|
||||
let AgendamentosdeQuarta = AgendamentoSemana.quarta
|
||||
let AgendamentosdeQuinta = AgendamentoSemana.quinta
|
||||
let AgendamentosdeSexta = AgendamentoSemana.sexta
|
||||
// Pega os agendamentos de cada dia, com fallback para um array vazio.
|
||||
const agendamentosDeSegunda = agendamentoSemana.segunda || [];
|
||||
const agendamentosDeTerca = agendamentoSemana.terca || [];
|
||||
const agendamentosDeQuarta = agendamentoSemana.quarta || [];
|
||||
const agendamentosDeQuinta = agendamentoSemana.quinta || [];
|
||||
const agendamentosDeSexta = agendamentoSemana.sexta || [];
|
||||
|
||||
// ✨ LÓGICA MELHORADA: Calcula o número de linhas com base no dia com mais horários.
|
||||
// Isso evita que a tabela quebre se um dia tiver mais horários que outro após a busca.
|
||||
const numLinhas = Math.max(
|
||||
agendamentosDeSegunda.length,
|
||||
agendamentosDeTerca.length,
|
||||
agendamentosDeQuarta.length,
|
||||
agendamentosDeQuinta.length,
|
||||
agendamentosDeSexta.length
|
||||
);
|
||||
|
||||
return (
|
||||
<div >
|
||||
|
||||
<div>
|
||||
<table className='tabelasemanal'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Horário</th>
|
||||
<th>Segunda</th>
|
||||
<th>Terça</th>
|
||||
<th>Quarta</th>
|
||||
<th>Quinta</th>
|
||||
<th>Sexta</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* ✨ MODIFICADO: Itera com base no número de linhas calculado. */}
|
||||
{Array.from({ length: numLinhas }).map((_, index) => {
|
||||
// Pega a consulta de cada dia para a linha atual (índice)
|
||||
const consultaSeg = agendamentosDeSegunda[index];
|
||||
const consultaTer = agendamentosDeTerca[index];
|
||||
const consultaQua = agendamentosDeQuarta[index];
|
||||
const consultaQui = agendamentosDeQuinta[index];
|
||||
const consultaSex = agendamentosDeSexta[index];
|
||||
|
||||
// Pega o horário da primeira consulta que existir na linha
|
||||
const horarioDaLinha = consultaSeg?.horario || consultaTer?.horario || consultaQua?.horario || consultaQui?.horario || consultaSex?.horario;
|
||||
|
||||
{AgendamentosdeSegunda.map((consulta, index) => (
|
||||
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{consulta.horario}</td>
|
||||
<td className='coluna-tipo1'> <CardConsulta DadosConsulta={AgendamentosdeSegunda[index]} /> </td>
|
||||
<td> <CardConsulta DadosConsulta={AgendamentosdeTerca[index]} /> </td>
|
||||
<td> <CardConsulta DadosConsulta={AgendamentosdeQuarta[index]} /> </td>
|
||||
<td><CardConsulta DadosConsulta={AgendamentosdeQuinta[index]} /></td>
|
||||
<td><CardConsulta DadosConsulta={AgendamentosdeSexta[index]} /></td>
|
||||
<td>{horarioDaLinha}</td>
|
||||
{/* Renderiza o Card apenas se a consulta existir para aquele dia/horário */}
|
||||
<td>{consultaSeg && <CardConsulta DadosConsulta={consultaSeg} />}</td>
|
||||
<td>{consultaTer && <CardConsulta DadosConsulta={consultaTer} />}</td>
|
||||
<td>{consultaQua && <CardConsulta DadosConsulta={consultaQua} />}</td>
|
||||
<td>{consultaQui && <CardConsulta DadosConsulta={consultaQui} />}</td>
|
||||
<td>{consultaSex && <CardConsulta DadosConsulta={consultaSex} />}</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default TabelaAgendamentoSemana
|
||||
export default TabelaAgendamentoSemana;
|
||||
@ -15,13 +15,11 @@
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
/* Cabeçalho da semanal */
|
||||
/* Estilo aplicado APENAS às células do cabeçalho da tabela */
|
||||
.tabelasemanal thead th,
|
||||
.tabelasemanal thead td,
|
||||
.tabelasemanal tr:first-child th,
|
||||
.tabelasemanal tr:first-child td {
|
||||
background-color: #0078d7 !important;
|
||||
color: #ffffff !important;
|
||||
.tabelasemanal thead td {
|
||||
background-color: #0078d7;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #005a9e;
|
||||
|
||||
@ -1,49 +1,37 @@
|
||||
import React, { useState } from 'react';
|
||||
import {Link} from 'react-router-dom'
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
|
||||
const FormatTelefones = (valor) => {
|
||||
|
||||
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
||||
|
||||
|
||||
return digits
|
||||
.replace(/(\d)/, '($1') // 123 -> 123.
|
||||
.replace(/(\d{2})(\d)/, '$1) $2' )
|
||||
.replace(/(\d)/, '($1')
|
||||
.replace(/(\d{2})(\d)/, '$1) $2')
|
||||
.replace(/(\d)(\d{4})/, '$1 $2')
|
||||
.replace(/(\d{4})(\d{4})/, '$1-$2')
|
||||
}
|
||||
|
||||
.replace(/(\d{4})(\d{4})/, '$1-$2');
|
||||
};
|
||||
|
||||
const FormatCPF = (valor) => {
|
||||
|
||||
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
||||
|
||||
|
||||
|
||||
return digits
|
||||
.replace(/(\d{3})(\d)/, '$1.$2') // 123 -> 123.
|
||||
.replace(/(\d{3})(\d)/, '$1.$2') // 123.456 -> 123.456.
|
||||
.replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // 123.456.789 -> 123.456.789-01
|
||||
|
||||
}
|
||||
|
||||
|
||||
.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
|
||||
// Estado para controlar seções abertas/fechadas
|
||||
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,
|
||||
@ -54,14 +42,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked, files } = e.target;
|
||||
|
||||
console.log(name, value)
|
||||
|
||||
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 = () => {
|
||||
@ -69,26 +54,25 @@ function DoctorForm({ 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')) {
|
||||
} else if (name.includes('cpf')) {
|
||||
let cpfFormatado = FormatCPF(value);
|
||||
setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
|
||||
} else if (name.includes('telefone')) {
|
||||
let telefoneFormatado = FormatTelefones(value);
|
||||
setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
|
||||
}else {
|
||||
} else {
|
||||
setFormData({ ...formData, [name]: value });
|
||||
}
|
||||
};
|
||||
|
||||
// Função para buscar endereço pelo CEP
|
||||
// Modal
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [modalMsg, setModalMsg] = useState('');
|
||||
|
||||
// Buscar endereço via CEP
|
||||
const handleCepBlur = async () => {
|
||||
const cep = formData.cep.replace(/\D/g, '');
|
||||
if (cep.length === 8) {
|
||||
@ -114,51 +98,123 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
}
|
||||
};
|
||||
|
||||
// Salvar médico
|
||||
const handleSubmit = () => {
|
||||
if (!formData.full_name || !formData.cpf || !formData.birth_date ) {
|
||||
setModalMsg('Por favor, preencha: Nome, CPF, Data de Nascimento.');
|
||||
if (!formData.full_name || !formData.cpf || !formData.birth_date) {
|
||||
setModalMsg("Por favor, preencha:\n- Nome\n- CPF\n- Data de Nascimento");
|
||||
setShowModal(true);
|
||||
|
||||
|
||||
return; // impede que continue
|
||||
}
|
||||
|
||||
onSave(
|
||||
{
|
||||
...formData
|
||||
}
|
||||
onSave({ ...formData });
|
||||
|
||||
);
|
||||
setModalMsg('Médico salvo com sucesso!');
|
||||
setModalMsg("Médico salvo com sucesso!");
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Modal de feedback */}
|
||||
{/* Modal */}
|
||||
{showModal && (
|
||||
<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" 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
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 9999
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 6px 20px rgba(0,0,0,0.2)",
|
||||
overflow: "hidden"
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
background: "#1e3a8a",
|
||||
padding: "12px 16px",
|
||||
borderBottom: "1px solid #dee2e6",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<h5 style={{ margin: 0, fontSize: "1.2rem", fontWeight: 600, color: "#ffffffff" }}>Atenção</h5>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
fontSize: "1.2rem",
|
||||
cursor: "pointer"
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body text-black">
|
||||
<p style={{ fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
|
||||
|
||||
{/* Body */}
|
||||
<div style={{ padding: "16px", color: "#000" }}>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "1.1rem",
|
||||
fontWeight: 500,
|
||||
whiteSpace: "pre-line" // <-- garante quebra de linha no texto
|
||||
}}
|
||||
>
|
||||
{modalMsg}
|
||||
</p>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
|
||||
|
||||
{/* Footer */}
|
||||
<div
|
||||
style={{
|
||||
padding: "12px 16px",
|
||||
borderTop: "1px solid #dee2e6",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end"
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
style={{
|
||||
background: "#0d6efd",
|
||||
border: "none",
|
||||
padding: "8px 16px",
|
||||
borderRadius: "6px",
|
||||
color: "#fff",
|
||||
fontSize: "1rem",
|
||||
cursor: "pointer"
|
||||
}}
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
|
||||
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
{/* DADOS PESSOAIS */}
|
||||
<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('dadosPessoais')} style={{ fontSize: '1.8rem' }}>
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
|
||||
onClick={() => handleToggleCollapse('dadosPessoais')}
|
||||
style={{ fontSize: '1.8rem' }}>
|
||||
Dados Pessoais
|
||||
<span className="fs-5">
|
||||
{collapsedSections.dadosPessoais ? '▲' : '▼'}
|
||||
@ -166,7 +222,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
{/* AVATAR E INPUT DE FOTO */}
|
||||
{/* Avatar */}
|
||||
<div className="col-md-6 mb-3 d-flex align-items-center">
|
||||
<div className="me-3">
|
||||
{avatarUrl ? (
|
||||
@ -206,24 +262,25 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
{/* CADASTRO */}
|
||||
|
||||
{/* Inputs */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome: *</label>
|
||||
<input type="text" className="form-control" name="full_name" value={formData.full_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="full_name" value={formData.full_name} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
|
||||
<input type="date" className="form-control" name="birth_date" value={formData.birth_date} onChange={handleChange} style={{ fontSize: '1.1rem' }} min="1900-01-01" max="2025-09-24" />
|
||||
<input type="date" className="form-control" name="birth_date" value={formData.birth_date} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
|
||||
</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} />
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado do CRM:</label>
|
||||
<select className="form-control" name="crm_uf" value={formData.crm_uf} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="" disabled selected>Selecione</option>
|
||||
<select className="form-control" name="crm_uf" value={formData.crm_uf} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="AP">AP</option>
|
||||
<option value="AL">AL</option>
|
||||
<option value="AM">AM</option>
|
||||
@ -255,36 +312,37 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CRM:</label>
|
||||
<input type="text" className="form-control" name="crm" value={formData.crm} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="crm" value={formData.crm} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Especialização:</label>
|
||||
<select className="form-control" name="specialty" value={formData.specialty} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<select className="form-control" name="specialty" value={formData.specialty} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Cardiologia">Clínica médica (clínico geral)</option>
|
||||
<option value="Dermatologia">Pediatria</option>
|
||||
<option value="Clínica Geral">Clínica médica (clínico geral)</option>
|
||||
<option value="Pediatria">Pediatria</option>
|
||||
<option value="Ginecologia">Ginecologia e obstetrícia</option>
|
||||
<option value="Pediatria">Cardiologia</option>
|
||||
<option value="Cardiologia">Cardiologia</option>
|
||||
<option value="Ortopedia">Ortopedia e traumatologia</option>
|
||||
<option value="Oftalmologia">Oftalmologia</option>
|
||||
<option value="Neurologia">Otorrinolaringologia</option>
|
||||
<option value="Psiquiatria">Dermatologia</option>
|
||||
<option value="Endocrinologia">Neurologia</option>
|
||||
<option value="Oncologia">Psiquiatria</option>
|
||||
<option value="Oncologia">Endocrinologia</option>
|
||||
<option value="Oncologia">Gastroenterologia</option>
|
||||
<option value="Oncologia">Urologia</option>
|
||||
<option value="Otorrinolaringologia">Otorrinolaringologia</option>
|
||||
<option value="Dermatologia">Dermatologia</option>
|
||||
<option value="Neurologia">Neurologia</option>
|
||||
<option value="Psiquiatria">Psiquiatria</option>
|
||||
<option value="Endocrinologia">Endocrinologia</option>
|
||||
<option value="Gastroenterologia">Gastroenterologia</option>
|
||||
<option value="Urologia">Urologia</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</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' }}>
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
|
||||
onClick={() => handleToggleCollapse('endereco')}
|
||||
style={{ fontSize: '1.8rem' }}>
|
||||
Endereço
|
||||
<span className="fs-5">
|
||||
{collapsedSections.endereco ? '▲' : '▼'}
|
||||
@ -293,32 +351,32 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
<div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CEP:</label>
|
||||
<input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} style={{ fontSize: '1.1rem' }} />
|
||||
<label>CEP:</label>
|
||||
<input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Rua:</label>
|
||||
<input type="text" className="form-control" name="street" value={formData.street} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label>Rua:</label>
|
||||
<input type="text" className="form-control" name="street" value={formData.street} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Bairro:</label>
|
||||
<input type="text" className="form-control" name="neighborhood" value={formData.neighborhood} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label>Bairro:</label>
|
||||
<input type="text" className="form-control" name="neighborhood" value={formData.neighborhood} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Cidade:</label>
|
||||
<input type="text" className="form-control" name="city" value={formData.city} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label>Cidade:</label>
|
||||
<input type="text" className="form-control" name="city" value={formData.city} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado:</label>
|
||||
<input type="text" className="form-control" name="state" value={formData.state} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label>Estado:</label>
|
||||
<input type="text" className="form-control" name="state" value={formData.state} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Número:</label>
|
||||
<input type="text" className="form-control" name="number" value={formData.number} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label>Número:</label>
|
||||
<input type="text" className="form-control" name="number" value={formData.number} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Complemento:</label>
|
||||
<input type="text" className="form-control" name="complement" value={formData.complement} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label>Complemento:</label>
|
||||
<input type="text" className="form-control" name="complement" value={formData.complement} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -326,7 +384,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
|
||||
{/* 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' }}>
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
|
||||
onClick={() => handleToggleCollapse('contato')}
|
||||
style={{ fontSize: '1.8rem' }}>
|
||||
Contato
|
||||
<span className="fs-5">
|
||||
{collapsedSections.contato ? '▲' : '▼'}
|
||||
@ -335,26 +395,29 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
<div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Email: </label>
|
||||
<input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label>Email:</label>
|
||||
<input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: </label>
|
||||
<input type="text" className="form-control" name="phone_mobile" value={formData.phone_mobile} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label>Telefone:</label>
|
||||
<input type="text" className="form-control" name="phone_mobile" value={formData.phone_mobile} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
|
||||
<input type="text" className="form-control" name="phone2" value={formData.phone2} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label>Telefone 2:</label>
|
||||
<input type="text" className="form-control" name="phone2" value={formData.phone2} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Botões */}
|
||||
{/* 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' }}>
|
||||
Salvar Paciente
|
||||
<button
|
||||
className="btn btn-success me-3"
|
||||
onClick={handleSubmit}
|
||||
style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
|
||||
>
|
||||
Salvar Médico
|
||||
</button>
|
||||
<Link to={'/medicos'}>
|
||||
<button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
@ -362,7 +425,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -508,28 +508,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</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" 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={{ 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,22 +1,25 @@
|
||||
import React, { useState } from 'react'
|
||||
import React, { useState, useMemo } from 'react';
|
||||
|
||||
import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
|
||||
import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
|
||||
import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
|
||||
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
|
||||
|
||||
import dayjs from 'dayjs'
|
||||
// ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
|
||||
import AgendamentosMes from '../components/AgendarConsulta/DadosConsultasMock.js';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import "./style/Agendamento.css";
|
||||
import './style/FilaEspera.css';
|
||||
|
||||
const Agendamento = () => {
|
||||
|
||||
const [FiladeEspera, setFiladeEspera] = useState(false)
|
||||
const [tabela, setTabela] = useState('diario')
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(false)
|
||||
const [searchTerm, setSearchTerm] = useState('') // 🔹 Estado da busca
|
||||
const [FiladeEspera, setFiladeEspera] = useState(false);
|
||||
const [tabela, setTabela] = useState('diario');
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
// 🔹 Dados da fila de espera
|
||||
// Dados da fila de espera (sem alteração)
|
||||
const filaEsperaData = [
|
||||
{ nome: 'Ricardo Pereira', email: 'ricardo.pereira@gmail.com', cpf: '444.777.666-55', telefone: '(79) 99123-4567', entrada: '25/09/2025 às 08:00' },
|
||||
{ nome: 'Ana Costa', email: 'ana.costa@gmail.com', cpf: '321.654.987-00', telefone: '(79) 97777-3333', entrada: '25/09/2025 às 08:30' },
|
||||
@ -28,7 +31,7 @@ const Agendamento = () => {
|
||||
{ nome: 'Juliana Oliveira', email: 'juliana.o@gmail.com', cpf: '111.222.333-44', telefone: '(79) 98765-1234', entrada: '26/09/2025 às 11:30' },
|
||||
];
|
||||
|
||||
// 🔹 Filtra a fila de espera com base no searchTerm
|
||||
// Filtro da fila de espera (sem alteração)
|
||||
const filteredFila = filaEsperaData.filter(item =>
|
||||
item.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
item.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
@ -36,16 +39,34 @@ const Agendamento = () => {
|
||||
item.telefone.includes(searchTerm)
|
||||
);
|
||||
|
||||
// Lógica para filtrar os dados da AGENDA (AgendamentosMes)
|
||||
const filteredAgendamentos = useMemo(() => {
|
||||
if (!searchTerm.trim()) {
|
||||
return AgendamentosMes;
|
||||
}
|
||||
|
||||
const lowerCaseSearchTerm = searchTerm.toLowerCase();
|
||||
const filteredData = {};
|
||||
|
||||
for (const semana in AgendamentosMes) {
|
||||
filteredData[semana] = {};
|
||||
for (const dia in AgendamentosMes[semana]) {
|
||||
filteredData[semana][dia] = AgendamentosMes[semana][dia].filter(agendamento =>
|
||||
agendamento.status === 'vazio' ||
|
||||
(agendamento.paciente && agendamento.paciente.toLowerCase().includes(lowerCaseSearchTerm))
|
||||
);
|
||||
}
|
||||
}
|
||||
return filteredData;
|
||||
}, [searchTerm]);
|
||||
|
||||
const ListarDiasdoMes = (ano, mes) => {
|
||||
let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
|
||||
|
||||
const base = dayjs(`${ano}-${mes}-01`)
|
||||
const DiasnoMes = base.daysInMonth()
|
||||
|
||||
for (let d = 1; d <= DiasnoMes; d++) {
|
||||
const data = dayjs(`${ano}-${mes}-${d}`)
|
||||
const dia = data.format('dddd')
|
||||
|
||||
switch (dia) {
|
||||
case 'Monday': segundas.push(d); break
|
||||
case 'Tuesday': tercas.push(d); break
|
||||
@ -55,7 +76,6 @@ const Agendamento = () => {
|
||||
default: break
|
||||
}
|
||||
}
|
||||
|
||||
let ListaDiasDatas = [segundas, tercas, quartas, quintas, sextas]
|
||||
return ListaDiasDatas
|
||||
}
|
||||
@ -72,16 +92,17 @@ const Agendamento = () => {
|
||||
<h1>Agendar nova consulta</h1>
|
||||
|
||||
{!PageNovaConsulta ? (
|
||||
|
||||
<div className='atendimento-eprocura'>
|
||||
|
||||
{/* 🔍 Busca e filtro */}
|
||||
<div className='busca-atendimento'>
|
||||
<div>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
<input type="text" placeholder="Buscar atendimento" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar atendimento por paciente..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<select>
|
||||
<option value="" disabled selected>Agendar</option>
|
||||
@ -92,7 +113,6 @@ const Agendamento = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 🏥 Unidade e profissional */}
|
||||
<div className='unidade-selecionarprofissional'>
|
||||
<select>
|
||||
<option value="" disabled selected >Unidade</option>
|
||||
@ -100,22 +120,25 @@ const Agendamento = () => {
|
||||
<option value="">Unidade Zona Norte</option>
|
||||
<option value="">Unidade Zona Oeste</option>
|
||||
</select>
|
||||
|
||||
<input type="text" placeholder='Selecionar profissional' />
|
||||
</div>
|
||||
|
||||
{/* Botões para alternar Agenda / Fila de Espera */}
|
||||
<div className='container-btns-agenda-fila_esepera'>
|
||||
<button
|
||||
className={`btn-agenda ${FiladeEspera === false ? "opc-agenda-ativo" : ""}`}
|
||||
onClick={() => setFiladeEspera(false)}
|
||||
onClick={() => {
|
||||
setFiladeEspera(false);
|
||||
setSearchTerm('');
|
||||
}}
|
||||
>
|
||||
Agenda
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
|
||||
onClick={() => setFiladeEspera(true)}
|
||||
onClick={() => {
|
||||
setFiladeEspera(true);
|
||||
setSearchTerm('');
|
||||
}}
|
||||
>
|
||||
Fila de espera
|
||||
</button>
|
||||
@ -128,43 +151,27 @@ const Agendamento = () => {
|
||||
<div>
|
||||
<section className='btns-e-legenda-container'>
|
||||
<div>
|
||||
<button
|
||||
className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
|
||||
onClick={() => setTabela("diario")}
|
||||
>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Dia
|
||||
<button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`} onClick={() => setTabela("diario")}>
|
||||
<i className="fa-solid fa-calendar-day"></i> Dia
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`}
|
||||
onClick={() => setTabela("semanal")}
|
||||
>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Semana
|
||||
<button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`} onClick={() => setTabela("semanal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i> Semana
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`}
|
||||
onClick={() => setTabela("mensal")}
|
||||
>
|
||||
<i className="fa-solid fa-calendar-day"></i>
|
||||
Mês
|
||||
<button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`} onClick={() => setTabela("mensal")}>
|
||||
<i className="fa-solid fa-calendar-day"></i> Mês
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='legenda-tabela'>
|
||||
<div className='legenda-item-realizado'><span>Realizado</span></div>
|
||||
<div className='legenda-item-confirmado'><span>Confirmado</span></div>
|
||||
<div className='legenda-item-agendado'><span>Agendado</span></div>
|
||||
<div className='legenda-item-cancelado'><span>Cancelado</span></div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} />}
|
||||
{tabela === 'semanal' && <TabelaAgendamentoSemana />}
|
||||
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} />}
|
||||
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={filteredAgendamentos} />}
|
||||
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={filteredAgendamentos} />}
|
||||
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={filteredAgendamentos} />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@ -174,17 +181,13 @@ const Agendamento = () => {
|
||||
<div className="fila-header">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar..."
|
||||
placeholder="Pesquisar na fila de espera..."
|
||||
className="busca-fila-espera"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
<h2 className="fila-titulo">Fila de Espera</h2>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<table className="fila-tabela">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -212,7 +215,6 @@ const Agendamento = () => {
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
) : (
|
||||
<FormNovaConsulta onCancel={handleClickCancel} />
|
||||
)}
|
||||
@ -220,4 +222,4 @@ const Agendamento = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default Agendamento
|
||||
export default Agendamento;
|
||||
@ -55,24 +55,7 @@ function DoctorCadastroManager( ) {
|
||||
return (
|
||||
<>
|
||||
{/* Modal de feedback */}
|
||||
{showModal && (
|
||||
<div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Sucesso</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>{modalMsg}</p>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="page-heading">
|
||||
<h3>Cadastro de Médicos</h3>
|
||||
</div>
|
||||
|
||||
@ -75,6 +75,8 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
.catch(error => console.log('error', error));
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
// Filtrar médicos pelo campo de pesquisa e aniversariantes
|
||||
const medicosFiltrados = medicos.filter(
|
||||
(medico) =>
|
||||
@ -163,7 +165,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
<td>
|
||||
<div className="d-flex gap-2">
|
||||
{/* Ver Detalhes */}
|
||||
<Link to={`/medicos/${medico.id}`}>
|
||||
<Link to={`${medico.id}`}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
@ -181,7 +183,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
</Link>
|
||||
|
||||
{/* Editar */}
|
||||
<Link to={`/medicos/${medico.id}/edit`}>
|
||||
<Link to={`${medico.id}/edit`}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
|
||||
@ -131,19 +131,18 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
|
||||
);
|
||||
};
|
||||
|
||||
const pacientesFiltrados = pacientes.filter((paciente) => {
|
||||
const texto = `${paciente.nome}`.toLowerCase();
|
||||
|
||||
const passaBusca = texto.includes(search.toLowerCase());
|
||||
const pacientesFiltrados = pacientes.filter((paciente) => {
|
||||
const textoCompletoPaciente = `${paciente.nome} ${paciente.cpf} ${paciente.email} ${paciente.telefone}`.toLowerCase();
|
||||
const passaBusca = textoCompletoPaciente.includes(search.toLowerCase());
|
||||
const passaVIP = filtroVIP ? paciente.vip === true : true;
|
||||
const passaConvenio =
|
||||
filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
|
||||
const passaConvenio = filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
|
||||
const passaAniversario = filtroAniversariante
|
||||
? ehAniversariante(paciente.data_nascimento)
|
||||
: true;
|
||||
|
||||
return passaBusca && passaVIP && passaConvenio && passaAniversario;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user