add responsive+ delete inline style

src/components/PendingMembers/PendingMembers.jsx

@@ -1,8 +1,10 @@
-import React, { useState, useEffect } from "react";
+/*import React, { useState, useEffect } from "react";
 import Button from "../ui/button/button";
 import styles from "./PendingMembers.module.css";
 import getInvalidUsers from "../../utils/users/getUserToValidate";
 import getUserById from "../../utils/users/getUserById";
+import validateUser from "../../utils/users/validateUser";
+import deleteUser from "../../utils/users/deleteUser";
 
 function pendingMembers() {
   const [pendingMembers, setPendingMembers] = useState([]);
@@ -30,15 +32,31 @@ function pendingMembers() {
     fetchPendingMembers();
   }, []);
 
-  const handleValidate = async (id) => {
-    console.log(`Valider l'utilisateur ID: ${id}`);
-    setPendingMembers(pendingMembers.filter(member => member.id !== id));
-  };
+const handleReject = async (id) => {
+  const res = await deleteUser(id);
+
+  if (!res.ok) {
+    console.error(res.status, res.data);
+    alert(res.data?.message || "Action refusée");
+    return;
+  }
+
+  setPendingMembers(prev => prev.filter(u => u.id !== id));
+};
+
+const handleValidate = async (id) => {
+  const res = await validateUser(id);
+
+  if (!res.ok) {
+    alert(res.data?.message || "Validation refusée");
+    return;
+  }
+
+  setPendingMembers(prev => prev.filter(u => u.id !== id));
+};
+
+
 
-  const handleReject = async (id) => {
-    console.log(`Refuser l'utilisateur ID: ${id}`);
-    setPendingMembers(pendingMembers.filter(member => member.id !== id));
-  };
 
   if (loading) {
     return <div>Chargement des membres en attente...</div>;
@@ -65,4 +83,103 @@ function pendingMembers() {
     </div>
   );
 }
-export default pendingMembers;
+export default pendingMembers;*/ 
+import React, { useState, useEffect } from "react";
+import Button from "../ui/button/button";
+import styles from "./PendingMembers.module.css";
+
+import getInvalidUsers from "../../utils/users/getUserToValidate";
+import getUserById from "../../utils/users/getUserById";
+import validateUser from "../../utils/users/validateUser";
+import deleteUser from "../../utils/users/deleteUser";
+
+function PendingMembers() {
+  const [pendingMembers, setPendingMembers] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchPendingMembers = async () => {
+      setLoading(true);
+
+      const userIds = await getInvalidUsers();
+
+      if (userIds && userIds.length > 0) {
+        const users = await Promise.all(
+          userIds.map((id) => getUserById(id))
+        );
+        setPendingMembers(users.filter(Boolean));
+      } else {
+        setPendingMembers([]);
+      }
+
+      setLoading(false);
+    };
+
+    fetchPendingMembers();
+  }, []);
+
+  const handleValidate = async (id) => {
+    const ok = await validateUser(id);
+
+    if (!ok) return; 
+
+    setPendingMembers((prev) =>
+      prev.filter((member) => member.id !== id)
+    );
+  };
+
+  const handleReject = async (id) => {
+    const ok = await deleteUser(id);
+
+    if (!ok) return;
+
+    setPendingMembers((prev) =>
+      prev.filter((member) => member.id !== id)
+    );
+  };
+
+  if (loading) {
+    return <div>Chargement des membres en attente...</div>;
+  }
+
+  return (
+    <div className={`${styles.rightBlock} glassCard`}>
+      <h2>Membres en attente de validation</h2>
+
+      <div className={styles.membersContainer}>
+        {pendingMembers.length === 0 && (
+          <p>Aucun membre en attente</p>
+        )}
+
+        {pendingMembers.map((member) => (
+          <div
+            key={member.id}
+            className={`glassCard ${styles.memberCard}`}
+          >
+            <p>
+              {member.name} {member.lastname}
+            </p>
+
+            <div className={styles.buttonGroup}>
+              <Button
+                onClick={() => handleValidate(member.id)}
+                variant="primary"
+              >
+                Valider
+              </Button>
+
+              <Button
+                onClick={() => handleReject(member.id)}
+                variant="danger"
+              >
+                Refuser
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default PendingMembers;