modificacoes nas pastas e adição dos botoes de acões

src/App.css

@@ -36,3 +36,33 @@
     transform: rotate(360deg);
   }
 }
+
+  body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        background: #f3f4f6;
+    }
+
+    .container {
+        display: flex;
+        gap: 12px;
+    }
+
+    .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 14px;
+        border: 0;
+        border-radius: 8px;
+        font-weight: 600;
+        font-size: 14px;
+        cursor: pointer;
+        transition: 0.2s;
+    }
+
+    h1{
+      color:gray;
+    }

src/App.js

@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import Sidebar from './components/Sidebar';
 import Header from './components/Header';
 import Table from "./pages/Table"; 
 
-
+import DoctorEditPage from './pages/DoctorEditPage';
 import FormLayout from './pages/FormLayout';
 import EditPage from './pages/EditPage';
 
 import Details from './pages/Details';
 
 import DoctorTable from './pages/DoctorTable';
-import DoctorFormLayout from './pages/DoctorFormLayout';
+import DoctorFormManager from './pages/DoctorFormManager';
 import Agendamento from './pages/Agendamento'
 
 
@@ -33,7 +33,7 @@ const renderPageContent = () => {
     return <FormLayout/>;
   } 
   else if(currentPage === 'doctor-form-layout'){
-    return <DoctorFormLayout/>
+    return <DoctorFormManager />;
   }
   else if (currentPage === 'table') {
     return <Table setCurrentPage={setCurrentPage} setPatientID={setPatientID}/>;
@@ -43,14 +43,17 @@ const renderPageContent = () => {
   }
   else if(currentPage === 'edit-page-paciente'){
     return <EditPage  id={patientID} />
-  }
+  } 
- 
   else if(currentPage === 'details-page-paciente'){
     return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
   }
   else if(currentPage === 'agendamento-page'){
     return <Agendamento setCurrentPage={setCurrentPage} />
   }
+  else if(currentPage === 'edit-page-medico'){
+    return <DoctorEditPage id={patientID} />
+
+  }
   
 
 

src/Table.css

@@ -0,0 +1,50 @@
+ body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        background: #f3f4f6;
+    }
+
+    .container {
+        display: flex;
+        gap: 12px;
+    }
+
+    .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 14px;
+        border: 0;
+        border-radius: 8px;
+        font-weight: 600;
+        font-size: 14px;
+        cursor: pointer;
+        transition: 0.2s;
+    }
+
+    .btn svg {
+        width: 18px;
+        height: 18px;
+    }
+
+    .btn-view {
+        background: #e0f2fe;
+        color: #075985;
+    }
+
+    .btn-edit {
+        background: #fef3c7;
+        color: #92400e;
+    }
+
+    .btn-delete {
+        background: #fee2e2;
+        color: #991b1b;
+    }
+
+    .btn:hover {
+        opacity: 0.9;
+        transform: translateY(-2px);
+    }

src/components/AgendarConsulta/DadosConsultasMock.js

@@ -86,11 +86,38 @@ let AgendamentosMes = {semana1:{
     { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
     { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
 
-    quarta:[{ horario: '07:10', motivo:'vazio' }],
+    quarta:[  { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', satus:'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: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
 
-    quinta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' }],
+    quinta:[  { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', satus:'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: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }],
 
-    sexta:[{ horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' }]}
+    sexta:[  { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
+    { horario: '07:10', satus:'vazio' },
+    { horario: '07:20', status: 'vazio' },
+    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
+    { horario: '07:40', status:'vazio'  },
+    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
+    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
+    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
+    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
+    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }]}
 
 
 

src/components/doctors/DoctorForm.jsx

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
-import InputMask from "react-input-mask";
+//import InputMask from "react-input-mask";
+
+function DoctorForm({ onSave, onCancel, DoctorDict }) {
+
 
-function DoctorForm({ onSave, onCancel, PatientDict }) {
 
   const FormatTelefones = (valor) => {
 
-   const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+  const digits = String(valor).replace(/\D/g, '').slice(0, 11);
 
   
   return digits
@@ -31,25 +33,25 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
 
 
   const [formData, setFormData] = useState({
-    nome: PatientDict.nome,
+    nome: DoctorDict.nome,
-    nomeSocial: PatientDict.nome_social,
+    nomeSocial: DoctorDict.nome_social,
-    dataNascimento: PatientDict.data_nascimento,
+    dataNascimento: DoctorDict.data_nascimento,
-    genero: PatientDict.sexo,
+    genero: DoctorDict.sexo,
     //documento: '',
     //numeroDocumento: '',
-    cpf: PatientDict.cpf,
+    cpf: DoctorDict.cpf,
-    profissao: PatientDict.profissao ,
+    profissao: DoctorDict.profissao ,
     //nomeConjuge: '',
     //outroId: '',
     cep: '',
-    cidade: PatientDict.cidade,
+    cidade: DoctorDict.cidade,
-    estado: PatientDict.estado,
+    estado: DoctorDict.estado,
-    bairro: PatientDict.bairro,
+    bairro: DoctorDict.bairro,
-    rua: PatientDict.logradouro,
+    rua: DoctorDict.logradouro,
     numero: '',
     complemento: '',
-    email: PatientDict.email,
+    email: DoctorDict.email,
-    telefone1: PatientDict.celular,
+    telefone1: DoctorDict.celular,
     telefone2: '',
     telefone3: '',
     observacoes: ''
@@ -57,12 +59,14 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
 
   const handleChange = (e) => {
     const { name, value } = e.target;
+    
     setFormData({
       ...formData,
       [name]: value
     });
 
 
+
     if(name.includes('cpf')){
 
       let cpfFormatado = FormatCPF(e.target.value)

src/pages/DoctorEditPage.jsx

@@ -1,52 +1,58 @@
-// import React from 'react'
+ import React from 'react'
 
-// import DoctorForm from '../components/doctors/DoctorForm'
+ import DoctorForm from '../components/doctors/DoctorForm'
 
-// import {useEffect, useState} from 'react'
+ import {useEffect, useState} from 'react'
-
-// const EditPage = ( {id}) => {
-
-//   const [PatientToPUT, setPatientPUT] = useState({})
-
-//   var requestOptions = {
-//    method: 'GET',
-//    redirect: 'follow'
-// };
-
-// useEffect(() => {
 
 
-// fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions)
+const [DoctorToPUT, setDoctorPUT] = useState({})
-//   .then(response => response.json())
-//   .then(result => result.data)
-//   .then(data => console.log(data))
-//   .catch(error => console.log('error', error));
-    
-// }, [])
-//   const HandlePutPatient = () => {
-
-//     console.log('médico atualizado')
-
-//   }
 
 
-//   return (
+ const DoctorEditPage = ( {id}) => {
 
-//     <div>
+
-    
+   var requestOptions = {
-//     <button>Voltar para lista sem salvar</button>
+    method: 'GET',
+    redirect: 'follow'
+ };
+
+ useEffect(() => {
+    console.log(DoctorToPUT)
+ },[DoctorToPUT])
+
+ useEffect(() => {
+    setDoctorPUT({nome:'kkddd'})
+
+/*
+ fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions)
+   .then(response => response.json())
+   .then(result => result.data)
+   .then(data => setDoctorPUT(data))
+
+   .catch(error => console.log('error', error));
+  */  
+ }, [])
+
+   const HandlePutDoctor = () => {
+
+     console.log('médico atualizado')
+
+   }
+
+
+   return (
+     <div>
+        <h2>Editar dados do médico</h2>
+        <button>Voltar para lista sem salvar</button>
 
     
+    <DoctorForm
+    onSave={HandlePutDoctor}
+    onCancel={() => console.log('cancelar edição')}
+    DoctorDict={DoctorToPUT}
+    />
 
-//     <PatientForm
+   </div>
-//     onSave={HandlePutPatient}
+ )}
-//     onCancel={console.log('Não atualizar')}
-//     PatientDict={PatientToPUT}
-    
-//     />
-    
-//     </div>
-//   )
-// }
 
-// export default EditPage
+export default DoctorEditPage;

src/pages/DoctorFormManager.jsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import DoctorList from '../components/doctors/DoctorList';
 import DoctorForm from '../components/doctors/DoctorForm';
 
-function FormLayout( ) {
+function DoctorFormManager( ) {
   // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
   const [view, setView] = useState('form');
 
@@ -55,8 +55,7 @@ function FormLayout( ) {
               <DoctorForm
                 onSave={handleSavePatient}
                 onCancel={() => setView('list')}
-                PatientDict={{}}
+                DoctorDict={{}}
-               
               />
             )}
           </div>
@@ -66,4 +65,4 @@ function FormLayout( ) {
   );
 }
 
-export default FormLayout;
+export default DoctorFormManager;

src/pages/DoctorTable.jsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import DoctorList from '../components/doctors/DoctorList';
+//import DoctorList from '../components/doctors/DoctorList';
-import DoctorForm from '../components/doctors/DoctorForm';
+//import DoctorForm from '../components/doctors/DoctorForm';
 
 function TableDoctor({ setCurrentPage, setPatientID }) {
   const [pacientes, setPacientes] = useState([]);
   const [search, setSearch] = useState("");
 
   // Função para excluir médicos
-  const deletePatient = async (id) => {
+  const deletDoctor = async (id) => {
     const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
 
     if (!window.confirm("Tem certeza que deseja excluir este médico?")) return;
@@ -21,21 +21,21 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
       .catch((error) => console.log("Deu problema", error));
   };
 
-  const onChange = (e, id) => {
+  const onClick = (e, id) => {
-    let value = e.target.value;
+    let value = e.target.className;
 
-    if (value === "verdetalhes") {
+    if (value === "btn btn-view") {
       setCurrentPage("details-page-paciente");
     }
 
-    if (value === "editar") {
+    if (value === "btn btn-edit") {
-      setCurrentPage("edit-page-paciente");
+      setCurrentPage("edit-page-medico");
       setPatientID(id);
     }
 
-    if (value === "excluir") {
+    if (value === "btn btn-delete") {
       console.log(`Excluir ${id}`);
-      deletePatient(id);
+      deletDoctor(id);
     }
   };
 
@@ -127,12 +127,34 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
                             </td>
 
                             <td>
-                              <select onChange={(e) => onChange(e, paciente.id)}>
+                                <div className="container">
-                                <option value="">:</option>
+                                  <button className="btn btn-view" onClick={(e) => onClick(e,paciente.id)}>
-                                <option value="verdetalhes">Ver detalhes</option>
+                                      <svg viewBox="0 0 24 24" fill="none">
-                                <option value="editar">Editar</option>
+                                          <path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" stroke="currentColor" stroke-width="1.5" />
-                                <option value="excluir">Excluir</option>
+                                          <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" />
-                              </select>
+                                      </svg>
+                                      Ver Detalhes
+                                  </button>
+
+                                  <button className="btn btn-edit" onClick={(e) => onClick(e,paciente.id)}>
+                                      <svg viewBox="0 0 24 24" fill="none">
+                                          <path d="M3 21v-3.6l11-11 3.6 3.6-11 11H3z" stroke="currentColor" stroke-width="1.5" />
+                                          <path d="M14.5 6.5l3 3" stroke="currentColor" stroke-width="1.5" />
+                                      </svg>
+                                      Editar
+                                  </button>
+
+                                  <button className="btn btn-delete" onClick={(e) => onClick(e,paciente.id)}>
+                                      <svg viewBox="0 0 24 24" fill="none">
+                                          <path d="M3 6h18" stroke="currentColor" stroke-width="1.5" />
+                                          <path d="M8 6V4h8v2" stroke="currentColor" stroke-width="1.5" />
+                                          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" stroke="currentColor" stroke-width="1.5" />
+                                          <path d="M10 11v6M14 11v6" stroke="currentColor" stroke-width="1.5" />
+                                      </svg>
+                                      Excluir
+                                  </button>
+
+                                </div>
                             </td>
                           </tr>
                         ))

src/pages/Table.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import PatientList from '../components/patients/PatientList';
+//import PatientList from '../components/patients/PatientList';
-import PatientForm from '../components/patients/PatientForm';
+//import PatientForm from '../components/patients/PatientForm';
+import '../Table.css'
+
 
 function TablePaciente({ setCurrentPage, setPatientID }) {
   const [pacientes, setPacientes] = useState([]);
@@ -21,14 +23,15 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
       .catch((error) => console.log("Deu problema", error));
   };
 
-  const onChange = (e, id) => {
+  const onClick = (e, id) => {
-    let value = e.target.value;
+    let value = e.target.className;
+    console.log(value)
 
-    if(value === 'verdetalhes'){
+    if(value === 'btn btn-view'){
       setCurrentPage('details-page-paciente')
       setPatientID(id);
     } 
-      if(value === 'editar'){
+      if(value === 'btn btn-edit'){
       setCurrentPage('edit-page-paciente')
       setPatientID(id);
     
@@ -36,9 +39,9 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
       }
      
     
-      if (value === "excluir") {
+      if (value === "btn btn-delete") {
          deletePatient(id);
-      console.log(`Excluir ${id}`);
+         console.log(`Excluir ${id}`);
     
 
     }
@@ -132,12 +135,34 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
                             </td>
 
                             <td>
-                              <select onChange={(e) => onChange(e, paciente.id)}>
+                               <div className="container">
-                                <option value=""> </option>
+                                  <button className="btn btn-view" onClick={(e) => onClick(e,paciente.id)}>
-                                <option value="verdetalhes">Ver detalhes</option>
+                                      <svg viewBox="0 0 24 24" fill="none">
-                                <option value="editar">Editar</option>
+                                          <path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" stroke="currentColor" stroke-width="1.5" />
-                                <option value="excluir">Excluir</option>
+                                          <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" />
-                              </select>
+                                      </svg>
+                                      Ver Detalhes
+                                  </button>
+
+                                  <button className="btn btn-edit" onClick={(e) => onClick(e,paciente.id)}>
+                                      <svg viewBox="0 0 24 24" fill="none">
+                                          <path d="M3 21v-3.6l11-11 3.6 3.6-11 11H3z" stroke="currentColor" stroke-width="1.5" />
+                                          <path d="M14.5 6.5l3 3" stroke="currentColor" stroke-width="1.5" />
+                                      </svg>
+                                      Editar
+                                  </button>
+
+                                  <button className="btn btn-delete" onClick={(e) => onClick(e,paciente.id)}>
+                                      <svg viewBox="0 0 24 24" fill="none">
+                                          <path d="M3 6h18" stroke="currentColor" stroke-width="1.5" />
+                                          <path d="M8 6V4h8v2" stroke="currentColor" stroke-width="1.5" />
+                                          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" stroke="currentColor" stroke-width="1.5" />
+                                          <path d="M10 11v6M14 11v6" stroke="currentColor" stroke-width="1.5" />
+                                      </svg>
+                                      Excluir
+                                  </button>
+
+                                </div>
                             </td>
                           </tr>
                         ))