calificacion cleaver

src/Components/Home/Candidato.jsx

 import {
   Skeleton, Box, IconButton, TableCell, TableContainer,
   Table, TableRow, Paper, TableBody,
-  Tooltip,Button
+  Tooltip, Button
 } from '@mui/material';
 import {
   CheckBox as CheckBoxIcon,
   Error as ErrorIcon,
   AssignmentTurnedIn as AssignmentTurnedInIcon
 } from '@mui/icons-material'
-// import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 import { Col, Row } from 'react-bootstrap'
+import { useSelector } from 'react-redux';
+import { Service } from '../../Utils/HTTP';
 const big_as = 70
 
+
 function IconStatus(props) {
+
+  let navigate = useNavigate()
+  let auth = useSelector((state) => state.token)
+
+  console.log(props)
+  const calificar = () => {
+    console.log('TOKEN: ',auth.token)
+    let rest = new Service(`/prueba/calificacion/cleaver/report/${props.pwd}`);
+
+    rest
+      .getQuery(auth.token)
+      .then(r => {
+        console.log("SUCCESS:", r)
+        navigate('/dashboard/resultados/' + props.pwd)
+      })
+      .catch(e => {
+        console.log("ERROR:", e.message)
+        // navigate('/dashboard/resultados/' + props.pwd)
+      })
+  }
+
+
   return (
     <Tooltip title={props.message}>
       <IconButton
+        onClick={() => {
+          if (parseInt(props.estado) === 100) {
+            calificar()
+            // navigate('/dashboard/resultados/' + props.pwd)
+          }
+        }}
         style={{ color: '#0bd641' }}
         components="label">
         {<props.icon />}
   )
 }
 
-function getOperation(estado) {
+function getOperation(estado, SuperPWD) {
   // Patrik: 100 -> Significa que el examen esta completo
   // Patrik: 99 -> Que el candidato lo esta haciendo (como "doing test" del otro servicio)
   // Patrik: 97 ->  Que hay un error y que hay mas respuestas de las que deberian
     case 99: // el candidato se encuentra realizndolo
       return <IconStatus icon={AssignmentTurnedInIcon} message="El candidato se encuentra realizando la prueba" />
     case 100: // finalizado
-      return <IconStatus icon={CheckBoxIcon} message="Calificar el examen" />
+      return <IconStatus estado={100} icon={CheckBoxIcon} message="Calificar el examen" pwd={SuperPWD} />
     default: return null
   }
 }
 
 function Asignaciones(props) {
 
-  // let navigate = useNavigate()
   let { estado, cattest, calificacionescleaver: test_result, id: SuperPWD } = props.asign;
-  console.log(props,test_result,SuperPWD)
+  console.log(props, test_result, SuperPWD)
 
   return (
     <tr>
             ) : null
       */}
         {
-          getOperation(estado)
+          getOperation(estado, SuperPWD)
         }
       </td>
     </tr>
     <div className="data_candidato">
       <Row>
 
-        <Col className="pwd_info"pwd_name_candi onClick={props.onClick}  md="3" sm="12">
+        <Col className="pwd_info pwd_name_candi" onClick={props.onClick} md="3" sm="12">
           <Button className="btn_pwd" variant="contained">
-            <u><p><b style={{color:'white'}}>{password?.toUpperCase()}</b></p></u>
+            <u><p><b style={{ color: 'white' }}>{password?.toUpperCase()}</b></p></u>
           </Button>
         </Col>
 

src/Components/Routes.js

         <Route path="expedientes" element={<Expedientes />} />
 
         <Route path="resultados" >
-          <Route path="id" element={<Resultados />} />
+          <Route path=":id" element={<Resultados />} />
           <Route path="" element={<Resultados />} />
         </Route>