melhorias na organização de pastas
This commit is contained in:
jp-lima
parent
98f076a030
commit
0e29e7dc3d
11
src/App.js
11
src/App.js
@ -1,10 +1,10 @@
|
||||
import React, { useState } from 'react';
|
||||
import Sidebar from './components/Sidebar';
|
||||
import Header from './components/Header';
|
||||
//import Header from './components/Header';
|
||||
import Table from "./pages/Table";
|
||||
|
||||
import Inicio from './pages/Inicio';
|
||||
import FormLayout from './pages/FormLayout';
|
||||
import PatientCadastroManager from './pages/PatientCadastroManager';
|
||||
import EditPage from './pages/EditPage';
|
||||
import DoctorEditPage from './pages/DoctorEditPage';
|
||||
|
||||
@ -12,10 +12,9 @@ import Details from './pages/Details';
|
||||
import DoctorDetails from './pages/DoctorDetails';
|
||||
|
||||
import DoctorTable from './pages/DoctorTable';
|
||||
import DoctorFormLayout from './pages/DoctorFormLayout';
|
||||
import DoctorCadastroManager from './pages/DoctorCadastroManager';
|
||||
import Agendamento from './pages/Agendamento'
|
||||
|
||||
|
||||
import LaudoManager from "./pages/LaudoManager";
|
||||
|
||||
function App() {
|
||||
@ -31,9 +30,9 @@ function App() {
|
||||
case 'agendamento':
|
||||
return <Agendamento/>;
|
||||
case 'form-layout':
|
||||
return <FormLayout />;
|
||||
return <PatientCadastroManager setCurrentPage={setCurrentPage}/>;
|
||||
case 'doctor-form-layout':
|
||||
return <DoctorFormLayout />;
|
||||
return <DoctorCadastroManager />;
|
||||
case 'table':
|
||||
return <Table setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
|
||||
case 'doctor-table':
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import InputMask from "react-input-mask";
|
||||
import "../Estilo/styleagendamentos.css";
|
||||
import "./style/styleagendamentos.css";
|
||||
|
||||
const FormNovaConsulta = ({ onCancel }) => {
|
||||
const handleSubmit = (e) => {
|
||||
@ -15,6 +15,7 @@ const FormNovaConsulta = ({ onCancel }) => {
|
||||
<form className="form-agendamento" onSubmit={handleSubmit}>
|
||||
<h2 className="section-title">Informações do paciente</h2>
|
||||
|
||||
<div id="informacoes-paciente-primeiralinha">
|
||||
<label>Nome *</label>
|
||||
<input type="text" name="nome" placeholder="Insira o nome do paciente" required />
|
||||
|
||||
@ -25,9 +26,10 @@ const FormNovaConsulta = ({ onCancel }) => {
|
||||
|
||||
<label>RG</label>
|
||||
<input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
|
||||
</div>
|
||||
|
||||
<label>Data de nascimento *</label>
|
||||
<input type="date" name="dataNascimento" required />
|
||||
<input type="date" name="data_nascimento" required />
|
||||
|
||||
<label>Telefone</label>
|
||||
<InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import CardConsulta from './CardConsulta'
|
||||
import AgendamentosMes from './DadosConsultasMock'
|
||||
import "./styleTabelas/tabeladia.css";
|
||||
import "./style/styleTabelas/tabeladia.css";
|
||||
|
||||
const TabelaAgendamentoDia = ({handleClickAgendamento}) => {
|
||||
|
||||
|
||||
@ -2,11 +2,10 @@ import React from 'react'
|
||||
import AgendamentosMes from './DadosConsultasMock'
|
||||
import dayjs from "dayjs"
|
||||
import CardConsulta from './CardConsulta'
|
||||
import "./styleTabelas/tabelames.css";
|
||||
import "./style/styleTabelas/tabelames.css";
|
||||
|
||||
const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {
|
||||
|
||||
const agendamentosMes = [0,1,2,3,4,5]
|
||||
|
||||
const dataHoje = dayjs()
|
||||
const AnoAtual = dataHoje.year()
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import Agendamento from '../../pages/Agendamento'
|
||||
|
||||
import AgendamentosMes from './DadosConsultasMock'
|
||||
import CardConsulta from './CardConsulta'
|
||||
import "./styleTabelas/tabelasemana.css";
|
||||
import "./style/styleTabelas/tabelasemana.css";
|
||||
|
||||
const TabelaAgendamentoSemana = () => {
|
||||
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
// O componente agora recebe a função `toggleSidebar` como uma prop.
|
||||
function Header({ toggleSidebar }) {
|
||||
return (
|
||||
<header className="mb-3">
|
||||
<a href="#" className="burger-btn d-block d-xl-none" onClick={toggleSidebar}>
|
||||
<i className="bi bi-justify fs-3"></i>
|
||||
</a>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,110 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
function ChatApp() {
|
||||
const [selectedUser, setSelectedUser] = useState(1);
|
||||
|
||||
const users = [
|
||||
{ id: 1, name: "Alice", avatar: "https://i.pravatar.cc/40?img=1" },
|
||||
{ id: 2, name: "Bob", avatar: "https://i.pravatar.cc/40?img=2" },
|
||||
{ id: 3, name: "Charlie", avatar: "https://i.pravatar.cc/40?img=3" }
|
||||
];
|
||||
|
||||
const messages = {
|
||||
1: [
|
||||
{ from: "Alice", text: "Oi Rafael 👋", time: "10:15" },
|
||||
{ from: "Você", text: "E aí Alice, tudo bem?", time: "10:16" },
|
||||
{ from: "Alice", text: "Tudo ótimo! 😄", time: "10:17" }
|
||||
],
|
||||
2: [
|
||||
{ from: "Bob", text: "Fala mano!", time: "09:30" },
|
||||
{ from: "Você", text: "Tranquilo Bob?", time: "09:32" },
|
||||
{ from: "Bob", text: "Sempre ✌️", time: "09:33" }
|
||||
],
|
||||
3: [
|
||||
{ from: "Charlie", text: "Já viu a novidade?", time: "Ontem" },
|
||||
{ from: "Você", text: "Qual novidade?", time: "Ontem" },
|
||||
{ from: "Charlie", text: "Te conto depois kkk 🤐", time: "Ontem" }
|
||||
]
|
||||
};
|
||||
|
||||
const currentMessages = messages[selectedUser] || [];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-heading">
|
||||
<h3>Chat Application</h3>
|
||||
<p className="text-muted">Converse em tempo real com seus contatos</p>
|
||||
</div>
|
||||
|
||||
<div className="page-content">
|
||||
<div className="row">
|
||||
{/* Sidebar - Contatos */}
|
||||
<div className="col-3 border-end">
|
||||
<h6 className="mb-3">Contatos</h6>
|
||||
<ul className="list-group">
|
||||
{users.map((user) => (
|
||||
<li
|
||||
key={user.id}
|
||||
className={`list-group-item d-flex align-items-center ${
|
||||
selectedUser === user.id ? "active" : ""
|
||||
}`}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setSelectedUser(user.id)}
|
||||
>
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.name}
|
||||
className="rounded-circle me-2"
|
||||
width={40}
|
||||
height={40}
|
||||
/>
|
||||
<span>{user.name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Chat */}
|
||||
<div className="col-9 d-flex flex-column" style={{ height: "70vh" }}>
|
||||
<div
|
||||
className="flex-grow-1 border rounded p-3 mb-2 overflow-auto"
|
||||
style={{ background: "#f9f9f9" }}
|
||||
>
|
||||
{currentMessages.map((msg, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`mb-2 ${
|
||||
msg.from === "Você" ? "text-end" : "text-start"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`d-inline-block p-2 rounded ${
|
||||
msg.from === "Você"
|
||||
? "bg-primary text-white"
|
||||
: "bg-light"
|
||||
}`}
|
||||
>
|
||||
<strong>{msg.from}:</strong> {msg.text}
|
||||
</div>
|
||||
<div className="small text-muted">{msg.time}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Caixa de mensagem */}
|
||||
<div className="d-flex">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control me-2"
|
||||
placeholder="Digite sua mensagem..."
|
||||
/>
|
||||
<button className="btn btn-primary">Enviar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChatApp;
|
||||
@ -1,27 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
function DataTable() {
|
||||
return (
|
||||
<>
|
||||
<div className="page-heading">
|
||||
<h3>Data Table</h3>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">Minha Data Table</h4>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<p>Aqui você vai construir sua DataTable futuramente 🚀</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DataTable;
|
||||
@ -4,7 +4,7 @@ import React, { useState } from 'react';
|
||||
import DoctorList from '../components/doctors/DoctorList';
|
||||
import DoctorForm from '../components/doctors/DoctorForm';
|
||||
|
||||
function FormLayout( ) {
|
||||
function DoctorCadastroManager( ) {
|
||||
// Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
|
||||
const [view, setView] = useState('form');
|
||||
|
||||
@ -66,4 +66,4 @@ function FormLayout( ) {
|
||||
);
|
||||
}
|
||||
|
||||
export default FormLayout;
|
||||
export default DoctorCadastroManager;
|
||||
@ -1,113 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
function EmailApp() {
|
||||
// Lista fake de emails para exibir
|
||||
const emails = [
|
||||
{
|
||||
id: 1,
|
||||
from: "Open source project public release",
|
||||
preview: "Hey John, bah kivu decrete epanorthotic unnotched...",
|
||||
time: "4:14 AM",
|
||||
starred: true,
|
||||
avatar: "https://i.pravatar.cc/40?img=1"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
from: "Ecommerce website Paypal integration",
|
||||
preview: "We will start the new application development soon...",
|
||||
time: "2:15 AM",
|
||||
starred: false,
|
||||
avatar: "https://i.pravatar.cc/40?img=2"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
from: "How To Set Intentions That Energize You",
|
||||
preview: "I will provide you more details after this Saturday...",
|
||||
time: "Yesterday",
|
||||
starred: false,
|
||||
avatar: "https://i.pravatar.cc/40?img=3"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-heading">
|
||||
<h3>Email Application</h3>
|
||||
<p className="text-muted">An application for user to check email inbox</p>
|
||||
</div>
|
||||
|
||||
<div className="page-content">
|
||||
<div className="row">
|
||||
{/* Sidebar */}
|
||||
<div className="col-3">
|
||||
<button className="btn btn-primary w-100 mb-3">Compose</button>
|
||||
<ul className="list-group">
|
||||
<li className="list-group-item">📥 Inbox</li>
|
||||
<li className="list-group-item">📤 Sent</li>
|
||||
<li className="list-group-item">📝 Draft</li>
|
||||
<li className="list-group-item">⭐ Starred</li>
|
||||
<li className="list-group-item">🚫 Spam</li>
|
||||
<li className="list-group-item">🗑 Trash</li>
|
||||
</ul>
|
||||
|
||||
<h6 className="mt-4">Labels</h6>
|
||||
<ul className="list-group">
|
||||
<li className="list-group-item">🏷 Product</li>
|
||||
<li className="list-group-item">💼 Work</li>
|
||||
<li className="list-group-item">📌 Misc</li>
|
||||
<li className="list-group-item">👨👩👧 Family</li>
|
||||
<li className="list-group-item">🎨 Design</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Emails */}
|
||||
<div className="col-9">
|
||||
<div className="d-flex justify-content-between mb-2">
|
||||
<div>
|
||||
<button className="btn btn-light me-2">🗑</button>
|
||||
<button className="btn btn-light me-2">✉</button>
|
||||
<button className="btn btn-light me-2">📌</button>
|
||||
<button className="btn btn-light me-2">🏷</button>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control w-50"
|
||||
placeholder="Search email.."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="list-group">
|
||||
{emails.map((mail) => (
|
||||
<div
|
||||
key={mail.id}
|
||||
className="list-group-item d-flex align-items-center justify-content-between"
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<input type="checkbox" className="me-2" />
|
||||
<img
|
||||
src={mail.avatar}
|
||||
alt="avatar"
|
||||
className="rounded-circle me-2"
|
||||
width={40}
|
||||
height={40}
|
||||
/>
|
||||
<div>
|
||||
<strong>{mail.from}</strong>
|
||||
<p className="mb-0 text-muted small">{mail.preview}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{mail.starred ? "⭐" : "☆"} <br />
|
||||
<small className="text-muted">{mail.time}</small>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default EmailApp;
|
||||
@ -1,82 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
function GalleryApp() {
|
||||
const [photos, setPhotos] = useState([
|
||||
{ id: 1, url: "https://picsum.photos/400/300?random=7", title: "Paisagem 1" },
|
||||
/*{url da fotos },*/
|
||||
/*{url da fotos },*/
|
||||
/*{url da fotos },*/
|
||||
/*{url da fotos },*/
|
||||
/*{url da fotos },*/
|
||||
]);
|
||||
|
||||
const [selectedPhoto, setSelectedPhoto] = useState(null);
|
||||
|
||||
return (
|
||||
<div className="page-content">
|
||||
<div className="page-heading">
|
||||
<h3>Galeria de Fotos</h3>
|
||||
</div>
|
||||
|
||||
{/* Grade de fotos */}
|
||||
<div className="row">
|
||||
{photos.map((photo) => (
|
||||
<div key={photo.id} className="col-12 col-md-4 mb-4">
|
||||
<div className="card shadow-sm" onClick={() => setSelectedPhoto(photo)}>
|
||||
<img
|
||||
src={photo.url}
|
||||
alt={photo.title}
|
||||
className="card-img-top"
|
||||
style={{ borderRadius: "10px", cursor: "pointer" }}
|
||||
/>
|
||||
<div className="card-body text-center">
|
||||
<h6>{photo.title}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Modal de visualização */}
|
||||
{selectedPhoto && (
|
||||
<div
|
||||
className="modal d-block"
|
||||
style={{
|
||||
background: "rgba(0,0,0,0.7)",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
onClick={() => setSelectedPhoto(null)}
|
||||
>
|
||||
<div
|
||||
className="modal-content p-3 bg-white"
|
||||
style={{ maxWidth: "800px", borderRadius: "12px" }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<img
|
||||
src={selectedPhoto.url}
|
||||
alt={selectedPhoto.title}
|
||||
className="img-fluid"
|
||||
style={{ borderRadius: "12px" }}
|
||||
/>
|
||||
<h5 className="mt-2">{selectedPhoto.title}</h5>
|
||||
<button
|
||||
className="btn btn-danger mt-2"
|
||||
onClick={() => setSelectedPhoto(null)}
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GalleryApp;
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { FaUser, FaUserPlus, FaCalendarAlt, FaCalendarCheck } from 'react-icons/fa';
|
||||
import './Inicio.css';
|
||||
import './style/Inicio.css';
|
||||
|
||||
function Inicio({ setCurrentPage }) {
|
||||
const [pacientes, setPacientes] = useState([]);
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
// Importamos os dois novos componentes que criamos
|
||||
import PatientList from '../components/patients/PatientList';
|
||||
|
||||
import PatientForm from '../components/patients/PatientForm';
|
||||
|
||||
function FormLayout( ) {
|
||||
function PatientCadastroManager( {setCurrentPage} ) {
|
||||
// Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
|
||||
const [view, setView] = useState('form');
|
||||
|
||||
|
||||
const [formData, setFormData] = useState({})
|
||||
var myHeaders = new Headers();
|
||||
@ -33,7 +33,7 @@ function FormLayout( ) {
|
||||
|
||||
alert(`Paciente "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
|
||||
// Após salvar, voltamos para a tela de lista
|
||||
setView('list');
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
@ -48,16 +48,13 @@ function FormLayout( ) {
|
||||
{/* Se a view for 'list', mostramos a lista com o botão. */}
|
||||
{/* Se for 'form', mostramos o formulário de cadastro. */}
|
||||
|
||||
{view === 'list' ? (
|
||||
<PatientList onAddPatient={() => setView('form')} />
|
||||
) : (
|
||||
<PatientForm
|
||||
onSave={handleSavePatient}
|
||||
onCancel={() => setView('list')}
|
||||
onCancel={() => {setCurrentPage('table')}}
|
||||
formData={formData}
|
||||
setFormData={setFormData}
|
||||
/>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@ -65,4 +62,4 @@ function FormLayout( ) {
|
||||
);
|
||||
}
|
||||
|
||||
export default FormLayout;
|
||||
export default PatientCadastroManager;
|
||||
@ -1,84 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
function Files() {
|
||||
// 1. Criamos um estado para armazenar o arquivo selecionado pelo usuário
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
|
||||
// 2. Esta função é chamada quando o usuário seleciona um arquivo no input
|
||||
const handleFileChange = (event) => {
|
||||
// Pegamos o primeiro arquivo da lista (mesmo que só possa selecionar um)
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
setSelectedFile(file);
|
||||
}
|
||||
};
|
||||
|
||||
// 3. Esta função é chamada quando o botão "Enviar Arquivo" é clicado
|
||||
const handleUpload = () => {
|
||||
if (!selectedFile) {
|
||||
alert("Por favor, selecione um arquivo antes de enviar.");
|
||||
return;
|
||||
}
|
||||
|
||||
// --- Lógica de Envio (Simulação) ---
|
||||
// Em um projeto real, aqui você enviaria o 'selectedFile' para um servidor.
|
||||
// Por enquanto, vamos apenas mostrar um alerta de sucesso.
|
||||
console.log("Enviando o arquivo:", selectedFile.name);
|
||||
alert(`Arquivo "${selectedFile.name}" enviado com sucesso! (Isso é uma simulação)`);
|
||||
|
||||
// Limpa o estado após o envio
|
||||
setSelectedFile(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-heading">
|
||||
<h3>Files</h3>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">Gerenciamento de Arquivos</h4>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
{/* 4. Adicionamos o input de arquivo e o botão */}
|
||||
<div className="mb-3">
|
||||
<label htmlFor="formFile" className="form-label">
|
||||
Selecione um arquivo para enviar
|
||||
</label>
|
||||
{/* O 'key' ajuda o React a resetar o input quando o arquivo é "enviado" */}
|
||||
<input
|
||||
className="form-control"
|
||||
type="file"
|
||||
id="formFile"
|
||||
onChange={handleFileChange}
|
||||
key={selectedFile ? selectedFile.name : 'no-file'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Mostra o nome do arquivo selecionado */}
|
||||
{selectedFile && (
|
||||
<p className="text-muted">
|
||||
Arquivo selecionado: <strong>{selectedFile.name}</strong>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleUpload}
|
||||
disabled={!selectedFile} // O botão fica desabilitado se nenhum arquivo for selecionado
|
||||
>
|
||||
<i className="bi bi-upload"></i> Enviar Arquivo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Files;
|
||||
Loading…
x
Reference in New Issue
Block a user