Trabajo Final Frontend - Gabriel Oyarzo

app/users/bulk-create/page.css

@@ -0,0 +1,8 @@
+input {
+    margin: 10px;
+}
+
+.form-input input {
+    width: 150px;
+    height: 20px;
+}

app/users/bulk-create/page.js

@@ -0,0 +1,145 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { Container, Button, Stack, TextField } from "@mui/material";
+import SimpleSnackbar from "../../../components/SimpleSnackbar";
+import AuthService from "../../../services/AuthService";
+import Navbar from "../../../components/Navbar";
+
+import "./page.css";
+
+export default function BulkCreateUsers() {
+    const [users, setUsers] = useState([]);
+    const [number, setNumber] = useState(1);
+
+    const [message, setMessage] = useState("");
+    const [openSnack, setOpenSnack] = useState(false);
+
+    useEffect(() => {
+        setUsers(
+            Array.from({ length: number }, () => ({
+                name: "",
+                email: "",
+                password: "",
+                password_second: "",
+                cellphone: "",
+            }))
+        );
+    }, [number]);
+
+    const handleChange = (e, index) => {
+        setUsers(
+            users.map((user, i) =>
+                i === index
+                    ? { ...user, [e.target.name]: e.target.value }
+                    : user
+            )
+        );
+    };
+
+    const isEmptyUsers = (users) => {
+        return users.some((user) => {
+            return Object.values(user).some(
+                (value) => value === "" || value === null || value === undefined
+            );
+        });
+    };
+
+    const createUsers = async () => {
+        const token = localStorage.getItem("token");
+        const response = await AuthService.bulkCreateUsers(token, users);
+        setMessage(response);
+        setOpenSnack(true);
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        console.log(users);
+        if (isEmptyUsers(users)) {
+            setMessage("You must fill all fields");
+            setOpenSnack(true);
+            return;
+        }
+        createUsers();
+    };
+
+    return (
+        <Container>
+            <SimpleSnackbar
+                message={message}
+                openSnack={openSnack}
+                closeSnack={() => {
+                    setOpenSnack(!openSnack);
+                }}
+            />
+            <Navbar />
+            <h1>Create users</h1>
+            <input
+                type="number"
+                value={number}
+                onChange={(e) => setNumber(e.target.value)}
+            />
+            {users.map((user, index) => (
+                <Stack key={index} direction="row" spacing={2} marginBottom={2}>
+                    <TextField
+                        className="form-input"
+                        label="Nombre"
+                        name="name"
+                        value={user?.name}
+                        placeholder="juan"
+                        size="small"
+                        InputLabelProps={{ shrink: true }}
+                        onChange={(e) => handleChange(e, index)}
+                        required
+                    />
+                    <TextField
+                        className="form-input"
+                        label="Email"
+                        name="email"
+                        value={user?.email}
+                        placeholder="juan@gmail.com"
+                        size="small"
+                        InputLabelProps={{ shrink: true }}
+                        onChange={(e) => handleChange(e, index)}
+                        required
+                    />
+                    <TextField
+                        className="form-input"
+                        type="password"
+                        name="password"
+                        value={user?.password}
+                        label="Contraseña"
+                        placeholder="******"
+                        size="small"
+                        InputLabelProps={{ shrink: true }}
+                        onChange={(e) => handleChange(e, index)}
+                        required
+                    />
+                    <TextField
+                        className="form-input"
+                        type="password"
+                        name="password_second"
+                        value={user?.password_second}
+                        label="Confirmar contraseña"
+                        placeholder="******"
+                        size="small"
+                        InputLabelProps={{ shrink: true }}
+                        onChange={(e) => handleChange(e, index)}
+                        required
+                    />
+                    <TextField
+                        className="form-input"
+                        label="Celular"
+                        name="cellphone"
+                        value={user?.cellphone}
+                        placeholder="123456789"
+                        size="small"
+                        InputLabelProps={{ shrink: true }}
+                        onChange={(e) => handleChange(e, index)}
+                        required
+                    />
+                </Stack>
+            ))}
+            {number > 0 && <Button onClick={handleSubmit}>Crear</Button>}
+        </Container>
+    );
+}

app/users/find/page.js

@@ -0,0 +1,136 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import {
+    Container,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Stack,
+    TextField,
+    Switch,
+    Button,
+} from "@mui/material";
+
+import AuthService from "../../../services/AuthService";
+import { useRouter } from "next/navigation";
+import Navbar from "../../../components/Navbar";
+
+export default function FindUsers() {
+    const router = useRouter();
+    const [users, setUsers] = useState([]);
+    const [query, setQuery] = useState({});
+    const [user, setUser] = useState({});
+
+    useEffect(() => {
+        const user = JSON.parse(localStorage.getItem("user"));
+        setUser(user);
+        if (!user) {
+            router.push("/login");
+        }
+        if (user?.roles?.includes("admin")) {
+            getFilteredUsers();
+        }
+    }, [query]);
+
+    const getFilteredUsers = async () => {
+        const token = localStorage.getItem("token");
+        const data = await AuthService.findUsers(token, query);
+        console.log(data);
+        setUsers(data);
+    };
+
+    return (
+        <Container>
+            <Navbar />
+            <h1>Users filters</h1>
+            <>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <TextField
+                        id="search"
+                        label="Buscar por nombre"
+                        variant="standard"
+                        value={query?.name || ""}
+                        onChange={(e) =>
+                            setQuery({ ...query, name: e.target.value })
+                        }
+                    />
+                    <Switch
+                        id="active"
+                        label="Estado"
+                        checked={query?.active || false}
+                        onChange={(e) =>
+                            setQuery({ ...query, active: e.target.checked })
+                        }
+                    />
+                    <TextField
+                        id="login_after_date"
+                        label="Fecha de inicio de sesión"
+                        variant="standard"
+                        type="date"
+                        value={query?.login_after_date || ""}
+                        onChange={(e) =>
+                            setQuery({
+                                ...query,
+                                login_after_date: e.target.value,
+                            })
+                        }
+                        InputLabelProps={{
+                            shrink: true,
+                        }}
+                    />
+                    <TextField
+                        id="login_before_date"
+                        label="Fecha de fin de sesión"
+                        variant="standard"
+                        type="date"
+                        value={query?.login_before_date || ""}
+                        onChange={(e) =>
+                            setQuery({
+                                ...query,
+                                login_before_date: e.target.value,
+                            })
+                        }
+                        InputLabelProps={{
+                            shrink: true,
+                        }}
+                    />
+                    <Button
+                        onClick={() => {
+                            setQuery({});
+                        }}
+                    >
+                        Limpiar filtros
+                    </Button>
+                </Stack>
+            </>
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell>Nombre</TableCell>
+                        <TableCell>Email</TableCell>
+                        <TableCell>Estado</TableCell>
+                        <TableCell>Última Sesión</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {users.map((user, index) => (
+                        <TableRow key={index}>
+                            <TableCell>{user.name}</TableCell>
+                            <TableCell>{user.email}</TableCell>
+                            <TableCell>
+                                {user.status ? "ACTIVO" : "CERRADO"}
+                            </TableCell>
+                            <TableCell>
+                                {user.Sessions?.length > 0
+                                    ? user.Sessions[0]?.createdAt
+                                    : "SIN SESIÓN"}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </Container>
+    );
+}

app/users/page.css

@@ -0,0 +1,4 @@
+a {
+    color: #1976d2;
+    text-decoration: underline;
+}