Trabajo Final FrontEnd

app/users/BulkCreateUsers.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import Layout from '@/components/layout';
+import SimpleSnackbar from '@/components/SimpleSnackbar';
+import AuthService from '@/services/AuthService';
+
+const BulkCreateUsers = () => {
+    const [userData, setUserData] = useState('');
+    const [openSnackbar, setOpenSnackbar] = useState(false);
+    const [snackbarMessage, setSnackbarMessage] = useState('');
+
+    const handleUserChange = (e) => {
+        setUserData(e.target.value);
+    };
+
+    const handleSubmit = async () => {
+        try {
+            const token = localStorage.getItem('token');
+            const response = await axios.post('http://localhost:3001/api/v1/users/bulkCreate', {
+                users: JSON.parse(userData)
+            }, {
+                headers: {
+                    'Authorization': `Bearer ${token}`
+                }
+            });
+            if (response.status === 200) {
+                setSnackbarMessage('Users created successfully');
+                setOpenSnackbar(true);
+                setUserData('');
+            } else {
+                setSnackbarMessage('Failed to create users');
+                setOpenSnackbar(true);
+            }
+        } catch (error) {
+            console.error('Error creating users:', error);
+            setSnackbarMessage('Error creating users');
+            setOpenSnackbar(true);
+        }
+    };
+
+    const handleCloseSnackbar = () => {
+        setOpenSnackbar(false);
+    };
+
+    return (
+        <Layout>
+            <Container maxWidth="md">
+                <Typography variant="h4" gutterBottom>
+                    Bulk Create Users
+                </Typography>
+                <TextField
+                    label="Enter user data JSON"
+                    variant="outlined"
+                    multiline
+                    rows={6}
+                    fullWidth
+                    value={userData}
+                    onChange={handleUserChange}
+                />
+                <Button variant="contained" onClick={handleSubmit}>
+                    Submit
+                </Button>
+            </Container>
+            <SimpleSnackbar
+                openSnack={openSnackbar}
+                closeSnack={handleCloseSnackbar}
+                message={snackbarMessage}
+            />
+        </Layout>
+    );
+};
+
+export default BulkCreateUsers;

app/users/Users.js

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Container, Typography, TextField, Button } from '@mui/material';
+import Layout from '@/components/layout';
+import AuthService from '@/services/AuthService';
+
+const Users = () => {
+    const [users, setUsers] = useState([]);
+    const [nameFilter, setNameFilter] = useState('');
+    const [loginBeforeDateFilter, setLoginBeforeDateFilter] = useState('');
+    const [loginAfterDateFilter, setLoginAfterDateFilter] = useState('');
+    const [activeFilter, setActiveFilter] = useState('');
+
+    useEffect(() => {
+        fetchUsers();
+    }, []);
+
+    const fetchUsers = async () => {
+        try {
+            const token = localStorage.getItem('token');
+            const response = await axios.get('http://localhost:3001/api/v1/users/findUsers', {
+                headers: {
+                    'Authorization': `Bearer ${token}`
+                },
+                params: {
+                    name: nameFilter,
+                    login_before_date: loginBeforeDateFilter,
+                    login_after_date: loginAfterDateFilter,
+                    active: activeFilter
+                }
+            });
+            setUsers(response.data);
+        } catch (error) {
+            console.error('Error fetching users:', error);
+            // Handle error, show message to user
+        }
+    };
+
+    const handleFilterSubmit = () => {
+        fetchUsers();
+    };
+
+    return (
+        <Layout>
+            <Container maxWidth="lg">
+                <Typography variant="h4" gutterBottom>
+                    Users
+                </Typography>
+                <TextField
+                    label="Name"
+                    variant="outlined"
+                    value={nameFilter}
+                    onChange={(e) => setNameFilter(e.target.value)}
+                />
+                {/* Other filter inputs go here */}
+                <Button variant="contained" onClick={handleFilterSubmit}>
+                    Apply Filters
+                </Button>
+                <div>
+                    {/* Render users here */}
+                    {users.map((user) => (
+                        <div key={user.id}>
+                            <Typography variant="h6">{user.name}</Typography>
+                            <Typography>Email: {user.email}</Typography>
+                            <Typography>Status: {user.status ? 'Active' : 'Inactive'}</Typography>
+                            {/* Add more details as needed */}
+                        </div>
+                    ))}
+                </div>
+            </Container>
+        </Layout>
+    );
+};
+
+export default Users;