Yiesssss

app/bulckCreateUsers/page.js

@@ -0,0 +1,129 @@
+"use client"
+import { useState } from "react";
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import AuthService from "@/services/AuthService";
+import { useRouter } from 'next/navigation';
+import IconButton from '@mui/material/IconButton';
+export default function AddUsers() {
+    const [users, setUsers] = useState([{ name: "", email: "", password: "", cellphone: "" }]);
+    const [alertMessage, setAlertMessage] = useState("");
+    const [alertOpen, setAlertOpen] = useState(false);
+    const router = useRouter();
+    const handleInputChange = (index, event) => {
+        const values = [...users];
+        values[index][event.target.name] = event.target.value;
+        setUsers(values);
+    };
+
+    const handleAddUser = () => {
+        setUsers([...users, { name: "", email: "", password: "", cellphone: "" }]);
+    };
+
+    const handleDeleteUser = (index) => {
+        const values = [...users];
+        values.splice(index, 1);
+        setUsers(values);
+    };
+
+    const handleBack = () => {
+        router.push('/users');
+    }
+
+    const handleSubmit = async () => {
+        const token = localStorage.getItem('token');
+        try {
+            console.log("usuarios nuevos:", users);
+            const data = await AuthService.bulkCreate(users, token);
+            console.log("respuesta", data);
+            setAlertMessage(`Usuarios Creados: ${data.data.Creados} - Usuarios No Creados: ${data.data.Fallos}`); // Formatear el JSON para una mejor legibilidad
+            setAlertOpen(true);
+        } catch (e) {
+            console.error(e);
+            setAlertMessage("Error al crear usuarios.");
+            setAlertOpen(true);
+        }
+    };
+
+    return (
+        <div>
+             <IconButton color="primary" aria-label='Ver lista de usuarios' onClick={handleBack}>Volver</IconButton> <br />
+            <h1>Agregar Usuarios</h1>
+            <Box
+                component="form"
+                sx={{
+                    '& > :not(style)': { m: 1, width: '80ch' },
+                }}
+                noValidate
+                autoComplete="off"
+            >
+                {users.map((user, index) => (
+                    <Grid container spacing={2} key={index} alignItems="center">
+                        <Grid item xs={12} sm={6} md={2}>
+                            <TextField
+                                label="Nombre"
+                                variant="outlined"
+                                name="name"
+                                value={user.name}
+                                onChange={event => handleInputChange(index, event)}
+                                fullWidth
+                                required
+                            />
+                        </Grid>
+                        <Grid item xs={12} sm={6} md={2}>
+                            <TextField
+                                label="Email"
+                                variant="outlined"
+                                name="email"
+                                value={user.email}
+                                onChange={event => handleInputChange(index, event)}
+                                fullWidth
+                                required
+                            />
+                        </Grid>
+                        <Grid item xs={12} sm={6} md={2}>
+                            <TextField
+                                label="Contraseña"
+                                variant="outlined"
+                                type="password"
+                                name="password"
+                                value={user.password}
+                                onChange={event => handleInputChange(index, event)}
+                                fullWidth
+                                required
+                            />
+                        </Grid>
+                        <Grid item xs={12} sm={6} md={2}>
+                            <TextField
+                                label="Cellphone"
+                                variant="outlined"
+                                name="cellphone"
+                                value={user.cellphone}
+                                onChange={event => handleInputChange(index, event)}
+                                fullWidth
+                                required
+                            />
+                        </Grid>
+                        <Grid item xs={12} sm={6} md={2}>
+                            <Button variant="contained" color="error" onClick={() => handleDeleteUser(index)}>
+                                Eliminar
+                            </Button>
+                        </Grid>
+                    </Grid>
+                ))}
+                <Button variant="contained" onClick={handleAddUser} sx={{ mt: 2 }}>+1</Button> <br/>
+                <Button variant="contained" onClick={handleSubmit} sx={{ mt: 2, ml: 1 }}>Crear Usuarios</Button>
+            </Box>
+            {alertOpen && (
+                <Alert severity="info" onClose={() => setAlertOpen(false)} sx={{ mt: 2 }}>
+                    <AlertTitle>Estado nuevos usuarios</AlertTitle>
+                    <pre>{alertMessage}</pre>
+                </Alert>
+            )}
+        </div>
+    );
+}

app/userList/page.js

@@ -0,0 +1,130 @@
+"use client"
+import UsersTable from "@/components/UsersTable";
+import { useEffect, useState } from "react";
+import AuthService from "@/services/AuthService";
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import FormLabel from '@mui/material/FormLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { useRouter } from 'next/navigation';
+import IconButton from '@mui/material/IconButton';
+export default function Page() {
+    const [name, setName] = useState("");
+    const [loginBefore, setLoginBefore] = useState("");
+    const [loginAfter, setLoginAfter] = useState("");
+    const [active, setActive] = useState("");
+    const [users, setUsers] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [inputEnabled, setInputEnabled] = useState(true);
+    const router = useRouter();
+    useEffect(() => {
+        console.log("useEffect", inputEnabled);
+    }, [inputEnabled]);
+
+    const handleSearch = async () => {
+        setLoading(true);
+        const token = localStorage.getItem('token');
+        console.log(name, active, loginBefore, loginAfter, token);
+
+        const data = await AuthService.findUsers(name, active, loginBefore, loginAfter, token);
+        setUsers(data.data); 
+        setLoading(false);
+        console.log(data.data);
+    };
+    const handleBack = () => {
+        router.push('/users');
+    }
+    return (
+        <div>
+            <IconButton color="primary" aria-label='Ver lista de usuarios' onClick={handleBack}>Volver</IconButton> <br />
+            <h1>Lista de usuarios</h1>
+            <Box
+                component="form"
+                sx={{
+                    '& > :not(style)': { m: 1, width: '15ch' },
+                }}
+                noValidate
+                autoComplete="off"
+            >
+                <TextField 
+                    id="outlined-basic"
+                    label="Nombre" 
+                    variant="outlined" 
+                    value={name} 
+                    onChange={(e) => setName(e.target.value)}
+                    required
+                />
+                <FormControlLabel
+                value="top"
+                control={
+                <Checkbox 
+                    id="Range"
+                    checked={inputEnabled} 
+                    size="small" 
+                    onChange={(e) => setInputEnabled(e.target.checked)} 
+                />}
+                label="¿Inició sesión?"
+                labelPlacement="top"
+                />
+
+                <FormControlLabel
+                value="top"
+                control={
+                <input 
+                    id="loginAfter"
+                    type="date" 
+                    value={loginAfter} 
+                    onChange={(e) => setLoginAfter(e.target.value)} 
+                    placeholder="Fecha de inicio" 
+                    disabled={!inputEnabled}
+                />}
+                label="Inicio"
+                labelPlacement="top"
+                />
+
+                <FormControlLabel
+                value="top"
+                control={
+                <input 
+                    id="loginBefore"
+                    type="date" 
+                    value={loginBefore} 
+                    onChange={(e) => setLoginBefore(e.target.value)} 
+                    placeholder="Fecha de fin" 
+                    disabled={!inputEnabled}
+                />}
+                label="Fin"
+                labelPlacement="top"
+                />
+
+                <FormControl fullWidth required>
+                    <InputLabel id="demo-simple-select-label">Estado</InputLabel>
+                    <Select
+                        labelId="demo-simple-select-label"
+                        id="demo-simple-select"
+                        value={active}
+                        defaultValue={"false"}
+                        label="Estado"
+                        onChange={(e) => setActive(e.target.value)}
+                    >
+                        <MenuItem value={"false"}>Activos</MenuItem>
+                        <MenuItem value={"true"}>Inactivos</MenuItem>
+                    </Select>
+                </FormControl>
+                <Button
+                    variant="contained"
+                    onClick={handleSearch}
+                    disabled={name === "" || active === "" || (inputEnabled && (loginBefore === "" || loginAfter === ""))}
+                >Filtrar</Button>
+            </Box>
+
+            <UsersTable data={users} />
+        </div>
+    );
+}

app/users/page.js

@@ -7,7 +7,6 @@ import {Edit} from "@mui/icons-material";
 import AuthService from "../../services/AuthService";
 import { useRouter } from 'next/navigation';
 import Navbar from '../../components/Navbar';
-
 export default function Users(){
 
     const router = useRouter();
@@ -41,6 +40,12 @@ export default function Users(){
         router.push('/users/' + user.id + '/edit');
     }
 
+    const handleList = () => {
+        router.push('/userList');
+    }
+    const handleCreateMany = () => {
+        router.push('/bulckCreateUsers');
+    }
     return (
         <Container>
             <Navbar />
@@ -73,6 +78,8 @@ export default function Users(){
                     }
                 </TableBody>
             </Table>
+            <IconButton color="primary" aria-label='Ver lista de usuarios' onClick={handleList}>Ver Lista de Usuarios</IconButton> <br />
+            <IconButton color="primary" aria-label='Crear Varios Usuarios' onClick={handleCreateMany}>Crear Varios Usuarios</IconButton>
         </Container>
     )
 }

components/UsersTable.js

@@ -0,0 +1,72 @@
+"use client"
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import AuthService from "@/services/AuthService";
+import { useEffect, useState } from 'react';
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  [`&.${tableCellClasses.head}`]: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 14,
+  },
+}));
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+  '&:nth-of-type(odd)': {
+    backgroundColor: theme.palette.action.hover,
+  },
+  // hide last border
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+}));
+
+export default function UsersTable({data}) {
+  const [users, setUsers] = useState([]);
+  useEffect(() => {
+    if (Array.isArray(data)) {
+      setUsers(data);
+    }
+  }, [data]);
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 700 }} aria-label="customized table">
+        <TableHead>
+          <TableRow>
+            <StyledTableCell>Nombre</StyledTableCell>
+            <StyledTableCell align="right">Email</StyledTableCell>
+            <StyledTableCell align="right">Cellphone</StyledTableCell>
+            <StyledTableCell align="right">Status</StyledTableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+        {users.length === 0 ? (
+            <TableRow>
+              <StyledTableCell colSpan={4} align="center">No hay usuarios para mostrar</StyledTableCell>
+            </TableRow>
+          ) : (
+            users.map((row) => (
+              <StyledTableRow key={row.name}>
+                <StyledTableCell component="th" scope="row">
+                  {row.name}
+                </StyledTableCell>
+                <StyledTableCell align="right">{row.email}</StyledTableCell>
+                <StyledTableCell align="right">{row.cellphone}</StyledTableCell>
+                <StyledTableCell align="right">{`${row.status}`}</StyledTableCell>
+              </StyledTableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}