Hugo Faundez - Se ha realizado el front

app/users/bulk-upload/page.js

@@ -0,0 +1,15 @@
+"use client"
+import React from 'react';
+import { Container } from '@mui/material';
+import BulkUserUpload from '../../components/BulkUserUpload';
+import Navbar from '../../components/Navbar';
+
+export default function BulkUploadPage() {
+    return (
+        <Container>
+            <Navbar />
+            <h1>Carga Masiva de Usuarios</h1>
+            <BulkUserUpload />
+        </Container>
+    );
+}

app/users/page.js

@@ -1,50 +1,63 @@
 "use client"
-import React, {useEffect, useState} from 'react';
-import {Container, Table, TableBody, TableCell, TableHead, TableRow} from "@mui/material";
+import React, { useEffect, useState } from 'react';
+import { Container, Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
 import IconButton from '@mui/material/IconButton';
-import {Edit} from "@mui/icons-material";
+import { Edit } from "@mui/icons-material";
 
 import AuthService from "../../services/AuthService";
 import { useRouter } from 'next/navigation';
 import Navbar from '../../components/Navbar';
+import UserFilters from '../../components/UserFilters';
 
-export default function Users(){
-
+export default function Users() {
     const router = useRouter();
     const [users, setUsers] = useState([]);
+    const [filteredUsers, setFilteredUsers] = useState([]);
 
     useEffect(() => {
         const user = JSON.parse(localStorage.getItem('user'));
-        if(!user){
+        if (!user) {
             router.push('/login');
         }
-        if(user?.roles?.includes('admin')){
+        if (user?.roles?.includes('admin')) {
             getAllUsers();
         }
-        if(user?.roles?.includes('user')){
+        if (user?.roles?.includes('user')) {
             getUser(user.id);
         }
     }, []);
 
     const getAllUsers = async () => {
         const data = await AuthService.getUsers();
         setUsers(data);
-    }
+        setFilteredUsers(data);
+    };
 
     const getUser = async (id) => {
         const token = localStorage.getItem('token');
         const data = await AuthService.getUserById(id, token);
         setUsers([data]);
-    }
+        setFilteredUsers([data]);
+    };
 
     const handleEdit = (user) => {
         router.push('/users/' + user.id + '/edit');
-    }
+    };
+
+    const handleFilter = (filters) => {
+        const { name, email } = filters;
+        const filtered = users.filter(user =>
+            (name ? user.name.includes(name) : true) &&
+            (email ? user.email.includes(email) : true)
+        );
+        setFilteredUsers(filtered);
+    };
 
     return (
         <Container>
             <Navbar />
-            <h1>Users</h1>
+            <h1>Usuarios</h1>
+            <UserFilters onFilter={handleFilter} />
             <Table>
                 <TableHead>
                     <TableRow>
@@ -57,11 +70,11 @@ export default function Users(){
                 </TableHead>
                 <TableBody>
                     {
-                        users.map((user) => (
-                            <TableRow key={user}>
+                        filteredUsers.map((user) => (
+                            <TableRow key={user.id}>
                                 <TableCell>{user.name}</TableCell>
                                 <TableCell>{user.email}</TableCell>
-                                <TableCell>{user.status? 'ACTIVO' : 'CERRADO'}</TableCell>
+                                <TableCell>{user.status ? 'ACTIVO' : 'CERRADO'}</TableCell>
                                 <TableCell>TBD</TableCell>
                                 <TableCell>
                                     <IconButton color="primary" aria-label={"Editar usuario " + user.name} onClick={() => handleEdit(user)}>

components/BulkUserUpload.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import AuthService from '@/services/AuthService';
+
+const BulkUserUpload = () => {
+    const [bulkData, setBulkData] = useState('');
+    const [message, setMessage] = useState('');
+
+    const handleUpload = async () => {
+        const users = bulkData.split('\n').map(line => {
+            const [name, email, password, cellphone] = line.split(',');
+            return { name, email, password, cellphone };
+        });
+
+        const response = await AuthService.bulkUploadUsers(users);
+        setMessage(response ? 'Usuarios cargados exitosamente' : 'Error en la carga de usuarios');
+    };
+
+    return (
+        <div>
+            <TextField
+                label="Datos de usuarios"
+                multiline
+                rows={10}
+                variant="outlined"
+                value={bulkData}
+                onChange={(e) => setBulkData(e.target.value)}
+                placeholder="Nombre,Email,Contraseña,Celular\nNombre2,Email2,Contraseña2,Celular2"
+            />
+            <Button onClick={handleUpload} variant="contained">Cargar Usuarios</Button>
+            {message && <div>{message}</div>}
+        </div>
+    );
+};
+
+export default BulkUserUpload;

components/Navbar.js

@@ -1,12 +1,12 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import './Navbar.css';
 import Button from '@mui/material/Button';
 import AuthService from '@/services/AuthService';
 import { useRouter } from 'next/navigation';
 
 const Navbar = () => {
     const router = useRouter();
-    const [user, setUser] = useState({name:""});
+    const [user, setUser] = useState({ name: "" });
 
     useEffect(() => {
         setUser(JSON.parse(localStorage.getItem('user')));
@@ -15,23 +15,23 @@ const Navbar = () => {
     const handleLogout = async () => {
         const token = localStorage.getItem('token');
         const result = await AuthService.logOut(token);
-        if(result){
+        if (result) {
             router.push('/login');
         }
-    }
+    };
 
     return (
         <div className="navbar">
             <div className="navbar-item">
                 {user?.name}
             </div>
             <div className="navbar-item">
-                <Button onClick={handleLogout}>
-                    Logout
-                </Button>
+                <Button onClick={() => router.push('/users')}>Usuarios</Button>
+                <Button onClick={() => router.push('/users/bulk-upload')}>Carga Masiva</Button>
+                <Button onClick={handleLogout}>Logout</Button>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default Navbar;
+export default Navbar;

components/UserFilters.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+
+const UserFilters = ({ onFilter }) => {
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+
+    const handleFilter = () => {
+        onFilter({ name, email });
+    };
+
+    return (
+        <div>
+            <TextField
+                label="Nombre"
+                variant="outlined"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+            />
+            <TextField
+                label="Email"
+                variant="outlined"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+            />
+            <Button onClick={handleFilter} variant="contained">Filtrar</Button>
+        </div>
+    );
+};
+
+export default UserFilters;

services/AuthService.js

@@ -1,5 +1,22 @@
 import axios from 'axios';
 
+
+const AuthService = {
+    // ... otros métodos
+
+    bulkUploadUsers: async (users) => {
+        try {
+            const response = await axios.post('/api/users/bulk-upload', { users });
+            return response.data.success;
+        } catch (error) {
+            console.error('Error en la carga masiva de usuarios', error);
+            return false;
+        }
+    },
+};
+
+
+
 const handleLogin = async (user, pass) => {
     try{
         const response = await axios.post('http://localhost:3001/api/v1/auth/login', {
@@ -121,4 +138,5 @@ export default {
     logOut,
     registerUser,
     updateUser,
+    AuthService,
 };