RiseUP/riseup-squad23
4
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'MelhoriasGerais'

Browse Source
This commit is contained in:
jp-lima 2025-10-03 19:00:35 -03:00
commit 086bf2b700
12 changed files with 840 additions and 770 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

365
src/PagesMedico/Agendamento.jsx
View File

@ -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,188 +30,197 @@ 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();
// 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)
);
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);
// Lógica para filtrar os dados da AGENDA (AgendamentosMes)
const filteredAgendamentos = useMemo(() => {
if (!searchTerm.trim()) {
return AgendamentosMes;
}
// 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
];
};
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]);
// --- COMPONENTE PRINCIPAL ---
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 Agendamento = () => {
const [FiladeEspera, setFiladeEspera] = useState(false);
const [tabela, setTabela] = useState('diario');
const [PageNovaConsulta, setPageConsulta] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
const handleClickAgendamento = (agendamento) => {
if (agendamento.status !== 'vazio') return
else setPageConsulta(true)
}
const filteredFila = useMemo(() =>
filaEsperaData.filter(item =>
item.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
item.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
item.cpf.includes(searchTerm) ||
item.telefone.includes(searchTerm)
), [searchTerm]);
const handleClickCancel = () => setPageConsulta(false)
const handleClickAgendamento = (agendamento) => {
if (agendamento.status !== 'vazio') return;
setPageConsulta(true);
};
return (
<div>
<h1>Agendar nova consulta</h1>
const handleClickCancel = () => setPageConsulta(false);
{!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>
return (
<div>
<h1>Agendar nova consulta</h1>
<div className='unidade-selecionarprofissional'>
<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>
{!PageNovaConsulta ? (
<div className='atendimento-eprocura'>
<div className='container-btns-agenda-fila_esepera'>
<button
className={`btn-agenda ${FiladeEspera === false ? "opc-agenda-ativo" : ""}`}
onClick={() => {
setFiladeEspera(false);
setSearchTerm('');
}}
>
Agenda
</button>
<button
className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
onClick={() => {
setFiladeEspera(true);
setSearchTerm('');
}}
>
Fila de espera
</button>
</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>
<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)}
>
Agenda
<section className='calendario-ou-filaespera'>
{FiladeEspera === false ?
(
<div className='calendario'>
<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>
<button
className={`btn-fila-espera ${FiladeEspera ? "opc-filaespera-ativo" : ""}`}
onClick={() => setFiladeEspera(true)}
>
Fila de espera
<button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`} onClick={() => setTabela("semanal")}>
<i className="fa-solid fa-calendar-day"></i> Semana
</button>
</div>
<section className='calendario-ou-filaespera'>
{!FiladeEspera ? (
<div className='calendario'>
<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>
<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>
</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>
{/* ✅ 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>
</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..."
className="busca-fila-espera"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<h2 className="fila-titulo">Fila de Espera</h2>
</div>
<table className="fila-tabela">
<thead>
<tr>
<th>Nome</th>
<th>Email</th>
<th>CPF</th>
<th>Telefone</th>
<th>Entrou na fila de espera</th>
</tr>
</thead>
<tbody>
{filteredFila.map((item, index) => (
<tr key={index}>
<td>{item.nome}</td>
<td>{item.email}</td>
<td>{item.cpf}</td>
<td>{item.telefone}</td>
<td>{item.entrada}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
<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} agendamentos={filteredAgendamentos} />}
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={filteredAgendamentos} />}
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={filteredAgendamentos} />}
</div>
</div>
) : (
<FormNovaConsulta onCancel={handleClickCancel} />
)}
)
:
(
<div className="fila-container">
<div className="fila-header">
<input
type="text"
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>
<table className="fila-tabela">
<thead>
<tr>
<th>Nome</th>
<th>Email</th>
<th>CPF</th>
<th>Telefone</th>
<th>Entrou na fila de espera</th>
</tr>
</thead>
<tbody>
{filteredFila.map((item, index) => (
<tr key={index}>
<td>{item.nome}</td>
<td>{item.email}</td>
<td>{item.cpf}</td>
<td>{item.telefone}</td>
<td>{item.entrada}</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
</section>
</div>
);
};
) : (
<FormNovaConsulta onCancel={handleClickCancel} />
)}
</div>
)
}
export default Agendamento;

26
src/PagesMedico/Chat.jsx
View File

@ -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">
<p>Selecione uma conversa para começar.</p>
{/* 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;

69
src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
View File

@ -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>
</tr>
</thead>
<div>
<table className='tabeladiaria'>
<thead>
<tr>
<th>Horário</th>
<th>{}</th>
</tr>
</thead>
<tbody>
{agendamentos.map((agendamento) => (
<tr key={agendamento.id} border='2' >
<td ><p>{agendamento.horario}</p></td>
<td className='mostrar-horario'>
<div onClick={() => handleClickAgendamento(agendamento)} >
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} />
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)
<tbody>
{agendamentosDoDia.map((agendamento, index) => (
<tr key={index}>
<td><p>{agendamento.horario}</p></td>
<td className='mostrar-horario'>
<div onClick={() => handleClickAgendamento(agendamento)}>
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} />
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default TabelaAgendamentoDia
export default TabelaAgendamentoDia;

232
src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
View File

@ -1,133 +1,139 @@
import React from 'react'
import AgendamentosMes from './DadosConsultasMock'
import dayjs from "dayjs"
import CardConsulta from './CardConsulta'
import React from 'react';
import dayjs from "dayjs";
import CardConsulta from './CardConsulta';
import "./style/styleTabelas/tabelames.css";
const TabelaAgendamentoMes = ({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'>
<tr>
<th>Seg</th>
<th>Ter</th>
<th>Qua</th>
<th>Qui</th>
<th>Sex</th>
</tr>
{Object.entries(AgendamentosMes).map(([semanas, dias], index) => (
<tr key={index}>
<td>
<div>
<p>{segundas[index]}</p>
<div>
{dias.segunda.slice(0,4).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</div>
{dias.segunda.length > 3 ?
<div><p className='cards-que-faltam'>+ {dias.segunda.length - 3}</p></div>
: null}
</div>
</td>
<td>
<div>
{tercas[index]}
<div>
{dias.terca.slice(0,4).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</div>
{dias.terca.length > 3 ?
<div><p className='cards-que-faltam'>+ {dias.terca.length - 3}</p></div>
: null}
</div>
</td>
<td>
<div>
{quartas[index]}
<div>
{dias.quarta.slice(0,4).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</div>
{dias.quarta.length > 3 ?
<div><p className='cards-que-faltam'>+ {dias.quarta.length - 3}</p></div>
: null}
</div>
</td>
<td>
<div>
{quintas[index]}
<div>
{dias.quinta.slice(0,4).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</div>
{dias.quinta.length > 3 ?
<div><p className='cards-que-faltam'>+ {dias.quinta.length - 3}</p></div>
: null}
</div>
</td>
<td>
<div>
{sextas[index]}
<div>
{dias.sexta.slice(0,4).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</div>
{dias.sexta.length > 3 ?
<div><p className='cards-que-faltam'>+ {dias.sexta.length - 3}</p></div>
: null}
</div>
</td>
<thead>
<tr>
<th>Seg</th>
<th>Ter</th>
<th>Qua</th>
<th>Qui</th>
<th>Sex</th>
</tr>
))}
</thead>
<tbody>
{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, 3).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</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>
<p>{tercas[index]}</p>
<div>
{(dias.terca || []).slice(0, 3).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</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>
<p>{quartas[index]}</p>
<div>
{(dias.quarta || []).slice(0, 3).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</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>
<p>{quintas[index]}</p>
<div>
{(dias.quinta || []).slice(0, 3).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</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>
<p>{sextas[index]}</p>
<div>
{(dias.sexta || []).slice(0, 3).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</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;

93
src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx
View File

@ -1,54 +1,69 @@
import React from 'react'
import AgendamentosMes from './DadosConsultasMock'
import CardConsulta from './CardConsulta'
import React from 'react';
import CardConsulta from './CardConsulta';
import "./style/styleTabelas/tabelasemana.css";
const TabelaAgendamentoSemana = () => {
let AgendamentosDesseMes = AgendamentosMes
let AgendamentoSemana = AgendamentosDesseMes.semana1
const TabelaAgendamentoSemana = ({ agendamentos }) => {
let AgendamentosdeSegunda = AgendamentoSemana.segunda
let AgendamentosdeTerca = AgendamentoSemana.terca
let AgendamentosdeQuarta = AgendamentoSemana.quarta
let AgendamentosdeQuinta = AgendamentoSemana.quinta
let AgendamentosdeSexta = AgendamentoSemana.sexta
const agendamentoSemana = agendamentos?.semana1 || {};
const agendamentosDeSegunda = agendamentoSemana.segunda || [];
const agendamentosDeTerca = agendamentoSemana.terca || [];
const agendamentosDeQuarta = agendamentoSemana.quarta || [];
const agendamentosDeQuinta = agendamentoSemana.quinta || [];
const agendamentosDeSexta = agendamentoSemana.sexta || [];
const numLinhas = Math.max(
agendamentosDeSegunda.length,
agendamentosDeTerca.length,
agendamentosDeQuarta.length,
agendamentosDeQuinta.length,
agendamentosDeSexta.length
);
return (
<div >
<div>
<table className='tabelasemanal'>
<thead>
<tr>
<th>Horário</th>
<th>Segunda</th>
<th>Terça</th>
<th>Quarta</th>
<th>Quinta</th>
<th>Sexta</th>
</tr>
</thead>
<tbody>
{Array.from({ length: numLinhas }).map((_, index) => {
<table className='tabelasemanal'>
<tr>
<th></th>
<th>Segunda</th>
<th>Terça</th>
<th>Quarta</th>
<th>Quinta</th>
<th>Sexta</th>
</tr>
const consultaSeg = agendamentosDeSegunda[index];
const consultaTer = agendamentosDeTerca[index];
const consultaQua = agendamentosDeQuarta[index];
const consultaQui = agendamentosDeQuinta[index];
const consultaSex = agendamentosDeSexta[index];
{AgendamentosdeSegunda.map((consulta, index) => (
<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>
</tr>
))}
</table>
const horarioDaLinha = consultaSeg?.horario || consultaTer?.horario || consultaQua?.horario || consultaQui?.horario || consultaSex?.horario;
return (
<tr key={index}>
<td>{horarioDaLinha}</td>
<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;

10
src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css
View File

@ -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;

608
src/components/doctors/DoctorForm.jsx
View File

@ -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)(\d{4})/, '$1 $2')
.replace(/(\d{4})(\d{4})/, '$1-$2')
}
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
return digits
.replace(/(\d)/, '($1')
.replace(/(\d{2})(\d)/, '$1) $2')
.replace(/(\d)(\d{4})/, '$1 $2')
.replace(/(\d{4})(\d{4})/, '$1-$2');
};
const 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
}
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
// 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,256 +98,334 @@ 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>
<div className="modal-body text-black">
<p style={{ fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
</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' }}>
Dados Pessoais
<span className="fs-5">
{collapsedSections.dadosPessoais ? '▲' : '▼'}
</span>
</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">
{avatarUrl ? (
<img
src={avatarUrl}
alt="Avatar do Médico"
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
/>
) : (
<div
style={{
width: '100px',
height: '100px',
borderRadius: '50%',
backgroundColor: '#e0e0e0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '3.5rem',
color: '#9e9e9e'
}}
>
&#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}
accept="image/*"
/>
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
</div>
</div>
{/* CADASTRO */}
<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' }} />
</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" />
</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' }} />
</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>
<option value="AP">AP</option>
<option value="AL">AL</option>
<option value="AM">AM</option>
<option value="BA">BA</option>
<option value="CE">CE</option>
<option value="DF">DF</option>
<option value="ES">ES</option>
<option value="GO">GO</option>
<option value="MA">MA</option>
<option value="MT">MT</option>
<option value="MS">MS</option>
<option value="MG">MG</option>
<option value="PA">PA</option>
<option value="PB">PB</option>
<option value="PR">PR</option>
<option value="PE">PE</option>
<option value="PI">PI</option>
<option value="RJ">RJ</option>
<option value="RN">RN</option>
<option value="RS">RS</option>
<option value="RO">RO</option>
<option value="RR">RR</option>
<option value="SC">SC</option>
<option value="SP">SP</option>
<option value="SE">SE</option>
<option value="TO">TO</option>
</select>
</div>
<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' }} />
</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' }}>
<option value="">Selecione</option>
<option value="Cardiologia">Clínica médica (clínico geral)</option>
<option value="Dermatologia">Pediatria</option>
<option value="Ginecologia">Ginecologia e obstetrícia</option>
<option value="Pediatria">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>
</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' }}>
Endereço
<span className="fs-5">
{collapsedSections.endereco ? '▲' : '▼'}
</span>
</h4>
<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' }} />
</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' }} />
</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' }} />
</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' }} />
</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' }} />
</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' }} />
</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' }} />
</div>
</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' }}>
Contato
<span className="fs-5">
{collapsedSections.contato ? '▲' : '▼'}
</span>
</h4>
<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' }} />
</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' }} />
</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' }} />
</div>
</div>
</div>
</div>
{/* 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
<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>
<Link to={'/medicos'}>
<button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
Cancelar
</button>
</Link>
</div>
{/* 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>
{/* 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 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' }}>
Dados Pessoais
<span className="fs-5">
{collapsedSections.dadosPessoais ? '▲' : '▼'}
</span>
</h4>
<div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
<div className="row mt-3">
{/* Avatar */}
<div className="col-md-6 mb-3 d-flex align-items-center">
<div className="me-3">
{avatarUrl ? (
<img
src={avatarUrl}
alt="Avatar do Médico"
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
/>
) : (
<div
style={{
width: '100px',
height: '100px',
borderRadius: '50%',
backgroundColor: '#e0e0e0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '3.5rem',
color: '#9e9e9e'
}}
>
&#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}
accept="image/*"
/>
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
</div>
</div>
{/* 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} />
</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} 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} />
</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}>
<option value="">Selecione</option>
<option value="AP">AP</option>
<option value="AL">AL</option>
<option value="AM">AM</option>
<option value="BA">BA</option>
<option value="CE">CE</option>
<option value="DF">DF</option>
<option value="ES">ES</option>
<option value="GO">GO</option>
<option value="MA">MA</option>
<option value="MT">MT</option>
<option value="MS">MS</option>
<option value="MG">MG</option>
<option value="PA">PA</option>
<option value="PB">PB</option>
<option value="PR">PR</option>
<option value="PE">PE</option>
<option value="PI">PI</option>
<option value="RJ">RJ</option>
<option value="RN">RN</option>
<option value="RS">RS</option>
<option value="RO">RO</option>
<option value="RR">RR</option>
<option value="SC">SC</option>
<option value="SP">SP</option>
<option value="SE">SE</option>
<option value="TO">TO</option>
</select>
</div>
<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} />
</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}>
<option value="">Selecione</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="Cardiologia">Cardiologia</option>
<option value="Ortopedia">Ortopedia e traumatologia</option>
<option value="Oftalmologia">Oftalmologia</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' }}>
Endereço
<span className="fs-5">
{collapsedSections.endereco ? '▲' : '▼'}
</span>
</h4>
<div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
<div className="row mt-3">
<div className="col-md-4 mb-3">
<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>Rua:</label>
<input type="text" className="form-control" name="street" value={formData.street} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<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>Cidade:</label>
<input type="text" className="form-control" name="city" value={formData.city} onChange={handleChange} />
</div>
<div className="col-md-2 mb-3">
<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>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>Complemento:</label>
<input type="text" className="form-control" name="complement" value={formData.complement} onChange={handleChange} />
</div>
</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' }}>
Contato
<span className="fs-5">
{collapsedSections.contato ? '▲' : '▼'}
</span>
</h4>
<div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
<div className="row mt-3">
<div className="col-md-6 mb-3">
<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>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>Telefone 2:</label>
<input type="text" className="form-control" name="phone2" value={formData.phone2} onChange={handleChange} />
</div>
</div>
</div>
</div>
{/* 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 Médico
</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>
</>
);
}

21
src/components/patients/PatientForm.jsx
View File

@ -507,28 +507,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>
);
}

130
src/pages/Agendamento.jsx
View File

@ -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,63 +151,43 @@ 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>
)
:
(
<div className="fila-container">
<div className="fila-header">
<input
type="text"
placeholder="Pesquisar..."
className="busca-fila-espera"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<h2 className="fila-titulo">Fila de Espera</h2>
</div>
<div className="fila-header">
<input
type="text"
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>
<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;

19
src/pages/DoctorCadastroManager.jsx
View File

@ -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>

2
src/pages/DoctorTable.jsx
View File

@ -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) =>

21
src/pages/TablePaciente.jsx
View File

@ -131,19 +131,18 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
);
};
const pacientesFiltrados = pacientes.filter((paciente) => {
const texto = `${paciente.nome}`.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 passaAniversario = filtroAniversariante
? ehAniversariante(paciente.data_nascimento)
: true;
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 passaBusca && passaVIP && passaConvenio && passaAniversario;
});
return (
<>