prototipo de interface medica

src/App.js

@@ -1,10 +1,11 @@
 
-import PerfilSecretaria from "./perfis/perfil_secretaria/PerfilSecretaria";
+import PerfilMedico from "./perfis/Perfil_medico/PerfilMedico"; //Mude para (import PerfilMedico from "./perfis/perfil_secretaria/PerfilSecretaria";) para ve a secretaria
+
 
 function App() {
   return (
     <>
-      <PerfilSecretaria/>
+      <PerfilMedico/>
     </>
   );
 }

src/PagesMedico/Agendamento.jsx

@@ -0,0 +1,208 @@
+import React, { useState } 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';
+import './styleMedico/Agendamento.css';
+import './styleMedico/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
+
+  // 🔹 Dados da fila de espera
+  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' },
+    { nome: 'João Souza', email: 'joao.souza@gmail.com', cpf: '987.654.321-00', telefone: '(79) 98888-2222', entrada: '25/09/2025 às 14:00' },
+    { nome: 'Maria Silva', email: 'maria.silva@gmail.com', cpf: '123.456.789-00', telefone: '(79) 99999-1111', entrada: '25/09/2025 às 14:30' },
+    { 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' },
+  ];
+
+  // 🔹 Filtra a fila de espera com base no searchTerm
+  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)
+  );
+
+  const ListarDiasdoMes = (ano, mes) => {
+    let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
+
+    const base = dayjs(`${ano}-${mes}-01`)
+    const DiasnoMes = base.daysInMonth()
+
+    for (let d = 1; d <= DiasnoMes; d++) {
+      const data = dayjs(`${ano}-${mes}-${d}`)
+      const dia = data.format('dddd')
+
+      switch (dia) {
+        case 'Monday': segundas.push(d); break
+        case 'Tuesday': tercas.push(d); break
+        case 'Wednesday': quartas.push(d); break
+        case 'Thursday': quintas.push(d); break
+        case 'Friday': sextas.push(d); break
+        default: break
+      }
+    }
+
+    let ListaDiasDatas = [segundas, tercas, quartas, quintas, sextas]
+    return ListaDiasDatas
+  }
+
+  const handleClickAgendamento = (agendamento) => {
+    if (agendamento.status !== 'vazio') return
+    else setPageConsulta(true)
+  }
+
+  const handleClickCancel = () => setPageConsulta(false)
+
+  return (
+    <div>
+      <h1>Agendamentos</h1>
+
+      {!PageNovaConsulta ? (
+
+        <div className='atendimento-eprocura'>
+        
+          {/* 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)}
+            >
+              Agenda
+            </button>
+
+            <button
+              className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
+              onClick={() => setFiladeEspera(true)}
+            >
+              Fila de espera
+            </button>
+          </div>
+
+          <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-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 PESQUISA MOVIDA PARA CÁ --- */}
+                    <div className='busca-atendimento'>
+                      <div>
+                        <i className="fa-solid fa-search"></i>
+                        <input type="text" placeholder="Buscar atendimento por nome, CPF ou outros dados..." />
+                      </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>
+                    {/* --- FIM DA BARRA DE PESQUISA --- */}
+
+                    {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>
+              )
+            }
+          </section>
+        </div>
+
+      ) : (
+        <FormNovaConsulta onCancel={handleClickCancel} />
+      )}
+    </div>
+  )
+}
+
+export default Agendamento;

src/PagesMedico/InicioMedico.jsx

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { FaUser, FaUserPlus, FaCalendarAlt, FaCalendarCheck } from 'react-icons/fa';
+import './style/Inicio.css';
+
+function Inicio({ setCurrentPage }) {
+  const [pacientes, setPacientes] = useState([]);
+  const [agendamentos, setAgendamentos] = useState([]);
+
+  useEffect(() => {
+    const fetchPacientes = async () => {
+      try {
+        const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes");
+        const data = await res.json();
+        console.log(data)
+        //setPacientes(data.data);
+      } catch (error) {
+        console.error("Erro ao buscar pacientes:", error);
+      }
+    };
+
+    const fetchAgendamentos = async () => {
+      return; // <===serve para que nao cause erro
+      // try {
+      //   const res = await fetch();
+      //   const data = await res.json();
+      //   setAgendamentos(data.data);
+      // } catch (error) {
+      //   console.error("Erro ao buscar agendamentos:", error);
+      // }
+    };
+
+    fetchPacientes();
+    fetchAgendamentos();
+  }, []);
+
+  const totalPacientes = pacientes.length;
+  const novosEsseMes = pacientes.filter(p => p.createdAt && new Date(p.createdAt).getMonth() === new Date().getMonth()).length;
+
+  const hoje = new Date();
+  const agendamentosDoDia = agendamentos.filter(
+    a => a.data && new Date(a.data).getDate() === hoje.getDate()
+  );
+  const agendamentosHoje = agendamentosDoDia.length;
+
+  return (
+    <div className="dashboard-container">
+      <div className="dashboard-header">
+       
+       <h1>Bem-vindo ao MediConnect</h1><br></br>
+      
+      </div>
+
+      <div className="stats-grid">
+        <div className="stat-card">
+          <div className="stat-info">
+            <span className="stat-label">TOTAL DE PACIENTES</span>
+            <span className="stat-value">{totalPacientes}</span>
+          </div>
+          <div className="stat-icon-wrapper blue"><FaUser className="stat-icon" /></div>
+        </div>
+
+        <div className="stat-card">
+          <div className="stat-info">
+            <span className="stat-label">NOVOS ESTE MÊS</span>
+            <span className="stat-value">{novosEsseMes}</span>
+          </div>
+          <div className="stat-icon-wrapper green"><FaUserPlus className="stat-icon" /></div>
+        </div>
+        
+        <div className="stat-card">
+          <div className="stat-info">
+            <span className="stat-label">AGENDAMENTOS HOJE</span>
+            <span className="stat-value">{agendamentosHoje}</span>
+          </div>
+          <div className="stat-icon-wrapper purple"><FaCalendarCheck className="stat-icon" /></div>
+        </div>
+        
+        <div className="stat-card">
+          <div className="stat-info">
+            <span className="stat-label">PENDÊNCIAS</span>
+            <span className="stat-value">0</span>
+          </div>
+          <div className="stat-icon-wrapper orange"><FaCalendarAlt className="stat-icon" /></div>
+        </div>
+      </div>
+
+      <div className="quick-actions">
+        <h2>Ações Rápidas</h2>
+        <div className="actions-grid">
+          <div className="action-button" onClick={() => setCurrentPage('form-layout')}>
+            <FaUserPlus className="action-icon" />
+            <div className="action-info">
+              <span className="action-title">Novo Paciente</span>
+              <span className="action-desc">Cadastrar um novo paciente</span>
+            </div>
+          </div>
+          <div className="action-button" onClick={() => setCurrentPage('table')}>
+            <FaUser className="action-icon" />
+            <div className="action-info">
+              <span className="action-title">Lista de Pacientes</span>
+              <span className="action-desc">Ver todos os pacientes</span>
+            </div>
+          </div>
+          <div className="action-button" onClick={() => setCurrentPage('agendamento')}>
+            <FaCalendarCheck className="action-icon" />
+            <div className="action-info">
+              <span className="action-title">Agendamentos</span>
+              <span className="action-desc">Gerenciar consultas</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="appointments-section">
+        <h2>Próximos Agendamentos</h2>
+        {agendamentosHoje > 0 ? (
+          <div>
+            {agendamentosDoDia.map(agendamento => (
+              <div key={agendamento.id} className="agendamento-item">
+                <p>{agendamento.nomePaciente}</p>
+                <p>{new Date(agendamento.data).toLocaleTimeString()}</p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="no-appointments-content">
+            <FaCalendarCheck className="no-appointments-icon" />
+            <p>Nenhum agendamento para hoje</p>
+            <button className="manage-button" onClick={() => setCurrentPage('agendamento')}>
+              Gerenciar Agendamentos
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Inicio;

src/PagesMedico/prontuario.jsx

@@ -0,0 +1,123 @@
+import React from "react";
+import "./styleMedico/geral.css";
+
+const pacientes = [
+  {
+    id: 1,
+    nome: "Maria Oliveira",
+    idade: 45,
+    sexo: "Feminino",
+    alergias: "Penicilina",
+    historico: [
+      { data: "2025-09-15", descricao: "Consulta de acompanhamento de hipertensão. Pressão arterial controlada." },
+      { data: "2025-07-20", descricao: "Relatou dores de cabeça frequentes." },
+    ],
+    medicamentos: [
+      { nome: "Losartana 50mg", uso: "1x ao dia pela manhã" },
+      { nome: "Dipirona 500mg", uso: "Em caso de dor" },
+    ],
+  },
+  {
+    id: 2,
+    nome: "Carlos Souza",
+    idade: 62,
+    sexo: "Masculino",
+    alergias: "Nenhuma conhecida",
+    historico: [
+      { data: "2025-09-01", descricao: "Check-up anual. Glicemia de jejum elevada." },
+      { data: "2025-03-12", descricao: "Queixa de dor no joelho direito após esforço." },
+    ],
+    medicamentos: [
+      { nome: "Metformina 850mg", uso: "2x ao dia, após as refeições" },
+    ],
+  },
+  {
+    id: 3,
+    nome: "Ana Costa",
+    idade: 28,
+    sexo: "Feminino",
+    alergias: "Pólen e poeira",
+    historico: [
+      { data: "2025-08-22", descricao: "Crise de rinite alérgica. Prescrito novo anti-histamínico." },
+      { data: "2025-01-30", descricao: "Consulta de rotina ginecológica." },
+    ],
+    medicamentos: [
+      { nome: "Loratadina 10mg", uso: "1x ao dia durante crises alérgicas" },
+    ],
+  },
+  {
+    id: 4,
+    nome: "João da Silva",
+    idade: 35,
+    sexo: "Masculino",
+    alergias: "Nenhuma conhecida",
+    historico: [
+      { data: "2025-09-10", descricao: "Consulta de rotina – tudo normal" },
+      { data: "2025-08-05", descricao: "Exame de sangue – colesterol levemente alto" },
+    ],
+    medicamentos: [
+      { nome: "Atorvastatina 10mg", uso: "1x ao dia" },
+    ],
+  },
+  {
+    id: 5,
+    nome: "Pedro Rocha",
+    idade: 55,
+    sexo: "Masculino",
+    alergias: "Frutos do mar",
+    historico: [
+      { data: "2025-09-18", descricao: "Relatou dor e inchaço no tornozelo esquerdo." },
+      { data: "2025-04-11", descricao: "Exames de rotina, sem alterações significativas." },
+    ],
+    medicamentos: [
+      { nome: "Nimesulida 100mg", uso: "2x ao dia por 5 dias" },
+    ],
+  },
+];
+
+function Prontuario() {
+  return (
+    <>
+      {pacientes.map((paciente) => (
+        <div key={paciente.id} className="prontuario-container">
+          <h1>Prontuário Médico de {paciente.nome}</h1>
+
+          {/* ---- Agrupe as seções em um container flex ---- */}
+          <div className="prontuario-sections">
+            <section className="prontuario-section">
+              <h2>Dados do Paciente</h2>
+              <p><strong>Nome:</strong> {paciente.nome}</p>
+              <p><strong>Idade:</strong> {paciente.idade}</p>
+              <p><strong>Sexo:</strong> {paciente.sexo}</p>
+              <p><strong>Alergias:</strong> {paciente.alergias}</p>
+            </section>
+
+            <section className="prontuario-section">
+              <h2>Histórico de Consultas</h2>
+              <ul>
+                {paciente.historico.map((item, i) => (
+                  <li key={i}>
+                    <strong>{item.data}:</strong> {item.descricao}
+                  </li>
+                ))}
+              </ul>
+            </section>
+
+            <section className="prontuario-section">
+              <h2>Medicamentos em Uso</h2>
+              <ul>
+                {paciente.medicamentos.map((med, i) => (
+                  <li key={i}>
+                    <strong>{med.nome}</strong> – {med.uso}
+                  </li>
+                ))}
+              </ul>
+            </section>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export default Prontuario;

src/PagesMedico/relatorio.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import './styleMedico/geral.css';
+
+const mockData = {
+  atendimentos: [
+    { id: 1, paciente: 'Carlos Andrade', data: '2025-09-25', motivo: 'Consulta de rotina', medico: 'Dr. House' },
+    { id: 2, paciente: 'Beatriz Costa', data: '2025-09-24', motivo: 'Retorno', medico: 'Dr. Wilson' },
+    { id: 3, paciente: 'Juliana Ferreira', data: '2025-09-23', motivo: 'Exames de sangue', medico: 'Dr. House' },
+    { id: 4, paciente: 'Marcos Souza', data: '2025-09-22', motivo: 'Consulta de rotina', medico: 'Dr. Cuddy' },
+  ],
+  pacientes: [
+    { id: 1, nome: 'Carlos Andrade', idade: 45, cadastro: '2024-03-10' },
+    { id: 2, nome: 'Beatriz Costa', idade: 29, cadastro: '2023-11-20' },
+    { id: 3, nome: 'Juliana Ferreira', idade: 34, cadastro: '2025-01-15' },
+    { id: 4, nome: 'Marcos Souza', idade: 52, cadastro: '2022-07-01' },
+    { id: 5, nome: 'Fernanda Lima', idade: 25, cadastro: '2025-08-05' },
+  ],
+};
+
+function Relatorio() {
+  // ...restante do código igual...
+  const [tipoRelatorio, setTipoRelatorio] = useState('');
+  const [dados, setDados] = useState(null);
+  const [dataInicio, setDataInicio] = useState('');
+  const [dataFim, setDataFim] = useState('');
+
+  const handleGerarRelatorio = () => {
+    if (!tipoRelatorio) {
+      alert('Por favor, selecione um tipo de relatório.');
+      return;
+    }
+    setDados(mockData[tipoRelatorio] || []);
+  };
+
+  const renderizarTabela = () => {
+    if (!dados) {
+      return <p className="info-text">Selecione os filtros e clique em "Gerar Relatório" para começar.</p>;
+    }
+
+    if (dados.length === 0) {
+      return <p className="info-text">Nenhum dado encontrado para os filtros selecionados.</p>;
+    }
+
+    const headers = Object.keys(dados[0]);
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            {headers.map(header => <th key={header}>{header.toUpperCase()}</th>)}
+          </tr>
+        </thead>
+        <tbody>
+          {dados.map(item => (
+            <tr key={item.id}>
+              {headers.map(header => <td key={`${item.id}-${header}`}>{item[header]}</td>)}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  };
+
+  return (
+    <div className="relatorios-container">
+      <h1>Página de Relatórios</h1>
+
+      <div className="filtros-container">
+        <div className="filtro-item">
+          <label htmlFor="tipoRelatorio">Tipo de Relatório</label>
+          <select 
+            id="tipoRelatorio" 
+            value={tipoRelatorio} 
+            onChange={(e) => setTipoRelatorio(e.target.value)}
+          >
+            <option value="">Selecione...</option>
+            <option value="atendimentos">Relatório de Atendimentos</option>
+            <option value="pacientes">Relatório de Pacientes</option>
+          </select>
+        </div>
+        
+        <div className="filtro-item">
+          <label htmlFor="dataInicio">Data de Início</label>
+          <input 
+            type="date" 
+            id="dataInicio" 
+            value={dataInicio}
+            onChange={(e) => setDataInicio(e.target.value)}
+          />
+        </div>
+
+        <div className="filtro-item">
+          <label htmlFor="dataFim">Data Final</label>
+          <input 
+            type="date" 
+            id="dataFim" 
+            value={dataFim}
+            onChange={(e) => setDataFim(e.target.value)}
+          />
+        </div>
+
+        <button onClick={handleGerarRelatorio} className="btn-gerar">
+          Gerar Relatório
+        </button>
+      </div>
+
+      <div className="resultado-container">
+        <h2>Resultado</h2>
+        {renderizarTabela()}
+      </div>
+    </div>
+  );
+}
+
+export default Relatorio;

src/PagesMedico/styleMedico/Agendamento.css

@@ -0,0 +1,189 @@
+.filtros-container select,
+.filtros-container input {
+  padding: 0.5rem;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.btn-buscar {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  border: none;
+  border-radius: 5px;
+  background-color: #f0f0f0;
+  cursor: pointer;
+}
+
+.unidade-selecionarprofissional{
+  background-color: #fdfdfdde;
+  padding: 20px 10px;
+  display: flex;
+  border-radius:10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.unidade-selecionarprofissional input,  
+.unidade-selecionarprofissional select {
+  margin-left: 8px;
+  border-radius: 8px;
+  padding: 5px;
+  width: 20%;
+}
+
+.unidade-selecionarprofissional select{
+  width: 7%;
+}
+
+/* --- BARRA DE PESQUISA DIREITA --- */
+.busca-atendimento {
+  display: flex; /* Mantém itens internos flexíveis */
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  margin-top: 20px;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.busca-atendimento > div:first-child {
+    width: 400px; /* Define tamanho da barra */
+    display: flex;
+    align-items: center;
+    margin-left: 1rem; /* Espaço entre barra e botão */
+}
+
+.busca-atendimento select{
+  padding: 8px;
+  border-radius: 8px;
+  background-color: #0078d7;
+  color: white;
+  font-weight: bold;
+  border: none;
+}
+
+.busca-atendimento input{
+  margin-left: 8px;
+  border-radius: 8px;
+  padding: 8px;
+  width: 100%;
+  border: 1px solid #ccc;
+}
+/* --- FIM BARRA DE PESQUISA --- */
+
+.btn-selecionar-tabeladia, 
+.btn-selecionar-tabelasemana, 
+.btn-selecionar-tabelames {
+  background-color: rgba(231, 231, 231, 0.808);
+  padding:8px 10px;
+  font-size: larger;
+  font-weight: bold;
+  border-style: hidden;
+}
+
+.btn-selecionar-tabeladia{
+  border-radius: 10px 0px 0px 10px;
+}
+
+.btn-selecionar-tabelames{
+  border-radius: 0px 10px 10px 0px;
+}
+
+.btn-selecionar-tabeladia.ativo, 
+.btn-selecionar-tabelasemana.ativo, 
+.btn-selecionar-tabelames.ativo{
+  background-color: lightcyan;
+  border-color: darkcyan;
+  font-weight: bolder;
+}
+
+.legenda-tabela{
+  display: flex;
+  margin-top: 30px;
+  margin-bottom: 10px;
+  gap: 15px;
+  justify-content: flex-start;
+}
+
+#status-card-consulta-realizado, .legenda-item-realizado {
+  background-color: #b7ffbd;
+  border:3px solid #91d392;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+#status-card-consulta-cancelado, .legenda-item-cancelado {
+  background-color: #ffb7cc;
+  border:3px solid #ff6c84;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+#status-card-consulta-confirmado, .legenda-item-confirmado {
+  background-color: #eef8fb;
+  border:3px solid #d8dfe7;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+#status-card-consulta-agendado, .legenda-item-agendado {
+  background-color: #f7f7c4;
+  border:3px solid #f3ce67;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+.btns-e-legenda-container{
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  margin-top: 10px;
+  width: 100%;
+}
+
+.calendario {
+  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);
+  display: flex;
+  flex-direction: column;
+}
+
+.calendario-ou-filaespera{
+  margin-top: 0;
+}
+
+.container-btns-agenda-fila_esepera{
+  margin-top: 30px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  margin-left:20px;
+}
+
+.btn-fila-espera, .btn-agenda{
+  background-color: transparent;
+  border: 0px ;
+  border-bottom: 3px solid rgb(253, 253, 253);
+  padding: 8px;
+  border-radius: 10px 10px 0px 0px;
+  font-weight: bold;
+}
+
+.opc-filaespera-ativo, .opc-agenda-ativo{
+  color: white;
+  background-color: #5980fd;
+}
+.btn-fila-espera:hover, .btn-agenda:hover{
+  cursor: pointer;
+  background-color: #5980fd;
+  color: white;
+  border-bottom: 3px solid white;
+}

src/PagesMedico/styleMedico/FilaEspera.css

@@ -0,0 +1,288 @@
+/* Zera margens padrão da página */
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+/* ----- filtros e botões ----- */
+.filtros-container select,
+.filtros-container input {
+  padding: 0.5rem;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.btn-buscar {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  border: none;
+  border-radius: 5px;
+  background-color: #f0f0f0;
+  cursor: pointer;
+}
+
+/* ----- unidade/profissional ----- */
+.unidade-selecionarprofissional {
+  background-color: #fdfdfdde;
+  padding: 20px 10px;
+  display: flex;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.unidade-selecionarprofissional input,
+.unidade-selecionarprofissional select {
+  margin-left: 8px;
+  border-radius: 8px;
+  padding: 5px;
+  width: 20%;
+}
+
+.unidade-selecionarprofissional select {
+  width: 7%;
+}
+
+/* ----- busca atendimento ----- */
+.busca-atendimento {
+  display: flex;
+  flex-direction: row;
+  margin: 10px;
+  justify-content: flex-end;
+}
+
+.busca-atendimento select {
+  padding: 5px;
+  border-radius: 8px;
+  margin-left: 15px;
+  background-color: #0078d7;
+  color: white;
+  font-weight: bold;
+}
+
+.busca-atendimento input {
+  margin-left: 8px;
+  border-radius: 8px;
+  padding: 5px;
+  width: 100%;
+}
+
+/* ----- botões de seleção ----- */
+.btn-selecionar-tabeladia,
+.btn-selecionar-tabelasemana,
+.btn-selecionar-tabelames {
+  background-color: rgba(231, 231, 231, 0.808);
+  padding: 8px 10px;
+  font-size: larger;
+  font-weight: bold;
+  border-style: hidden;
+}
+
+.btn-selecionar-tabeladia {
+  border-radius: 10px 0 0 10px;
+}
+
+.btn-selecionar-tabelames {
+  border-radius: 0 10px 10px 0;
+}
+
+.btn-selecionar-tabeladia.ativo,
+.btn-selecionar-tabelasemana.ativo,
+.btn-selecionar-tabelames.ativo {
+  background-color: lightcyan;
+  border-color: darkcyan;
+  font-weight: bolder;
+}
+
+.btns-e-legenda-container {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  margin-top: 10px;
+}
+
+/* ----- legenda ----- */
+.legenda-tabela {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  gap: 15px;
+}
+
+.legenda-item-realizado { background-color: #2c5e37; }
+.legenda-item-confirmado { background-color: #1e90ff; }
+.legenda-item-cancelado  { background-color: #d9534f; }
+.legenda-item-agendado   { background-color: #f0ad4e; }
+
+#status-card-consulta-realizado,
+.legenda-item-realizado {
+  background-color: #b7ffbd;
+  border: 3px solid #91d392;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+#status-card-consulta-cancelado,
+.legenda-item-cancelado {
+  background-color: #ffb7cc;
+  border: 3px solid #ff6c84;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+#status-card-consulta-confirmado,
+.legenda-item-confirmado {
+  background-color: #eef8fb;
+  border: 3px solid #d8dfe7;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+#status-card-consulta-agendado,
+.legenda-item-agendado {
+  background-color: #f7f7c4;
+  border: 3px solid #f3ce67;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+/* ----- calendário ----- */
+.calendario {
+  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);
+}
+
+.calendario-ou-filaespera {
+  margin-top: 0;
+}
+
+.container-btns-agenda-fila_esepera {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  margin-left: 20px;
+}
+
+.btn-fila-espera,
+.btn-agenda {
+  background-color: transparent;
+  border: 0;
+  border-bottom: 3px solid rgb(253, 253, 253);
+  padding: 8px;
+  border-radius: 10px 10px 0 0;
+  font-weight: bold;
+}
+
+.opc-filaespera-ativo,
+.opc-agenda-ativo {
+  color: white;
+  background-color: #5980fd;
+}
+
+/* ===== Fila de Espera ===== */
+.fila-container {
+  width: 100%;
+  max-width: none;
+  margin: 0;                  /* >>> sem espaço para encostar no topo <<< */
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  border: 10px solid #ffffff;
+  box-sizing: border-box;
+}
+
+.fila-titulo {
+  text-align: center;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #333;
+  border-bottom: 2px solid #e0e0e0;
+  padding-bottom: 10px;
+}
+
+.fila-tabela {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 1rem;
+}
+
+.fila-tabela thead {
+  background-color: #f7fbff;
+}
+
+.fila-tabela th,
+.fila-tabela td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.fila-tabela th {
+  font-weight: bold;
+  color: #444;
+    background-color: #f1f1f1
+}
+
+/* --- Linhas alternadas cinza/branco --- */
+.fila-tabela tbody tr:nth-child(even) {
+  background-color: #f9f9f9; /* cinza clarinho */
+}
+.fila-tabela tbody tr:nth-child(odd) {
+  background-color: #ffffff; /* branco */
+}
+
+.fila-tabela tbody tr:hover {
+  background-color: #f1f6fa; /* hover sutil */
+}
+
+@media (max-width: 768px) {
+  .fila-tabela th, .fila-tabela td {
+    padding: 8px;
+    font-size: 0.9rem;
+  }
+  .fila-titulo {
+    font-size: 1.5rem;
+  }
+}
+.fila-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center; /* centraliza o título */
+  margin-bottom: 16px;
+  height: 40px; /* altura da linha */
+}
+
+.busca-fila-espera {
+  position: absolute;
+  left: 0; /* barra na esquerda */
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 1rem;
+  width: 350px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.busca-fila-espera:focus {
+  border-color: #888;
+}
+
+.fila-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  text-align: center;
+}

src/PagesMedico/styleMedico/dia.css

@@ -0,0 +1,81 @@
+.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 calendario, se for usada */
+/*
+.calendario {
+  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;
+}

src/PagesMedico/styleMedico/geral.css

@@ -0,0 +1,126 @@
+.prontuario-container {
+  max-width: 1000px;          /* mais largo para caber as colunas */
+  margin: 40px auto;
+  padding: 24px;
+  background: #f7fbff;
+  border: 1px solid #dbe9f6;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  font-family: Arial, sans-serif;
+  color: #333;
+}
+
+.prontuario-container h1 {
+  text-align: center;
+  font-size: 2rem;
+  margin-bottom: 24px;
+  color: #004c7f;
+}
+
+/* ---- AQUI É O TRUQUE ---- */
+.prontuario-sections {
+  display: flex;              /* ativa flexbox */
+  gap: 24px;                  /* espaço entre as colunas */
+  justify-content: space-between;
+}
+
+/* cada seção vira uma “coluna” */
+.prontuario-section {
+  flex: 1;                    /* cada coluna ocupa o mesmo espaço */
+  background: #ffffff;
+  border: 1px solid #dbe9f6;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+}
+
+.prontuario-section h2 {
+  font-size: 1.3rem;
+  margin-bottom: 12px;
+  color: #0064a3;
+  border-bottom: 1px solid #dbe9f6;
+  padding-bottom: 4px;
+}
+
+.prontuario-section p,
+.prontuario-section li {
+  margin: 6px 0;
+  line-height: 1.4;
+}
+
+.prontuario-section ul {
+  list-style: disc inside;
+  margin: 0;
+  padding: 0;
+}
+
+
+.relatorios-container {
+  max-width: 900px;
+  margin: 40px auto;
+  background: #fff;
+  padding: 32px;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
+}
+
+.filtros-container {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.filtro-item {
+  display: flex;
+  flex-direction: column;
+  min-width: 180px;
+}
+
+.filtro-item label {
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.btn-gerar {
+  align-self: flex-end;
+  padding: 8px 20px;
+  background: #1976d2;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: bold;
+  margin-top: 22px;
+  transition: background 0.2s;
+}
+
+.btn-gerar:hover {
+  background: #125ea7;
+}
+
+.resultado-container {
+  margin-top: 32px;
+}
+
+.info-text {
+  color: #888;
+  font-style: italic;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 12px;
+}
+
+th, td {
+  border: 1px solid #e0e0e0;
+  padding: 10px 8px;
+  text-align: left;
+}
+
+th {
+  background: #f5f5f5;
+  font-weight: bold;
+}

src/components/Sidebar.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import menuItems from "../data/sidebar-items.json";
+import menuItems from "../data/sidebar-items-medico.json"; // Use "sidebar-items-secretaria.json" para secretaria
 
 function Sidebar() {
   const [isActive, setIsActive] = useState(true);

src/data/sidebar-items-medico.json

@@ -0,0 +1,48 @@
+[
+  {
+    "name": "Menu",
+    "isTitle": true
+  },
+  
+  {
+    "name":"Início",
+    "url": "/",
+    "icon": "house"
+  },
+
+  {
+    "name": "Prontuário",
+    "icon": "calendar-plus-fill",
+    "url": "/prontuario"
+  },
+
+  {
+    "name": "Laudo do Paciente",
+    "icon": "table",
+    "url": "/laudo"
+  },
+
+ {
+    "name": "Relatórios",
+    "icon": "file-earmark-text-fill",
+    "url": "/relatorios"
+  },
+
+  {
+    "name": "Agendamentos",
+    "icon": "calendar-plus-fill",
+    "url": "/agendamento"
+  },
+
+ 
+
+   {
+    "name": " Chat com pacientes",
+    "icon": "chat-dots-fill",
+    "url": "/chat"
+  }
+  
+
+
+
+]

src/data/sidebar-items-secretaria.json

@@ -1,48 +1,49 @@
-[
+[
-  {
+  {
-    "name": "Menu",
+    "name": "Menu",
-    "isTitle": true
+    "isTitle": true
-  },
+  },
-
+
-  {
+  {
-    "name":"Início",
+    "name":"Início",
-    "url": "/",
+    "url": "/",
-    "icon": "house"
+    "icon": "house"
-  },
+  },
-
+
-  {
+  {
-    "name": "Cadastro de Pacientes",
+    "name": "Cadastro de Pacientes",
-    "url": "/pacientes/cadastro",
+    "url": "/pacientes/cadastro",
-    "icon": "heart-pulse-fill"
+    "icon": "heart-pulse-fill"
-  },
+  },
-
+
-  {
+  {
-    "name": "Cadastro do Médico",
+    "name": "Cadastro do Médico",
-    "url": "/medicos/cadastro",
+    "url": "/medicos/cadastro",
-    "icon": "capsule"
+    "icon": "capsule"
-  },
+  },
-
+
-  {
+  {
-    "name": "Lista de Pacientes",
+    "name": "Lista de Pacientes",
-    "icon": "clipboard-heart-fill",
+    "icon": "clipboard-heart-fill",
-    "url": "/pacientes"
+    "url": "/pacientes"
-  },
+  },
-
+
-  {
+  {
-    "name": "Lista de Médico",
+    "name": "Lista de Médico",
-    "icon": "hospital-fill",
+    "icon": "hospital-fill",
-    "url": "/medicos"
+    "url": "/medicos"
-  }, 
+  }, 
-  {
+  {
-    "name": "Agendar consulta",
+    "name": "Agendar consulta",
-    "icon": "calendar-plus-fill",
+    "icon": "calendar-plus-fill",
-    "url": "/agendamento"
+    "url": "/agendamento"
-  },
+  },
-  
+
-  {
+ 
-    "name": "Laudo do Paciente",
+  {
-    "icon": "table",
+    "name": "Laudo do Paciente",
-    "url": "/laudo"
+    "icon": "table",
-  }
+    "url": "/laudo"
-
+  }
+
 ]

src/pages/style/Agendamento.css

@@ -39,7 +39,7 @@
   display: flex;
   flex-direction: row;
   margin:10px;
-  justify-content: flex-end;
+  justify-content: flex-start;
 }
 
 .busca-atendimento select{

src/perfis/Perfil_medico/PerfilMedico.jsx

@@ -0,0 +1,29 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Sidebar from "../../components/Sidebar";
+
+import Inicio from "../../pages/Inicio";
+import Agendamento from "../../pages/Agendamento";
+import LaudoManager from "../../pages/LaudoManager";
+import Prontuario from "../../PagesMedico/prontuario";
+import Relatorio from "../../PagesMedico/relatorio";
+
+function PerfilMedico() {
+  return (
+    <Router>
+      <div id="app" className="active">
+        <Sidebar />
+        <div id="main">
+          <Routes>
+            <Route path="/" element={<Inicio />} />
+            <Route path="/agendamento" element={<Agendamento />} />
+            <Route path="/laudo" element={<LaudoManager />} />
+            <Route path="/prontuario" element={<Prontuario />} />
+            <Route path="/relatorios" element={<Relatorio />} />
+          </Routes>
+        </div>
+      </div>
+    </Router>
+  );
+}
+
+export default PerfilMedico;

src/perfis/perfil_secretaria/PerfilSecretaria.jsx

@@ -1,5 +1,4 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-
 import Sidebar from "../../components/Sidebar";
 import Inicio from "../../pages/Inicio";
 import TablePaciente from "../../pages/TablePaciente";
@@ -14,7 +13,7 @@ import DoctorDetails from "../../pages/DoctorDetails";
 import DoctorEditPage from "../../pages/DoctorEditPage";
 
 function PerfilSecretaria() {
-  return (
+  return (  
     <Router>
       <div id="app" className="active">
         <Sidebar />