Respan Dataset Explorer

No routes matched location "/novo-atendimento/3dbed6c4-b4e0-49dd-a153-a931960bb9b8" 

Se você está recebendo a mensagem "No routes matched location" ao tentar acessar a URL `/novo-atendimento/3dbed6c4-b4e0-49dd-a153-a931960bb9b8`, isso sugere que a rota que deveria capturar esse caminho não está corretamente definida nas suas rotas. 

Vamos esclarecer a configuração das rotas e garantir que o `NovoAtendimento` possa ser acessado corretamente através do ID que você passou na URL.

### Manter a Estrutura das Rotas

Ao definir suas rotas, você deve garantir que a estrutura esteja correta. Aqui está como você pode configurar corretamente:

1. **Ajustar as Rotas**: Primeiro, verifique se você tem a rota correspondente configurada corretamente. Para acessar o componente de `NovoAtendimento` usando um ID, a rota deve ser algo como:

```javascript
<Route path="/novo-atendimento/:id" element={<NovoAtendimento />} />
```

2. **Verifique a Estrutura de Rotas**: Certifique-se de que essa nova rota está no componente correto onde você define todas as suas rotas. Aqui está um exemplo de como deve ficar sua função `AppRoutes` ajustada:

```javascript
import React, { useContext, useEffect } from "react";
import {
  Route,
  Routes,
  Navigate,
  useLocation,
  useNavigate,
} from "react-router-dom";
import Login from "./components/Auth/Login";
import Cadastro from "./components/Auth/Cadastro";
import Dashboard from "./components/Dashboard/Dashboard";
import Home from "./components/Home/Home";
import Local from "./components/Local/Local";
import NovoLocal from "./components/Local/NovoLocal";
import Pacientes from "./components/Pacientes/Pacientes";
import NovoPaciente from "./components/Pacientes/NovoPaciente";
import Atendimentos from "./components/Atendimentos/Atendimentos";
import NovoAtendimento from "./components/Atendimentos/NovoAtendimento";
import Resumos from "./components/Resumos/Resumos";
import Analitico from "./components/Analitico/Analitico";
import LayoutPrincipal from "./components/LayoutPrincipal/LayoutPrincipal";
import { UserContext } from "./components/Auth/UserContext";

import { LocalProvider } from "./components/Local/LocalContext";

const AppRoutes: React.FC = () => {
  return (
    <LocalProvider>
      <Routes>
        <Route path="/" element={<LayoutPrincipal />}>
          <Route
            path="dashboard"
            element={
              <PrivateRoute>
                <Dashboard />
              </PrivateRoute>
            }
          />
          <Route path="home" element={<Home />} />
          <Route path="local" element={<Local />} />
          <Route path="localNovo" element={<NovoLocal />} />
          <Route path="pacientes" element={<Pacientes />} />
          <Route path="pacientesNovo" element={<NovoPaciente />} />
          <Route path="atendimentos" element={<Atendimentos />} />
          <Route path="/novo-atendimento/:id" element={<NovoAtendimento />} /> {/* Aqui está a rota para NovoAtendimento */}
          <Route path="resumos" element={<Resumos />} />
          <Route path="analitico" element={<Analitico />} />
          <Route path="/" element={<Navigate to="/home" />} />
        </Route>
        <Route path="/login" element={<Login />} />
        <Route path="/cadastro" element={<Cadastro />} />
      </Routes>
    </LocalProvider>
  );
};

export default AppRoutes;
```

### O Que Verificar

1. **Definição da Rota**: Certifique-se de que a rota está definida exatamente como `path="/novo-atendimento/:id"` e não está faltando a barra inicial (`/`).
   
2. **Rota na URL**: Quando navegar para o `NovoAtendimento`, o formato da URL deve ser exatamente `/novo-atendimento/3dbed6c4-b4e0-49dd-a153-a931960bb9b8`.

3. **Componentes Importados**: Certifique-se de que você está importando corretamente todos os componentes necessários, especialmente `NovoAtendimento`.

### Teste a Navegação

Após fazer as correções, teste a navegação novamente:

- Acesse a URL diretamente no navegador: `/novo-atendimento/3dbed6c4-b4e0-49dd-a153-a931960bb9b8`
- Clique no botão editar da interface que deveria redirecioná-lo para essa rota.

Se, após essas alterações, você ainda enfrentar problemas, sinta-se à vontade para fornecer mais detalhes sobre o que está acontecendo, e ficarei feliz em ajudar!

Não é possível encontrar o nome 'PrivateRoute'.ts(2304)
any

O erro "Não é possível encontrar o nome 'PrivateRoute'" sugere que o TypeScript não pode encontrar ou não reconhece o componente `PrivateRoute`, que deve ser um componente funcional que você definiu para gerenciar as rotas privadas em sua aplicação. 

### Solução

1. **Verifique a Definição de `PrivateRoute`**:
   A primeira coisa que você deve fazer é garantir que o componente `PrivateRoute` esteja definido corretamente e importado no seu arquivo de rotas. O `PrivateRoute` é um componente que verifica a autenticação do usuário antes de permitir o acesso a determinadas rotas.

2. **Implementação de `PrivateRoute`**:
   Aqui está um exemplo de como o componente `PrivateRoute` deve ser estruturado:

```javascript
import React, { useContext, useEffect } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { UserContext } from "./Auth/UserContext"; // Ajuste o caminho conforme necessário

const PrivateRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {
  const context = useContext(UserContext);
  const location = useLocation();

  if (!context) {
    throw new Error("UserContext must be used within a UserProvider");
  }

  const { usuario } = context;

  useEffect(() => {
    if (usuario) {
      sessionStorage.setItem("lastPrivatePath", location.pathname);
    }
  }, [usuario, location.pathname]);

  if (!usuario) {
    return <Navigate to="/login" state={{ from: location }} />;
  }

  return children;
};

export default PrivateRoute;
```

### 3. **Importar `PrivateRoute` no `AppRoutes`**:
Certifique-se de que você está importando `PrivateRoute` no arquivo onde você está definindo suas rotas. Por exemplo:

```javascript
import PrivateRoute from "./path/to/PrivateRoute"; // Ajuste o caminho para onde você salvou o arquivo PrivateRoute
```

### 4. **Usar `PrivateRoute` em suas Rotas**:
Certifique-se de que `PrivateRoute` está sendo utilizado corretamente em suas rotas. Não deve haver erro de digitação no nome.

### Exemplo Corrigido do Archivo `AppRoutes`

Aqui está como ficaria sua implementação com o componente `PrivateRoute`, assumindo que você tenha ele bem definido:

```javascript
import React from "react";
import { Route, Routes, Navigate } from "react-router-dom";
import Login from "./components/Auth/Login"; 
import Cadastro from "./components/Auth/Cadastro";
import Dashboard from "./components/Dashboard/Dashboard";
import Home from "./components/Home/Home";
import Local from "./components/Local/Local";
import NovoLocal from "./components/Local/NovoLocal";
import Pacientes from "./components/Pacientes/Pacientes";
import NovoPaciente from "./components/Pacientes/NovoPaciente";
import Atendimentos from "./components/Atendimentos/Atendimentos";
import NovoAtendimento from "./components/Atendimentos/NovoAtendimento";
import Resumos from "./components/Resumos/Resumos";
import Analitico from "./components/Analitico/Analitico";
import LayoutPrincipal from "./components/LayoutPrincipal/LayoutPrincipal";
import { UserContext } from "./components/Auth/UserContext";
import PrivateRoute from "./components/Auth/PrivateRoute"; // Assegure-se de que esse caminho está correto

const AppRoutes: React.FC = () => {
  return (
    <Routes>
      <Route path="/" element={<LayoutPrincipal />}>
        <Route path="dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
        <Route path="home" element={<Home />} />
        <Route path="local" element={<PrivateRoute><Local /></PrivateRoute>} />
        <Route path="localNovo" element={<PrivateRoute><NovoLocal /></PrivateRoute>} />
        <Route path="pacientes" element={<PrivateRoute><Pacientes /></PrivateRoute>} />
        <Route path="pacientesNovo" element={<PrivateRoute><NovoPaciente /></PrivateRoute>} />
        <Route path="atendimentos" element={<PrivateRoute><Atendimentos /></PrivateRoute>} />
        <Route path="/novo-atendimento/:id" element={<PrivateRoute><NovoAtendimento /></PrivateRoute>} />
        <Route path="resumos" element={<PrivateRoute><Resumos /></PrivateRoute>} />
        <Route path="analitico" element={<PrivateRoute><Analitico /></PrivateRoute>} />
        <Route path="/" element={<Navigate to="/home" />} />
      </Route>
      <Route path="/login" element={<Login />} />
      <Route path="/cadastro" element={<Cadastro />} />
    </Routes>
  );
};

export default AppRoutes;
```

### Conclusão

- Certifique-se de que `PrivateRoute` está devidamente definido e importado.
- Verifique se não há erros de digitação nos nomes dos componentes.
- Após fazer essas correções, seu código deve compilar sem erros relacionados a `PrivateRoute`. Se continuar tendo dificuldades, verifique também se o Context está sendo fornecido corretamente em volta do seu aplicativo.

nao achei viavel desta forma gostaria que fosse algo tipo assim

 const handleEdit = (paciente: Paciente) => {
    navigate(`/pacientesNovo?id=${paciente.id}`);
  };
import EstiloNovoPaciente from "./NovoPaciente.module.css";
import InputMask from "react-input-mask";
import React, { useState, useEffect } from "react";
import { useApi } from "../../lib/doctorApi";
import { useNavigate } from "react-router-dom";

export interface Paciente {
  id?: number;
  name: string;
  cpf: string;
  email: string;
  gender: string;
  address: string;
  phone: string;
  birthday: string;
  idade: string;
  payments?: string[];
}

const NovoPaciente: React.FC = () => {
  const api = useApi();
  const navigate = useNavigate();
  const [id, setId] = useState<number | undefined>();
  const [name, setName] = useState<string>("");
  const [cpf, setCpf] = useState<string>("");
  const [gender, setGender] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [address, setAddress] = useState<string>("");
  const [phone, setCelular] = useState<string>("");
  const [birthday, setDataNascimento] = useState<string>("");
  const [idade, setIdade] = useState<string>("");

  useEffect(() => {
    const queryParams = new URLSearchParams(location.search);
    const pacienteId = queryParams.get("id");

    if (pacienteId) {
      const fetchPaciente = async () => {
        try {
          const response = await api.get(`/patients/${pacienteId}/get`);
          const paciente = response.data.result;

          setId(paciente.id);
          setName(paciente.name);
          setCpf(paciente.cpf);
          setGender(paciente.gender);
          setEmail(paciente.email);
          setAddress(paciente.address);
          setCelular(paciente.phone);
          setDataNascimento(paciente.birthday || "");
          setIdade(paciente.idade || "");
        } catch (error) {
          console.error("Erro ao buscar paciente:", error);
        }
      };

      fetchPaciente();
    }
  }, []);

  const calcularIdade = (data: string) => {
    const dataAtual = new Date();
    const anoAtual = dataAtual.getFullYear();
    const mesAtual = dataAtual.getMonth();
    const diaAtual = dataAtual.getDate();
    const [anoNascimento, mesNascimento, diaNascimento] = data
      .split("-")
      .map(Number);

    let idadeCalculada = anoAtual - anoNascimento;
    if (
      mesAtual < mesNascimento ||
      (mesAtual === mesNascimento && diaAtual < diaNascimento)
    ) {
      idadeCalculada--;
    }
    return idadeCalculada.toString();
  };

  const handleChangeNascimento = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const novaData = event.target.value;
    setDataNascimento(novaData);
    if (novaData) {
      setIdade(calcularIdade(novaData));
    } else {
      setIdade("");
    }
  };

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();

    const novoPaciente: Partial<Paciente> = {
      name,
      cpf,
      email,
      gender,
      address,
      phone,
      birthday,
    };

    try {
      if (id) {
        await api.put(`/patients/${id}/update`, novoPaciente);
        console.log("Paciente atualizado com sucesso!");
      } else {
        await api.post("/patients/register", novoPaciente);
        console.log("Paciente registrado com sucesso!");
      }
      navigate("/pacientes");
    } catch (error) {
      console.error("Erro ao salvar paciente:", error);
    }

    // Limpar campos após salvar
    setId(undefined);
    setName("");
    setCpf("");
    setEmail("");
    setGender("");
    setAddress("");
    setCelular("");
    setDataNascimento("");
    setIdade("");
  };

  return (
    <div>
      <label className={EstiloNovoPaciente.cadastroLabel}>
        Cadastro de Paciente
      </label>
      <p className={EstiloNovoPaciente.breadcrumb}>
        Home/Pacientes/Cadastro de Pacientes
      </p>

      <form onSubmit={handleSubmit}>
        <div className={EstiloNovoPaciente.flexContainer}>
          <label className={EstiloNovoPaciente.label}>
            <span>Nome completo do paciente/social*</span>
            <input
              className={`${EstiloNovoPaciente.input_estilo} ${EstiloNovoPaciente.inputNome}`}
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Nome do Paciente..."
              required
            />
          </label>

          <label className={EstiloNovoPaciente.label}>
            <span>CPF</span>
            <input
              className={EstiloNovoPaciente.input_estiloCpf}
              type="text"
              value={cpf}
              onChange={(e) => setCpf(e.target.value)}
              placeholder="Digite um CPF..."
              required
            />
          </label>
        </div>

        <label className={EstiloNovoPaciente.gender}>
          <span>Gênero:</span>
          <input
            type="radio"
            id="male"
            name="gender"
            value="male"
            checked={gender === "male"} // Define como selecionado quando o valor corresponde ao estado
            onChange={(e) => setGender(e.target.value)} // Atualiza o estado `gender`
          />
          <label htmlFor="male" className={EstiloNovoPaciente.radioLabel}>
            Masculino
          </label>
          <input
            type="radio"
            id="female"
            name="gender"
            value="female"
            checked={gender === "female"} // Define como selecionado quando o valor corresponde ao estado
            onChange={(e) => setGender(e.target.value)} // Atualiza o estado `gender`
          />
          <label htmlFor="female" className={EstiloNovoPaciente.radioLabel}>
            Feminino
          </label>
        </label>

        <label className={EstiloNovoPaciente.label}>
          <span>Nascimento: {idade ? `${idade} anos` : ""}</span>
          <input
            className={`${EstiloNovoPaciente.input_estilo} ${EstiloNovoPaciente.inputData}`}
            type="date"
            value={birthday}
            onChange={handleChangeNascimento}
            required
          />
        </label>

        <label className={EstiloNovoPaciente.label}>
          <span>E-mail</span>
          <input
            className={EstiloNovoPaciente.input_estilo}
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Digite um E-mail..."
            required
          />
        </label>

        <label className={EstiloNovoPaciente.label}>
          <span>Endereço</span>
          <input
            className={EstiloNovoPaciente.input_estilo}
            type="text"
            value={address}
            onChange={(e) => setAddress(e.target.value)}
            placeholder="Digite um Endereço..."
            required
          />
        </label>

        <label className={EstiloNovoPaciente.label}>
          <span>Celular</span>
          <InputMask
            className={`${EstiloNovoPaciente.input_estilo} ${EstiloNovoPaciente.inputCelular}`}
            mask="(99) 99999-9999"
            value={phone}
            onChange={(e) => setCelular(e.target.value)}
            placeholder="(XX) XXXXX-XXXX"
            required
          />
        </label>

        <div className={EstiloNovoPaciente.buttonContainer}>
          <button className={EstiloNovoPaciente.button} type="submit">
            Salvar
          </button>
        </div>
      </form>
    </div>
  );
};

export default NovoPaciente;

Para implementar a navegação para a tela de edição do paciente usando parâmetros de query string como você fez em seu exemplo, você pode seguir os passos específicos para configurar a navegação no React. 

### 1. Modificação do Componente onde você chama a função `handleEdit`

Quando você chamar a função `handleEdit` com o paciente, você pode usar a navegação com `navigate` da seguinte forma:

```javascript
const handleEdit = (paciente: Paciente) => {
  navigate(`/pacientesNovo?id=${paciente.id}`);
};
```

### 2. Modificação do Componente `NovoPaciente`

No componente `NovoPaciente`, modifique o `useEffect` para ler o ID do paciente dos parâmetros de consulta (`query string`). Aqui está como você pode fazer isso:

```javascript
import React, { useState, useEffect } from "react";
import { useApi } from "../../lib/doctorApi";
import { useNavigate, useLocation } from "react-router-dom"; // Use useLocation para capturar query params

const NovoPaciente: React.FC = () => {
  const api = useApi();
  const navigate = useNavigate(); 
  const location = useLocation(); // Use useLocation para capturar os parâmetros da URL
  const queryParams = new URLSearchParams(location.search);
  const pacienteId = queryParams.get("id"); // Captura o ID da URL

  const [id, setId] = useState<number | undefined>();
  const [name, setName] = useState<string>("");
  const [cpf, setCpf] = useState<string>("");
  const [gender, setGender] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [address, setAddress] = useState<string>("");
  const [phone, setCelular] = useState<string>("");
  const [birthday, setDataNascimento] = useState<string>("");
  const [idade, setIdade] = useState<string>("");

  useEffect(() => {
    if (pacienteId) { // Verifica se o ID do paciente existe
      const fetchPaciente = async () => {
        try {
          const response = await api.get(`/patients/${pacienteId}/get`);
          const paciente = response.data.result;

          setId(paciente.id);
          setName(paciente.name);
          setCpf(paciente.cpf);
          setGender(paciente.gender);
          setEmail(paciente.email);
          setAddress(paciente.address);
          setCelular(paciente.phone);
          setDataNascimento(paciente.birthday || "");
          setIdade(paciente.idade || "");
        } catch (error) {
          console.error("Erro ao buscar paciente:", error);
        }
      };

      fetchPaciente();
    }
  }, [pacienteId, api]); // Adiciona pacienteId como dependência para garantir que a chamada é feita corretamente.

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();

    const novoPaciente: Partial<Paciente> = {
      name,
      cpf,
      email,
      gender,
      address,
      phone,
      birthday,
    };

    try {
      if (id) {
        await api.put(`/patients/${id}/update`, novoPaciente);
        console.log("Paciente atualizado com sucesso!");
      } else {
        await api.post("/patients/register", novoPaciente);
        console.log("Paciente registrado com sucesso!");
      }
      navigate("/pacientes"); // Redireciona para a lista de pacientes após salvar.
    } catch (error) {
      console.error("Erro ao salvar paciente:", error);
    }

    // Limpar campos após salvar
    setId(undefined);
    setName("");
    setCpf("");
    setEmail("");
    setGender("");
    setAddress("");
    setCelular("");
    setDataNascimento("");
    setIdade("");
  };

  return (
    <div>
      {/* Resto do formulário */}
    </div>
  );
};

export default NovoPaciente;
```

### Resumo das Alterações

1. **Navegação na Função `handleEdit`**:
   - Você utiliza `navigate` para redirecionar com a query string: `navigate(`/pacientesNovo?id=${paciente.id}`);`.

2. **Captura do ID em `NovoPaciente`**:
   - Você usa `useLocation` para capturar os parâmetros da URL e `URLSearchParams` para obter o ID através da query string.
   - O paciente é buscado da API se o `pacienteId` estiver presente.

3. **Chamada à API**:
   - Se o ID do paciente estiver presente, você realiza uma chamada para buscar os dados do paciente correspondente.

### Testando a Implementação

- Ao clicar no botão de editar, você deve ser redirecionado para `/pacientesNovo?id=3dbed6c4-b4e0-49dd-a153-a931960bb9b8`.
- O `NovoPaciente` deve carregar os dados do paciente e preencher o formulário corretamente.

Se você precisar de mais alguma coisa ou tiver mais perguntas, é só avisar!

FOI SO UM EXEMPLO, de como quero no atendimento e novoatendimento

import React, { useEffect, useState } from "react";
import styles from "./Atendimentos.module.css";
import { DatePickerDemo } from "../shadcdn-ui/DatePicker/DatePicker";
import CardAtendimento from "./CardAtendimento";
import NovoAtendimento from "./NovoAtendimento";
import { AppointmentRequestDTO } from "./types";
import { useApi } from "../../lib/doctorApi";

const Atendimentos: React.FC = () => {
  const [appointments, setAppointments] = useState<AppointmentRequestDTO[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const api = useApi(); // `useApi` é tratado como estável.

  useEffect(() => {
    const fetchAppointments = async () => {
      try {
        const response = await api.get("/appointments/find?skip=0&limit=40");
        console.log("dados resgatados", response);

        // Verifique se a resposta é um array
        if (Array.isArray(response.data.result.list)) {
          setAppointments(response.data.result.list); // Armazenando os dados no estado
        } else {
          throw new Error("A resposta não contém uma lista de atendimentos.");
        }
      } catch (error) {
        console.error("Erro ao carregar atendimentos:", error);
        setError(error instanceof Error ? error.message : "Erro desconhecido");
      } finally {
        setLoading(false);
      }
    };

    fetchAppointments();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div className={styles.mainBody}>
      <h1>Atendimentos</h1>
      <h3>Home / Local</h3>
      <div className={styles.formulario}>
        <h2>Filtrar</h2>
        <div className={styles.situacao}>
          <h2>Situação:</h2>
          <form className={styles.radioList}>
            <label className={styles.reto}>
              <input type="radio" name="situacao" value="opcao1" />
              Rascunho
            </label>
            <label className={styles.reto}>
              <input type="radio" name="situacao" value="opcao2" />
              Aprovadas
            </label>
            <label className={styles.reto}>
              <input type="radio" name="situacao" value="opcao3" />À faturar
            </label>
            <label className={styles.reto}>
              <input type="radio" name="situacao" value="opcao4" />
              Entregues
            </label>
            <label className={styles.reto}>
              <input type="radio" name="situacao" value="opcao5" />
              Glosados
            </label>
            <label className={styles.reto}>
              <input type="radio" name="situacao" value="opcao6" />
              Perdidos
            </label>
            <label className={styles.reto}>
              <input type="radio" name="situacao" value="opcao7" />
              Recebidos
            </label>
          </form>
        </div>

        <div className={styles.modalidade}>
          <div className={styles.modalidadeOptions}>
            <h2>Modalidade:</h2>
            <form className={styles.radioListModalidade}>
              <label className={styles.reto}>
                <input type="radio" name="modalidade" value="opcao1" />
                Todas
              </label>
              <label className={styles.reto}>
                <input type="radio" name="modalidade" value="opcao2" />
                Convenio
              </label>
              <label className={styles.reto}>
                <input type="radio" name="modalidade" value="opcao3" />
                Particular
              </label>
              <label className={styles.reto}>
                <input type="radio" name="modalidade" value="opcao4" />
                Plantão
              </label>
            </form>
          </div>

          <div className={styles.select}>
            <label htmlFor="localSelect">
              <h2>Local:</h2>
            </label>
            <select id="localSelect">
              <option value="">Buscar</option>
              {/* Adicione as opções aqui */}
            </select>
          </div>

          <div className={styles.select}>
            <label htmlFor="payerSelect">
              <h2>Fonte Pagadora:</h2>
            </label>
            <select id="payerSelect">
              <option value="">Buscar</option>
              {/* Adicione as opções aqui */}
            </select>
          </div>
        </div>

        <div className={styles.dateSection}>
          <div>
            <h2>Data Inicial:</h2>
            <DatePickerDemo />
          </div>
          <div>
            <h2>Data Final:</h2>
            <DatePickerDemo />
          </div>
        </div>
      </div>
      <div className={styles.pesquisaAtendimentos}>
        <h2>Busque por Atendimentos</h2>
        {/* Adicione os campos de pesquisa aqui */}
      </div>
      <div className={styles.campoPesquisa}>
        <input
          className={styles.inputBusca}
          type="text"
          placeholder="Atendimentos"
        />
      </div>

      <div className={styles.cardsAtendimentos}>
        {appointments.map((appointment) => (
          <CardAtendimento
            key={appointment.id} // Assegure que id está definido em AppointmentRequestDTO
            appointment={appointment}
            alternarCard={() => {}}
          />
        ))}
      </div>
    </div>
  );
};

export default Atendimentos;


import EstiloNovoAtendimento from "./NovoAtendimento.module.css";
import React, { useState, useEffect } from "react";
import { useApi } from "../../lib/doctorApi";
import { AppointmentRequestDTO, ProcedureDTO } from "./types";
import DropdownSelect from "./DropdownSelect";
import CardProcedimento from "./CardProcedimento";
import { v4 as uuidv4 } from "uuid"; // Importa a função para gerar UUIDs
import { toMoney } from "../utils/FormatedData";
import Anexo from "../ui/Anexo";

const CoresInput = [
  "#25AAE1", // Cor 1
  "#8696BB", // Cor 2
  "#39465F", // Cor 3
  "#D56D98", // Cor 4
];

const NovoAtendimento: React.FC = () => {
  const updateProcedimento = (index: number, novosDados: ProcedureDTO) => {
    console.log(index, novosDados);
    const cloneAtendimento = { ...atendimento };
    cloneAtendimento.procedures[index] = novosDados;
    setAtendimento(cloneAtendimento);
  };

  const [botaoSalvar, setBotaoSalvar] = useState("");
  const enviarDadosAtendimento = async () => {
    loading;
    try {
      const result = await api.post("appointments/create", atendimento);
      if (result?.data?.success) {
        if (
          result.data.result?.id &&
          result.data.result.id !== atendimento.id
        ) {
          const cloneAtendimento = { ...atendimento };
          cloneAtendimento.id = result.data.result.id;
          setAtendimento(cloneAtendimento);
        }
        console.log("dados enviados", result);
      }
      result?.data?.messages;
      console.log("atendimento criado comm sucesso", result);
      setBotaoSalvar("Salvo");
    } catch (e: any) {
      e?.response?.data?.messages;
      console.log("erro ao criar atendimento", e);
      setBotaoSalvar("Salvar");
    }
    setLoading;
  };
  useEffect(() => {
    setBotaoSalvar("Salvar");
    const queryParams = new URLSearchParams(location.search);
    const appointmentId = queryParams.get("id");
    if (appointmentId) {
      const fetchAtendimento = async () => {
        try {
          const response = await api.get(`appointments/get/${appointmentId}`);

          const atendimento = response.data.result;
          setAtendimento(atendimento);
        } catch (error) {
          console.error("Erro ao buscar paciente:", error);
        }
      };

      fetchAtendimento();
    }
  }, []);

  const handleAdicionarProcedimento = () => {
    const novoProcedimento: ProcedureDTO = {
      id: uuidv4(),
      createdAt: new Date(),
      updatedAt: new Date(),
      cbhpmCode: "",
      cbhpmName: "",
      expectedValue: 0,
      glossedValue: 0,
      lostValue: 0,
      paidValue: 0,
      placeId: atendimento.related.place?.id || "",
      payerId: atendimento.related.payer?.id || "",
      patientId: atendimento.related.patient?.id || "",
      statusOfActivity: "draft",
      attachments: [],
    };
    const cloneAtendimento = { ...atendimento };
    cloneAtendimento.procedures.push(novoProcedimento);
    setAtendimento(cloneAtendimento);
    setMostrarCard(true);
  };

  const handleExcluirProcedimento = (id: string) => {
    // Filtra o array de procedimentos, mantendo apenas aqueles cujo id não coincide.
    const novosProcedimentos = atendimento.procedures.filter(
      (proc) => proc.id !== id
    );

    // Cria uma cópia do estado de atendimento e atualiza a lista de procedimentos
    setAtendimento((prev) => ({
      ...prev,
      procedures: novosProcedimentos, // Atualiza a lista de procedimentos
    }));

    // Opcional: Se existir alguma lógica que dependa da atualização da barra gráfica, você pode chamar:
  };

  // Atualiza o localStorage sempre que procedimentos mudar

  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 [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: {
        totalSum: 0,
        healthInsurance: {
          cardNumber: "",
        },
        totalValues: {
          expected: 0,
          glossed: 0,
          lost: 0,
          paid: 0,
        },
        totalProcedures: {
          expected: 0,
          glossed: 0,
          lost: 0,
          paid: 0,
        },
      },
    },
    serviceInfo: {
      guideCode: "",
      date: "",
      totalValue: 0,
    },
    procedures: [],
  });

  const atualizarValoresBarra = () => {
    const totalProcedures = {
      expected: 0,
      glossed: 0,
      lost: 0,
      paid: 0,
    };
    const totalValue = {
      expected: 0,
      glossed: 0,
      lost: 0,
      paid: 0,
    };

    atendimento.procedures.forEach((proc) => {
      if (proc.expectedValue > 0) {
        totalProcedures.expected += 1; // Incrementa para expectedValue
        totalValue.expected += proc.expectedValue;
      }
      if (proc.glossedValue > 0) {
        totalProcedures.glossed += 1; // Incrementa para glossedValue
        totalValue.glossed += proc.glossedValue;
      }
      if (proc.lostValue > 0) {
        totalProcedures.lost += 1; // Incrementa para lostValue
        totalValue.lost += proc.lostValue;
      }
      if (proc.paidValue > 0) {
        totalProcedures.paid += 1; // Incrementa para paidValue
        totalValue.paid += proc.paidValue;
      }
    });
    const cloneAtendimento = { ...atendimento };
    cloneAtendimento.paymentInfo.info.totalProcedures = totalProcedures;
    cloneAtendimento.paymentInfo.info.totalValues = totalValue;
    cloneAtendimento.paymentInfo.info.totalSum =
      cloneAtendimento.paymentInfo.info.totalValues.expected +
      cloneAtendimento.paymentInfo.info.totalValues.glossed +
      cloneAtendimento.paymentInfo.info.totalValues.lost +
      cloneAtendimento.paymentInfo.info.totalValues.paid;

    setAtendimento(cloneAtendimento); // Atualiza o estado dos valores da barra
  };

  useEffect(() => {
    atualizarValoresBarra();
  }, [JSON.stringify(atendimento.procedures)]);

  // Função que alterna entre expandir e recolher
  const alternarCard = () => {
    setMostrarCard(!mostrarCard);
  };

  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>
            {[
              atendimento.paymentInfo.info.totalValues.expected,
              atendimento.paymentInfo.info.totalValues.glossed,
              atendimento.paymentInfo.info.totalValues.lost,
              atendimento.paymentInfo.info.totalValues.paid,
            ].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$ {toMoney(atendimento.paymentInfo.info.totalSum)}
              {/* Aqui já usará o total atualizado */}
            </label>
            <div className={EstiloNovoAtendimento.graficoRepresentativo}>
              <div className={EstiloNovoAtendimento.barraFixa}>
                {[
                  atendimento.paymentInfo.info.totalValues.expected,
                  atendimento.paymentInfo.info.totalValues.glossed,
                  atendimento.paymentInfo.info.totalValues.lost,
                  atendimento.paymentInfo.info.totalValues.paid,
                ].map((valor, index) => (
                  <div
                    key={`grafico-${index}`}
                    style={{
                      backgroundColor: CoresInput[index],
                      width:
                        atendimento.paymentInfo.info.totalSum > 0
                          ? `${
                              (valor / atendimento.paymentInfo.info.totalSum) *
                              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={() => {
                  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={() => {
                  setAtendimento((prev) => ({
                    ...prev,
                    paymentInfo: {
                      ...prev.paymentInfo,
                      method: "private", // Atualize para "particular"
                    },
                  }));
                }}
              />
              <label
                htmlFor="particular"
                className={EstiloNovoAtendimento.labelModalidade}
              >
                Particular
              </label>

              <input
                className={EstiloNovoAtendimento.radio}
                type="radio"
                id="plantao"
                name="modalidade"
                value="plantao"
                onChange={() => {
                  setAtendimento((prev) => ({
                    ...prev,
                    paymentInfo: {
                      ...prev.paymentInfo,
                      method: "onDuty", // Atualize para "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) => {
              // Atualizar o estado de atendimento para incluir o payer
              setAtendimento((prev) => ({
                ...prev,
                related: {
                  ...prev.related,
                  payer: { id: selectedItem.id, name: selectedItem.name }, // Assumindo que você quer armazenar um objeto { id, name }
                },
              }));
            }} // Define o item selecionado no estado
            value={atendimento.related.payer?.id || ""} // Valor atual do dropdown
            label="Fonte Pagadora:" // Rótulo a ser exibido
          />
        </div>

        <div className={EstiloNovoAtendimento.container}>
          {/* TODO: O Componente paciente precisa ter um campo de busca e buscar na api do backend com limite de 10 pacientes */}
          <DropdownSelect
            endpoint="patients/find?skip=0&limit=2000" // URL do endpoint
            parseData={(data) =>
              data.result.list.map((item: any) => ({
                id: item.id,
                name: item.name,
              }))
            } // Função que transforma os dados da API no formato { id, name }
            onSelect={(selectedItem) => {
              // Atualizar o estado de atendimento para incluir o payer
              setAtendimento((prev) => ({
                ...prev,
                related: {
                  ...prev.related,
                  patient: { id: selectedItem.id, name: selectedItem.name }, // Assumindo que você quer armazenar um objeto { id, name }
                },
              }));
            }} // Define o item selecionado no estado
            value={atendimento.related.patient?.id || ""} // Valor atual do dropdown
            label="Paciente:" // Rótulo a ser exibido
          />

          <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) => {
              // Atualizar o estado de atendimento para incluir o payer
              setAtendimento((prev) => ({
                ...prev,
                related: {
                  ...prev.related,
                  place: { id: selectedItem.id, name: selectedItem.name }, // Assumindo que você quer armazenar um objeto { id, name }
                },
              }));
            }} // Callback para atualizar o formulário com o local selecionado
            value={atendimento.related.place?.id || ""} // 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={atendimento.serviceInfo.guideCode}
              onChange={(e) => {
                const codigo = e.target.value;

                // 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>
          <div className={EstiloNovoAtendimento.organizador}>
            <span>Data</span>
            <input
              className={EstiloNovoAtendimento.inputData}
              type="date"
              name="data"
              placeholder="dd/mm/yyyy"
              value={atendimento.createdAt?.toISOString()}
              onChange={(e) => {
                const data = e.target.value;

                setAtendimento((prev) => ({
                  ...prev,
                  serviceInfo: {
                    ...prev.serviceInfo,
                    date: data,
                  },
                }));
              }}
            />
          </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}>
          {[
            atendimento.paymentInfo.info.totalProcedures.expected,
            atendimento.paymentInfo.info.totalProcedures.glossed,
            atendimento.paymentInfo.info.totalProcedures.lost,
            atendimento.paymentInfo.info.totalProcedures.paid,
          ].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>{atendimento.procedures.length}</label> Procedimento
            </label>
          </div>
          <div className={EstiloNovoAtendimento.graficoRepresentativo}>
            <div className={EstiloNovoAtendimento.barraFixa}>
              {[
                atendimento.paymentInfo.info.totalProcedures.expected,
                atendimento.paymentInfo.info.totalProcedures.glossed,
                atendimento.paymentInfo.info.totalProcedures.lost,
                atendimento.paymentInfo.info.totalProcedures.paid,
              ].map((valor, index) => (
                <div
                  key={`grafico-segunda-${index}`}
                  style={{
                    backgroundColor: CoresInput[index],
                    width: `${(valor / atendimento.procedures.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 */}
          {atendimento.procedures.map((proc, index) => (
            <CardProcedimento
              key={"procedure_" + proc.id}
              index={index} // Usando o índice corretamente
              procedure={proc}
              updateProcedimento={updateProcedimento}
              handleExcluir={handleExcluirProcedimento}
            />
          ))}
        </>
      )}
      <Anexo
        attachments={atendimento.attachments || []}
        setAttachments={(novosAnexos) => {
          setAtendimento((prev) => ({
            ...prev,
            attachments: novosAnexos,
          }));
        }}
      />

      <div className={EstiloNovoAtendimento.divbutton}>
        <button
          className={EstiloNovoAtendimento.buttonSalvar}
          disabled={loading}
          onClick={enviarDadosAtendimento}
        >
          {loading ? botaoSalvar : "Salvar"}
        </button>
      </div>
    </div>
  );
};

export default NovoAtendimento;

Para implementar uma navegação onde se passa o ID do atendimento através de parâmetros de query (similar ao seu exemplo de paciente), você pode seguir as seguintes etapas em seus componentes `Atendimentos` e `NovoAtendimento`.

### 1. Modificando o Componente `Atendimentos`

Neste componente, você deve adicionar a função `handleEdit` que irá usar o `navigate` para redirecionar para a página de edição do atendimento, passando o ID como um parâmetro de consulta (query string).

```javascript
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; // Importar useNavigate
import styles from "./Atendimentos.module.css";
// Outras importações aqui

const Atendimentos: React.FC = () => {
  const [appointments, setAppointments] = useState<AppointmentRequestDTO[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const api = useApi();
  const navigate = useNavigate(); // Inicializa useNavigate

  useEffect(() => {
    const fetchAppointments = async () => {
      try {
        const response = await api.get("/appointments/find?skip=0&limit=40");
        if (Array.isArray(response.data.result.list)) {
          setAppointments(response.data.result.list);
        } else {
          throw new Error("A resposta não contém uma lista de atendimentos.");
        }
      } catch (error) {
        console.error("Erro ao carregar atendimentos:", error);
        setError(error instanceof Error ? error.message : "Erro desconhecido");
      } finally {
        setLoading(false);
      }
    };

    fetchAppointments();
  }, [api]);

  const handleEdit = (appointment: AppointmentRequestDTO) => {
    navigate(`/novo-atendimento?id=${appointment.id}`); // Redireciona para a rota com ID na query string
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div className={styles.mainBody}>
      <h1>Atendimentos</h1>
      <h3>Home / Atendimentos</h3>
      <div className={styles.cardsAtendimentos}>
        {appointments.map((appointment) => (
          <CardAtendimento
            key={appointment.id}
            appointment={appointment}
            handleEdit={handleEdit} // Passe a função de editar
          />
        ))}
      </div>
    </div>
  );
};

export default Atendimentos;
```

### 2. Modificando o Componente `CardAtendimento`

Aqui você se certifica de que o `CardAtendimento` inclua uma chamada à `handleEdit` ao clicar no botão de editar.

```javascript
import React from 'react';
import styles from "./Atendimentos.module.css";
import { AppointmentRequestDTO } from "./types";

interface CardAtendimentoProps {
  appointment: AppointmentRequestDTO; // O objeto do atendimento
  handleEdit: (appointment: AppointmentRequestDTO) => void; // Função para editar
}

const CardAtendimento: React.FC<CardAtendimentoProps> = ({ appointment, handleEdit }) => {
  return (
    <div className={styles.CardPai}>
      <div className={styles.CardTopPai}>
        <div className={styles.buttonCard}>
          <button onClick={() => handleEdit(appointment)}> {/* Chama a função ao clicar */}
            <img src="/lapisEditor.png" alt="Editar" className={styles.icon} />
          </button>
        </div>
      </div>
      {/* Renderize outras informações do atendimento */}
    </div>
  );
};

export default CardAtendimento;
```

### 3. Modificando o Componente `NovoAtendimento`

No `NovoAtendimento`, você deve continuar usando o `useLocation` para capturar o ID do atendimento a partir da query string e buscar os dados correspondentes.

```javascript
import React, { useState, useEffect } from "react";
import { useApi } from "../../lib/doctorApi";
import { useLocation } from 'react-router-dom'; // Importa useLocation

const NovoAtendimento: React.FC = () => {
  const api = useApi();
  const location = useLocation(); // Captura a localização
  const [atendimento, setAtendimento] = useState<AppointmentRequestDTO | null>(null);
  const [loading, setLoading] = useState(false);

  // Captura o ID da query string
  const queryParams = new URLSearchParams(location.search);
  const appointmentId = queryParams.get("id");

  useEffect(() => {
    if (appointmentId) {
      const fetchAtendimento = async () => {
        setLoading(true);
        try {
          const response = await api.get(`appointments/get/${appointmentId}`);
          setAtendimento(response.data.result);
        } catch (error) {
          console.error("Erro ao buscar atendimento:", error);
        } finally {
          setLoading(false);
        }
      };

      fetchAtendimento();
    }
  }, [appointmentId, api]);

  if (loading) return <div>Loading...</div>; // Simple loading state

  return (
    <div>
      {/* Exibe o formulário para editar o atendimento */}
      {/* ... restante do código para renderizar o atendimento como formulário ... */}
    </div>
  );
};

export default NovoAtendimento;
```

### Resumo das Alterações

- **Componente `Atendimentos`**:
  - Adiciona a função `handleEdit` que usa `navigate` para redirecionar para a página de edição e passa o ID através da query string.

- **Componente `CardAtendimento`**:
  - Chama a função `handleEdit` ao clicar no botão de editar, passando o objeto de `appointment`.

- **Componente `NovoAtendimento`**:
  - Usa `useLocation` para capturar a query string e fazer a requisição para obter os dados do atendimento correspondente.

### Teste a Implementação

1. Ao clicar no botão de editar um atendimento, você deve ser redirecionado para a URL `/novo-atendimento?id={id_do_atendimento}`.
2. O componente `NovoAtendimento` deve buscar os dados do atendimento baseado no ID recebido.

Se precisar de mais alguma coisa ou tiver perguntas, estou à disposição para ajudar!

 
Send only episode number from below text like 01, 02, 03.etc without any extra text.

The Ancient Magus Bride S02E05 [RareToonsIndia].mkv

05

 
Send only season number from below text like 01, 02, 03.etc without any extra text.

The Ancient Magus Bride S02E05 [RareToonsIndia].mkv

02

DIA DE LA MUJER MÉDICA

El Día de la Mujer Médica se celebra el 3 de diciembre en varios países, aunque la fecha puede variar según la región. Esta conmemoración busca honrar y reconocer la labor de las mujeres en el campo de la medicina y la salud, así como promover la equidad de género en esta profesión.

A lo largo de la historia, las mujeres han enfrentado numerosos desafíos para acceder a la educación y las oportunidades laborales en medicina. A pesar de estas barreras, muchas han hecho contribuciones significativas en diversas áreas de la salud, desde la investigación hasta la práctica clínica. El Día de la Mujer Médica es una oportunidad para destacar sus logros, reflexionar sobre los desafíos que aún persisten y fomentar un entorno más inclusivo y diverso en el ámbito médico.

Las celebraciones pueden incluir conferencias, talleres, y eventos que promuevan la visibilidad de las mujeres en la medicina, así como el apoyo para futuras generaciones de médicas.

PARA QUE ES BUENO EL AGUA FLORIDA

El agua florida es un producto tradicional que se utiliza en diversas culturas por sus propiedades aromáticas y sus usos rituales. A continuación, se presentan algunas de las aplicaciones y beneficios más comunes del agua florida:

1. **Aromatizante:** Se utiliza como ambientador para darle un aroma fresco y agradable a los espacios. Muchas personas lo utilizan para perfumar habitaciones, ropa y ropa de cama.

2. **Cuidado personal:** Algunas personas la emplean como un producto de higiene personal, ya sea para refrescarse después de un baño o como un tónico facial. Se dice que puede proporcionar una sensación de frescura.

3. **Rituales y ceremonias:** El agua florida se usa comúnmente en prácticas espirituales, rituales religiosos y ceremonias de purificación. Se considera que ayuda a ahuyentar las energías negativas y atraer la buena suerte.

4. **Relajación:** El aroma del agua florida puede tener efectos calmantes y relajantes, lo que la hace popular en aromaterapia.

5. **Higiene en el hogar:** Además de aromatizar, algunas personas lo usan para limpiar y desinfectar superficies, ya que tiene propiedades antimicrobianas.

6. **Usos medicinales:** En algunas tradiciones, se le atribuyen propiedades curativas, aunque estas afirmaciones no siempre están respaldadas por la ciencia. Algunas personas creen que puede ayudar con dolores de cabeza, estrés y problemas estomacales, aunque siempre se recomienda consultar a un profesional de la salud.

Es importante notar que, aunque el agua florida tiene muchos usos tradicionales, la eficacia de algunos de ellos puede ser subjetiva y variar de persona a persona. Siempre es recomendable usar productos de forma responsable y tener en cuenta posibles alergias a sus componentes.

 
Send only episode number from below text like 01, 02, 03.etc without any extra text.

The Ancient Magus Bride S02E23 [RareToonsIndia].mkv

23

 
Send only season number from below text like 01, 02, 03.etc without any extra text.

The Ancient Magus Bride S02E23 [RareToonsIndia].mkv

02