Adição da funcionalidade de ver detalhes e editar

src/PagesMedico/DoctorRelatorioManager.jsx

@@ -3,15 +3,19 @@ import  { Link } from 'react-router-dom';
 import {useState, useEffect} from 'react'
 import { useAuth } from '../components/utils/AuthProvider';
 import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient';
+import { useNavigate } from 'react-router-dom';
+import html2pdf from 'html2pdf.js';
 const DoctorRelatorioManager = () => {
+  const navigate = useNavigate()
   const {getAuthorizationHeader} = useAuth();
   let authHeader = getAuthorizationHeader()
   const [RelatoriosFiltrados, setRelatorios] = useState([])
   const [PacientesComRelatorios, setPacientesComRelatorios] = useState([])
+  const [showModal, setShowModal] = useState(false)
+  const [index, setIndex] = useState()
 
   useEffect( () => {
-    let pacientesDosRelatorios =[]
+    let pacientesDosRelatorios = []
-    
   
     const ListarPacientes = async () => {
       for (let i = 0; i < RelatoriosFiltrados.length; i++) {
@@ -50,10 +54,78 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?patient_id&statu
    .catch(error => console.log('error', error));
   }, [])
 
+   const BaixarPDFdoRelatorio = (nome_paciente) => {
+        const elemento = document.getElementById("folhaA4"); // tua div do relatório
+    const opt = {
+    margin: 0,
+    filename: `relatorio_${nome_paciente || "paciente"}.pdf`,
+    html2canvas: { scale: 2 },
+    jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
+  };
 
+  html2pdf().set(opt).from(elemento).save();
+    }
 
     return (
     <div>
+      {showModal && (
+         <div className="modal" >
+            <div className="modal-dialog modal-tabela-relatorio">
+              <div className="modal-content">
+                <div className="modal-header text-white">
+                  <h5 className="modal-title ">Relatório de {PacientesComRelatorios[index]?.full_name} </h5>
+                  <button 
+                    type="button" 
+                    className="btn-close" 
+                    onClick={() => setShowModal(false)}
+                  ></button>
+                </div>
+                <div className="modal-body">
+                  <div id="folhaA4">
+
+                      <div id='header-relatorio'>
+                          <p>Clinica Rise up</p>
+                          <p>Dr  - CRM/SP 123456</p>
+                          <p>Avenida - (79) 9 4444-4444</p>
+                      </div>
+
+                      <div id='infoPaciente'>
+                          <p>Paciente: {PacientesComRelatorios[index]?.full_name}</p>
+                          <p>Data de nascimento: {PacientesComRelatorios[index]?.birth_date} </p>
+
+                          <p>Data do exame: {}</p>
+
+                          <p>Exame: {RelatoriosFiltrados[index]?.exam}</p>
+
+                          <p>Diagnostico: {RelatoriosFiltrados[index]?.diagnosis}</p>
+                          <p>Conclusão: {RelatoriosFiltrados[index]?.conclusion}</p>
+                      </div>
+
+                      <div>
+                          <p>Dr {RelatoriosFiltrados[index]?.required_by}</p>
+                          <p>Emitido em: 0</p>
+                      </div>
+
+                  </div>
+                </div>
+                <div className="modal-footer">
+
+                  <button className="btn btn-primary" onClick={() => BaixarPDFdoRelatorio(PacientesComRelatorios[index]?.full_name)}><i className='bi bi-file-pdf-fill'></i> baixar em pdf</button>                  
+
+                  <button 
+                    type="button" 
+                    className="btn btn-primary" 
+                    onClick={() => {setShowModal(false)}}
+                  >
+                    Fechar
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+      )}
+
+
       <div className="page-heading">
         <h3>Lista de Relatórios</h3>
       </div>
@@ -103,39 +175,59 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?patient_id&statu
                   <table className="table table-striped table-hover">
                     <thead>
                       <tr>
-                        <th></th>
+                        
                         <th>Paciente</th>
                         <th>CPF</th>
 
                         <th>Exame</th>
+                       
                         <th></th>
-                        <th>Ações</th>
                       </tr>
                     </thead>
                     <tbody>
                       {RelatoriosFiltrados.length > 0 ? (
                         RelatoriosFiltrados.map((relatorio, index) => (
                           <tr key={relatorio.id}>
-                            <td>{relatorio.order_number}</td>
+                            
                             <td className='infos-paciente'>{PacientesComRelatorios[index]?.full_name}</td>
                             <td className='infos-paciente'>{PacientesComRelatorios[index]?.cpf}</td>
                             <td>{relatorio.exam}</td>
-                            <td>{relatorio.create_at}</td>
+                           
                             
                             <td>
-                              <div class="btn-group mb-1">
+                              <div className="d-flex gap-2">
-                                <div class="dropdown">
+                                
+                                  <button
+                                    className="btn btn-sm"
+                                    style={{
+                                      backgroundColor: "#E6F2FF",
+                                      color: "#004085",
+                                    }}
+                                    onClick={() => {
+                                      setShowModal(true); setIndex(index)
+                                    }}
+                                  >
+                                    <i className="bi bi-eye me-1"></i> Ver Detalhes
+                                  </button>
+                                
+
+                                
+                                  <button
+                                    className="btn btn-sm"
+                                    style={{
+                                      backgroundColor: "#FFF3CD",
+                                      color: "#856404",
+                                    }}
+                                    onClick={() => {
+                                      
+                                      navigate(`/medico/relatorios/${relatorio.id}/edit`)
+                                    }}
+                                  >
+                                    <i className="bi bi-pencil me-1"></i> Editar
+                                  </button>
                               
-                                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                                    <button class="btn btn-primary dropdown-toggle me-1" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                      Ações
-                                    </button>
-                                    <a class="dropdown-item" href="#">Visualizar</a>
-                                    <a class="dropdown-item" href="#">Editar</a>
-                                    <a class="dropdown-item" href="#">Excluir</a>
-                                  </div>
                                 </div>
-                              </div>
+                           
                             </td>
                         
                           </tr>

src/PagesMedico/EditPageRelatorio.jsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react'
+import FormRelatorio from '../components/FormRelatorio'
+import { useParams } from 'react-router-dom'
+import API_KEY from '../components/utils/apiKeys'
+import { useAuth } from '../components/utils/AuthProvider'
+const EditPageRelatorio = () => {
+  const params = useParams()
+  const {getAuthorizationHeader} = useAuth()
+  let authHeader = getAuthorizationHeader()
+  const [DictInfo, setDictInfo] = useState({}) 
+
+  let RelatorioID = params.id
+
+  const handleSave = (RelatorioInfos) => {
+     var myHeaders = new Headers();
+    myHeaders.append("apikey", API_KEY);
+    myHeaders.append("Authorization", authHeader);
+    myHeaders.append("Content-Type", "application/json");
+
+    const raw = JSON.stringify({...RelatorioInfos, order_number:'REL-2025-4386'})
+
+    console.log(RelatorioInfos)
+
+  var requestOptions = {
+   method: 'PATCH',
+   headers: myHeaders,
+   body: raw,
+   redirect: 'follow'
+   
+};
+
+    fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?id=eq.${RelatorioID}`, requestOptions)
+      .then(response => response.text())
+      .then(result => console.log(result))
+      .catch(error => console.log('error', error));
+
+  }
+
+  useEffect(() => {
+    var myHeaders = new Headers();
+    myHeaders.append("apikey", API_KEY);
+    myHeaders.append("Authorization", authHeader);
+
+    var requestOptions = {
+      method: 'GET',
+      headers: myHeaders,
+      redirect: 'follow'
+    };
+
+    fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?id=eq.${RelatorioID}`, requestOptions)
+      .then(response => response.json())
+      .then(result => setDictInfo(result[0]))
+      .catch(error => console.log('error', error));
+    }, [])
+
+  console.log(RelatorioID)
+
+  return (
+    <div>
+      <FormRelatorio DictInfo={DictInfo} setDictInfo={setDictInfo} onSave={handleSave}/>
+    </div>
+  )
+}
+
+export default EditPageRelatorio

src/PagesMedico/FormNovoRelatorio.jsx

@@ -1,72 +1,24 @@
-import React from 'react'
+
 import '../PagesMedico/styleMedico/FormNovoRelatorio.css'
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useAuth } from '../components/utils/AuthProvider'
-import { GetPatientByCPF } from '../components/utils/Functions-Endpoints/Patient'
-import { FormatCPF } from '../components/utils/Formatar/Format'
 import API_KEY from '../components/utils/apiKeys'
-import html2pdf from "html2pdf.js";
+import FormRelatorio from '../components/FormRelatorio'
-
+import { useState } from 'react'
-
+import { useAuth } from '../components/utils/AuthProvider'
 const FormNovoRelatorio = () => {
-    const {getAuthorizationHeader} = useAuth()
+  const [DictInfo, setDictInfo] = useState({})
-    let authHeader = getAuthorizationHeader()
-  const navigate= useNavigate()
-    const [DictInfo, setDictInfo] = useState({})
-    const [showModal, setShowModal] = useState(false)
 
-    const handleChange = (e) => {
+  const {getAuthorizationHeader} = useAuth()
-        const { name, value } = e.target;
+  let authHeader = getAuthorizationHeader()
-        console.log(name, value)
 
+  const handleSave = (data) => {
+    console.log("Relatório salvo:", data);
    
-        if(name === 'paciente_cpf') {
+    var myHeaders = new Headers();
-          const formattedCPF = FormatCPF(value);
-          setDictInfo((prev) => ({ ...prev, [name]: formattedCPF }));
-
-          const fetchPatient = async () => {
-            const patientData = await GetPatientByCPF(formattedCPF, authHeader);
-            if (patientData) {
-              setDictInfo((prev) => ({
-                ...prev,
-                paciente_cpf:value,
-                paciente_nome: patientData.full_name,
-                paciente_id: patientData.id
-              }));
-            }
-           
-          };
-          if(formattedCPF.length === 14){
-          fetchPatient();
-          }
-        }else{
-          setDictInfo((prev) => ({ ...prev, [name]: value }));
-        }
-    }
-
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        console.log(DictInfo)
-        setShowModal(true)
-
-        var myHeaders = new Headers();
 myHeaders.append("apikey", API_KEY);
 myHeaders.append("Authorization", authHeader);
 myHeaders.append("Content-Type", "application/json");
 
-var raw = JSON.stringify({
+var raw = JSON.stringify({...data});
-   "patient_id": DictInfo.paciente_id,
-   
-   "exam": DictInfo.exam,
-   "diagnosis": DictInfo.diagnosis,
-   "conclusion": DictInfo.conclusao,
-   "status": "draft",
-   "requested_by": DictInfo.requested_by,
-   
-   "hide_date": false,
-   "hide_signature": false,
-});
 
 var requestOptions = {
    method: 'POST',
@@ -79,130 +31,14 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports", requestOptions
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));
-    }
+  }
-
-  return (
-    <div>
-       {showModal &&(
-          <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
-            <div className="modal-dialog">
-              <div className="modal-content">
-                <div className="modal-header bg-success text-white">
-                  <h5 className="modal-title ">Relatório criado com sucesso</h5>
-                  <button 
-                    type="button" 
-                    className="btn-close" 
-                    onClick={() => setShowModal(false)}
-                  ></button>
-                </div>
-                <div className="modal-body">
-                  <p>Você também pode baixa-lo agora em pdf</p>
-                </div>
-                <div className="modal-footer">
-                  <button className="btn btn-primary"><i className='bi bi-file-pdf-fill'></i> baixar em pdf</button>
-
-                  <button 
-                    type="button" 
-                    className="btn btn-primary" 
-                    onClick={() => {setShowModal(false); navigate(('/medico/relatorios'))}}
-                  >
-                    Fechar
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-        <h3>Criar novo relatório</h3>
-
-    <div className='card'>
-
-        <form action="" onSubmit={handleSubmit}>
-            <div id='primeiraLinha'>
-
-                <div className="col-md-2 mb-3">
-                    <label >Nome do paciente:</label>
-                    <input type="text" step="0.1" className="form-control" name="paciente_nome" onChange={handleChange} value={DictInfo.paciente_nome || ''}  required />
-                </div>
-
-            <div className="col-md-2 mb-3">
-                <label >CPF do paciente:</label>
-                <input type="text" step="0.1" className="form-control" name="paciente_cpf" onChange={handleChange} value={DictInfo.paciente_cpf || ''}  required />
-                </div>
-          
-            
-            <div className="col-md-2 mb-3">
-                <label >Nome do médico:</label>
-                <input type="text" step="0.1" className="form-control" name="requested_by" onChange={handleChange} value={DictInfo.requested_by || ''}   required />
-            </div>
-            
-            <div className="col-md-2 mb-3">
-              <label >Exame:</label>
-              <input type="text" className="form-control" name="exam" onChange={handleChange}   />
-            </div>
-
-            
-            <div className="col-md-2 mb-3">
-              <label >Data do exame:</label>
-              <input type="date" className="form-control" name="data_exame" onChange={handleChange} value={DictInfo.data_exame || ''}   />
-            </div>
 
+    return (
+        <div>
+          <h3>Criar Novo Relatorio</h3>
+            <FormRelatorio  DictInfo={DictInfo} setDictInfo={setDictInfo} onSave={handleSave} />
         </div>
-
+    )
-        <div className='row'>
-            <div className="col-md-2 mb-3">
-              <label htmlFor='diagnostico'>Diagnostico:</label>
-              <textarea name="diagnostico" id="diagnostico" onChange={handleChange} cols="30" rows="5" value={DictInfo.diagnostico || ''}></textarea>
-            </div>
-
-            <div className="col-md-2 mb-3">
-              <label htmlFor='conclusao'>Conclusão:</label>
-             <textarea name="conclusao" id="conclusao" onChange={handleChange} cols="30" rows="5" value={DictInfo.conclusao || ''}></textarea>
-             </div>
-        </div>
-
-         <button
-            className="btn btn-success  submitButton"
-            type='submit'
-          >
-            Salvar
-          </button>
-                
-    </form>    
-    </div>
-
-    <h3>Modelo do relatório</h3>
-  <div id="folhaA4">
-
-    <div id='header-relatorio'>
-        <p>Clinica Rise up</p>
-        <p>Dr {DictInfo.requested_by} - CRM/SP 123456</p>
-        <p>Avenida - (79) 9 4444-4444</p>
-    </div>
-
-    <div id='infoPaciente'>
-        <p>Paciente: {DictInfo?.paciente_nome}</p>
-        <p>Data de nascimento: </p>
-
-        <p>Data do exame: {DictInfo.data_exame}</p>
-
-        <p>Exame: {DictInfo.exame}</p>
-
-        <p>Diagnostico: {DictInfo.diagnostico}</p>
-
-        <p>Conclusão: {DictInfo.conclusao}</p>
-     
-    </div>
-
-    <div>
-        <p>Dr {DictInfo.requested_by}</p>
-        <p>Emitido em: 0</p>
-    </div>
-
-  </div>
-  
-  </div>
-  )
 }
 
 export default FormNovoRelatorio

src/PagesMedico/styleMedico/geral.css

@@ -187,3 +187,25 @@ td {
   padding: 12px;
   border-bottom: 1px solid var(--cor-borda);
 }
+
+.modal-tabela-relatorio{
+  width: 70rem;
+}
+
+.modal-dialog.modal-tabela-relatorio {
+  max-width: 900px; /* largura máxima da modal */
+  width: 100%; /* ocupa até o limite */
+  margin: 1.75rem auto; /* centraliza vertical e horizontalmente */
+}
+
+.modal-content {
+  height: auto; /* altura variável conforme o conteúdo */
+  max-height: none; /* remove limite interno */
+}
+
+.modal-body {
+  max-height: 70vh; /* limite vertical — 80% da altura da tela */
+  overflow-y: auto; /* ativa rolagem vertical */
+  overflow-x: hidden; /* impede rolagem horizontal */
+  padding: 20px; /* espaço interno mais agradável */
+}

src/components/FormRelatorio.jsx

@@ -0,0 +1,201 @@
+import React from 'react'
+import '../PagesMedico/styleMedico/FormNovoRelatorio.css'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../components/utils/AuthProvider'
+import { GetPatientByCPF } from '../components/utils/Functions-Endpoints/Patient'
+import { FormatCPF } from '../components/utils/Formatar/Format'
+import html2pdf from 'html2pdf.js'
+
+const FormRelatorio = ({onSave, DictInfo, setDictInfo }) => {
+    const {getAuthorizationHeader} = useAuth()
+    let authHeader = getAuthorizationHeader()
+  const navigate= useNavigate()
+    
+    const [showModal, setShowModal] = useState(false)
+
+    const BaixarPDFdoRelatorio = () => {
+        const elemento = document.getElementById("folhaA4"); // tua div do relatório
+    const opt = {
+    margin: 0,
+    filename: `relatorio_${DictInfo?.paciente_nome || "paciente"}.pdf`,
+    html2canvas: { scale: 2 },
+    jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
+  };
+
+  html2pdf().set(opt).from(elemento).save();
+    }
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        console.log(name, value)
+        if(name === 'paciente_cpf') {
+          const formattedCPF = FormatCPF(value);
+          setDictInfo((prev) => ({ ...prev, [name]: formattedCPF }));
+
+          const fetchPatient = async () => {
+            const patientData = await GetPatientByCPF(formattedCPF, authHeader);
+            if (patientData) {
+              setDictInfo((prev) => ({
+                ...prev,
+                paciente_cpf:value,
+                paciente_nome: patientData.full_name,
+                paciente_id: patientData.id
+              }));
+            }
+           
+          };
+          if(formattedCPF.length === 14){
+          fetchPatient();
+          }
+        }else{
+          setDictInfo((prev) => ({ ...prev, [name]: value }));
+        }
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        console.log(DictInfo)
+        setShowModal(true)
+       
+
+onSave({
+   "patient_id": DictInfo.paciente_id,
+   
+   "exam": DictInfo.exam,
+   "diagnosis": DictInfo.diagnosis,
+   "conclusion": DictInfo.conclusao,
+   "status": "draft",
+   "requested_by": DictInfo.requested_by,
+   
+   "hide_date": false,
+   "hide_signature": false,
+});
+
+    }
+
+  return (
+    <div>
+       {showModal &&(
+          <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
+            <div className="modal-dialog">
+              <div className="modal-content">
+                <div className="modal-header bg-success text-white">
+                  <h5 className="modal-title ">Relatório criado com sucesso</h5>
+                  <button 
+                    type="button" 
+                    className="btn-close" 
+                    onClick={() => setShowModal(false)}
+                  ></button>
+                </div>
+                <div className="modal-body">
+                  <p>Você também pode baixa-lo agora em pdf</p>
+                </div>
+                <div className="modal-footer">
+                  <button className="btn btn-primary" onClick={ BaixarPDFdoRelatorio}><i className='bi bi-file-pdf-fill'></i> baixar em pdf</button>
+
+                  <button 
+                    type="button" 
+                    className="btn btn-primary" 
+                    onClick={() => {setShowModal(false); navigate(('/medico/relatorios'))}}
+                  >
+                    Fechar
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        
+
+    <div className='card'>
+
+        <form action="" onSubmit={handleSubmit}>
+            <div id='primeiraLinha'>
+
+                <div className="col-md-2 mb-3">
+                    <label >Nome do paciente:</label>
+                    <input type="text" step="0.1" className="form-control" name="paciente_nome" onChange={handleChange} value={DictInfo.paciente_nome || ''}  required />
+                </div>
+
+            <div className="col-md-2 mb-3">
+                <label >CPF do paciente:</label>
+                <input type="text" step="0.1" className="form-control" name="paciente_cpf" onChange={handleChange} value={DictInfo.paciente_cpf || ''}  required />
+                </div>
+          
+            
+            <div className="col-md-2 mb-3">
+                <label >Nome do médico:</label>
+                <input type="text" step="0.1" className="form-control" name="requested_by" onChange={handleChange} value={DictInfo.requested_by || ''}   required />
+            </div>
+            
+            <div className="col-md-2 mb-3">
+              <label >Exame:</label>
+              <input type="text" className="form-control" name="exam" onChange={handleChange}   />
+            </div>
+
+            
+            <div className="col-md-2 mb-3">
+              <label >Data do exame:</label>
+              <input type="date" className="form-control" name="data_exame" onChange={handleChange} value={DictInfo.data_exame || ''}   />
+            </div>
+           
+        </div>
+
+        <div className='row'>
+            <div className="col-md-2 mb-3">
+              <label htmlFor='diagnostico'>Diagnostico:</label>
+              <textarea name="diagnostico" id="diagnostico" onChange={handleChange} cols="30" rows="5" value={DictInfo.diagnostico || ''}></textarea>
+            </div>
+
+            <div className="col-md-2 mb-3">
+              <label htmlFor='conclusao'>Conclusão:</label>
+             <textarea name="conclusao" id="conclusao" onChange={handleChange} cols="30" rows="5" value={DictInfo.conclusao || ''}></textarea>
+             </div>
+        </div>
+
+         <button
+            className="btn btn-success  submitButton"
+            type='submit'
+          >
+            Salvar
+          </button>
+                
+    </form>    
+    </div>
+
+    <h3>Modelo do relatório</h3>
+  <div id="folhaA4">
+
+    <div id='header-relatorio'>
+        <p>Clinica Rise up</p>
+        <p>Dr {DictInfo.requested_by} - CRM/SP 123456</p>
+        <p>Avenida - (79) 9 4444-4444</p>
+    </div>
+
+    <div id='infoPaciente'>
+        <p>Paciente: {DictInfo?.paciente_nome}</p>
+        <p>Data de nascimento: </p>
+
+        <p>Data do exame: {DictInfo.data_exam}</p>
+
+        <p>Exame: {DictInfo.exam}</p>
+
+        <p>Diagnostico: {DictInfo.diagnostico}</p>
+
+        <p>Conclusão: {DictInfo.conclusao}</p>
+     
+    </div>
+
+    <div>
+        <p>Dr {DictInfo.requested_by}</p>
+        <p>Emitido em: 0</p>
+    </div>
+
+  </div>
+  
+  </div>
+  )
+}
+
+export default FormRelatorio

src/perfis/Perfil_medico/PerfilMedico.jsx

@@ -8,6 +8,7 @@ import Agendamento from "../../PagesMedico/Agendamento";
 import Chat from "../../PagesMedico/Chat";
 import DoctorItems from "../../data/sidebar-items-medico.json";
 import FormNovoRelatorio from "../../PagesMedico/FormNovoRelatorio";
+import EditPageRelatorio from "../../PagesMedico/EditPageRelatorio";
 // ...existing code...
 
 function PerfilMedico() {
@@ -19,6 +20,7 @@ function PerfilMedico() {
           <Routes>
             <Route path="/" element={<DoctorRelatorioManager />} />
             <Route path="/relatorios/criar" element={<FormNovoRelatorio />} />
+            <Route path="/relatorios/:id/edit" element={<EditPageRelatorio />} />
             <Route path="/prontuario" element={<Prontuario />} />
             <Route path="/relatorios" element={<DoctorRelatorioManager />} />
             <Route path="/agendamentoMedico" element={<Agendamento />} />