pre puesto stepper

src/App.css

     place-content:center;
 }
 
-
+#pagi_bottom{
+    width:100%;
+    display:flex;
+    flex-direction:row;
+    align-items:baseline;
+    justify-content:space-between;
+}

src/Components/Puestos/ListMode.jsx

                         <tr >
                             <th className="text-center">Nombre</th>
                             <th className="text-center">Descripción</th>
-                            <th className="text-center">Creacion</th>
+                            <th className="text-center">Creación</th>
                             <th className="text-center">Acción</th>
                         </tr>
                     </thead>
                                     <Zoom key={plaza.id} in={true}>
                                         <tr >
                                             <td className="text-center">{ plaza.nombrepuesto }</td>
-                                            <td className="text-center">{ plaza.notas }</td>
+                                            <td className="text-center">{plaza.notas.length > 50 ? plaza.notas.slice(0,50) + "...." : plaza.notas }</td>
                                             <td className="text-center">{ new Date( plaza.createday ).toLocaleDateString('es-GT',opciones) }</td>
                                             <TableCell
                                                 sx={{
                                                     "display":'flex',
                                                     "flexDirection":'row',
-                                                    "justifyContent": "space-between",
+                                                    "justifyContent": "space-between !important",
                                                     "flexWrap": !isMovil ? "wrap": "nowrap",
                                                 }} 
                                                 className="actions_butons_plaza"> 

src/Css/all.css

     transition: all 0.3s;
 }
 .ver_producto {
-    background: #2ec5d3;
+    background: var(--second);
     border: 1px solid transparent;
     color: #fff;
-    padding: 3px 7px;
-    border-radius: 20px;
+    padding: 4px 13px;
+    border-radius: 10px;
     transition: all 0.3s;
 }
 .ver_producto:hover {
     background: #5893df!important;
     border: 1px solid transparent;
     color: #fff;
-    padding: 3px 7px;
-    border-radius: 20px;
+    padding: 4px 13px;
+    border-radius: 10px;
     transition: all 0.3s;
 }
 .editar_producto:hover {
     background: #ec5e69!important;
     border: 1px solid transparent;
     color: #fff;
-    padding: 3px 7px;
-    border-radius: 20px;
+    padding: 4px 13px;
+    border-radius: 10px;
     transition: all 0.3s;
 }
 .eliminar_producto:hover {

src/Pages/Contras.jsx

 import * as React from 'react';
 
-import { 
+import {
     rows,
     action_icon,
     Comparar,
     Cuerpo,
 } from '../Components/Password/config.js';
 
-import { 
-    Table, TableBody, TableCell, TableContainer, 
+import {
+    Table, TableBody, TableCell, TableContainer,
     TableRow, TablePagination,
     Paper, Box, Switch, FormControlLabel,
     Checkbox,
 
     const SeleccionarTodos = (event) => {
         if (event.target.checked) {
-            const newSelecteds = rows.map( (n) => n.pass);
+            const newSelecteds = rows.map((n) => n.pass);
             setSelected(newSelecteds);
             return;
         }
     return (
         <div className="content-section">
             <div className="main">
-                <Box sx={{ width: '100%' }}>
-                    <Paper sx={{ width: '100%', mb: 2 }}>
-
-                        <TableOperation numSelected={selected.length} />
-
-                        <TableContainer>
-
-                            <Table
-                                sx={{ minWidth: 750 }}
-                                aria-labelledby=""
-                                size={dense ? 'small' : 'medium'} >
-
-                                <TableHead
-                                    numSelected={selected.length}
-                                    order={order}
-                                    orderBy={orderBy}
-                                    onSelectAllClick={SeleccionarTodos}
-                                    onRequestSort={CambiarTipoOrden}
-                                    rowCount={rows.length} />
-
-
-                                <TableBody>
-                                    {Cuerpo(rows, Comparar(order, orderBy))
-                                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                                    .map( (row, index) => {
-
-                                        const isItemSelected = isSelected(row.pass);
-                                        const labelId = `enhanced-table-checkbox-${index}`;
-
-                                        return (
+                <Paper sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh', background: 'blue' }}>
+
+                    <Box sx={{ width: '100%' }}>
+                        <Paper sx={{ width: '100%', mb: 2 }}>
+
+                            <TableOperation numSelected={selected.length} />
+
+                            <TableContainer>
+
+                                <Table
+                                    sx={{ minWidth: 750 }}
+                                    aria-labelledby=""
+                                    size={dense ? 'small' : 'medium'} >
+
+                                    <TableHead
+                                        numSelected={selected.length}
+                                        order={order}
+                                        orderBy={orderBy}
+                                        onSelectAllClick={SeleccionarTodos}
+                                        onRequestSort={CambiarTipoOrden}
+                                        rowCount={rows.length} />
+
+
+                                    <TableBody>
+                                        {Cuerpo(rows, Comparar(order, orderBy))
+                                            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                                            .map((row, index) => {
+
+                                                const isItemSelected = isSelected(row.pass);
+                                                const labelId = `enhanced-table-checkbox-${index}`;
+
+                                                return (
+                                                    <TableRow
+                                                        hover
+                                                        onClick={(event) => Seleccionar(event, row.pass)}
+                                                        // onClick={(event) => console.log(event)}
+                                                        role="checkbox"
+                                                        aria-checked={isItemSelected}
+                                                        tabIndex={-1}
+                                                        key={row.pass}
+                                                        selected={isItemSelected}
+                                                    >
+                                                        <TableCell padding="checkbox">
+                                                            <Checkbox
+                                                                color="primary"
+                                                                checked={isItemSelected}
+                                                                inputProps={{
+                                                                    'aria-labelledby': labelId,
+                                                                }}
+                                                            />
+                                                        </TableCell>
+                                                        <TableCell
+                                                            component="th"
+                                                            id={labelId}
+                                                            scope="row"
+                                                            padding="none"
+                                                        >
+                                                            {row.pass}
+                                                        </TableCell>
+                                                        <TableCell align="right">{row.nivel}</TableCell>
+                                                        <TableCell align="right">{row.puesto}</TableCell>
+                                                        <TableCell align="right">{row.cui}</TableCell>
+                                                        <TableCell align="right">{row.uso}</TableCell>
+                                                        <TableCell align="right">{row.picture}</TableCell>
+                                                        <TableCell align="right">{row.cv}</TableCell>
+                                                        <TableCell align="right">{row.estado}</TableCell>
+                                                        <TableCell align="center">
+                                                            <EditSharp style={action_icon} />
+                                                            <MailSharp style={action_icon} />
+                                                        </TableCell>
+                                                    </TableRow>
+                                                );
+                                            })}
+                                        {emptyRows > 0 && (
                                             <TableRow
-                                                hover
-                                                onClick={(event) => Seleccionar(event, row.pass)}
-                                                // onClick={(event) => console.log(event)}
-                                                role="checkbox"
-                                                aria-checked={isItemSelected}
-                                                tabIndex={-1}
-                                                key={row.pass}
-                                                selected={isItemSelected}
+                                                style={{
+                                                    height: (dense ? 33 : 53) * emptyRows,
+                                                }}
                                             >
-                                                <TableCell padding="checkbox">
-                                                    <Checkbox
-                                                        color="primary"
-                                                        checked={isItemSelected}
-                                                        inputProps={{
-                                                            'aria-labelledby': labelId,
-                                                        }}
-                                                        />
-                                                </TableCell>
-                                                <TableCell
-                                                    component="th"
-                                                    id={labelId}
-                                                    scope="row"
-                                                    padding="none"
-                                                >
-                                                    {row.pass}
-                                                </TableCell>
-                                                <TableCell align="right">{row.nivel}</TableCell>
-                                                <TableCell align="right">{row.puesto}</TableCell>
-                                                <TableCell align="right">{row.cui}</TableCell>
-                                                <TableCell align="right">{row.uso}</TableCell>
-                                                <TableCell align="right">{row.picture}</TableCell>
-                                                <TableCell align="right">{row.cv}</TableCell>
-                                                <TableCell align="right">{row.estado}</TableCell>
-                                                <TableCell align="center">
-                                                    <EditSharp style={action_icon} />
-                                                    <MailSharp style={action_icon}/>
-                                                </TableCell>
+                                                <TableCell colSpan={6} />
                                             </TableRow>
-                                        );
-                                    })}
-                                    {emptyRows > 0 && (
-                                        <TableRow
-                                            style={{
-                                                height: (dense ? 33 : 53) * emptyRows,
-                                            }}
-                                        >
-                                            <TableCell colSpan={6} />
-                                        </TableRow>
-                                    )}
-                                </TableBody>
-                            </Table>
-                        </TableContainer>
-
-                        <TablePagination
-                            rowsPerPageOptions={[5, 10, 25]}
-                            component="div"
-                            count={rows.length}
-                            rowsPerPage={rowsPerPage}
-                            page={page}
-                            onPageChange={handleChangePage}
-                            onRowsPerPageChange={handleChangeRowsPerPage}
-                            labelRowsPerPage={"Mostrar: "}
+                                        )}
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+
+                            <TablePagination
+                                rowsPerPageOptions={[5, 10, 25]}
+                                component="div"
+                                count={rows.length}
+                                rowsPerPage={rowsPerPage}
+                                page={page}
+                                onPageChange={handleChangePage}
+                                onRowsPerPageChange={handleChangeRowsPerPage}
+                                labelRowsPerPage={"Mostrar: "}
                             />
 
 
-                    </Paper>
+                        </Paper>
 
-                    <FormControlLabel
-                        control={<Switch checked={dense} onChange={handleChangeDense} />}
-                        label="Comprimir"
+                        <FormControlLabel
+                            control={<Switch checked={dense} onChange={handleChangeDense} />}
+                            label="Comprimir"
                         />
 
-                </Box>
+                    </Box>
+
+                </Paper>
             </div>
         </div>
     );

src/Pages/ContrasV2.jsx

 import * as React from 'react';
-import { default as CustomToolbar} from '../Components/Password/CustomToolbar';
+import { default as CustomToolbar } from '../Components/Password/CustomToolbar';
 
-import { 
-    Paper, Box, 
+import {
+    Paper, Box,
     // Table, TableBody, TableCell, TableContainer, TableRow, TablePagination, Switch, FormControlLabel, Checkbox,
 } from '@mui/material';
 
         <div className="content-section">
             <div className="main">
                 <Box sx={{ width: '100%' }}>
-                    <Paper sx={{ width: '100%', mb: 2 }}>
+                    <Paper sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh' }}>
                         <MUIDataTable
                             title={"Contraseñas"}
                             data={data}

src/Pages/Puestos.jsx

 import React, { useState, useCallback} from 'react';
 import { Row, Col } from 'react-bootstrap'
-
 import { Toaster } from 'react-hot-toast';
-// import toast, { Toaster } from 'react-hot-toast';
 
 import {
     ToggleButton, ToggleButtonGroup, Box,
-    Paper, Pagination,
+    Paper, Pagination,Chip
 } from '@mui/material';
 
 import { ViewList as ViewListIcon, ViewModule as ViewModuleIcon, } from '@mui/icons-material';
     return (
         <div className="content-section">
             <div className="main">
-                <Box sx={{}}>
+                <Box>
                     <Paper sx={{ mb: 2, padding: 2, }}>
 
                         <Row style={{ paddingBottom: 15 }}>
                             </Col>
                         </Row>
 
-                        <div >
-                            <div  className={`main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
+                        <div>
+                            <div className={`main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
                                 <Row>
                                     <GridMode
                                         toggle={toggle}
                                 </Row>
                             </div>
 
-                            <Pagination
-                                sx={{
-                                    "& ul": {
-                                        paddingTop: "20px",
-                                        justifyContent: "center"
-                                    }
-                                }}
-                                siblingCount={2}
-                                boundaryCount={2}
-                                shape='rounded'
-                                count={total_items}
-                                page={page}
-                                onChange={changePage}
-                            />
+                            <div id="pagi_bottom">
+                                <Pagination
+                                    sx={{
+                                        "& ul": {
+                                            paddingTop: "20px",
+                                            justifyContent: "center"
+                                        }
+                                    }}
+                                    siblingCount={2}
+                                    boundaryCount={2}
+                                    shape='rounded'
+                                    count={total_items}
+                                    page={page}
+                                    onChange={changePage}
+                                    />
+
+                                <Chip label={"Total: "+ ( result? result.data.length : 0 ) } />
+                            </div>
+
                         </div>
                     </Paper>
                 </Box>
             <Editar  puesto={puesto} visible={edit} toggle={toggle} />
             <Eliminar visible={del} onClose={() => setDelete(false)} />
 
-            <Toaster position="bottom-right" reverseOrder={false} />
+            <Toaster position="bottom-right" />
 
         </div>
     )