USER
analise 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;
ASSISTANT
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.