grid mode bug fix

src/Components/Puestos/GridMode.jsx

@@ -11,71 +11,72 @@ import { Row, Col } from 'react-bootstrap'
 
 export function GridMode(props){
 
-    let { setEdit, setDelete, setShow, setPuesto,data } = props;
+    let { setEdit, setDelete, setShow, setPuesto, data } = props;
 
     return(
         <React.Fragment> 
             {
                 data.length ? 
-                data.slice(23).map( plaza => {
-                    return(
-                        <Col key={plaza.id} lg="4" md="6" sm="6" xs="12" >
-                            <div className="panel">
-                                <Row>
-                                    <Col md="4">
-                                        <div className="img-container">
-                                            <img alt="not found" src={NotFound}/>
-                                        </div>
-                                    </Col>
-                                    <Col md="8">
-                                        <div className="info_details">
-                                            <p>{ plaza.nombre }</p>
-                                            <p>{ plaza.description }</p>
-                                            <p>{ plaza.salario }</p>
-                                        </div>
-                                        <div className="btn_interactivos">
-
-                                            <div className="botones_interactivos">
-                                                <span 
-                                                    onClick={ () => {
-                                                        setPuesto(plaza)
-                                                        setShow(true)
-                                                    }} 
-                                                    tooltip-location="top" 
-                                                    tooltip="Ver plaza">
-                                                    <RemoveRedEyeIcon className="grid_btn"/>
-                                                </span>
-                                            </div>
-                                            <div className="botones_interactivos">
-                                                <span 
-                                                    onClick={() => {
-                                                        setPuesto(plaza)
-                                                        setEdit(true)
-                                                    }} 
-                                                    tooltip-location="top" 
-                                                    tooltip="Editar plaza">
-                                                    <EditIcon className="grid_btn"/>
-                                                </span>
+                    data.map( plaza => {
+                        console.log('plaza', plaza)
+                        return(
+                            <Col key={plaza.id} lg="4" md="6" sm="6" xs="12" >
+                                <div className="panel">
+                                    <Row>
+                                        <Col md="4">
+                                            <div className="img-container">
+                                                <img alt="not found" src={NotFound}/>
                                             </div>
-                                            <div className="botones_interactivos">
-                                                <span 
-                                                    onClick={() => {
-                                                        setPuesto(plaza)
-                                                        setDelete(true)
-                                                    }} 
-                                                    tooltip-location="top" 
-                                                    tooltip="Eliminar plaza">
-                                                    <HighlightOffIcon className="grid_btn"/>
-                                                </span>
+                                        </Col>
+                                        <Col md="8">
+                                            <div className="info_details">
+                                                <p>{ plaza.nombre }</p>
+                                                <p>{ plaza.description }</p>
+                                                <p>{'100'}</p>
                                             </div>
+                                            <div className="btn_interactivos">
 
-                                        </div>
-                                    </Col>
-                                </Row>
-                            </div>
-                        </Col>
-                    )
-                }) : undefined
+                                                <div className="botones_interactivos">
+                                                    <span 
+                                                        onClick={ () => {
+                                                            setPuesto(plaza)
+                                                            setShow(true)
+                                                        }} 
+                                                        tooltip-location="top" 
+                                                        tooltip="Ver plaza">
+                                                        <RemoveRedEyeIcon className="grid_btn"/>
+                                                    </span>
+                                                </div>
+                                                <div className="botones_interactivos">
+                                                    <span 
+                                                        onClick={() => {
+                                                            setPuesto(plaza)
+                                                            setEdit(true)
+                                                        }} 
+                                                        tooltip-location="top" 
+                                                        tooltip="Editar plaza">
+                                                        <EditIcon className="grid_btn"/>
+                                                    </span>
+                                                </div>
+                                                <div className="botones_interactivos">
+                                                    <span 
+                                                        onClick={() => {
+                                                            setPuesto(plaza)
+                                                            setDelete(true)
+                                                        }} 
+                                                        tooltip-location="top" 
+                                                        tooltip="Eliminar plaza">
+                                                        <HighlightOffIcon className="grid_btn"/>
+                                                    </span>
+                                                </div>
+
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                </div>
+                            </Col>
+                        )
+                    }) : <h1>no hay data</h1>
             }
         </React.Fragment>
     )

src/Components/Puestos/ListMode.jsx

@@ -2,6 +2,7 @@ import {  Col, Button, Table } from 'react-bootstrap'
 
 export function ListMode(props) {
     
+    const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
     let { setEdit, setDelete, setShow, setPuesto, data } = props;
 
     return(
@@ -20,12 +21,12 @@ export function ListMode(props) {
 
                         {
                             data.length ? 
-                                data.slice( 0,23 ).map( (plaza, i) => {
+                                data.slice( 0,23 ).map( (plaza) => {
                                     return (
                                         <tr key={plaza.id}>
                                             <td className="text-center">{ plaza.nombre }</td>
                                             <td className="text-center">{ plaza.description }</td>
-                                            <td className="text-center">{ plaza.created }</td>
+                                            <td className="text-center">{ new Date( plaza.created ).toLocaleDateString('es-GT',opciones) }</td>
                                             <td className="actions_butons_plaza"> 
                                                 <Button 
                                                     onClick={() => {

src/Pages/Puestos.jsx

@@ -2,16 +2,9 @@ import React, { useState, useEffect }  from 'react';
 import { Row, Col } from 'react-bootstrap'
 import toast, { Toaster } from 'react-hot-toast';
 
-import {
-    ToggleButton,
-    ToggleButtonGroup,
-    Box, Paper
-} from '@mui/material';
+import { ToggleButton, ToggleButtonGroup, Box, Paper } from '@mui/material';
 
-import {
-    ViewList as ViewListIcon,
-    ViewModule as ViewModuleIcon,
-} from '@mui/icons-material';
+import { ViewList as ViewListIcon, ViewModule as ViewModuleIcon, } from '@mui/icons-material';
 
 import { default as useAuth } from '../Auth/useAuth';
 import { Service } from '../Utils/HTTP';
@@ -60,7 +53,10 @@ export function Puestos() {
 
     const [alignment, setAlignment] = React.useState('list');
 
-    const handleChange = (_event, newAlignment) => setAlignment(newAlignment);
+    const handleChange = (_event, newAlignment) => {
+        console.log("new alignment :: ", newAlignment );
+        setAlignment(newAlignment)
+    } ;
 
     const children = [
         <ToggleButton value="list" key="list">