diff --git a/src/App.css b/src/App.css index fe8e2a0..7224292 100644 --- a/src/App.css +++ b/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; + } \ No newline at end of file diff --git a/src/App.js b/src/App.js index efd431d..d5f83af 100644 --- a/src/App.js +++ b/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 ; } else if(currentPage === 'doctor-form-layout'){ - return + return ; } else if (currentPage === 'table') { return ; @@ -43,14 +43,17 @@ const renderPageContent = () => { } else if(currentPage === 'edit-page-paciente'){ return - } - + } else if(currentPage === 'details-page-paciente'){ return
; } else if(currentPage === 'agendamento-page'){ return } + else if(currentPage === 'edit-page-medico'){ + return + + } diff --git a/src/Table.css b/src/Table.css new file mode 100644 index 0000000..699bc3c --- /dev/null +++ b/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); + } \ No newline at end of file diff --git a/src/components/AgendarConsulta/DadosConsultasMock.js b/src/components/AgendarConsulta/DadosConsultasMock.js index 6a5183d..ed31c67 100644 --- a/src/components/AgendarConsulta/DadosConsultasMock.js +++ b/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: '' }]} diff --git a/src/components/doctors/DoctorForm.jsx b/src/components/doctors/DoctorForm.jsx index 94dbf68..4fc8df7 100644 --- a/src/components/doctors/DoctorForm.jsx +++ b/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, - nomeSocial: PatientDict.nome_social, - dataNascimento: PatientDict.data_nascimento, - genero: PatientDict.sexo, + nome: DoctorDict.nome, + nomeSocial: DoctorDict.nome_social, + dataNascimento: DoctorDict.data_nascimento, + genero: DoctorDict.sexo, //documento: '', //numeroDocumento: '', - cpf: PatientDict.cpf, - profissao: PatientDict.profissao , + cpf: DoctorDict.cpf, + profissao: DoctorDict.profissao , //nomeConjuge: '', //outroId: '', cep: '', - cidade: PatientDict.cidade, - estado: PatientDict.estado, - bairro: PatientDict.bairro, - rua: PatientDict.logradouro, + cidade: DoctorDict.cidade, + estado: DoctorDict.estado, + bairro: DoctorDict.bairro, + rua: DoctorDict.logradouro, numero: '', complemento: '', - email: PatientDict.email, - telefone1: PatientDict.celular, + email: DoctorDict.email, + 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) diff --git a/src/pages/DoctorEditPage.jsx b/src/pages/DoctorEditPage.jsx index 1a445e3..8305199 100644 --- a/src/pages/DoctorEditPage.jsx +++ b/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' - -// const EditPage = ( {id}) => { - -// const [PatientToPUT, setPatientPUT] = useState({}) - -// var requestOptions = { -// method: 'GET', -// redirect: 'follow' -// }; - -// useEffect(() => { + import {useEffect, useState} from 'react' -// fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions) -// .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') - -// } +const [DoctorToPUT, setDoctorPUT] = useState({}) -// return ( + const DoctorEditPage = ( {id}) => { -//
- -// + + var requestOptions = { + 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 ( +
+

Editar dados do médico

+ + console.log('cancelar edição')} + DoctorDict={DoctorToPUT} + /> -// - -//
-// ) -// } +
+ )} -// export default EditPage \ No newline at end of file +export default DoctorEditPage; \ No newline at end of file diff --git a/src/pages/DoctorFormLayout.jsx b/src/pages/DoctorFormManager.jsx similarity index 95% rename from src/pages/DoctorFormLayout.jsx rename to src/pages/DoctorFormManager.jsx index 02a9bed..aa7df16 100644 --- a/src/pages/DoctorFormLayout.jsx +++ b/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( ) { setView('list')} - PatientDict={{}} - + DoctorDict={{}} /> )} @@ -66,4 +65,4 @@ function FormLayout( ) { ); } -export default FormLayout; \ No newline at end of file +export default DoctorFormManager; \ No newline at end of file diff --git a/src/pages/DoctorTable.jsx b/src/pages/DoctorTable.jsx index 9f032b5..a35d357 100644 --- a/src/pages/DoctorTable.jsx +++ b/src/pages/DoctorTable.jsx @@ -1,13 +1,13 @@ import React, { useState, useEffect } from 'react'; -import DoctorList from '../components/doctors/DoctorList'; -import DoctorForm from '../components/doctors/DoctorForm'; +//import DoctorList from '../components/doctors/DoctorList'; +//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) => { - let value = e.target.value; + const onClick = (e, id) => { + let value = e.target.className; - if (value === "verdetalhes") { + if (value === "btn btn-view") { setCurrentPage("details-page-paciente"); } - if (value === "editar") { - setCurrentPage("edit-page-paciente"); + if (value === "btn btn-edit") { + 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 }) {
)) diff --git a/src/pages/Table.jsx b/src/pages/Table.jsx index c886306..7496c9b 100644 --- a/src/pages/Table.jsx +++ b/src/pages/Table.jsx @@ -1,6 +1,8 @@ import React, { useState, useEffect } from 'react'; -import PatientList from '../components/patients/PatientList'; -import PatientForm from '../components/patients/PatientForm'; +//import PatientList from '../components/patients/PatientList'; +//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) => { - let value = e.target.value; + const onClick = (e, id) => { + 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 }) { ))
- +
+ + + + + + +
- +
+ + + + + + +