;
- }
-
-
- // Dashboard por padrão
- return (
- <>
-
-
- Profile Statistics
-
-
-
-
-
- );
+ const renderPageContent = () => {
+ switch (currentPage) {
+ case 'Inicio':
+ return
-
-
-
-
-
-
-
-
-
- ;
+ case 'details-page-doctor':
+ return
-
+
+ {DadosConsulta.status !== 'vazio'?
+
+ )
+}
+
+export default CardConsulta
\ No newline at end of file
diff --git a/src/components/AgendarConsulta/DadosConsultasMock.js b/src/components/AgendarConsulta/DadosConsultasMock.js
new file mode 100644
index 0000000..829409e
--- /dev/null
+++ b/src/components/AgendarConsulta/DadosConsultasMock.js
@@ -0,0 +1,105 @@
+
+ // Status (agendado, confirmado, realizado, cancelado)
+
+
+let AgendamentosMes = {semana1:{
+ segunda:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '07:10', status:'vazio' },
+ { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '07:40', status:'vazio' },
+ { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
+ { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
+ { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
+ { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
+
+ terca:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
+ { horario: '07:10', status:'vazio' },
+ { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '07:40', status:'vazio' },
+ { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
+ { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
+ { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
+ { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
+
+ quarta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
+ { horario: '07:10', status:'vazio' },
+ { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '07:40', status:'vazio' },
+ { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
+ { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
+ { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
+ { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
+
+ quinta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
+ { horario: '07:10', status:'vazio' },
+ { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '07:40', status:'vazio' },
+ { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
+ { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
+ { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
+ { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
+
+ sexta:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
+ { horario: '07:10', status:'vazio' },
+ { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '07:40', status:'vazio' },
+ { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
+ { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
+ { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
+ { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }]
+
+
+}, semana2:{segunda:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
+ { horario: '07:10', status:'vazio' },
+ { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '07:40', status:'vazio' },
+ { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
+ { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
+ { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
+ { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' },
+ { horario: '07:10', status:'vazio' },
+ { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '07:40', status:'vazio' },
+ { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
+ { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
+ { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
+ { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
+
+ terca:[ { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' },
+ { horario: '07:10', status:'vazio' },
+ { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'realizado', motivo:'Consulta de Rotina' },
+ { horario: '07:40', status:'vazio' },
+ { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'cancelado', motivo:'Consulta de Rotina' },
+ { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'confirmado', motivo:'2 Exames' },
+ { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'agendado', motivo:'retorno' },
+ { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'confirmado', motivo: '' },
+ { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'realizado', motivo: '' }],
+
+ quarta:[{ horario: '07:10', status:'vazio' }],
+
+ quinta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' }],
+
+ sexta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'confirmado', motivo:'Consulta de Rotina' }]}
+
+
+
+
+}
+
+
+export default AgendamentosMes
\ No newline at end of file
diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx
new file mode 100644
index 0000000..6723e6c
--- /dev/null
+++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx
@@ -0,0 +1,117 @@
+import React from "react";
+import InputMask from "react-input-mask";
+import "./style/styleagendamentos.css";
+
+const FormNovaConsulta = ({ onCancel }) => {
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ alert("Agendamento salvo!");
+ };
+
+ return (
+
+
+
+
+
+
+
+ :
+ null
+
+ }
+
+
+ {DadosConsulta.horario}|GEAP| {DadosConsulta.medico}
+{DadosConsulta.paciente} - {DadosConsulta.motivo} - 23 anos
+
+
+
+
+
+ );
+};
+
+export default FormNovaConsulta;
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
new file mode 100644
index 0000000..5c0c0ef
--- /dev/null
+++ b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import CardConsulta from './CardConsulta'
+import AgendamentosMes from './DadosConsultasMock'
+import "./style/styleTabelas/tabeladia.css";
+
+const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
+
+ let agendamentosDessaSemana = AgendamentosMes.semana1
+
+ let agendamentos = agendamentosDessaSemana.segunda
+
+ console.log(agendamentos)
+
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default TabelaAgendamentoDia
\ No newline at end of file
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
new file mode 100644
index 0000000..924332f
--- /dev/null
+++ b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
@@ -0,0 +1,133 @@
+import React from 'react'
+import AgendamentosMes from './DadosConsultasMock'
+import dayjs from "dayjs"
+import CardConsulta from './CardConsulta'
+import "./style/styleTabelas/tabelames.css";
+
+const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
+
+
+ const dataHoje = dayjs()
+ const AnoAtual = dataHoje.year()
+ const mes = dataHoje.month() + 1
+
+ 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')
+
+ return (
+ | + | {agendamentos.medico} | +
|---|---|
{agendamento.horario} |
+
+
+ handleClickAgendamento(agendamento)} >
+
+
+ |
+
+
+
+
+ )
+}
+
+export default TabelaAgendamentoMes
diff --git a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx
new file mode 100644
index 0000000..386864f
--- /dev/null
+++ b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+
+import AgendamentosMes from './DadosConsultasMock'
+import CardConsulta from './CardConsulta'
+import "./style/styleTabelas/tabelasemana.css";
+
+const TabelaAgendamentoSemana = () => {
+
+ let AgendamentosDesseMes = AgendamentosMes
+
+ let AgendamentoSemana = AgendamentosDesseMes.semana1
+
+
+ let AgendamentosdeSegunda = AgendamentoSemana.segunda
+ let AgendamentosdeTerca = AgendamentoSemana.terca
+ let AgendamentosdeQuarta = AgendamentoSemana.quarta
+ let AgendamentosdeQuinta = AgendamentoSemana.quinta
+ let AgendamentosdeSexta = AgendamentoSemana.sexta
+
+
+ return (
+ | Seg | +Ter | +Qua | +Qui | +Sex | +
|---|---|---|---|---|
|
+
+
+ {segundas[index]} +
+ {dias.segunda.slice(0,4).map((consulta, idx) => (
+
+ {dias.segunda.length > 3 ?
+ + {dias.segunda.length - 3} |
+
+
+
+ {tercas[index]}
+
+
+ {dias.terca.slice(0,4).map((consulta, idx) => (
+
+ {dias.terca.length > 3 ?
+ + {dias.terca.length - 3} |
+
+
+
+ {quartas[index]}
+
+
+ {dias.quarta.slice(0,4).map((consulta, idx) => (
+
+ {dias.quarta.length > 3 ?
+ + {dias.quarta.length - 3} |
+
+
+
+ {quintas[index]}
+
+
+ {dias.quinta.slice(0,4).map((consulta, idx) => (
+
+ {dias.quinta.length > 3 ?
+ + {dias.quinta.length - 3} |
+
+
+
+ {sextas[index]}
+
+
+ {dias.sexta.slice(0,4).map((consulta, idx) => (
+
+ {dias.sexta.length > 3 ?
+ + {dias.sexta.length - 3} |
+
+
+
+
+
+
+ )
+}
+
+export default TabelaAgendamentoSemana
\ No newline at end of file
diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css b/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css
new file mode 100644
index 0000000..bc1a179
--- /dev/null
+++ b/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css
@@ -0,0 +1,80 @@
+.tabeladiaria {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 2rem 0;
+ border-radius: 10px;
+ overflow: hidden; /* mantém o arredondado */
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
+}
+
+/* Células da tabela */
+.tabeladiaria th, .tabeladiaria td {
+ padding: 9px;
+ text-align: left;
+ border: 1px solid #e0e0e0;
+}
+
+/* Cabeçalho */
+.tabeladiaria thead th {
+ background-color: #0078d7;
+ color: #ffffff;
+font-weight: 600;
+ border-bottom: 2px solid #005a9e; /* borda inferior mais forte no cabeçalho */
+}
+
+/* Remover bordas laterais do cabeçalho (se quiser) */
+.tabeladiaria thead th:first-child {
+ border-left: none;
+}
+
+.tabeladiaria thead th:last-child {
+ border-right: none;
+}
+
+/* Linhas pares do corpo */
+.tabeladiaria tbody tr:nth-child(even) {
+ background-color: #e7e7e7a6;
+}
+
+/* Hover nas linhas */
+.tabeladiaria tbody tr:hover {
+ background-color: #f1f1f1;
+}
+
+/* Card dentro da tabela */
+.tabeladiaria .cardconsulta {
+ border-radius: 10px;
+ color: black;
+ height: 80px;
+ width: 100%;
+ padding: 8px;
+}
+
+/* Ajuste para a classe .diadia, se for usada */
+.diadia {
+ margin-top: 20px;
+ border-collapse: collapse;
+ width: 100%;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 4px 12px rgb(255, 255, 255);
+ border: 10px solid #ffffffc5;
+ background-color: rgb(253, 253, 253);
+}
+
+
+.mostrar-horario td, .mostrar-horario th {
+ padding: 4px 6px;
+ height: 30px;
+ border: 1px solid #e0e0e0;
+ text-align: center;
+}
+
+.container-cardconsulta-dia {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ height: 70px;
+}
diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css
new file mode 100644
index 0000000..6df085d
--- /dev/null
+++ b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css
@@ -0,0 +1,150 @@
+.tabelamensal {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 2rem 0;
+ border-radius: 10px;
+ overflow: hidden; /* mantém o arredondado */
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
+}
+
+/* Células da tabela */
+.tabelamensal th, .tabelamensal td {
+ padding: 9px;
+ text-align: left;
+ border: 1px solid #e0e0e0;
+}
+
+/* Cabeçalho */
+.tabelamensal thead th {
+ background-color: #0078d7;
+ color: #0078d7;
+ font-weight: 600;
+ border-bottom: 2px solid #0078d7; /* borda inferior mais forte no cabeçalho */
+}
+
+/* Remover bordas laterais do cabeçalho (se quiser) */
+.tabelamensal thead th:first-child {
+ border-left: none;
+}
+
+.tabelamensal thead th:last-child {
+ border-right: none;
+}
+
+/* Linhas pares do corpo */
+.tabelamensal tbody tr:nth-child(even) {
+ background-color: #e7e7e7a6;
+}
+
+/* Hover nas linhas */
+.tabelamensal tbody tr:hover {
+ background-color: #f1f1f1;
+}
+
+/* Card dentro da tabela */
+.tabelamensal .cardconsulta {
+ border-radius: 10px;
+ color: black;
+ height: 80px;
+ width: 100%;
+ padding: 12px;
+}
+
+/* Ajuste para a classe .diadia, se for usada */
+.diadia {
+ margin-top: 20px;
+ border-collapse: collapse;
+ width: 100%;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 4px 12px rgb(255, 255, 255);
+ border: 10px solid #ffffffc5;
+ background-color: rgb(253, 253, 253);
+}
+
+.tabelamensal {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 2rem 0;
+ border-radius: 10px;
+ overflow: hidden; /* mantém o arredondado */
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
+}
+
+.tabelamensal th, .tabelamensal td {
+ padding: 9px;
+ text-align: left;
+ border: 1px solid #e0e0e0;
+}
+
+.tabelamensal th {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-weight: 600;
+ border-bottom: 2px solid #005a9e; /* borda inferior mais forte no cabeçalho */
+}
+
+.tabelamensal td {
+ background-color: #f7f7f7;
+}
+
+.tabelamensal td:hover {
+ background-color: #f1f1f1;
+}
+
+/* Estilo geral do card de consulta */
+.tabelamensal .cardconsulta {
+ border-radius: 8px;
+ background-color: #fff;
+ padding: 6px;
+ margin: 4px 0;
+ font-size: 0.9rem;
+ font-weight: 500;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ border-left: 5px solid transparent; /* espaço da borda colorida */
+}
+
+
+
+
+.usuario-azul {
+ background-color: #E3F2FD;
+ border-left: 4px solid #2196F3;
+ padding: 4px 8px;
+ margin-bottom: 5px;
+ border-radius: 4px;
+}
+
+.usuario-verde {
+ background-color: #E8F5E9;
+ border-left: 4px solid #4CAF50;
+ padding: 4px 8px;
+ margin-bottom: 5px;
+ border-radius: 4px;
+}
+
+.usuario-roxo {
+ background-color: #F3E5F5;
+ border-left: 4px solid #9C27B0;
+ padding: 4px 8px;
+ margin-bottom: 5px;
+ border-radius: 4px;
+}
+
+.usuario-laranja {
+ background-color: #FFF3E0;
+ border-left: 4px solid #FF9800;
+ padding: 4px 8px;
+ margin-bottom: 5px;
+ border-radius: 4px;
+}
+
+.usuario-default {
+ background-color: #FAFAFA;
+ border-left: 4px solid #BDBDBD;
+ padding: 4px 8px;
+ margin-bottom: 5px;
+ border-radius: 4px;
+}
\ No newline at end of file
diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css b/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css
new file mode 100644
index 0000000..d2692d3
--- /dev/null
+++ b/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css
@@ -0,0 +1,82 @@
+.tabelasemanal {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 2rem 0;
+ border-radius: 10px;
+ overflow: hidden; /* mantém o arredondado */
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
+}
+
+/* Células da tabela */
+.tabelasemanal th, .tabelasemanal td {
+ padding: 9px;
+ text-align: left;
+ border: 1px solid #e0e0e0;
+}
+
+/* Cabeçalho da semanal */
+.tabelasemanal thead th,
+.tabelasemanal thead td,
+.tabelasemanal tr:first-child th,
+.tabelasemanal tr:first-child td {
+ background-color: #0078d7 !important;
+ color: #ffffff !important;
+ font-weight: 600;
+ text-align: center;
+ border-bottom: 2px solid #005a9e;
+}
+
+
+/* Remover bordas laterais do cabeçalho (se quiser) */
+.tabelasemanal thead th:first-child {
+ border-left: none;
+}
+
+.tabelasemanal thead th:last-child {
+ border-right: none;
+}
+
+/* Linhas pares do corpo */
+.tabelasemanal tbody tr:nth-child(even) {
+ background-color: #e7e7e7a6;
+}
+
+/* Hover nas linhas */
+.tabelasemanal tbody tr:hover {
+ background-color: #f1f1f1;
+}
+
+/* Card dentro da tabela */
+.tabelasemanal .cardconsulta {
+ border-radius: 10px;
+ color: black;
+ height: 80px;
+ width: 100%;
+ padding: 12px;
+}
+
+/* Ajuste para a classe .diadia, se for usada */
+.diadia {
+ margin-top: 20px;
+ border-collapse: collapse;
+ width: 100%;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 4px 12px rgb(255, 255, 255);
+ border: 10px solid #ffffffc5;
+ background-color: rgb(253, 253, 253);
+}
+
+.tabelasemanal tr:nth-child(even) {
+ background-color: #e7e7e7a6 !important;
+ margin-left: 10px !important;
+}
+
+.tabelasemanal tr:nth-child(odd) {
+ background-color: #ffffff !important;
+}
+
+.tabelasemanal tr:hover {
+ background-color: #f1f1f1 !important;
+}
diff --git a/src/components/AgendarConsulta/style/styleagendamentos.css b/src/components/AgendarConsulta/style/styleagendamentos.css
new file mode 100644
index 0000000..bcdc8db
--- /dev/null
+++ b/src/components/AgendarConsulta/style/styleagendamentos.css
@@ -0,0 +1,108 @@
+.form-container {
+ max-width: 800px;
+ margin: 20px auto;
+ padding: 25px;
+ background: #f5f8ff;
+ border-radius: 12px;
+ font-family: Arial, sans-serif;
+}
+
+.form-title {
+ font-size: 26px;
+ font-weight: bold;
+ color: #1e3a8a;
+ margin-bottom: 20px;
+}
+
+.form-agendamento label {
+ display: block;
+ margin-top: 12px;
+ font-weight: bold;
+ color: #333;
+}
+
+.form-agendamento input,
+.form-agendamento select,
+.form-agendamento textarea {
+ width: 100%;
+ padding: 8px;
+ margin-top: 6px;
+ border: 1px solid #ccc;
+ border-radius: 6px;
+ font-size: 14px;
+}
+
+.section-title {
+ font-size: 20px;
+ margin-top: 25px;
+ color: #1e40af;
+}
+
+.section-subtitle {
+ font-size: 16px;
+ margin-top: 20px;
+ color: #374151;
+}
+
+.btn-group button {
+ margin-right: 8px;
+ padding: 8px 12px;
+ border: 1px solid #1e3a8a;
+ border-radius: 6px;
+ background: #fff;
+ cursor: pointer;
+}
+
+.btn-group button:hover {
+ background: #e0e7ff;
+}
+
+.form-actions {
+ margin-top: 25px;
+ display: flex;
+ gap: 12px;
+}
+
+.btn-primary {
+ background: #1e3a8a;
+ color: white;
+ border: none;
+ padding: 10px 18px;
+ border-radius: 6px;
+ cursor: pointer;
+}
+
+.btn-primary:hover {
+ background: #172554;
+}
+
+.btn-cancel {
+ background: #e5e7eb;
+ border: none;
+ padding: 10px 18px;
+ border-radius: 6px;
+ cursor: pointer;
+}
+
+.btn-cancel:hover {
+ background: #d1d5db;
+}
+
+.btn-secondary {
+ margin: 10px 0;
+ background: #f3f4f6;
+ padding: 8px 14px;
+ border: 1px solid #9ca3af;
+ border-radius: 6px;
+ cursor: pointer;
+}
+
+.btn-secondary:hover {
+ background: #e5e7eb;
+}
+
+
+.cardconsulta-infosecundaria{
+ font-size: small;
+}
+
diff --git a/src/components/Header.js b/src/components/Header.js
deleted file mode 100644
index a94edc9..0000000
--- a/src/components/Header.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-// O componente agora recebe a função `toggleSidebar` como uma prop.
-function Header({ toggleSidebar }) {
- return (
- | + | Segunda | +Terça | +Quarta | +Quinta | +Sexta | +
|---|---|---|---|---|---|
| {consulta.horario} | + |
+ |
+ |
+
-
MediConnect
+
+
MediConnect
- {/* ------------------ DADOS PESSOAIS ------------------ */} -Dados Pessoais
-
-
-
-
+ {/* DADOS PESSOAIS */}
+
+ ");
+ myHeaders.append("Content-Type", "application/json");
- 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 [formData, setFormData] = useState({
- nome: PatientDict.nome,
- nomeSocial: PatientDict.nome_social,
- dataNascimento: PatientDict.data_nascimento,
- genero: PatientDict.sexo,
- documento: '',
- numeroDocumento: '',
- cpf: PatientDict.cpf,
- profissao: PatientDict.profissao ,
- nomeMae: PatientDict.nome_mae,
- profissaoMae: PatientDict.profissao_mae,
- nomePai: PatientDict.nome_pai,
- profissaoPai: PatientDict.profissao_pai,
- nomeResponsavel: '',
- cpfResponsavel: '',
- nomeConjuge: '',
- outroId: '',
- cep: '',
- cidade: PatientDict.cidade,
- estado: PatientDict.estado,
- bairro: PatientDict.bairro,
- rua: PatientDict.logradouro,
- numero: '',
- complemento: '',
- email: PatientDict.email,
- telefone1: PatientDict.celular,
- telefone2: '',
- telefone3: '',
- observacoes: ''
- });
-
- const handleChange = (e) => {
- const { name, value } = e.target;
- setFormData({
- ...formData,
- [name]: value
+ var raw = JSON.stringify({
+ "cpf": cpf
});
-
- if(name.includes('cpf')){
-
- let cpfFormatado = FormatCPF(e.target.value)
-
- setFormData({...formData,
- [name]: cpfFormatado,}
- )}
-
- else if(name.includes('telefone')){
- let telefoneFormatado = FormatTelefones(value)
-
- console.log(telefoneFormatado)
-
-
-
- setFormData({...formData,
- [name]: telefoneFormatado
- })
- }
-
- else if(name.includes('cep')){
- const digitsCep = String(value).replace(/\D/g, '').slice(0, 8);
- setFormData({...formData,
- [name]: digitsCep
- })
- }
-
-
-
+ var requestOptions = {
+ method: 'POST',
+ headers: myHeaders,
+ body: raw,
+ redirect: 'follow'
};
-
- // Função para buscar endereço pelo CEP
+ const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions)
+ const result = await response.json()
+
+ return result.data
+
+
+ }
+
+ const ValidarCPF = async (cpf) => {
+ let aviso
+ let Erro = false
+
+ const resutadoAPI = await ReceberRespostaAPIdoCPF(cpf)
+
+ const valido = resutadoAPI.valido
+ const ExisteNoBancoDeDados = resutadoAPI.existe
+
+ if(valido === false){
+ aviso = 'CPF inválido'
+ Erro = true
+ }
+ else if(ExisteNoBancoDeDados === true){
+ aviso = 'O CPF informado já está presente no sistema'
+ Erro = true
+ }
+ return [Erro,aviso]
+ }
+
+ const FormatCPF = (valor) => {
+ const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+ return digits
+ .replace(/(\d{3})(\d)/, '$1.$2')
+ .replace(/(\d{3})(\d)/, '$1.$2')
+ .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+ }
+
+
+ // Estado para armazenar a URL da foto do avatar
+ const [avatarUrl, setAvatarUrl] = useState(null);
+
+ // Estado para controlar quais seções estão colapsadas
+ const [collapsedSections, setCollapsedSections] = useState({
+ dadosPessoais: true, // Alterado para true para a seção ficar aberta por padrão
+ 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,
+ [section]: !prevState[section]
+ }));
+ };
+
+ // Lógica para calcular o IMC
+ useEffect(() => {
+ const peso = parseFloat(formData.peso);
+ const altura = parseFloat(formData.altura);
+ if (peso > 0 && altura > 0) {
+ const imcCalculado = peso / (altura * altura);
+ setFormData(prev => ({ ...prev, imc: imcCalculado.toFixed(2) }));
+ } else {
+ setFormData(prev => ({ ...prev, imc: '' }));
+ }
+ }, [formData.peso, formData.altura]);
+
+
+ const [enderecoData, setEnderecoData] = useState({})
+ useEffect(() => {setEnderecoData(formData.endereco || {}); console.log(enderecoData)}, [formData.endereco])
+
+ const [contato, setContato] = useState({})
+
+ useEffect(() => {setContato(formData.contato || {})}, [formData.contato])
+
+
+ const handleChange = (e) => {
+ const { name, value, type, checked, files } = e.target;
+
+ console.log(formData, name)
+
+ if (type === 'checkbox') {
+ setFormData({ ...formData, [name]: checked });
+ } else if (type === 'file') {
+ setFormData({ ...formData, [name]: files[0] });
+
+ // Lógica para pré-visualizar a imagem no avatar
+ if (name === 'foto' && files[0]) {
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ setAvatarUrl(reader.result);
+ };
+ reader.readAsDataURL(files[0]);
+ } else if (name === 'foto' && !files[0]) {
+ setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado
+ }}
+
+
+ if (name.includes('cpf')) {
+
+ setFormData({...formData, cpf:FormatCPF(value) });
+
+ } else if (name.includes('telefone')) {
+ let telefoneFormatado = FormatTelefones(value);
+ setContato(prev => ({ ...prev, [name]: telefoneFormatado }));
+ }else if (name === 'email') {
+ setContato(prev => ({ ...prev, email: value }));
+ }else if(name.includes('endereco')) {
+ setEnderecoData(prev => ({ ...prev, [name.split('.')[1]]: value }));
+ }else{
+ setFormData({ ...formData, [name]: value });
+ }
+ };
+
const handleCepBlur = async () => {
const cep = formData.cep.replace(/\D/g, '');
if (cep.length === 8) {
@@ -126,198 +167,419 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
}
};
- const handleSubmit = () => {
- if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email||!formData.telefone1){
- alert('Por favor, preencha: Nome ,CPF, Gênero, Data de nascimento, telefone e Email.');
+ const handleSubmit = async () => {
+ if (!formData.nome || !formData.cpf || !formData.sexo || !formData.data_nascimento){
+ alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.');
return;
}
- onSave(
- {nome: formData.nome,
- nomeSocial: formData.nomeSocial,
- dataNascimento: formData.dataNascimento,
- genero: formData.genero,
- documento: formData.documento,
- numeroDocumento: formData.numeroDocumento,
- cpf: formData.cpf,
- profissao: formData.profissao,
- nomeMae: formData.nomeMae,
- profissaoMae: formData.profissaoMae,
- nomePai: formData.nomePai,
- profissaoPai: formData.profissaoPai,
- nomeResponsavel: formData.nomeResponsavel,
- cpfResponsavel: formData.cpfResponsavel,
- nomeConjuge: formData.nomeConjuge,
- outroId: formData.outroId,
- endereco: {
- cep: formData.cep,
- cidade: formData.cidade,
- estado: formData.estado,
- bairro: formData.bairro,
- logradouro: formData.rua,
- numero: formData.numero,
- complemento: formData.complemento,
- },
+ const CPFinvalido = await ValidarCPF(formData.cpf)
+ console.log(CPFinvalido)
+ if(CPFinvalido[0] === true){
+ alert(CPFinvalido[1])
+ return
+ }
- contato: {
- email: formData.email,
- telefone1: formData.telefone1,
- telefone2: formData.telefone2,
- telefone3: formData.telefone3,
- },
- observacoes: formData.observacoes,
-}
-
-
- );
+ onSave({
+ ...formData,
+ endereco: {
+ cep: enderecoData.cep,
+ cidade: enderecoData.cidade,
+ estado: enderecoData.estado,
+ bairro: enderecoData.bairro,
+ logradouro: enderecoData.logradouro,
+ numero: enderecoData.numero,
+ complemento: enderecoData.complemento,
+ },
+ contato: {
+ email: contato.email,
+ telefone1: contato.telefone1,
+ telefone2: contato.telefone2,
+ telefone3: contato.telefone3,
+ },
+ infoMedicas: {
+ tipoSanguineo: formData.tipoSanguineo,
+ peso: formData.peso,
+ altura: formData.altura,
+ imc: formData.imc,
+ alergias: formData.alergias,
+ },
+ infoConvenio: {
+ convenio: formData.convenio,
+ plano: formData.plano,
+ numeroMatricula: formData.numeroMatricula,
+ validadeCarteira: formData.validadeCarteira,
+ validadeIndeterminada: formData.validadeIndeterminada,
+ pacienteVip: formData.pacienteVip,
+ },
+ });
};
-
+
return (
handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}> + Dados Pessoais + + {collapsedSections.dadosPessoais ? '▲' : '▼'} + +
+
+
-
+ {/* AVATAR E INPUT DE FOTO */}
+
+
+ {/* CADASTRO */}
+
+ {avatarUrl ? (
+ 
+ ) : (
+
+
+ ☤
+
+ )}
+
+
+
+ {formData.foto && {formData.foto.name}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* CAMPOS MOVIDOS */}
+
+
+
+
+
+
+
+
+
+
+
+ {formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}
+
+
-
-
+
+
+ {/* ENDEREÇO */}
+
+
-
- {/* ------------------ ENDEREÇO ------------------ */}
- handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}> + Endereço + + {collapsedSections.endereco ? '▲' : '▼'} + +
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+ {/* CONTATO */}
+
+
- {/*
- handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}> + Contato + + {collapsedSections.contato ? '▲' : '▼'} + +
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- {/*
-
-
-
-
-
-
-
-
- */}
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
- */}
- Endereço
-
-
-
- {/* ------------------ CONTATO ------------------ */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Contato
-
-
-
- {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Informações Adicionais
-
-
-
-
-
{/* Botões */}
-
-
+ //
+ //
);
}
diff --git a/src/components/patients/PatientForm.jsx b/src/components/patients/PatientForm.jsx
index f4eb448..673a405 100644
--- a/src/components/patients/PatientForm.jsx
+++ b/src/components/patients/PatientForm.jsx
@@ -1,108 +1,149 @@
-import React, { useState } from 'react';
-import InputMask from "react-input-mask";
+import React, { useState, useEffect } from 'react';
-function PatientForm({ onSave, onCancel, PatientDict }) {
+function PatientForm({ 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 ReceberRespostaAPIdoCPF = async (cpf) =>{
+ var myHeaders = new Headers();
+ myHeaders.append("Authorization", "Bearer MediConnect
+ + // {/* ------------------ DADOS PESSOAIS ------------------ */} + //Dados Pessoais
+ //
+ //
+
+ // {/* ------------------ ENDEREÇO ------------------ */}
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ // Endereço
+ //
+ //
+
+ // {/* ------------------ CONTATO ------------------ */}
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ // Contato
+ //
+ //
+
+ // {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ // Informações Adicionais
+ //
+ //
+ //
+ //
+
+ // {/* Botões */}
+ //
+ //
+ //
+ //
+ //
-
MediConnect
+MediConnect
- {/* ------------------ DADOS PESSOAIS ------------------ */} -Dados Pessoais
-
-
-
-
+ {/* DADOS PESSOAIS */}
+
+
handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}> + Dados Pessoais + + {collapsedSections.dadosPessoais ? '▲' : '▼'} + +
+
+
-
+ {/* AVATAR E INPUT DE FOTO */}
+
+
+ {/* CADASTRO */}
+
+ {avatarUrl ? (
+
+ ) : (
+
+
+ ☤
+
+ )}
+
+
+
+ {formData.foto && {formData.foto.name}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* CAMPOS MOVIDOS */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ {/* INFORMAÇÕES MÉDICAS */}
+
+
- {/* ------------------ ENDEREÇO ------------------ */}
- handleToggleCollapse('infoMedicas')} style={{ fontSize: '1.8rem' }}> + Informações Médicas + + {collapsedSections.infoMedicas ? '▲' : '▼'} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Endereço
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {/* INFORMAÇÕES DE CONVÊNIO */}
+
+
- {/* ------------------ CONTATO ------------------ */}
- handleToggleCollapse('infoConvenio')} style={{ fontSize: '1.8rem' }}> + Informações de convênio + + {collapsedSections.infoConvenio ? '▲' : '▼'} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* PACIENTE VIP */}
+
+
+
+
+
+
+
+
+
+
+ Contato
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {/* ENDEREÇO */}
+
+
- {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
- handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}> + Endereço + + {collapsedSections.endereco ? '▲' : '▼'} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Informações Adicionais
-
-
-
+ {/* CONTATO */}
+
+
-
+
{/* Botões */}
- handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}> + Contato + + {collapsedSections.contato ? '▲' : '▼'} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-