From c5a98435b39c965df0c6cf23276fe72aaa0bcf9a Mon Sep 17 00:00:00 2001
From: Dennis Eckerskorn <denniseckerskorn@gmail.com>
Date: Thu, 22 May 2025 21:59:53 +0200
Subject: [PATCH] Readjusting styles and adding more implementations and fixing
 bugs

---
 .../NotificationController.java               |   5 +-
 memberflow-frontend.zip                       | Bin 240361 -> 240631 bytes
 memberflow-frontend/src/api/axiosConfig.js    |   3 +-
 .../src/components/forms/IVATypeManager.jsx   |   1 +
 .../forms/NotificationCreateForm.jsx          |   4 +-
 .../src/components/forms/UserCreateForm.jsx   |   7 +-
 .../src/components/lists/NotificationList.jsx | 159 ++++++++++++++++--
 .../src/components/lists/UserList.jsx         |  99 ++++++++---
 .../src/components/styles/ContentArea.css     |  56 +++++-
 9 files changed, 288 insertions(+), 46 deletions(-)

diff --git a/memberflow-api/src/main/java/com/denniseckerskorn/controllers/user_managment_controllers/NotificationController.java b/memberflow-api/src/main/java/com/denniseckerskorn/controllers/user_managment_controllers/NotificationController.java
index ecbba8a..6468507 100644
--- a/memberflow-api/src/main/java/com/denniseckerskorn/controllers/user_managment_controllers/NotificationController.java
+++ b/memberflow-api/src/main/java/com/denniseckerskorn/controllers/user_managment_controllers/NotificationController.java
@@ -10,6 +10,7 @@ import io.swagger.v3.oas.annotations.tags.Tag;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Set;
 import java.util.stream.Collectors;
@@ -70,7 +71,8 @@ public class NotificationController {
 
         Set<User> existingUsers = updated.getUsers();
         if (existingUsers != null) {
-            for (User user : existingUsers) {
+            List<User> clonedUsers = new ArrayList<>(existingUsers);
+            for (User user : clonedUsers) {
                 notificationService.removeNotificationFromUser(updated, user);
             }
         }
@@ -85,6 +87,7 @@ public class NotificationController {
         return ResponseEntity.ok(toDTO(updated));
     }
 
+
     @Operation(summary = "Delete a notification by ID", description = "Delete a notification by its ID")
     @DeleteMapping("/delete/{id}")
     public ResponseEntity<String> delete(@PathVariable Integer id) {
diff --git a/memberflow-frontend.zip b/memberflow-frontend.zip
index 101b8f4566f75072148e59014def6bce39328249..0a01b466cf0a0bc78f2eaed7a23455fe7c18a2ce 100644
GIT binary patch
delta 6173
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
P(?>uK`!o<?D5(Dd1~n0D

delta 5749
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
ML0uY)R0<UT1MI${U;qFB

diff --git a/memberflow-frontend/src/api/axiosConfig.js b/memberflow-frontend/src/api/axiosConfig.js
index 2d4bdcc..aa2ebfc 100644
--- a/memberflow-frontend/src/api/axiosConfig.js
+++ b/memberflow-frontend/src/api/axiosConfig.js
@@ -18,4 +18,5 @@ api.interceptors.request.use(
     (error) => Promise.reject(error)
 );
 
-export default api;
\ No newline at end of file
+export default api;
+
diff --git a/memberflow-frontend/src/components/forms/IVATypeManager.jsx b/memberflow-frontend/src/components/forms/IVATypeManager.jsx
index 1b213b0..fd06df9 100644
--- a/memberflow-frontend/src/components/forms/IVATypeManager.jsx
+++ b/memberflow-frontend/src/components/forms/IVATypeManager.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import api from "../../api/axiosConfig";
 
+
 const IVATypeManager = () => {
   const [ivaTypes, setIvaTypes] = useState([]);
   const [newIva, setNewIva] = useState({ percentage: "", description: "" });
diff --git a/memberflow-frontend/src/components/forms/NotificationCreateForm.jsx b/memberflow-frontend/src/components/forms/NotificationCreateForm.jsx
index c893642..14db164 100644
--- a/memberflow-frontend/src/components/forms/NotificationCreateForm.jsx
+++ b/memberflow-frontend/src/components/forms/NotificationCreateForm.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import api from '../../api/axiosConfig';
-import '../styles/FormStyles.css';
+import '../styles/ContentArea.css';
 
 const NotificationCreateForm = () => {
   const today = new Date().toISOString().split('T')[0];
@@ -82,7 +82,7 @@ const NotificationCreateForm = () => {
     <div className="card">
       <h2>Crear nueva notificación</h2>
 
-      <form onSubmit={handleSubmit} className="notification-form">
+      <form onSubmit={handleSubmit} className="form-column">
         <input type="text" name="title" placeholder="Título" value={notificationData.title} onChange={handleChange} required />
         <textarea name="message" placeholder="Mensaje" value={notificationData.message} onChange={handleChange} rows="4" required />
 
diff --git a/memberflow-frontend/src/components/forms/UserCreateForm.jsx b/memberflow-frontend/src/components/forms/UserCreateForm.jsx
index f78312a..6c5bd69 100644
--- a/memberflow-frontend/src/components/forms/UserCreateForm.jsx
+++ b/memberflow-frontend/src/components/forms/UserCreateForm.jsx
@@ -171,10 +171,8 @@ const UserCreateForm = () => {
   return (
     <div className="card">
       <h2>Crear nuevo usuario</h2>
-      <form
-        onSubmit={handleSubmit}
-        style={{ display: "flex", flexDirection: "column", gap: "15px" }}
-      >
+      <form onSubmit={handleSubmit} className="form-column">
+
         {/* Datos básicos */}
         <input
           type="text"
@@ -264,6 +262,7 @@ const UserCreateForm = () => {
             <input
               type="date"
               name="birthdate"
+              placeholder="Fecha de nacimiento"
               value={studentData.birthdate}
               onChange={handleChangeStudent}
               required
diff --git a/memberflow-frontend/src/components/lists/NotificationList.jsx b/memberflow-frontend/src/components/lists/NotificationList.jsx
index 22d11d2..02e2e46 100644
--- a/memberflow-frontend/src/components/lists/NotificationList.jsx
+++ b/memberflow-frontend/src/components/lists/NotificationList.jsx
@@ -1,11 +1,15 @@
-// src/components/lists/NotificationList.jsx
-import React, { useEffect, useState } from 'react';
-import api from '../../api/axiosConfig';
-import '../styles/ContentArea.css'; // Tu estilo general de tarjetas y tablas
+import React, { useEffect, useState } from "react";
+import api from "../../api/axiosConfig";
+import ErrorMessage from "../common/ErrorMessage";
+import "../styles/ContentArea.css";
 
 const NotificationList = () => {
   const [notifications, setNotifications] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [editingId, setEditingId] = useState(null);
+  const [editedData, setEditedData] = useState({});
+  const [errorMsg, setErrorMsg] = useState("");
+  const [successMsg, setSuccessMsg] = useState("");
 
   useEffect(() => {
     fetchNotifications();
@@ -13,21 +17,77 @@ const NotificationList = () => {
 
   const fetchNotifications = async () => {
     try {
-      const res = await api.get('/notifications/getAll');
+      const res = await api.get("/notifications/getAll");
       setNotifications(res.data);
-      setLoading(false);
     } catch (err) {
-      console.error('Error al cargar notificaciones', err);
+      console.error("Error al cargar notificaciones", err);
+      setErrorMsg("❌ Error al cargar notificaciones.");
+    } finally {
       setLoading(false);
     }
   };
 
-  if (loading) return <div className="card"><p>Cargando notificaciones...</p></div>;
+  const handleEditClick = (n) => {
+    setEditingId(n.id);
+    setEditedData({
+      title: n.title,
+      message: n.message,
+      shippingDate: n.shippingDate.split("T")[0],
+      type: n.type || "",
+      status: n.status,
+    });
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setEditedData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleUpdate = async () => {
+    try {
+      await api.put(`/notifications/update/${editingId}`, {
+        ...editedData,
+        shippingDate: new Date(editedData.shippingDate).toISOString(),
+      });
+      setSuccessMsg("✅ Notificación actualizada correctamente");
+      setErrorMsg("");
+      setEditingId(null);
+      fetchNotifications();
+    } catch (err) {
+      console.error(err);
+      setErrorMsg("❌ Error al actualizar la notificación");
+      setSuccessMsg("");
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm("¿Eliminar esta notificación?")) return;
+    try {
+      await api.delete(`/notifications/delete/${id}`);
+      setNotifications((prev) => prev.filter((n) => n.id !== id));
+      setSuccessMsg("✅ Notificación eliminada");
+      setErrorMsg("");
+    } catch (err) {
+      console.error(err);
+      setErrorMsg("❌ Error al eliminar la notificación");
+    }
+  };
+
+  if (loading)
+    return (
+      <div className="card">
+        <p>Cargando notificaciones...</p>
+      </div>
+    );
 
   return (
     <div className="card">
       <h2>Listado de Notificaciones</h2>
 
+      {/* ✅ Mensajes reutilizables */}
+      <ErrorMessage message={errorMsg} type="error" />
+      <ErrorMessage message={successMsg} type="success" />
+
       {notifications.length === 0 ? (
         <p>No hay notificaciones registradas.</p>
       ) : (
@@ -40,16 +100,89 @@ const NotificationList = () => {
                 <th>Fecha de Envío</th>
                 <th>Tipo</th>
                 <th>Estado</th>
+                <th>Acciones</th>
               </tr>
             </thead>
             <tbody>
               {notifications.map((n) => (
                 <tr key={n.id}>
-                  <td>{n.title}</td>
-                  <td>{n.message}</td>
-                  <td>{n.shippingDate.split('T')[0]}</td>
-                  <td>{n.type}</td>
-                  <td>{n.status}</td>
+                  {editingId === n.id ? (
+                    <>
+                      <td>
+                        <input
+                          name="title"
+                          value={editedData.title}
+                          onChange={handleChange}
+                        />
+                      </td>
+                      <td>
+                        <textarea
+                          name="message"
+                          rows="2"
+                          value={editedData.message}
+                          onChange={handleChange}
+                        />
+                      </td>
+                      <td>
+                        <input
+                          type="date"
+                          name="shippingDate"
+                          value={editedData.shippingDate}
+                          onChange={handleChange}
+                        />
+                      </td>
+                      <td>
+                        <input
+                          name="type"
+                          value={editedData.type}
+                          onChange={handleChange}
+                        />
+                      </td>
+                      <td>
+                        <select
+                          name="status"
+                          value={editedData.status}
+                          onChange={handleChange}
+                        >
+                          <option value="ACTIVE">Activo</option>
+                          <option value="INACTIVE">Inactivo</option>
+                        </select>
+                      </td>
+                      <td>
+                        <button className="edit-btn" onClick={handleUpdate}>
+                          ✅
+                        </button>
+                        <button
+                          className="delete-btn"
+                          onClick={() => setEditingId(null)}
+                        >
+                          ❌
+                        </button>
+                      </td>
+                    </>
+                  ) : (
+                    <>
+                      <td>{n.title}</td>
+                      <td>{n.message}</td>
+                      <td>{n.shippingDate.split("T")[0]}</td>
+                      <td>{n.type}</td>
+                      <td>{n.status}</td>
+                      <td>
+                        <button
+                          className="edit-btn"
+                          onClick={() => handleEditClick(n)}
+                        >
+                          ✏️
+                        </button>
+                        <button
+                          className="delete-btn"
+                          onClick={() => handleDelete(n.id)}
+                        >
+                          🗑️
+                        </button>
+                      </td>
+                    </>
+                  )}
                 </tr>
               ))}
             </tbody>
diff --git a/memberflow-frontend/src/components/lists/UserList.jsx b/memberflow-frontend/src/components/lists/UserList.jsx
index 3c7f659..2236644 100644
--- a/memberflow-frontend/src/components/lists/UserList.jsx
+++ b/memberflow-frontend/src/components/lists/UserList.jsx
@@ -6,6 +6,8 @@ import "../styles/ContentArea.css";
 const UserList = () => {
   const [users, setUsers] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [editingUserId, setEditingUserId] = useState(null);
+  const [editedUserData, setEditedUserData] = useState({});
   const [errorMsg, setErrorMsg] = useState("");
   const [successMsg, setSuccessMsg] = useState("");
 
@@ -13,20 +15,6 @@ const UserList = () => {
     fetchUsers();
   }, []);
 
-  const formatRoleName = (roleName) => {
-    switch (roleName) {
-      case "ROLE_STUDENT":
-        return "Estudiante";
-      case "ROLE_TEACHER":
-        return "Profesor";
-      case "ROLE_ADMIN":
-        return "Administrador";
-      default:
-        return roleName;
-    }
-  };
-  
-
   const fetchUsers = async () => {
     try {
       const res = await api.get("/users/getAll");
@@ -41,9 +29,45 @@ const UserList = () => {
     }
   };
 
+  const formatRoleName = (roleName) => {
+    switch (roleName) {
+      case "ROLE_STUDENT": return "Estudiante";
+      case "ROLE_TEACHER": return "Profesor";
+      case "ROLE_ADMIN": return "Administrador";
+      default: return roleName;
+    }
+  };
+
+  const handleEditClick = (user) => {
+    setEditingUserId(user.id);
+    setEditedUserData({ ...user });
+  };
+
+  const handleEditChange = (e) => {
+    setEditedUserData({
+      ...editedUserData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const handleConfirmUpdate = async () => {
+    try {
+      const res = await api.put(`/users/update/${editingUserId}`, editedUserData);
+      const updatedUser = res.data;
+      setUsers(users.map((u) => (u.id === updatedUser.id ? updatedUser : u)));
+      setEditingUserId(null);
+      setEditedUserData({});
+      setSuccessMsg("✅ Usuario actualizado correctamente.");
+      setErrorMsg("");
+    } catch (err) {
+      console.error(err);
+      const msg = err.response?.data?.message || "❌ Error al actualizar el usuario.";
+      setErrorMsg(msg);
+    }
+  };
+
   const handleDelete = async (id) => {
     if (!window.confirm("¿Estás seguro de que deseas eliminar este usuario?")) return;
-
     try {
       await api.delete(`/users/delete/${id}`);
       setUsers(users.filter((u) => u.id !== id));
@@ -77,6 +101,8 @@ const UserList = () => {
               <th>Nombre</th>
               <th>Apellido</th>
               <th>Email</th>
+              <th>Teléfono</th>
+              <th>Dirección</th>
               <th>Rol</th>
               <th>Estado</th>
               <th>Acciones</th>
@@ -85,15 +111,40 @@ const UserList = () => {
           <tbody>
             {users.map((user) => (
               <tr key={user.id}>
-                <td>{user.name}</td>
-                <td>{user.surname}</td>
-                <td>{user.email}</td>
-                <td>{formatRoleName(user.roleName)}</td>
-                <td>{user.status}</td>
-                <td>
-                  <button className="edit-btn" onClick={() => alert("✏️ Edición no implementada")}>✏️</button>
-                  <button className="delete-btn" onClick={() => handleDelete(user.id)}>🗑️</button>
-                </td>
+                {editingUserId === user.id ? (
+                  <>
+                    <td><input name="name" value={editedUserData.name} onChange={handleEditChange} /></td>
+                    <td><input name="surname" value={editedUserData.surname} onChange={handleEditChange} /></td>
+                    <td><input name="email" value={editedUserData.email} onChange={handleEditChange} /></td>
+                    <td><input name="phoneNumber" value={editedUserData.phoneNumber} onChange={handleEditChange} /></td>
+                    <td><input name="address" value={editedUserData.address} onChange={handleEditChange} /></td>
+                    <td>{formatRoleName(user.roleName)}</td>
+                    <td>
+                      <select name="status" value={editedUserData.status} onChange={handleEditChange}>
+                        <option value="ACTIVE">Activo</option>
+                        <option value="INACTIVE">Inactivo</option>
+                      </select>
+                    </td>
+                    <td>
+                      <button className="edit-btn" onClick={handleConfirmUpdate}>✅</button>
+                      <button className="delete-btn" onClick={() => setEditingUserId(null)}>❌</button>
+                    </td>
+                  </>
+                ) : (
+                  <>
+                    <td>{user.name}</td>
+                    <td>{user.surname}</td>
+                    <td>{user.email}</td>
+                    <td>{user.phoneNumber}</td>
+                    <td>{user.address}</td>
+                    <td>{formatRoleName(user.roleName)}</td>
+                    <td>{user.status}</td>
+                    <td>
+                      <button className="edit-btn" onClick={() => handleEditClick(user)}>✏️</button>
+                      <button className="delete-btn" onClick={() => handleDelete(user.id)}>🗑️</button>
+                    </td>
+                  </>
+                )}
               </tr>
             ))}
           </tbody>
diff --git a/memberflow-frontend/src/components/styles/ContentArea.css b/memberflow-frontend/src/components/styles/ContentArea.css
index de7cd72..3026abb 100644
--- a/memberflow-frontend/src/components/styles/ContentArea.css
+++ b/memberflow-frontend/src/components/styles/ContentArea.css
@@ -78,7 +78,10 @@ form {
   gap: 15px;
 }
 
-form input, form select {
+form input,
+form select {
+  width: 100%;
+  box-sizing: border-box;
   padding: 14px;
   border-radius: 12px;
   border: 1px solid #dcdde1;
@@ -87,6 +90,7 @@ form input, form select {
   transition: border-color 0.3s;
 }
 
+
 form input:focus, form select:focus {
   border-color: #0984e3;
   background-color: #ffffff;
@@ -212,4 +216,54 @@ ul li button:hover {
   background-color: #27ae60;
 }
 
+.form-column {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.user-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 6px 12px;
+  font-size: 15px;
+  background-color: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.user-checkbox input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: #0984e3;
+  margin: 0;
+}
+
+.user-checkbox:hover {
+  background-color: #f0f4ff;
+}
+
+form textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 14px;
+  border-radius: 12px;
+  border: 1px solid #dcdde1;
+  font-size: 16px;
+  background-color: #f5f6fa;
+  transition: border-color 0.3s;
+  resize: vertical;
+}
+
+form textarea:focus {
+  border-color: #0984e3;
+  background-color: #ffffff;
+  outline: none;
+}
+
+
+