table mok style fix

src/App.css

@@ -388,7 +388,11 @@
 .table_list_test_user{
   border :none !important;
 }
-
+.pwd_user_name{
+  border-bottom:none!important;
+  border-right :1px solid #f1f1f1 !important;
+  /* background:red; */
+}
 .home_letter{
   font-family: 'gudea' !important;
   color: #878787 !important;

src/Components/Home/Candidato.jsx

@@ -3,8 +3,16 @@ import {
   Skeleton, Box, IconButton, TableCell, TableContainer,
   Table, TableRow, Paper, TableBody
 } from '@mui/material';
+
+import { Col, Row } from 'react-bootstrap'
+
 import React from 'react'
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
+
+import {
+  CheckBox as CheckBoxIcon,
+  FmdBad as FmdBadIcon,
+  NewReleases as NewReleasesIcon
+} from '@mui/icons-material'
 
 
 const big_as = 70
@@ -27,15 +35,25 @@ function Asignaciones(props) {
 function TableUser(props) {
   let { user } = props;
   let { asignaciones, candi } = user
-  // console.log(asignaciones)
+
+  if (asignaciones.lenght <= 0) {
+    return <h1>Sin datos</h1>
+  }
+
   return (
-    <TableRow style={{}}>
-      <TableCell className="table_list_test_user home_letter">{candi.nombre + " " + candi.apellidos}</TableCell>
+    <TableRow >
+      <TableCell
+        style={{ borderRight: '1px solid #f1f1f1 !important' }}
+        className="home_letter pwd_user_name ">
+        {candi.nombre + " " + candi.apellidos}
+      </TableCell>
       <TableCell className="table_list_test_user home_letter">
         <table>
           <tbody >
             {
-              asignaciones.map(a => <Asignaciones key={a.id} asign={a} />)
+              asignaciones?.length > 0 ?
+                asignaciones.map(a => <Asignaciones key={a.id} asign={a} />)
+                : <SinAsignaciones />
             }
           </tbody>
         </table>
@@ -44,39 +62,52 @@ function TableUser(props) {
   )
 }
 
+function SinAsignaciones() {
+  return (
+    <tr style={{ padding: 5 }}>
+      <center className="home_letter">
+        <i> El candidato aun no cuenta con asignaciones... </i>
+        <FmdBadIcon style={{ color: 'var(--main)' }} />
+      </center>
+    </tr>
+  )
+}
+
 export function Candidato(props) {
-  // console.log("USER: ", props.user)
   let { password, candidatos } = props.user
 
   return (
     <div className="data_candidato">
-      <div className="row">
-        <div style={{padding:15, borderRight: '1px solid #f1f1f1' }} className="col-3" >
+      <Row>
+        <Col md="3" sm="12" style={{ padding: 10, borderRight: '1px solid #f1f1f1' }}>
           <p><b>{password?.toUpperCase()}</b></p>
-        </div>
-        <div className="col-9">
-
+        </Col>
+        <Col md="9">
           <TableContainer style={{ boxShadow: "none" }} component={Paper}>
             <Table size="small" aria-label="a dense table">
-              {/*
-              <TableHead>
-                <TableRow>
-                  <TableCell className="tg-0lax">Nombre</TableCell>
-                  <TableCell className="tg-0lax">Asignaciones</TableCell>
-                </TableRow>
-              </TableHead>
-                  */}
               <TableBody>
                 {
-                  candidatos.map(u => <TableUser key={u.candi.id} user={u} />)
+                  candidatos.length > 0 ?
+                    candidatos.map(u => <TableUser key={u.candi.id} user={u} />)
+                    : <SinAsignRealizadas />
+
                 }
               </TableBody>
             </Table>
-
           </TableContainer>
+        </Col>
+      </Row>
+    </div>
+  )
+}
 
-        </div>
-      </div>
+function SinAsignRealizadas() {
+  return (
+    <div style={{ padding: 5 }}>
+      <center className="home_letter">
+        <i> No se ha relizado ninguna asignacion... </i>
+        <NewReleasesIcon style={{ color: '#e8eb34' }} />
+      </center>
     </div>
   )
 }

src/Components/Home/Candidatos.js

@@ -6,7 +6,7 @@ import { Candidato, Preview } from './Candidato'
 
 function Divide(arregloOriginal) {
 
-  const LONGITUD_PEDAZOS = 4;
+  const LONGITUD_PEDAZOS = 7;
   let arregloDeArreglos = [];
   for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
     let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
@@ -40,46 +40,15 @@ export default function Candidatos(props) {
 
     let list = passwords.map(pwd => {
       let { candidatospwds } = pwd
-      // console.log(candidatospwds)
-      // let candi_info = candidatospwds.map( ({candi}) => candi?.nombre +" "+ candi?.apellidos   )
       return {
         password: fromBase64(pwd.pwd),
         candidatos: candidatospwds
       }
     })
 
-    /*
-    let list = [{
-      password: 'tester',
-      puesto: "Piloto Repartidor",
-      DPI: 0,
-      // aplicacion : "27/12/2018 12:02 PM",
-      aplicacion: new Date().toUTCString(),
-      pendientes: "No"
-    }]
-
-    let a = 1;
-    for (let _ of new Array(USER_LENGTH)) {
-      if (_) break
-
-      let temp = {
-        ...list[0],
-        DPI: a * 1000,
-        password: Math.random().toString(36).slice(5),
-        aplicacion: new Date(10, 12, a).toUTCString(),
-      }
-
-      a = a + 1;
-      list.push(temp)
-    }
-
-*/
-
     let divided = Divide(list);
-
     setUser(divided)
 
-
   }, [passwords])
 
   return (
@@ -100,12 +69,12 @@ export default function Candidatos(props) {
         </div>
         {
           users.length
-            ? users[page - 1].map((user,i) => (<Candidato key={i} user={user} />))
+            ? users[page - 1].map((user, i) => (<Candidato key={i} user={user} />))
             : <Preview style={{ paddingTop: 10 }} lenght={10} />
         }
         <Row style={{ padding: 5 }}>
           <Col>
-            <Stack style={{ display: 'flex', flexDirection: 'row', alignItems: 'baseline' }} spacing={2}>
+            <Stack style={{ display: 'flex', flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-evenly' }} spacing={2}>
               <Typography style={{ paddingTop: 15, paddingRight: 10 }}>Página: {page}</Typography>
               <Pagination
                 siblingCount={1}

src/Css/all.css

@@ -1807,6 +1807,7 @@ li.cabecera_li {
     color: #25344f;
 }
 .data_candidato {
+  padding:2px;
   border-bottom: 1px solid #f1f1f1;
 }
 .data_candidato a:hover {

src/Pages/Home.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-
 import { Col, Row } from 'react-bootstrap'
 import { PersonOutline, VerifiedUser, ListAlt } from '@mui/icons-material/'
 import Actividades from '../Components/Home/Actividades'
@@ -12,7 +11,7 @@ import { useQuery } from 'react-query';
 export function Home() {
 
   const auth = useSelector((state) => state.token)
-  const profile = useSelector((state) => state.user.profile)
+  // const profile = useSelector((state) => state.user.profile)
 
   const getAllPwd = async () => {
     let rest = new Service('/contrasenia/getallbyidUsr');
@@ -20,24 +19,13 @@ export function Home() {
   }
 
   const { data, status } = useQuery('homepwd', getAllPwd);
-
   let is_loading = status === "loading";
-  console.log({is_loading, data})
-
-  //TODO:
-  //utilizar el servicio 
-  //http://psicoadmin.ditca.org:8081/plaza/getthis/212
-  //para renderizar informacion de cada pwd en la home
+  console.log({is_loading})
 
   return (
     <section >
       <div className="content-section">
         <div className="main">
-
-          <div id="start_title">
-            <h1>Bienvenido de nuevo {profile.nombre}</h1>
-          </div>
-
           <div className="panel_options">
             <Row>
               <Col md="4">