buscar puestos funcionality

src/App.css

 }
 
 #pagi_bottom{
-    width:100%;
-    display:flex;
-    flex-direction:row;
-    align-items:baseline;
-    justify-content:space-between;
+  margin-left:15px;
+  margin-right:15px;
+  width:100%;
+  display:flex;
+  flex-direction:row;
+  align-items:baseline;
+  justify-content:space-between;
+  flex-wrap:wrap;
 }
 
 .css-19kzrtu{
     justify-content: center;
     align-items: center;
 }
+
+#search_plaza_input{
+  width:200px;
+  padding-left:20px !important;
+  margin-left:20px !important;
+}
+
+.chip_and_search{
+  display:flex;
+  flex-direction:row;
+  flex-wrap:wrap;
+  justify-content: center;
+  align-items: center;
+}

src/Components/Puestos/GridMode.jsx

             return (
               <Grow in={true} style={{ transformOrigin: '0 0 0' }} timeout={500} key={plaza.id} >
                 <Col lg="4" md="6" sm="6" xs="12" >
-                  <div style={{ padding: 15 }}>
+                  <div style={{ padding: 5 }}>
                     <PuestoCard toggle={toggle} plaza={plaza} />
                   </div>
                 </Col>

src/Pages/Puestos.jsx

 
 import {
   ToggleButton, ToggleButtonGroup, Box,
-  Paper, Pagination, Chip
+  Paper, Pagination, Chip, TextField, InputAdornment,
 } from '@mui/material';
 
-import { ViewList as ViewListIcon, ViewModule as ViewModuleIcon, } from '@mui/icons-material';
+import {
+  ViewList as ViewListIcon, ViewModule as ViewModuleIcon,
+  Search as SearchIcon
+} from '@mui/icons-material';
 
 import { Service } from '../Utils/HTTP';
 import { Divide } from '../Utils/Paginate';
 
   const auth = useSelector((state) => state.token)
   const [page, setPage] = useState(1);
+  const [temp, setTemp] = useState(null);
 
   const getAll = async () => {
     let rest = new Service("/plaza/getall")
   let [edit, setEdit] = React.useState(null);
   let [del, setDelete] = React.useState(null);
   let [show, setShow] = React.useState(null);
+  let [filter, setFilter] = React.useState(null);
 
   const toggle = useCallback((type, puesto) => {
-   // console.log('usecall: ',puesto)
     setPuesto(puesto)
     switch (type) {
       case "VER": {
   }, [del, show])
 
 
-  if(isLoading){
-    return(
-      <Loading/>
+  if (isLoading) {
+    return (
+      <Loading />
     )
   }
 
       </Paper>
     )
   }
-  const total_items = Divide(result.data).length
+  const total_items = Divide(filter ? filter : result.data).length
 
   return (
     <div className="content-section">
       <div className="main">
         <Box>
           <Paper sx={{ mb: 2, padding: 2, }}>
-
-            <Row style={{ paddingBottom: 15 }}>
-              <Col md="2" sm="2" xs="2">
+            <Row style={{ alignItems: 'center', padding : 10 }}>
+              <Col md="6" sm="12" xs="12">
                 <div className="breadcrumb-header">
-                  <Box sx={{ float: 'left', display: 'flex', flexDirection: 'column', alignItems: 'center', '& > :not(style) + :not(style)': { mt: 2 }, }} >
-                    <ToggleButtonGroup size="small" {...control}>
+                  <Box sx={{ float: 'left', display: 'flex', flexDirection: 'row', alignItems: 'center' }} >
+                    <ToggleButtonGroup style={{ marginRight: 20 }} size="small" {...control}>
                       {children}
                     </ToggleButtonGroup>
+                    <TextField
+                      id="search_plaza_input"
+                      onChange={(event) => {
+                        let nombre = event.target.value
+                        if (nombre) {
+                          let temp = result.data.filter(plaza => {
+                            let isset = plaza.nombrepuesto.toUpperCase().includes(nombre.toUpperCase())
+                            return isset
+                          })
+                          console.log(temp)
+                          setFilter(temp)
+                        } else {
+                          setFilter(null)
+                        }
+                      }}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <SearchIcon />
+                          </InputAdornment>
+                        ),
+                      }}
+                      variant="standard"
+                    />
+
+
+
+
                   </Box>
+
                 </div>
               </Col>
-              <Col md="10" sm='10' xs="10">
+              <Col md="6" sm='12' xs="12">
                 <div className="add_producto">
                   <div onClick={() => setManual(true)} className="btn_add_producto">
                     <span className="btn_plaza_common" >Agregar manual <AddIcon fontSize="small" /></span>
               </Col>
             </Row>
 
-            <div>
-              <div className={`main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
+            <div >
+              <div className={` main_grid_plazas main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
                 <Row>
                   <GridMode
                     toggle={toggle}
                     showing={alignment}
-                    data={Divide(result.data)}
+                    data={filter ? Divide(filter) : Divide(result.data)}
                     index={page - 1}
                   />
                 </Row>
                   <ListMode
                     toggle={toggle}
                     showing={alignment}
-                    data={Divide(result.data)}
+                    data={filter ? Divide(filter) : Divide(result.data)}
                     index={page - 1}
                   />
                 </Row>
               </div>
 
-              <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>
+              <Row className="mamo">
+                <Col id="pagi_bottom" >
+
+                  <Pagination
+                    sx={{
+                      "& ul": {
+                        paddingTop: "20px",
+                        justifyContent: "center"
+                      }
+                    }}
+                    siblingCount={2}
+                    boundaryCount={2}
+                    shape='rounded'
+                    count={total_items}
+                    page={page}
+                    onChange={changePage}
+                  />
+                  <div className="chip_and_search">
+
+                    <TextField
+                      id="search_plaza_input"
+                      onChange={(event) => {
+                        let nombre = event.target.value
+                        if (nombre) {
+                          let temp = result.data.filter(plaza => {
+                            let isset = plaza.nombrepuesto.toUpperCase().includes(nombre.toUpperCase())
+                            return isset
+                          })
+                          console.log(temp)
+                          setFilter(temp)
+                        } else {
+                          setFilter(null)
+                        }
+                      }}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <SearchIcon />
+                          </InputAdornment>
+                        ),
+                      }}
+                      variant="standard"
+                    />
+
+                    <Chip style={{ marginLeft: 10, margin: 5 }} label={"Total: " + (result ? result.data.length : 0)} />
+                  </div>
+                </Col>
+              </Row>
 
             </div>
           </Paper>

src/Utils/Paginate.js

 export function Divide(arregloOriginal){
-    const LONGITUD_PEDAZOS = 9;
+    const LONGITUD_PEDAZOS = 6;
     let arregloDeArreglos = [];
     for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
         let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);