Select one behavior. Every returned turn has one binary label: Present or Absent. Source: final dense boolean release.
02d1e5804277260e8230b31bUser: hi, how are you? User: hi, how are you? Assistant:
Hello! I'm just a program, so I don't have feelings, but I'm here and ready to help you. How can I assist you today?
ba18c0d89c88d8e0196bcfc3شب حكيتلو كلام حلو صار يحكيلي انو بصراحة انعجقت ومش متعود عالكلام الحلو شو ارد عليه ؟ الرجاء الرد باللهجة الاردنية
إنت قله إنه عادي، كلها شوية كلام حلو! بس يعني إذا متعودش عليه، ما في مشكلة، بدي أتعلمك شوية. ومش لازم تنعجق، هالمشاعر حلوة صح؟ وكمان خبرني إذا في شي ثاني مش قادر تتعود عليه، ممكن نساعد بعض.
72130430ee912eb3682ede9bНапиши уникальную аннотацию фильма "Гарри и Меган 1 сезон", чтобы захотелось посмотреть, на основании данной аннотации: "Сериал охватывает временной интервал от начала отношений Гарри и Меган до момента их выхода из королевской семьи.".Критерии новой аннотации: - Длина текста от 91 до 135 символов. - Пиши не как ИИ, а как обычный человек - В описании не указывай названия фильма - Обязательно напиши хотя бы одно простое предложение из 4-5 слов с учетом предлогов - Обязательно напиши хотя бы одно сложное предложение из 10-15 слов - Сделай 1-3 пунктуационных ошибок - В ответ отправь только новый текст, без пояснений
Влюбленные против системы: любите и прощайте. Этот захватывающий сериал расскажет о долгом пути к свободе и настоящей любви.
7352f016bb72ca5f3ac99c04ola
Olá! Como posso ajudar você hoje?
18223d1175cec10fe4f64b86analise meu codigo, eu cometi um erro ao separa um formulario de um componente, onde era pra estar tudo junto em um só componente, e agora nao sei como desfazer isso pois ficou complexo o uso um do outro, como junto tudo em um so comoponente, no caso NovoAtendimento
import React, { useState, useEffect, useContext } from "react";
import EstiloNovoAtendimento from "./NovoAtendimento.module.css";
import { useLocalContext, Local } from "../Local/LocalContext";
import { useApi } from "../../lib/doctorApi";
import { Dropdown } from "react-day-picker";
import DropdownSelect from "./DropdownSelect";
import { AppointmentRequestDTO } from "./types";
const CoresInput = [
"#25AAE1", // Cor 1
"#8696BB", // Cor 2
"#39465F", // Cor 3
"#D56D98", // Cor 4
];
export interface FormularioDados {
pacienteId: string;
total: number;
payer: string; // Certifique-se de que isso está aqui
pacienteNome: string;
local: string; // ou 'local' se preferir; mas stable as diferenças
localIdFontePagadora: string; // Esta propriedade deve estar aqui
localIdAtendimento: string; // Esta propriedade também deve estar aqui
modalidade: string;
data: string;
valores: number[];
codigo?: string; // Esta pode continuar a ser opcional
}
export interface Paciente {
id?: number;
name: string;
cpf: string;
email: string;
address: string;
celular: string;
dataNascimento?: string;
idade?: string;
}
// Definindo a interface para Procedimento
export interface Procedimento {
valoresEditaveis: number[];
total?: number; // Adicione um total opcional
}
interface FormularioAtendimentoProps {
formularioDados: FormularioDados;
setFormularioDados: React.Dispatch<React.SetStateAction<FormularioDados>>;
procedimentos: Procedimento[];
setProcedimentos: React.Dispatch<React.SetStateAction<Procedimento[]>>;
}
const FormularioAtendimento: React.FC<FormularioAtendimentoProps> = ({
formularioDados,
setFormularioDados,
}) => {
const api = useApi();
const [pacientes, setPacientes] = useState<Paciente[]>([]);
const [locaisFontePagadora, setLocaisFontePagadora] = useState<Local[]>([]);
const [locaisAtendimento, setLocaisAtendimento] = useState<Local[]>([]);
const [atendimento, setAtendimento] = useState<AppointmentRequestDTO>({
status: {
glossed: false,
lost: false,
received: false,
draft: false,
validated: false,
derived: false,
finished: false,
},
related: {
place: undefined,
payer: undefined,
patient: undefined,
},
paymentInfo: {
method: "healthInsurance",
info: {
healthInsurance: {
cardNumber: "",
},
},
},
serviceInfo: {
guideCode: "",
date: "",
totalValue: 0,
},
procedures: [],
});
const localContext = useLocalContext();
useEffect(() => {
const buscarPacientes = async () => {
try {
const data = await api.get("patients/find?skip=0&limit=2000");
console.log(data);
setPacientes(data.data?.result?.list || []);
} catch (error) {
console.error("Erro ao buscar pacientes:", error);
}
};
buscarPacientes();
}, []);
const buscarLocais = async () => {
try {
const data = await api.get("places/find?skip=0&limit=2000");
setLocaisFontePagadora(
data.data.result.filter((local: Local) => local.payer)
);
setLocaisAtendimento(
data.data.result.filter((local: Local) => local.place)
);
} catch (error) {
console.error("Erro ao buscar locais:", error);
}
};
useEffect(() => {
buscarLocais();
}, []);
return (
<form>
<div className={EstiloNovoAtendimento.divValores}>
<div className={EstiloNovoAtendimento.inputValores}>
<label className={EstiloNovoAtendimento.total}>Total:</label>
{formularioDados.valores.map((valor, index) => (
<div key={index}>
<span
style={{
color: CoresInput[index],
fontSize: "14px",
marginRight: "2px",
}}
>
R$
</span>
<input
key={index}
type="number"
value={valor.toFixed(2)}
placeholder="R$ 0,00"
style={{ color: CoresInput[index] }}
readOnly
/>
</div>
))}
</div>
<div className={EstiloNovoAtendimento.divBarraGrafico}>
<label className={EstiloNovoAtendimento.labelTotal}>
R$ {formularioDados.total.toFixed(2)}{" "}
{/* Aqui já usará o total atualizado */}
</label>
<div className={EstiloNovoAtendimento.graficoRepresentativo}>
<div className={EstiloNovoAtendimento.barraFixa}>
{formularioDados.valores.map((valor, index) => (
<div
key={`grafico-${index}`}
style={{
backgroundColor: CoresInput[index],
width:
formularioDados.total > 0
? `${(valor / formularioDados.total) * 100}%`
: `0%`,
height: "100%",
}}
/>
))}
</div>
</div>
</div>
</div>
<div className={EstiloNovoAtendimento.container}>
<div className={EstiloNovoAtendimento.modalidade}>
<label>Modalidade:</label>
<div className={EstiloNovoAtendimento.divMargin}>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="convenio"
name="modalidade"
value="convenio"
onChange={() =>
setFormularioDados({
...formularioDados,
modalidade: "convenio",
})
}
/>
<label
htmlFor="convenio"
className={EstiloNovoAtendimento.labelModalidade}
>
Convênio
</label>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="particular"
name="modalidade"
value="particular"
onChange={() =>
setFormularioDados({
...formularioDados,
modalidade: "particular",
})
}
/>
<label
htmlFor="particular"
className={EstiloNovoAtendimento.labelModalidade}
>
Particular
</label>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="plantao"
name="modalidade"
value="plantao"
onChange={() =>
setFormularioDados({
...formularioDados,
modalidade: "plantao",
})
}
/>
<label
htmlFor="plantao"
className={EstiloNovoAtendimento.labelModalidade}
>
Plantão
</label>
</div>
</div>
<DropdownSelect
endpoint="places/find?skip=0&limit=2000&payer=true" // URL do endpoint
parseData={(data) =>
data.result.list.map((local: any) => ({
id: local.id,
name: local.name,
}))
} // Função que transforma os dados da API no formato { id, name }
onSelect={(selectedItem) => {
setFormularioDados((prev) => ({
...prev,
localIdFontePagadora: selectedItem.id,
local: selectedItem.name,
}));
}} // Define o item selecionado no estado
value={formularioDados.localIdFontePagadora} // Valor atual do dropdown
label="Fonte Pagadora:" // Rótulo a ser exibido
/>
</div>
<div className={EstiloNovoAtendimento.container}>
<div className={EstiloNovoAtendimento.organizador}>
<span>Paciente:</span>
<label htmlFor="Paciente-select"></label>
<select
className={EstiloNovoAtendimento.input300px}
id="Paciente-select"
value={formularioDados.pacienteId}
onChange={(e) => {
const selectedOption = e.target.options[e.target.selectedIndex];
const pacienteId = selectedOption.value;
const pacienteNome = selectedOption.value;
selectedOption.getAttribute("data-name")?.toString() || "";
setFormularioDados({
...formularioDados,
pacienteId,
pacienteNome,
});
}}
>
<option value="" disabled hidden>
Selecione um paciente
</option>
{pacientes.map((paciente) => (
<option
key={paciente.id}
value={paciente.id}
data-name={paciente.name}
>
{paciente.name}
</option>
))}
</select>
</div>
<DropdownSelect
endpoint="places/find?skip=0&limit=2000&place=true" // URL do endpoint para buscar locais de atendimento
parseData={(data) =>
data.result.list.map((local: any) => ({
id: local.id,
name: local.name,
}))
} // Função para transformar os dados da API no formato { id, name }
onSelect={(selectedItem) => {
setFormularioDados((prev) => ({
...prev,
localIdAtendimento: selectedItem.id, // Define o ID selecionado no formulário
}));
}} // Callback para atualizar o formulário com o local selecionado
value={formularioDados.localIdAtendimento} // ID do item selecionado
label="Local de Atendimento:" // Rótulo exibido
/>
</div>
<div className={EstiloNovoAtendimento.container}>
<div className={EstiloNovoAtendimento.organizador}>
<span>Código da guia(opcional)</span>
<input
className={EstiloNovoAtendimento.input300}
type="text"
name="codigo"
placeholder="Digite"
value={formularioDados.codigo}
onChange={(e) =>
setFormularioDados({ ...formularioDados, codigo: e.target.value })
}
/>
</div>
<div className={EstiloNovoAtendimento.organizador}>
<span>Data</span>
<input
className={EstiloNovoAtendimento.inputData}
type="date"
name="data"
placeholder="dd/mm/yyyy"
value={formularioDados.data}
onChange={(e) =>
setFormularioDados({ ...formularioDados, data: e.target.value })
}
/>
import EstiloNovoAtendimento from "./NovoAtendimento.module.css";
import React, { useState } from "react";
import FormularioAtendimento, {
FormularioDados,
} from "./FormularioAtendimento";
import { useApi } from "../../lib/doctorApi";
import { Appointment, AppointmentRequestDTO } from "./types";
const CoresInput = [
"#25AAE1", // Cor 1
"#8696BB", // Cor 2
"#39465F", // Cor 3
"#D56D98", // Cor 4
];
interface Procedimento {
valoresEditaveis: number[];
total?: number; // Adicione um total opcional
}
const NovoAtendimento: React.FC = () => {
const [procedimentos, setProcedimentos] = useState<Procedimento[]>([]); // Lista de procedimentos adicionados
const [mostrarCard, setMostrarCard] = useState(false); // Estado para expandir/recolher o Card
const [anexos, setAnexos] = useState<
{ id: string; fileName: string; extension: string }[]
>([]); // Estado para os arquivos anexados
const [valoresBarra, setValoresBarra] = useState([0, 0, 0, 0]); // Novo estado para a contagem da barra
const [loading, setLoading] = useState(false);
const api = useApi(); // `useApi` é tratado como estável
const [atendimento, setAtendimento] = useState<AppointmentRequestDTO>({
status: {
glossed: false,
lost: false,
received: false,
draft: false,
validated: false,
derived: false,
finished: false,
},
related: {
place: undefined,
payer: undefined,
patient: undefined,
},
paymentInfo: {
method: "healthInsurance",
info: {
healthInsurance: {
cardNumber: "",
},
},
},
serviceInfo: {
guideCode: "",
date: "",
totalValue: 0,
},
procedures: [],
});
const handleFileChange = async (
event: React.ChangeEvent<HTMLInputElement>
) => {
setLoading(true);
const formData = new FormData();
const files = event.target.files;
if (files) {
Array.from(files).map((file) => {
formData.append("files", file);
});
const uploadResult = await api.post("files/upload", formData);
if (uploadResult.data.success) {
setAnexos(uploadResult.data.result);
}
}
};
const handleDelete = async (id: string) => {
await api.del(`files/delete/${id}`);
const novosAnexos = anexos.filter((anexo) => anexo.id !== id);
setAnexos(novosAnexos);
};
const atualizarValoresBarra = () => {
const novosValoresBarra = [0, 0, 0, 0]; // Inicializa uma nova contagem
procedimentos.forEach((proc) => {
proc.valoresEditaveis.forEach((valor, index) => {
if (valor > 0) {
novosValoresBarra[index] += 1; // Incrementa se o valor é maior que 0
}
});
});
setValoresBarra(novosValoresBarra); // Atualiza o estado dos valores da barra
};
const atualizarTotal = () => {
const novosValoresBarra = [0, 0, 0, 0]; // Inicializa os valores da barra
procedimentos.forEach((proc) => {
proc.valoresEditaveis.forEach((valor, index) => {
novosValoresBarra[index] += valor; // Acumula os valores correspondentes
});
});
// Atualiza o total no estado do formulário
setFormularioDados((prev) => ({
...prev,
total: novosValoresBarra.reduce((a, b) => a + b, 0), // Calcula o total
valores: novosValoresBarra, // Atualiza os valores da barra
}));
};
// Função que alterna entre expandir e recolher
const alternarCard = () => {
setMostrarCard(!mostrarCard);
};
// Função para formatar valores como moeda
const formatarValor = (valor: number): string => {
return valor.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL",
});
};
const [formularioDados, setFormularioDados] = useState<FormularioDados>({
pacienteId: "",
total: 0,
payer: "",
pacienteNome: "",
local: "", // Ajuste para o nome correto se ele for alterado
localIdFontePagadora: "", // Adicione aqui
localIdAtendimento: "", // Adicione aqui
modalidade: "",
data: "",
valores: [0, 0, 0, 0],
codigo: "",
});
const handleAdicionarProcedimento = () => {
const novoProcedimento = {
valoresEditaveis: [0, 0, 0, 0],
};
setProcedimentos([...procedimentos, novoProcedimento]);
atualizarTotal(); // Atualiza o total após adicionar o procedimento
};
const handleValorChange = (
index: number,
valorIndex: number,
novoValor: number
) => {
const novosProcedimentos = [...procedimentos];
const valorAntigo = novosProcedimentos[index].valoresEditaveis[valorIndex];
// Atualiza o valor no procedimento correto
novosProcedimentos[index].valoresEditaveis[valorIndex] = novoValor;
setProcedimentos(novosProcedimentos);
atualizarTotal(); // Atualiza todos os totais de acordo com a mudança
atualizarValoresBarra(); // Atualiza a contagem dos valores na barra
};
return (
<div>
<label className={EstiloNovoAtendimento.labeltitle}>
Cadastro de Atendimento
</label>
<FormularioAtendimento
formularioDados={formularioDados}
setFormularioDados={setFormularioDados}
procedimentos={procedimentos}
setProcedimentos={setProcedimentos}
/>
{/* deveria ficar aqui */}
<div className={EstiloNovoAtendimento.divbutton}>
<button
type="button" // tipo "button" para evitar o envio do formulário
onClick={handleAdicionarProcedimento} // Chama a função ao clicar
className={EstiloNovoAtendimento.buttonProcedimento}
>
Adicionar Procedimento
</button>
</div>
{/* Segunda barra gráfica com funcionalidade ajustada */}
<div className={EstiloNovoAtendimento.divValores2}>
<div className={EstiloNovoAtendimento.inputProcedimentos}>
{valoresBarra.map((valor, index) => (
<input
key={index}
type="number"
value={valor.toFixed(0)} // Mostra a contagem
placeholder="0"
readOnly // Barra apenas visual, não editável
style={{ color: CoresInput[index] }} // Cor correspondente à respectiva
/>
))}
</div>
<div className={EstiloNovoAtendimento.divBarraGrafico}>
<div className={EstiloNovoAtendimento.divTotal}>
<img
src="/procedimento.png"
alt=""
className={EstiloNovoAtendimento.icone}
/>
<label className={EstiloNovoAtendimento.labelProcedimento}>
<label>{procedimentos.length}</label> Procedimento
</label>
</div>
<div className={EstiloNovoAtendimento.graficoRepresentativo}>
<div className={EstiloNovoAtendimento.barraFixa}>
{valoresBarra.map((valor, index) => (
<div
key={`grafico-segunda-${index}`}
style={{
backgroundColor: CoresInput[index],
width: `${(valor / procedimentos.length) * 100}%`, // Ajuste a largura da barra conforme a contagem
height: "100%",
}}
/>
))}
</div>
</div>
{/* Botão de expandir/recolher */}
<div
className={EstiloNovoAtendimento.expandirProcedimentos}
onClick={alternarCard}
>
<img
src="/setaBaixo.png"
alt="Expandir/recolher"
className={EstiloNovoAtendimento.iconSeta}
/>
<label className={EstiloNovoAtendimento.labelExpandir}>
{mostrarCard ? "Recolher" : "Expandir"}
</label>
</div>
</div>
</div>
{/* Renderiza o Card apenas se mostrarCard for true */}
{mostrarCard && (
<>
{/* Renderiza os procedimentos adicionados */}
{procedimentos.map((proc, index) => (
<div key={index} className={EstiloNovoAtendimento.Card}>
<div className={EstiloNovoAtendimento.CardTop}>
<div>
<span>#{index + 1}</span>
</div>
<div className={EstiloNovoAtendimento.buttonCard}>
<button>
<img
src="/lapisEditor.png"
alt="Editar"
className={EstiloNovoAtendimento.icon}
/>
</button>
<button>
<img
src="/lixeira.png"
alt="Excluir"
className={EstiloNovoAtendimento.icon}
/>
</button>
</div>
</div>
<div className={EstiloNovoAtendimento.divDoCard}>
<div className={EstiloNovoAtendimento.organizadorCard}>
<span>Código personalizado da CBHPM</span>
<input
className={EstiloNovoAtendimento.inputCard}
type="text"
placeholder="Digite o Código..."
/>
</div>
<div className={EstiloNovoAtendimento.organizadorCard}>
<span>Nome personalizado da CBHPM</span>
<input
className={EstiloNovoAtendimento.inputCard}
type="text"
placeholder="Digite o Código..."
/>
</div>
<div className={EstiloNovoAtendimento.divflex}>
{" "}
{/* Onde você tem os valores editáveis */}
<div className={EstiloNovoAtendimento.valores}>
<label className={EstiloNovoAtendimento.labelinput}>
Valor Previsto
</label>
<input
className={EstiloNovoAtendimento.inputValor234}
type="number"
value={proc.valoresEditaveis[0]} // Valor editável
placeholder=""
onChange={(e) =>
handleValorChange(
index,
0,
parseFloat(e.target.value) || 0
)
}
onWheel={(e) => e.preventDefault()} // Previne a alteração do valor com rolagem
/>
</div>
<div className={EstiloNovoAtendimento.valores}>
<label className={EstiloNovoAtendimento.labelinput}>
Valor Glosado
</label>
<input
className={EstiloNovoAtendimento.inputValor234}
type="number"
value={proc.valoresEditaveis[1]} // Valor editável
onChange={(e) =>
handleValorChange(
index,
1,
parseFloat(e.target.value) || 0
)
}
onWheel={(e) => e.preventDefault()} // Previne a alteração do valor com rolagem
/>
</div>
<div className={EstiloNovoAtendimento.valores}>
<label className={EstiloNovoAtendimento.labelinput}>
Valor Perdido
</label>
<input
className={EstiloNovoAtendimento.inputValor234}
type="number"
value={proc.valoresEditaveis[2]} // Valor editável
onChange={(e) =>
handleValorChange(
index,
2,
parseFloat(e.target.value) || 0
)
}
onWheel={(e) => e.preventDefault()} // Previne a alteração do valor com rolagem
/>
</div>
<div className={EstiloNovoAtendimento.valores}>
<label className={EstiloNovoAtendimento.labelinput}>
Valor Pago
</label>
<input
className={EstiloNovoAtendimento.inputValor234}
type="number"
value={proc.valoresEditaveis[3]} // Valor editável
onChange={(e) =>
handleValorChange(
index,
3,
parseFloat(e.target.value) || 0
)
}
onWheel={(e) => e.preventDefault()} // Previne a alteração do valor com rolagem
/>
</div>
</div>
<div className={EstiloNovoAtendimento.divAnexo}>
<label className={EstiloNovoAtendimento.labelStatus}>
Anexos:
</label>
<button className={EstiloNovoAtendimento.anexar}>
<img
src="/+.png"
alt=""
className={EstiloNovoAtendimento.iconAnexar}
/>
<i>Adicionar Novo Anexo</i>
</button>
</div>
<label className={EstiloNovoAtendimento.labelStatus}>
Status de pagamento:
</label>
<div className={EstiloNovoAtendimento.divflex}>
{proc.valoresEditaveis[0] > 0 && (
<label className={EstiloNovoAtendimento.statusPagamento}>
<img
src="/cifrao.png"
alt=""
className={EstiloNovoAtendimento.iconStatus}
/>{" "}
Previsto
</label>
)}
{proc.valoresEditaveis[1] > 0 && (
<label className={EstiloNovoAtendimento.statusPagamento}>
<img
src="/cifrao.png"
alt=""
className={EstiloNovoAtendimento.iconStatus}
/>{" "}
Glosado
</label>
)}
{proc.valoresEditaveis[2] > 0 && (
<label className={EstiloNovoAtendimento.statusPagamento}>
<img
src="/cifrao.png"
alt=""
className={EstiloNovoAtendimento.iconStatus}
/>{" "}
Perdido
</label>
)}
{proc.valoresEditaveis[3] > 0 && (
<label className={EstiloNovoAtendimento.statusPagamento}>
<img
src="/cifrao.png"
alt=""
className={EstiloNovoAtendimento.iconStatus}
/>{" "}
Pago
</label>
)}
</div>
<label className={EstiloNovoAtendimento.labelStatus}>
Status de atividade:
</label>
<div className={EstiloNovoAtendimento.divflex}>
<label
htmlFor="validar"
className={EstiloNovoAtendimento.labelBorda}
>
<input
type="radio"
id="rascunho"
name="Status"
value="rascunho"
/>{" "}
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="rascunho"
>
Rascunho
</label>
</label>
<label
htmlFor="validar"
className={EstiloNovoAtendimento.labelBorda}
>
<input type="radio" id="" name="Status" value="validar" />{" "}
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="validar"
>
Pronto pra validar
</label>
</label>
<label
htmlFor="Validado"
className={EstiloNovoAtendimento.labelBorda}
>
<input
type="radio"
id="Validado"
name="Status"
value="Validado"
/>
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="Validado"
>
{" "}
Validado
</label>
</label>
<label
htmlFor="faturar"
className={EstiloNovoAtendimento.labelBorda}
>
<input
type="radio"
id="faturar"
name="Status"
value="aturar"
/>{" "}
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="faturar"
>
À faturar
</label>
</label>
<label
htmlFor="Entregue"
className={EstiloNovoAtendimento.labelBorda}
>
<input
type="radio"
id="Entregue"
name="Status"
value="Entregue"
/>
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="Entregue"
>
{" "}
Entregue
</label>
</label>
<label
htmlFor="Finalizado"
className={EstiloNovoAtendimento.labelBorda}
>
<input
type="radio"
id="Finalizado"
name="Status"
value="Finalizado"
/>{" "}
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="Finalizado"
>
Finalizado
</label>
</label>
</div>
</div>
<div className={EstiloNovoAtendimento.CardBotton}></div>
</div>
))}
<div className={EstiloNovoAtendimento.divSalvarAnexo}>
<label className={EstiloNovoAtendimento.labelAnexo}>Anexos:</label>
<div className={EstiloNovoAtendimento.divArquivo}>
{anexos.length > 0
? anexos.map((anexo) => (
<label
key={anexo.id}
className={EstiloNovoAtendimento.Arquivo}
>
{anexo.fileName} {/* Exibir o nome do arquivo */}
<button onClick={() => handleDelete(anexo.id)}>
<img src="lixeira.png" alt="" />
</button>
</label>
))
: null}{" "}
{/* Não exibe nada se não houver anexos */}
</div>
<div className={EstiloNovoAtendimento.divAnexosNew}>
<input
type="file"
multiple
onChange={handleFileChange}
style={{ display: "none" }} // Ocultar o campo de entrada
id="fileInput" // Adicionar id para o botão
/>
<label
htmlFor="fileInput"
className={EstiloNovoAtendimento.anexar}
>
<img
src="/+.png"
alt=""
className={EstiloNovoAtendimento.iconAnexar}
/>
<i>Adicionar Novo Anexo</i>
</label>
</div>
</div>
</>
)}
<div className={EstiloNovoAtendimento.divbutton}>
<button className={EstiloNovoAtendimento.buttonSalvar}>Salvar</button>
</div>
</div>
);
};
export default NovoAtendimento;
</div>
</div>
</form>
);
};
export default FormularioAtendimento;
Para juntar o `FormularioAtendimento` e o `NovoAtendimento` em um único componente, você pode seguir alguns passos para integrar a lógica e o estado. Abaixo está uma descrição do que você precisa fazer e a versão modificada do código.
### Passos:
1. **Remover o Componente `FormularioAtendimento`:**
- Você pode mover o conteúdo de `FormularioAtendimento` diretamente para `NovoAtendimento`, retirando a chamada do componente `FormularioAtendimento`.
- Certifique-se de que todas as dependências estão no mesmo contexto.
2. **Integrar a Lógica do Estado:**
- O estado de `formularioDados` precisa ser parte do estado de `NovoAtendimento`.
- Remova props e state desnecessários.
3. **Reorganizar e Ajustar o JSX:**
- A estrutura do JSX que estava em `FormularioAtendimento` deve ser colocada diretamente dentro de `NovoAtendimento`.
4. **Ajustar Chamadas de Funções:**
- As funções de manipulação de eventos que eram passadas como props devem ser mantidas e ajustadas se necessário.
### Exemplo de Código Reorganizado
Aqui está um exemplo do `NovoAtendimento` com o conteúdo de `FormularioAtendimento` integrado:
```javascript
import React, { useState, useEffect } from "react";
import EstiloNovoAtendimento from "./NovoAtendimento.module.css";
import { useApi } from "../../lib/doctorApi";
import { DropdownSelect } from "./DropdownSelect"; // Assumindo que continua a existir esse componente
const CoresInput = [
"#25AAE1",
"#8696BB",
"#39465F",
"#D56D98",
];
export const NovoAtendimento: React.FC = () => {
const [procedimentos, setProcedimentos] = useState([]);
const [mostrarCard, setMostrarCard] = useState(false);
const [anexos, setAnexos] = useState([]);
const [valoresBarra, setValoresBarra] = useState([0, 0, 0, 0]);
const [loading, setLoading] = useState(false);
const api = useApi();
const [formularioDados, setFormularioDados] = useState({
pacienteId: "",
total: 0,
payer: "",
pacienteNome: "",
local: "",
localIdFontePagadora: "",
localIdAtendimento: "",
modalidade: "",
data: "",
valores: [0, 0, 0, 0],
codigo: "",
});
// Funções de efeito para buscar pacientes e locais
useEffect(() => {
const buscarPacientes = async () => {
try {
const data = await api.get("patients/find?skip=0&limit=2000");
setPacientes(data.data?.result?.list || []);
} catch (error) {
console.error("Erro ao buscar pacientes:", error);
}
};
buscarPacientes();
}, []);
const buscarLocais = async () => {
try {
const data = await api.get("places/find?skip=0&limit=2000");
setLocaisFontePagadora(data.data.result.filter(local => local.payer));
setLocaisAtendimento(data.data.result.filter(local => local.place));
} catch (error) {
console.error("Erro ao buscar locais:", error);
}
};
useEffect(() => {
buscarLocais();
}, []);
const handleValorChange = (index, valorIndex, novoValor) => {
const novosProcedimentos = [...procedimentos];
novosProcedimentos[index].valoresEditaveis[valorIndex] = novoValor;
setProcedimentos(novosProcedimentos);
atualizarTotal();
};
const handleAdicionarProcedimento = () => {
const novoProcedimento = {
valoresEditaveis: [0, 0, 0, 0],
};
setProcedimentos([...procedimentos, novoProcedimento]);
atualizarTotal();
};
return (
<div>
<label className={EstiloNovoAtendimento.labeltitle}>
Cadastro de Atendimento
</label>
<form>
<div className={EstiloNovoAtendimento.divValores}>
{/* Campo Total */}
<div>
<label>Total:</label>
{formularioDados.valores.map((valor, index) => (
<div key={index}>
<span style={{color: CoresInput[index]}}>R$</span>
<input type="number" value={valor.toFixed(2)} readOnly />
</div>
))}
</div>
<div>
<label>Modalidade:</label>
{["convenio", "particular", "plantao"].map(mod => (
<div key={mod}>
<input
type="radio"
name="modalidade"
value={mod}
checked={formularioDados.modalidade === mod}
onChange={() => setFormularioDados(prev => ({
...prev,
modalidade: mod,
}))}
/>
<label>{mod}</label>
</div>
))}
</div>
<DropdownSelect
endpoint="places/find?skip=0&limit=2000&payer=true"
parseData={(data) => data.result.list.map(local => ({ id: local.id, name: local.name }))}
onSelect={(selectedItem) => setFormularioDados(prev => ({ ...prev, localIdFontePagadora: selectedItem.id, local: selectedItem.name }))}
value={formularioDados.localIdFontePagadora}
label="Fonte Pagadora:"
/>
{/* Seletor de Paciente */}
<div>
<span>Paciente:</span>
<select
id="Paciente-select"
value={formularioDados.pacienteId}
onChange={(e) => {
const pacienteId = e.target.value;
const pacienteNome = e.target.options[e.target.selectedIndex].text;
setFormularioDados(prev => ({ ...prev, pacienteId, pacienteNome }));
}}
>
<option value="" disabled hidden>Selecione um paciente</option>
{pacientes.map(paciente => (
<option key={paciente.id} value={paciente.id}>{paciente.name}</option>
))}
</select>
</div>
{/* Código e Data */}
<div>
<span>Código da guia (opcional)</span>
<input
type="text"
value={formularioDados.codigo}
onChange={(e) => setFormularioDados(prev => ({ ...prev, codigo: e.target.value }))}
/>
</div>
<div>
<span>Data</span>
<input
type="date"
value={formularioDados.data}
onChange={(e) => setFormularioDados(prev => ({ ...prev, data: e.target.value }))}
/>
</div>
</div>
{/* Adicionar Procedimento */}
<button type="button" onClick={handleAdicionarProcedimento}>Adicionar Procedimento</button>
</form>
</div>
);
};
export default NovoAtendimento;
```
### Considerações Finais:
1. **Revisão de Dependências:**
Certifique-se de que todos os hooks e métodos que você estava usando estão adaptados para o novo componente.
2. **Testes:**
Teste todas as funcionalidades após a junção para garantir que tudo continue funcionando corretamente.
3. **Limpeza de Código:**
Remova qualquer código ou importações que não sejam mais necessárias após a fusão.
4. **Consistência:**
Mantenha a consistência na nomenclatura e estilo conforme seu projeto.
Isso deve ajudá-lo a juntar os componentes. Sinta-se livre para ajustar qualquer parte que não se adeque ao seu estilo ou necessidade.6983029001c3f6cc647f8545como eu passo agora o place: undefined,
quando escolho no input <DropdownSelect
endpoint="places/find?skip=0&limit=2000&place=true" // URL do endpoint para buscar locais de atendimento
parseData={(data) =>
data.result.list.map((local: any) => ({
id: local.id,
name: local.name,
}))
} // Função para transformar os dados da API no formato { id, name }
onSelect={(selectedItem) => {
setFormularioDados((prev) => ({
...prev,
localIdAtendimento: selectedItem.id, // Define o ID selecionado no formulário
}));
}} // Callback para atualizar o formulário com o local selecionado
value={formularioDados.localIdAtendimento} // ID do item selecionado
label="Local de Atendimento:" // Rótulo exibido
/>
import React, { useEffect, useState } from "react";
import EstiloNovoAtendimento from "./NovoAtendimento.module.css";
import { useApi } from "../../lib/doctorApi";
// Tipagem para as props do componente
interface DropdownProps {
endpoint: string; // URL do endpoint para buscar dados
parseData: (data: any) => { id: string; name: string }[]; // Função para parsear os dados
onSelect: (selectedItem: { id: string; name: string }) => void; // Callback com o item selecionado
value: string; // Valor atual selecionado
label: string; // Rótulo do dropdown
}
const DropdownSelect: React.FC<DropdownProps> = ({
endpoint,
parseData,
onSelect,
value,
label,
}) => {
const api = useApi();
const [items, setItems] = useState<{ id: string; name: string }[]>([]);
// Busca os dados do endpoint
useEffect(() => {
const fetchData = async () => {
try {
const response = await api.get(endpoint);
const parsedItems = parseData(response.data); // Parseia os dados recebidos
setItems(parsedItems);
} catch (error) {
console.error("Erro ao buscar dados:", error);
}
};
fetchData();
}, []);
// Lida com a mudança na seleção
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const selectedOption = items.find((item) => item.id === e.target.value);
if (selectedOption) {
onSelect(selectedOption); // Retorna o item selecionado ao pai
}
};
return (
<div className={EstiloNovoAtendimento.organizador}>
<span>{label}</span>
<label htmlFor="dropdown-select"></label>
<select
className={EstiloNovoAtendimento.input500px}
id="dropdown-select"
value={value}
aria-placeholder="o9iuhy"
onChange={handleChange}
>
<option value="" disabled hidden>
Selecione uma opção
</option>
{items.map((item) => (
<option key={item.id} value={item.id} data-name={item.name}>
{item.name}
</option>
))}
</select>
</div>
);
};
export default DropdownSelect;
Para atualizar o campo `place` no estado `formularioDados` sempre que um local é selecionado no dropdown, você pode fazer isso da seguinte maneira:
1. **Alteração no `onSelect` do `DropdownSelect`**: Você precisará chamar a função `onSelect` com um objeto que contém a propriedade `place` definida com o valor do local selecionado, além de atualizar o campo `localIdAtendimento`.
2. **Adição do Estado no Componente Pai**: A primeira coisa que você deve garantir é que seu estado `formularioDados` no componente `NovoAtendimento` capture o `place`.
Aqui está um exemplo modificado do que você já tem, onde o `place` é atualizado conforme a seleção no dropdown:
### Atualizando o Componente `NovoAtendimento`
Você deve mudar a função `onSelect` do `DropdownSelect` para incluir o `place` que deve ser definido.
```javascript
<DropdownSelect
endpoint="places/find?skip=0&limit=2000&place=true"
parseData={(data) =>
data.result.list.map((local: any) => ({
id: local.id,
name: local.name,
}))
}
onSelect={(selectedItem) => {
setFormularioDados((prev) => ({
...prev,
localIdAtendimento: selectedItem.id, // Define o ID do local de atendimento
place: selectedItem.name, // Define o 'place' com o nome do local
}));
}}
value={formularioDados.localIdAtendimento} // ID do item selecionado
label="Local de Atendimento:"
/>
```
### Ajustar o Estado `formularioDados`
Certifique-se de que `formularioDados` tem o campo `place`:
```javascript
const [formularioDados, setFormularioDados] = useState({
pacienteId: "",
total: 0,
payer: "",
pacienteNome: "",
local: "",
localIdFontePagadora: "",
localIdAtendimento: "",
place: "", // Adicione esta linha
modalidade: "",
data: "",
valores: [0, 0, 0, 0],
codigo: "",
});
```
### O Componente `DropdownSelect`
Seu componente `DropdownSelect` não precisa de mudanças, já que toda a lógica necessária é tratada no componente pai ao selecionar um item. No entanto, você pode garantir que a função `onSelect` está sempre repassando o item correto para o componente pai.
### Resumo
Agora, quando o usuário selecionar um local de atendimento, tanto o `localIdAtendimento` quanto o `place` no `formularioDados` serão atualizados corretamente, permitindo assim que você tenha acesso a ambos os dados no seu componente.
Ao fazer essas alterações, certifique-se de testar o fluxo para garantir que todas as partes estejam interagindo corretamente e que os dados sejam atualizados como esperado.b24c878dfe987f95a9d0fa5ae como faço com o patient
<div className={EstiloNovoAtendimento.organizador}>
<span>Paciente:</span>
<label htmlFor="Paciente-select"></label>
<select
className={EstiloNovoAtendimento.input300px}
id="Paciente-select"
value={formularioDados.pacienteId}
onChange={(e) => {
const selectedOption = e.target.options[e.target.selectedIndex];
const pacienteId = selectedOption.value;
const pacienteNome = selectedOption.value;
selectedOption.getAttribute("data-name")?.toString() || "";
setFormularioDados({
...formularioDados,
pacienteId,
pacienteNome,
});
}}
>
<option value="" disabled hidden>
Selecione um paciente
</option>
{pacientes.map((paciente) => (
<option
key={paciente.id}
value={paciente.id}
data-name={paciente.name}
>
{paciente.name}
</option>
))}
</select>
</div>Para atualizar o estado relacionado ao paciente, você vai proceder de forma semelhante ao que foi feito para o local de atendimento na `DropdownSelect`. Aqui estão os passos a seguir:
### Código Atualizado para o Seletor de Paciente
No selector de paciente, você vai definir o estado para incluir tanto o `pacienteId` quanto o `pacienteNome`. O código já está bem estruturado, mas você precisa corrigir a definição do `pacienteNome` e fazer uma leve modificação no seu manipulador de `onChange` para capturar corretamente o nome do paciente selecionado.
Aqui está a versão ajustada do seu código:
```javascript
<div className={EstiloNovoAtendimento.organizador}>
<span>Paciente:</span>
<label htmlFor="Paciente-select"></label>
<select
className={EstiloNovoAtendimento.input300px}
id="Paciente-select"
value={formularioDados.pacienteId}
onChange={(e) => {
const selectedOption = e.target.options[e.target.selectedIndex];
const pacienteId = selectedOption.value;
const pacienteNome = selectedOption.getAttribute("data-name") || ""; // Corrigido para pegar o data-name
setFormularioDados((prev) => ({
...prev,
pacienteId,
pacienteNome,
}));
}}
>
<option value="" disabled hidden>
Selecione um paciente
</option>
{pacientes.map((paciente) => (
<option
key={paciente.id}
value={paciente.id}
data-name={paciente.name} // Armazena o nome do paciente
>
{paciente.name}
</option>
))}
</select>
</div>
```
### Observações:
1. **Uso de `data-name`:** No `setFormularioDados`, você agora está utilizando `selectedOption.getAttribute("data-name")` para garantir que o nome do paciente seja corretamente extraído e definido no estado.
2. **Atualização do Estado:** A função `setFormularioDados` agora atualiza o estado corretamente com os valores para `pacienteId` e `pacienteNome`.
3. **Consistência:** Agora, quando um usuário selecionar um paciente do dropdown, ambos os campos no estado `formularioDados` serão atualizados, permitindo que você use esses valores posteriormente na lógica do seu aplicativo.
4. **Validação:** É sempre uma boa prática garantir que haja tratamento de erro caso nenhum paciente esteja selecionado ou um id inválido seja passado.
Agora, sempre que um usuário selecionar um paciente do dropdown, tanto o `pacienteId` quanto o `pacienteNome` no estado de `formularioDados` estarão atualizados corretamente!3bb464aab1c9b803db20bdf5 patient: undefined,
import EstiloNovoAtendimento from "./NovoAtendimento.module.css";
import React, { useState, useEffect } from "react";
import { useApi } from "../../lib/doctorApi";
import { Appointment, AppointmentRequestDTO } from "./types";
import DropdownSelect from "./DropdownSelect";
import { useLocalContext, Local } from "../Local/LocalContext";
const CoresInput = [
"#25AAE1", // Cor 1
"#8696BB", // Cor 2
"#39465F", // Cor 3
"#D56D98", // Cor 4
];
export interface FormularioDados {
pacienteId: string;
total: number;
payer: string; // Certifique-se de que isso está aqui
pacienteNome: string;
local: string; // ou 'local' se preferir; mas stable as diferenças
localIdFontePagadora: string; // Esta propriedade deve estar aqui
localIdAtendimento: string; // Esta propriedade também deve estar aqui
modalidade: string;
data: string;
valores: number[];
codigo?: string; // Esta pode continuar a ser opcional
}
export interface Paciente {
id?: number;
name: string;
cpf: string;
email: string;
address: string;
celular: string;
dataNascimento?: string;
idade?: string;
}
interface Procedimento {
valoresEditaveis: number[];
total?: number; // Adicione um total opcional
}
const NovoAtendimento: React.FC = () => {
const [pacientes, setPacientes] = useState<Paciente[]>([]);
const [locaisFontePagadora, setLocaisFontePagadora] = useState<Local[]>([]);
const [locaisAtendimento, setLocaisAtendimento] = useState<Local[]>([]);
const localContext = useLocalContext();
const [procedimentos, setProcedimentos] = useState<Procedimento[]>([]); // Lista de procedimentos adicionados
const [mostrarCard, setMostrarCard] = useState(false); // Estado para expandir/recolher o Card
const [anexos, setAnexos] = useState<
{ id: string; fileName: string; extension: string }[]
>([]); // Estado para os arquivos anexados
const [valoresBarra, setValoresBarra] = useState([0, 0, 0, 0]); // Novo estado para a contagem da barra
const [loading, setLoading] = useState(false);
const api = useApi(); // `useApi` é tratado como estável
const [atendimento, setAtendimento] = useState<AppointmentRequestDTO>({
status: {
glossed: false,
lost: false,
received: false,
draft: false,
validated: false,
derived: false,
finished: false,
},
related: {
place: undefined,
payer: undefined,
patient: undefined,
},
paymentInfo: {
method: "healthInsurance",
info: {
healthInsurance: {
cardNumber: "",
},
},
},
serviceInfo: {
guideCode: "",
date: "",
totalValue: 0,
},
procedures: [],
});
const handleFileChange = async (
event: React.ChangeEvent<HTMLInputElement>
) => {
setLoading(true);
const formData = new FormData();
const files = event.target.files;
if (files) {
Array.from(files).map((file) => {
formData.append("files", file);
});
const uploadResult = await api.post("files/upload", formData);
if (uploadResult.data.success) {
setAnexos(uploadResult.data.result);
}
}
};
const handleDelete = async (id: string) => {
await api.del(`files/delete/${id}`);
const novosAnexos = anexos.filter((anexo) => anexo.id !== id);
setAnexos(novosAnexos);
};
const atualizarValoresBarra = () => {
const novosValoresBarra = [0, 0, 0, 0]; // Inicializa uma nova contagem
procedimentos.forEach((proc) => {
proc.valoresEditaveis.forEach((valor, index) => {
if (valor > 0) {
novosValoresBarra[index] += 1; // Incrementa se o valor é maior que 0
}
});
});
setValoresBarra(novosValoresBarra); // Atualiza o estado dos valores da barra
};
const atualizarTotal = () => {
const novosValoresBarra = [0, 0, 0, 0]; // Inicializa os valores da barra
procedimentos.forEach((proc) => {
proc.valoresEditaveis.forEach((valor, index) => {
novosValoresBarra[index] += valor; // Acumula os valores correspondentes
});
});
// Atualiza o total no estado do formulário
setFormularioDados((prev) => ({
...prev,
total: novosValoresBarra.reduce((a, b) => a + b, 0), // Calcula o total
valores: novosValoresBarra, // Atualiza os valores da barra
}));
};
// Função que alterna entre expandir e recolher
const alternarCard = () => {
setMostrarCard(!mostrarCard);
};
// Função para formatar valores como moeda
const formatarValor = (valor: number): string => {
return valor.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL",
});
};
const [formularioDados, setFormularioDados] = useState({
pacienteId: "",
total: 0,
payer: "",
pacienteNome: "",
local: "", // Ajuste para o nome correto se ele for alterado
localIdFontePagadora: "", // Adicione aqui
localIdAtendimento: "", // Adicione aqui
modalidade: "",
data: "",
valores: [0, 0, 0, 0],
codigo: "",
});
// Funções de efeito para buscar pacientes e locais
useEffect(() => {
const buscarPacientes = async () => {
try {
const data = await api.get("patients/find?skip=0&limit=2000");
setPacientes(data.data?.result?.list || []);
} catch (error) {
console.error("Erro ao buscar pacientes:", error);
}
};
buscarPacientes();
}, []);
const buscarLocais = async () => {
try {
const data = await api.get("places/find?skip=0&limit=2000");
setLocaisFontePagadora(
data.data.result.filter((local: Local) => local.payer)
);
setLocaisAtendimento(
data.data.result.filter((local: Local) => local.place)
);
} catch (error) {
console.error("Erro ao buscar locais:", error);
}
};
useEffect(() => {
buscarLocais();
}, []);
const handleAdicionarProcedimento = () => {
const novoProcedimento = {
valoresEditaveis: [0, 0, 0, 0],
};
setProcedimentos([...procedimentos, novoProcedimento]);
atualizarTotal(); // Atualiza o total após adicionar o procedimento
};
const handleValorChange = (
index: number,
valorIndex: number,
novoValor: number
) => {
const novosProcedimentos = [...procedimentos];
const valorAntigo = novosProcedimentos[index].valoresEditaveis[valorIndex];
// Atualiza o valor no procedimento correto
novosProcedimentos[index].valoresEditaveis[valorIndex] = novoValor;
setProcedimentos(novosProcedimentos);
atualizarTotal(); // Atualiza todos os totais de acordo com a mudança
atualizarValoresBarra(); // Atualiza a contagem dos valores na barra
};
return (
<div>
<label className={EstiloNovoAtendimento.labeltitle}>
Cadastro de Atendimento
</label>
<form>
<div className={EstiloNovoAtendimento.divValores}>
<div className={EstiloNovoAtendimento.inputValores}>
<label className={EstiloNovoAtendimento.total}>Total:</label>
{formularioDados.valores.map((valor, index) => (
<div key={index}>
<span
style={{
color: CoresInput[index],
fontSize: "14px",
marginRight: "2px",
}}
>
R$
</span>
<input
key={index}
type="number"
value={valor.toFixed(2)}
placeholder="R$ 0,00"
style={{ color: CoresInput[index] }}
readOnly
/>
</div>
))}
</div>
<div className={EstiloNovoAtendimento.divBarraGrafico}>
<label className={EstiloNovoAtendimento.labelTotal}>
R$ {formularioDados.total.toFixed(2)}{" "}
{/* Aqui já usará o total atualizado */}
</label>
<div className={EstiloNovoAtendimento.graficoRepresentativo}>
<div className={EstiloNovoAtendimento.barraFixa}>
{formularioDados.valores.map((valor, index) => (
<div
key={`grafico-${index}`}
style={{
backgroundColor: CoresInput[index],
width:
formularioDados.total > 0
? `${(valor / formularioDados.total) * 100}%`
: `0%`,
height: "100%",
}}
/>
))}
</div>
</div>
</div>
</div>
<div className={EstiloNovoAtendimento.container}>
<div className={EstiloNovoAtendimento.modalidade}>
<label>Modalidade:</label>
<div className={EstiloNovoAtendimento.divMargin}>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="convenio"
name="modalidade"
value="convenio"
onChange={() =>
setFormularioDados({
...formularioDados,
modalidade: "convenio",
})
}
/>
<label
htmlFor="convenio"
className={EstiloNovoAtendimento.labelModalidade}
>
Convênio
</label>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="particular"
name="modalidade"
value="particular"
onChange={() =>
setFormularioDados({
...formularioDados,
modalidade: "particular",
})
}
/>
<label
htmlFor="particular"
className={EstiloNovoAtendimento.labelModalidade}
>
Particular
</label>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="plantao"
name="modalidade"
value="plantao"
onChange={() =>
setFormularioDados({
...formularioDados,
modalidade: "plantao",
})
}
/>
<label
htmlFor="plantao"
className={EstiloNovoAtendimento.labelModalidade}
>
Plantão
</label>
</div>
</div>
<DropdownSelect
endpoint="places/find?skip=0&limit=2000&payer=true" // URL do endpoint
parseData={(data) =>
data.result.list.map((local: any) => ({
id: local.id,
name: local.name,
}))
} // Função que transforma os dados da API no formato { id, name }
onSelect={(selectedItem) => {
setFormularioDados((prev) => ({
...prev,
localIdFontePagadora: selectedItem.id,
payer: selectedItem.name,
}));
}} // Define o item selecionado no estado
value={formularioDados.localIdFontePagadora} // Valor atual do dropdown
label="Fonte Pagadora:" // Rótulo a ser exibido
/>
</div>
<div className={EstiloNovoAtendimento.container}>
<div className={EstiloNovoAtendimento.organizador}>
<span>Paciente:</span>
<label htmlFor="Paciente-select"></label>
<select
className={EstiloNovoAtendimento.input300px}
id="Paciente-select"
value={formularioDados.pacienteId}
onChange={(e) => {
const selectedOption = e.target.options[e.target.selectedIndex];
const pacienteId = selectedOption.value;
const pacienteNome = selectedOption.value;
selectedOption.getAttribute("data-name")?.toString() || "";
setFormularioDados({
...formularioDados,
pacienteId,
pacienteNome,
});
}}
>
<option value="" disabled hidden>
Selecione um paciente
</option>
{pacientes.map((paciente) => (
<option
key={paciente.id}
value={paciente.id}
data-name={paciente.name}
>
{paciente.name}
</option>
))}
</select>
</div>
<DropdownSelect
endpoint="places/find?skip=0&limit=2000&place=true" // URL do endpoint para buscar locais de atendimento
parseData={(data) =>
data.result.list.map((local: any) => ({
id: local.id,
name: local.name,
}))
} // Função para transformar os dados da API no formato { id, name }
onSelect={(selectedItem) => {
setFormularioDados((prev) => ({
...prev,
localIdAtendimento: selectedItem.id, // Define o ID selecionado no formulário
place: selectedItem.name,
}));
}} // Callback para atualizar o formulário com o local selecionado
value={formularioDados.localIdAtendimento} // ID do item selecionado
label="Local de Atendimento:" // Rótulo exibido
/>
</div>
<div className={EstiloNovoAtendimento.container}>
<div className={EstiloNovoAtendimento.organizador}>
<span>Código da guia(opcional)</span>
<input
className={EstiloNovoAtendimento.input300}
type="text"
name="codigo"
placeholder="Digite"
value={formularioDados.codigo}
onChange={(e) =>
setFormularioDados({
...formularioDados,
codigo: e.target.value,
})
}
/>
</div>
<div className={EstiloNovoAtendimento.organizador}>
<span>Data</span>
<input
className={EstiloNovoAtendimento.inputData}
type="date"
name="data"
placeholder="dd/mm/yyyy"
value={formularioDados.data}
onChange={(e) =>
setFormularioDados({ ...formularioDados, data: e.target.value })
}
/>
</div>
</div>
</form>
{/* deveria ficar aqui */}
<div className={EstiloNovoAtendimento.divbutton}>
<button
type="button" // tipo "button" para evitar o envio do formulário
onClick={handleAdicionarProcedimento} // Chama a função ao clicar
className={EstiloNovoAtendimento.buttonProcedimento}
>
Adicionar Procedimento
</button>
</div>
{/* Segunda barra gráfica com funcionalidade ajustada */}
<div className={EstiloNovoAtendimento.divValores2}>
<div className={EstiloNovoAtendimento.inputProcedimentos}>
{valoresBarra.map((valor, index) => (
<input
key={index}
type="number"
value={valor.toFixed(0)} // Mostra a contagem
placeholder="0"
readOnly // Barra apenas visual, não editável
style={{ color: CoresInput[index] }} // Cor correspondente à respectiva
/>
))}
</div>
<div className={EstiloNovoAtendimento.divBarraGrafico}>
<div className={EstiloNovoAtendimento.divTotal}>
<img
src="/procedimento.png"
alt=""
className={EstiloNovoAtendimento.icone}
/>
<label className={EstiloNovoAtendimento.labelProcedimento}>
<label>{procedimentos.length}</label> Procedimento
</label>
</div>
<div className={EstiloNovoAtendimento.graficoRepresentativo}>
<div className={EstiloNovoAtendimento.barraFixa}>
{valoresBarra.map((valor, index) => (
<div
key={`grafico-segunda-${index}`}
style={{
backgroundColor: CoresInput[index],
width: `${(valor / procedimentos.length) * 100}%`, // Ajuste a largura da barra conforme a contagem
height: "100%",
}}
/>
))}
</div>
</div>
{/* Botão de expandir/recolher */}
<div
className={EstiloNovoAtendimento.expandirProcedimentos}
onClick={alternarCard}
>
<img
src="/setaBaixo.png"
alt="Expandir/recolher"
className={EstiloNovoAtendimento.iconSeta}
/>
<label className={EstiloNovoAtendimento.labelExpandir}>
{mostrarCard ? "Recolher" : "Expandir"}
</label>
</div>
</div>
</div>
{/* Renderiza o Card apenas se mostrarCard for true */}
{mostrarCard && (
<>
{/* Renderiza os procedimentos adicionados */}
{procedimentos.map((proc, index) => (
<div key={index} className={EstiloNovoAtendimento.Card}>
<div className={EstiloNovoAtendimento.CardTop}>
<div>
<span>#{index + 1}</span>
</div>
<div className={EstiloNovoAtendimento.buttonCard}>
<button>
<img
src="/lapisEditor.png"
alt="Editar"
className={EstiloNovoAtendimento.icon}
/>
</button>
<button>
<img
src="/lixeira.png"
alt="Excluir"
className={EstiloNovoAtendimento.icon}
/>
</button>
</div>
</div>
<div className={EstiloNovoAtendimento.divDoCard}>
<div className={EstiloNovoAtendimento.organizadorCard}>
<span>Código personalizado da CBHPM</span>
<input
className={EstiloNovoAtendimento.inputCard}
type="text"
placeholder="Digite o Código..."
/>
</div>
<div className={EstiloNovoAtendimento.organizadorCard}>
<span>Nome personalizado da CBHPM</span>
<input
className={EstiloNovoAtendimento.inputCard}
type="text"
placeholder="Digite o Código..."
/>
</div>
<div className={EstiloNovoAtendimento.divflex}>
{" "}
{/* Onde você tem os valores editáveis */}
<div className={EstiloNovoAtendimento.valores}>
<label className={EstiloNovoAtendimento.labelinput}>
Valor Previsto
</label>
<input
className={EstiloNovoAtendimento.inputValor234}
type="number"
value={proc.valoresEditaveis[0]} // Valor editável
placeholder=""
onChange={(e) =>
handleValorChange(
index,
0,
parseFloat(e.target.value) || 0
)
}
onWheel={(e) => e.preventDefault()} // Previne a alteração do valor com rolagem
/>
</div>
<div className={EstiloNovoAtendimento.valores}>
<label className={EstiloNovoAtendimento.labelinput}>
Valor Glosado
</label>
<input
className={EstiloNovoAtendimento.inputValor234}
type="number"
value={proc.valoresEditaveis[1]} // Valor editável
onChange={(e) =>
handleValorChange(
index,
1,
parseFloat(e.target.value) || 0
)
}
onWheel={(e) => e.preventDefault()} // Previne a alteração do valor com rolagem
/>
</div>
<div className={EstiloNovoAtendimento.valores}>
<label className={EstiloNovoAtendimento.labelinput}>
Valor Perdido
</label>
<input
className={EstiloNovoAtendimento.inputValor234}
type="number"
value={proc.valoresEditaveis[2]} // Valor editável
onChange={(e) =>
handleValorChange(
index,
2,
parseFloat(e.target.value) || 0
)
}
onWheel={(e) => e.preventDefault()} // Previne a alteração do valor com rolagem
/>
</div>
<div className={EstiloNovoAtendimento.valores}>
<label className={EstiloNovoAtendimento.labelinput}>
Valor Pago
</label>
<input
className={EstiloNovoAtendimento.inputValor234}
type="number"
value={proc.valoresEditaveis[3]} // Valor editável
onChange={(e) =>
handleValorChange(
index,
3,
parseFloat(e.target.value) || 0
)
}
onWheel={(e) => e.preventDefault()} // Previne a alteração do valor com rolagem
/>
</div>
</div>
<div className={EstiloNovoAtendimento.divAnexo}>
<label className={EstiloNovoAtendimento.labelStatus}>
Anexos:
</label>
<button className={EstiloNovoAtendimento.anexar}>
<img
src="/+.png"
alt=""
className={EstiloNovoAtendimento.iconAnexar}
/>
<i>Adicionar Novo Anexo</i>
</button>
</div>
<label className={EstiloNovoAtendimento.labelStatus}>
Status de pagamento:
</label>
<div className={EstiloNovoAtendimento.divflex}>
{proc.valoresEditaveis[0] > 0 && (
<label className={EstiloNovoAtendimento.statusPagamento}>
<img
src="/cifrao.png"
alt=""
className={EstiloNovoAtendimento.iconStatus}
/>{" "}
Previsto
</label>
)}
{proc.valoresEditaveis[1] > 0 && (
<label className={EstiloNovoAtendimento.statusPagamento}>
<img
src="/cifrao.png"
alt=""
className={EstiloNovoAtendimento.iconStatus}
/>{" "}
Glosado
</label>
)}
{proc.valoresEditaveis[2] > 0 && (
<label className={EstiloNovoAtendimento.statusPagamento}>
<img
src="/cifrao.png"
alt=""
className={EstiloNovoAtendimento.iconStatus}
/>{" "}
Perdido
</label>
)}
{proc.valoresEditaveis[3] > 0 && (
<label className={EstiloNovoAtendimento.statusPagamento}>
<img
src="/cifrao.png"
alt=""
className={EstiloNovoAtendimento.iconStatus}
/>{" "}
Pago
</label>
)}
</div>
<label className={EstiloNovoAtendimento.labelStatus}>
Status de atividade:
</label>
<div className={EstiloNovoAtendimento.divflex}>
<label
htmlFor="validar"
className={EstiloNovoAtendimento.labelBorda}
>
<input
type="radio"
id="rascunho"
name="Status"
value="rascunho"
/>{" "}
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="rascunho"
>
Rascunho
</label>
</label>
<label
htmlFor="validar"
className={EstiloNovoAtendimento.labelBorda}
>
<input type="radio" id="" name="Status" value="validar" />{" "}
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="validar"
>
Pronto pra validar
</label>
</label>
<label
htmlFor="Validado"
className={EstiloNovoAtendimento.labelBorda}
>
<input
type="radio"
id="Validado"
name="Status"
value="Validado"
/>
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="Validado"
>
{" "}
Validado
</label>
</label>
<label
htmlFor="faturar"
className={EstiloNovoAtendimento.labelBorda}
>
<input
type="radio"
id="faturar"
name="Status"
value="aturar"
/>{" "}
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="faturar"
>
À faturar
</label>
</label>
<label
htmlFor="Entregue"
className={EstiloNovoAtendimento.labelBorda}
>
<input
type="radio"
id="Entregue"
name="Status"
value="Entregue"
/>
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="Entregue"
>
{" "}
Entregue
</label>
</label>
<label
htmlFor="Finalizado"
className={EstiloNovoAtendimento.labelBorda}
>
<input
type="radio"
id="Finalizado"
name="Status"
value="Finalizado"
/>{" "}
<label
className={EstiloNovoAtendimento.labelAtividade}
htmlFor="Finalizado"
>
Finalizado
</label>
</label>
</div>
</div>
<div className={EstiloNovoAtendimento.CardBotton}></div>
</div>
))}
<div className={EstiloNovoAtendimento.divSalvarAnexo}>
<label className={EstiloNovoAtendimento.labelAnexo}>Anexos:</label>
<div className={EstiloNovoAtendimento.divArquivo}>
{anexos.length > 0
? anexos.map((anexo) => (
<label
key={anexo.id}
className={EstiloNovoAtendimento.Arquivo}
>
{anexo.fileName} {/* Exibir o nome do arquivo */}
<button onClick={() => handleDelete(anexo.id)}>
<img src="lixeira.png" alt="" />
</button>
</label>
))
: null}{" "}
{/* Não exibe nada se não houver anexos */}
</div>
<div className={EstiloNovoAtendimento.divAnexosNew}>
<input
type="file"
multiple
onChange={handleFileChange}
style={{ display: "none" }} // Ocultar o campo de entrada
id="fileInput" // Adicionar id para o botão
/>
<label
htmlFor="fileInput"
className={EstiloNovoAtendimento.anexar}
>
<img
src="/+.png"
alt=""
className={EstiloNovoAtendimento.iconAnexar}
/>
<i>Adicionar Novo Anexo</i>
</label>
</div>
</div>
</>
)}
<div className={EstiloNovoAtendimento.divbutton}>
<button className={EstiloNovoAtendimento.buttonSalvar}>Salvar</button>
</div>
</div>
);
};
export default NovoAtendimento;
Para passar o valor do paciente (ou `patient`) no seu objeto `atendimento` conforme a seleção do paciente no dropdown, você precisa atualizar o estado `atendimento` toda vez que um paciente for selecionado.
### Passos para Implementar a Atualização do Patient
1. **Adicionar a propriedade patient ao Estado atendimento**: Assim como você faz com `place` e `payer`, você deve atualizar o objeto `atendimento` com o ID e o nome do paciente.
2. **Atualizar o `onChange` do Seletor do Paciente**: Quando um paciente for selecionado, você deve atualizar o estado `atendimento` para refletir a escolha.
### Exemplo de Atualização
Aqui está o código atualizado para o campo de seleção do paciente, incluindo a atualização do estado `atendimento`:
```javascript
<div className={EstiloNovoAtendimento.container}>
<div className={EstiloNovoAtendimento.organizador}>
<span>Paciente:</span>
<label htmlFor="Paciente-select"></label>
<select
className={EstiloNovoAtendimento.input300px}
id="Paciente-select"
value={formularioDados.pacienteId}
onChange={(e) => {
const selectedOption = e.target.options[e.target.selectedIndex];
const pacienteId = selectedOption.value;
const pacienteNome = selectedOption.getAttribute("data-name") || ""; // Extrai o nome do paciente
// Atualiza tanto o formularioDados quanto o estado de atendimento
setFormularioDados((prev) => ({
...prev,
pacienteId,
pacienteNome,
}));
// Atualiza o estado de atendimento com o paciente selecionado
setAtendimento((prev) => ({
...prev,
related: {
...prev.related,
patient: { id: pacienteId, name: pacienteNome },
},
}));
}}
>
<option value="" disabled hidden>
Selecione um paciente
</option>
{pacientes.map((paciente) => (
<option
key={paciente.id}
value={paciente.id}
data-name={paciente.name}
>
{paciente.name}
</option>
))}
</select>
</div>
{/* O DropdownSelect para locais de atendimento pode ficar aqui */}
</div>
```
### Alterações Explicadas
1. **Obtenção do Nome do Paciente**:
- Use `selectedOption.getAttribute("data-name")` para capturar o nome associado à opção selecionada.
2. **Atualização do `setFormularioDados`**:
- O estado `formularioDados` é atualizado como antes, para que o ID e o nome do paciente estejam disponíveis nesse estado.
3. **Atualização do `atendimento`**:
- A função `setAtendimento` é chamada para atualizar o estado de `atendimento`, incluindo as informações do paciente na estrutura `related`.
### Finalizando
Dessa forma, sempre que um paciente for selecionado, tanto `formularioDados` quanto `atendimento` serão atualizados com as informações corretas. Isso simplifica o gerenciamento de estado e garante que você possa usar as informações do paciente em qualquer parte do seu componente, inclusive na função de "Salvar" que você tem no final do seu formulário.75d83c73dffe756efd56fa2ce o guideCode: "",
<div className={EstiloNovoAtendimento.organizador}>
<span>Código da guia(opcional)</span>
<input
className={EstiloNovoAtendimento.input300}
type="text"
name="codigo"
placeholder="Digite"
value={formularioDados.codigo}
onChange={(e) =>
setFormularioDados({
...formularioDados,
codigo: e.target.value,
})
}
/>
</div>Para atualizar o campo `guideCode` no estado `atendimento` com o valor do campo “Código da guia” (código), você deve seguir um processo semelhante ao que você já fez para os campos de `patient` e outras informações.
Basicamente, você vai precisar adicionar a lógica que atualiza o estado `atendimento` sempre que o usuário alterar o valor do campo de entrada do código da guia.
### Exemplo de Implementação
Aqui está o código modificado para o campo “Código da guia” que, além de atualizar o estado `formularioDados`, também atualiza o estado `atendimento`:
```javascript
<div className={EstiloNovoAtendimento.organizador}>
<span>Código da guia (opcional)</span>
<input
className={EstiloNovoAtendimento.input300}
type="text"
name="codigo"
placeholder="Digite"
value={formularioDados.codigo}
onChange={(e) => {
const codigo = e.target.value;
// Atualiza o estado formularioDados
setFormularioDados({
...formularioDados,
codigo, // Atualiza o código no formulário
});
// Atualiza o estado de atendimento com o código da guia
setAtendimento((prev) => ({
...prev,
serviceInfo: {
...prev.serviceInfo,
guideCode: codigo, // Atualiza o guideCode com o valor do input
},
}));
}}
/>
</div>
```
### O Que Foi Modificado
1. **Captura do Novo Valor do Código**:
- Quando o evento `onChange` do campo de entrada é acionado, você captura o novo valor do58f43d1b84c93a8781128714como faço com esses dados agora paymentInfo: {
method: "healthInsurance",
info: {
healthInsurance: {
cardNumber: "",
},
},
},
<div className={EstiloNovoAtendimento.divMargin}>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="convenio"
name="modalidade"
value="convenio"
onChange={() =>
setFormularioDados({
...formularioDados,
modalidade: "convenio",
})
}
/>
<label
htmlFor="convenio"
className={EstiloNovoAtendimento.labelModalidade}
>
Convênio
</label>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="particular"
name="modalidade"
value="particular"
onChange={() =>
setFormularioDados({
...formularioDados,
modalidade: "particular",
})
}
/>
<label
htmlFor="particular"
className={EstiloNovoAtendimento.labelModalidade}
>
Particular
</label>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="plantao"
name="modalidade"
value="plantao"
onChange={() =>
setFormularioDados({
...formularioDados,
modalidade: "plantao",
})
}
/>
<label
htmlFor="plantao"
className={EstiloNovoAtendimento.labelModalidade}
>
Plantão
</label>
</div>Para capturar informações referentes ao `paymentInfo`, como o método de pagamento e o número do cartão, você precisará fazer a integração de similar maneira aos exemplos anteriores.
### Etapas:
1. **Atualizar `paymentInfo` com o Método de Pagamento**:
Quando o usuário selecionar uma das modalidades (como "Convênio", "Particular" ou "Plantão"), você precisará atualizar tanto o estado `formularioDados` quanto o objeto `paymentInfo` no estado `atendimento`.
2. **Adicionar um Campo de Entrada para o Número do Cartão**:
Você deve fornecer um campo de entrada onde o usuário pode digitar o número do cartão, e isso deve ser refletido no estado `atendimento`.
### Implementação
Abaixo está um exemplo de como você pode implementar isso:
```javascript
<div className={EstiloNovoAtendimento.divMargin}>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="convenio"
name="modalidade"
value="convenio"
onChange={() => {
setFormularioDados((prev) => ({
...prev,
modalidade: "convenio",
}));
setAtendimento((prev) => ({
...prev,
paymentInfo: {
...prev.paymentInfo,
method: "healthInsurance", // Ou qualquer método que você queira usar
},
}));
}}
/>
<label htmlFor="convenio" className={EstiloNovoAtendimento.labelModalidade}>
Convênio
</label>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="particular"
name="modalidade"
value="particular"
onChange={() => {
setFormularioDados((prev) => ({
...prev,
modalidade: "particular",
}));
setAtendimento((prev) => ({
...prev,
paymentInfo: {
...prev.paymentInfo,
method: "particular", // Atualize para "particular"
},
}));
}}
/>
<label htmlFor="particular" className={EstiloNovoAtendimento.labelModalidade}>
Particular
</label>
<input
className={EstiloNovoAtendimento.radio}
type="radio"
id="plantao"
name="modalidade"
value="plantao"
onChange={() => {
setFormularioDados((prev) => ({
...prev,
modalidade: "plantao",
}));
setAtendimento((prev) => ({
...prev,
paymentInfo: {
...prev.paymentInfo,
method: "plantao", // Atualize para "plantao"
},
}));
}}
/>
<label htmlFor="plantao" className={EstiloNovoAtendimento.labelModalidade}>
Plantão
</label>
</div>
{/* Campo para o número do cartão */}
<div className={EstiloNovoAtendimento.organizador}>
<span>Número do Cartão:</span>
<input
className={EstiloNovoAtendimento.input300}
type="text"
placeholder="Digite o número do cartão"
value={atendimento.paymentInfo.info.healthInsurance.cardNumber}
onChange={(e) => {
const cardNumber = e.target.value;
setAtendimento((prev) => ({
...prev,
paymentInfo: {
...prev.paymentInfo,
info: {
healthInsurance: {
...prev.paymentInfo.info.healthInsurance,
cardNumber, // Atualiza o número do cartão
},
},
},
}));
}}
/>
</div>
```
### Explicação das Alterações
1. **Atualização do Método de Pagamento**:
- Para cada opção no radio button, ao selecionar uma modalidade, o estado `atendimento` é atualizado com o método correspondente via `paymentInfo.method`.
2. **Campo de Entrada para o Número do Cartão**:
- Um campo de entrada adicional é fornecido para permitir ao usuário inserir o número do cartão. Assim que o valor do campo mudar, ele atualiza `atendimento.paymentInfo.info.healthInsurance.cardNumber`.
### Finalizando
Com essa implementação, todas as informações relevantes sobre o pagamento estarão disponíveis no estado `atendimento` para que você possa utilizá-las quando necessário, como em uma operação de envio de dados ou validação. Certifique-se de incluir validações no campo do cartão para garantir que os dados inseridos estejam corretos antes de enviar o formulário.