RiseUP/riseup-squad23
4
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

começo da estilização do form

Browse Source
This commit is contained in:
jp-lima 2025-09-19 15:19:01 -03:00
parent 0e29e7dc3d
commit ca1f5409e0
4 changed files with 154 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
src/components/AgendarConsulta/FormNovaConsulta.jsx
View File

@ -1,6 +1,6 @@
import React from "react";
import InputMask from "react-input-mask";
import "./style/styleagendamentos.css";
import "./style/formagendamentos.css";
const FormNovaConsulta = ({ onCancel }) => {
const handleSubmit = (e) => {
@ -15,98 +15,132 @@ 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 />
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
<div className="campo-de-input">
<label>Nome *</label>
<input type="text" name="nome" placeholder="Insira o nome do paciente" required />
</div>
<label>CPF do paciente</label>
<InputMask mask="999.999.999-99" placeholder="000.000.000-00">
{(inputProps) => <input {...inputProps} type="text" name="cpf" />}
</InputMask>
<div className="campo-de-input">
<label>CPF do paciente</label>
<InputMask mask="999.999.999-99" placeholder="000.000.000-00">
{(inputProps) => <input {...inputProps} type="text" name="cpf" />}
</InputMask>
</div>
<label>RG</label>
<input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
<div className="campo-de-input">
<label>RG</label>
<input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
</div>
</div>
<label>Data de nascimento *</label>
<input type="date" name="data_nascimento" required />
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-dois">
<div className="campo-de-input">
<label>Data de nascimento *</label>
<input type="date" name="data_nascimento" required />
</div>
<label>Telefone</label>
<InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
{(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
</InputMask>
<div className="campo-de-input">
<label>Telefone</label>
<InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
{(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
</InputMask>
</div>
<label>E-mail</label>
<input type="email" name="email" placeholder="Email" />
<label>Convênio</label>
<select name="convenio">
<option value="particular">Particular</option>
<option value="publico">Público</option>
</select>
<label>Matrícula</label>
<input type="text" name="matricula" placeholder="000000000" />
<div className="campo-de-input">
<label>E-mail</label>
<input type="email" name="email" placeholder="Email" />
</div>
</div>
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
<div className="campo-de-input">
<label>Convênio</label>
<select name="convenio">
<option value="particular">Particular</option>
<option value="publico">Público</option>
</select>
</div>
<div className="campo-de-input">
<label>Matrícula</label>
<input type="text" name="matricula" placeholder="000000000" />
</div>
<div className="campo-de-input">
<label>Validade</label>
<InputMask mask="99/99/9999" placeholder="00/00/0000">
{(inputProps) => <input {...inputProps} type="text" name="validade" />}
</InputMask>
<input type="date" name="validade" />
</div>
</div>
<h3 className="section-subtitle">Informações adicionais</h3>
<button type="button" className="btn-secondary">Documentos e anexos</button>
<h2 className="section-title">Informações do atendimento</h2>
<div className="campo-informacoes-atendimento">
<div className="campo-de-input">
<label>Nome do profissional *</label>
<input type="text" name="profissional" required />
</div>
<label>Nome do profissional *</label>
<input type="text" name="profissional" required />
<label>Tipo de atendimento *</label>
<input type="text" name="tipoAtendimento" required />
<label>Unidade *</label>
<select name="unidade">
<option value="centro">Núcleo de Especialidades Integradas</option>
<option value="leste">Unidade Leste</option>
</select>
<label>Data *</label>
<input type="date" name="dataAtendimento" required />
<label>Início *</label>
<input type="time" name="inicio" required />
<label>Término *</label>
<input type="time" name="termino" required />
<label>Profissional solicitante</label>
<select name="solicitante">
<option value="">Selecione o solicitante</option>
<option value="secretaria">Secretária</option>
<option value="medico">Médico</option>
</select>
<label>Observações</label>
<textarea name="observacoes"></textarea>
<label>
<input type="checkbox" name="reembolso" /> Pagamento via Reembolso
</label>
<label>
<input type="checkbox" name="imprimirEtiqueta" /> Imprimir na Etiqueta / Pulseira
</label>
<h3 className="section-subtitle">Acessibilidade</h3>
<div className="btn-group">
<button type="button"></button>
<button type="button"></button>
<button type="button"></button>
<button type="button"></button>
<div className="campo-de-input">
<label>Tipo de atendimento *</label>
<input type="text" name="tipoAtendimento" required />
</div>
</div>
<div className="form-actions">
<button type="submit" className="btn-primary">Salvar agendamento</button>
<section id="informacoes-atendimento-segunda-linha">
<section id="informacoes-atendimento-segunda-linha-esquerda">
<div className="campo-informacoes-atendimento">
<div className='campo-de-input'>
<label>Unidade *</label>
<select name="unidade">
<option value="centro">Núcleo de Especialidades Integradas</option>
<option value="leste">Unidade Leste</option>
</select>
</div>
<div className="campo-de-input">
<label>Data *</label>
<input type="date" name="dataAtendimento" required />
</div>
</div>
<div className="campo-informacoes-atendimento">
<div className="campo-de-input">
<label>Início *</label>
<input type="time" name="inicio" required />
</div>
<div className="campo-de-input">
<label>Término *</label>
<input type="time" name="termino" required />
</div>
<div className="campo-de-input">
<label>Profissional solicitante</label>
<select name="solicitante">
<option value="" disabled invisible>Selecione o solicitante</option>
<option value="secretaria">Secretária</option>
<option value="medico">Médico</option>
</select>
</div>
</div>
</section>
<div className="campo-de-input">
<label>Observações</label>
<textarea name="observacoes" rows="4" cols="1"></textarea>
</div>
</section>
<div className="form-actions">
<button type="submit" className="btn-primary">Salvar agendamento</button>
<button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
</div>
</form>

39
src/components/AgendarConsulta/style/styleagendamentos.css → src/components/AgendarConsulta/style/formagendamentos.css
View File

@ -1,5 +1,5 @@
.form-container {
max-width: 800px;
/*max-width: 800px;*/
margin: 20px auto;
padding: 25px;
background: #f5f8ff;
@ -106,3 +106,40 @@
font-size: small;
}
.campos-informacoes-paciente,.campo-informacoes-atendimento{
display: flex;
gap: 10px;
flex-direction: row;
}
.campo-de-input{
display: flex;
flex-direction: column;
}
#informacoes-atendimento-segunda-linha{
margin-top: 10px;
display: flex;
flex-direction: row;
gap: rem;
}
textarea{
width: 30px;
resize: both;
}
#informacoes-atendimento-segunda-linha-esquerda input{
width: 200px;
}
input[type='text']{
width: 600px;
}
select[name='solicitante']{
width: 300px;
}

4
src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css
View File

@ -80,3 +80,7 @@
.tabelasemanal tr:hover {
background-color: #f1f1f1 !important;
}
tr{
width: 1000px;
}

2
src/pages/DoctorDetails.jsx
View File

@ -111,7 +111,7 @@ const Details = ({ patientID, setCurrentPage }) => {
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Anexos do Médico:</label>
<p>{paciente.anexos || "-"}</p>
<p>{ "-"}</p>
</div>
</div>
</div>