show rate

src/Components/Home/Candidato.jsx

-import '../../App.css'
+import React from 'react'
 import {
   Skeleton, Box, IconButton, TableCell, TableContainer,
-  Table, TableRow, Paper, TableBody
+  Table, TableRow, Paper, TableBody,
+  Tooltip,
 } from '@mui/material';
-
-import { Col, Row } from 'react-bootstrap'
-
-import React from 'react'
-
 import {
   CheckBox as CheckBoxIcon,
   FmdBad as FmdBadIcon,
   NewReleases as NewReleasesIcon
 } from '@mui/icons-material'
+import { useNavigate } from 'react-router-dom'
+
+import { Col, Row } from 'react-bootstrap'
 
 
 const big_as = 70
 
 function Asignaciones(props) {
-  let { asign } = props;
-  let { cattest } = asign;
+  let navigate = useNavigate()
+  console.log(props)
+  let { cattest, calificacionescleaver: test_result, id: SuperPWD } = props.asign;
+
   return (
     <tr>
       <td>
         {cattest.decription}
-        <IconButton color="primary" aria-label="puesto_status" components="label">
-          <CheckBoxIcon />
-        </IconButton>
+        {
+          test_result.length > 0 ?
+            (
+              <Tooltip title="Mostrar resultados">
+                <IconButton 
+                  onClick={() => navigate('/dashboard/resultados/' +SuperPWD)}
+                  style={{ color: '#0bd641' }}
+                  aria-label="puesto_status"
+                  components="label">
+                  <CheckBoxIcon />
+                </IconButton>
+              </Tooltip>
+            ) : null
+        }
       </td>
     </tr>
   )
   let { user } = props;
   let { asignaciones, candi } = user
 
-  if (asignaciones.lenght <= 0) {
-    return <h1>Sin datos</h1>
-  }
-
   return (
     <TableRow >
       <TableCell
           <tbody >
             {
               asignaciones?.length > 0 ?
-                asignaciones.map(a => <Asignaciones key={a.id} asign={a} />)
-                : <SinAsignaciones />
+              asignaciones.map(a => <Asignaciones key={a.id} asign={a} />)
+              : <SinAsignaciones />
             }
           </tbody>
         </table>
 function SinAsignaciones() {
   return (
     <tr style={{ padding: 5 }}>
-      <center className="home_letter">
+      <td style={{ textAlign: 'center' }} className="home_letter">
         <i> El candidato aun no cuenta con asignaciones... </i>
         <FmdBadIcon style={{ color: 'var(--main)' }} />
-      </center>
+      </td>
     </tr>
   )
 }
 
 function SinAsignRealizadas() {
   return (
-    <div style={{ padding: 5 }}>
-      <center className="home_letter">
+    <tr style={{ padding: 5 }}>
+      <td style={{ textAlign: 'center' }} className="home_letter">
         <i> No se ha relizado ninguna asignacion... </i>
         <NewReleasesIcon style={{ color: '#e8eb34' }} />
-      </center>
-    </div>
+      </td>
+    </tr>
   )
 }
 

src/Components/Routes.js

         <Route path="perfil" element={<Profile />} />
         <Route path="contrasenas" element={<Contras />} />
         <Route path="expedientes" element={<Expedientes />} />
-        <Route path="resultados" element={<Resultados />} />
+        <Route path="resultados/:id" element={<Resultados />} />
         <Route path="configuraciones" element={<Configuracion />} />
         <Route path="historial" element={<Historial />} />
         <Route path="pruebas/listar" element={<Pruebas />} />

src/Pages/Resultados.jsx

+import { useParams } from 'react-router-dom'
 export function Resultados() {
-    return (
-        <div className="content-section">
-            <div className="main">
-                <h1>Resultados</h1>
-            </div>
-        </div>
-    )
+  let { id } = useParams();
+  return (
+    <div className="content-section">
+      <div className="main">
+        <h1>Resultados {id}</h1>
+      </div>
+    </div>
+  )
 }