Merge branch 'feat/redesign-user-page' into dev

src/pages/Volunteers/VolunteersPage.module.css

@@ -4,163 +4,102 @@
     padding: 10px;
 }
 
-.usersList {
+.tableWrapper {
-    display: grid;
-    gap: 16px;
     width: 100%;
-    grid-template-columns: 1fr;
+    overflow-x: auto;
+    padding: 8px;
+    border-radius: 16px;
 }
 
-.usersList > * {
+.table {
-    min-width: 0;
-}
-
-.profileboard {
     width: 100%;
-    max-width: 380px; 
+    border-collapse: collapse;
-    display: flex;
+    font-size: 0.95rem;
-    flex-direction: column;
-    gap: 10px;
-    box-sizing: border-box;
-    margin: 1rem 0;
-    padding: 12px 10px;
-    border-radius: 12px;
-}
-.header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
 }
 
-.header h2 {
+.table thead tr {
-    margin: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-    font-size: 1rem;
+}
-    font-weight: bold;
+
+.table th {
+    padding: 16px 20px;
+    text-align: left;
+    font-weight: 600;
+    opacity: 0.7;
+    white-space: nowrap;
+}
+
+.row {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.row:last-child {
+    border-bottom: none;
+}
+
+.row:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.table td {
+    padding: 14px 20px;
+    vertical-align: middle;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: 70%; 
+    max-width: 220px;
 }
 
-.expandButton {
+.avatarCell {
-    width: 30px;
+    width: 52px;
-    height: 30px;
+    padding: 10px 16px !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    background: transparent;
-    border: none;
-    font-size: 16px;
 }
 
-.moreButtonClicked {
+.avatar {
-    transform: rotate(90deg);
+    width: 38px;
-}
+    height: 38px;
-
-.mainContent {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-.basicInfo {
-    flex: 1;
-}
-.expandedContent {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 10px;
-}
-.textInfo {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-.contactInfo {
-    margin-top: 8px;
-}
-.contactInfo p {
-    margin: 4px 0;
-    font-size: 0.9rem;
-}
-.bottomBar {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 10px;
-}
-.profilePictureContainer {
-    width: 100px;
-    height: 100px;
-    margin-bottom: 10px;
-}
-.profilePicture {
-    width: 100%;
-    height: 100%;
     border-radius: 50%;
     object-fit: cover;
-}
+    display: block;
-@keyframes slideInMember {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-@media screen and (min-width: 768px) {
-    .profileboard {
-        max-width: 600px;
-        padding: 16px 12px;
-    }
-    .header h2 {
-        font-size: 1.2rem;
-        max-width: 75%;
-    }
-    .profilePictureContainer {
-        width: 150px;
-        height: 150px;
-        margin-right: 15px;
-    }
-    .expandedContent {
-        flex-direction: row;
-        gap: 15px;
-    }
 }
 
-.loading {
+.actionCell {
-    width: 100%;
+    width: 60px;
-    text-align: center;
+    text-align: right;
-    font-size: 1.1rem;
+}
+
+.viewBtn {
+    font-size: 0.85rem;
+    opacity: 0.6;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.row:hover .viewBtn {
     opacity: 1;
-    color: white;
+}
+
+@media screen and (max-width: 600px) {
+    .container {
+        padding: 6px;
+    }
+
+    .table th:nth-child(4),
+    .table td:nth-child(4),
+    .table th:nth-child(5),
+    .table td:nth-child(5) {
+        display: none;
+    }
 }
 
 @media screen and (min-width: 1024px) {
     .container {
         padding: 20px;
     }
-    .usersList {
+
-        gap: 20px;
+    .tableWrapper {
-        grid-template-columns: repeat(3, 1fr);
+        padding: 0 5em;
-        padding-right: 5em;
-        padding-left: 5em;
-    }
-    .profileboard {
-        max-width: 700px;
-        padding: 20px;
-        flex-direction: column;
-    }
-    .header h2 {
-        font-size: 1.4rem;
-        max-width: 80%;
-    }
-    .expandedContent {
-        flex-direction: row;
-        gap: 20px;
-    }
-    .profilePictureContainer {
-        width: 200px;
-        height: auto;
-    }
-    .contactInfo p {
-        font-size: 1rem;
     }
 }

src/pages/Volunteers/VolunteersPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
 import styles from "./VolunteersPage.module.css";
-import VolunteerCard from "./components/VolunteersCard/VolunteerCard";
 import getAllUser from "../../utils/users/getAllUsers";
 import ToolBar from "../../components/ToolBar/ToolBar";
 import filter from "../../utils/filter";
@@ -14,6 +14,7 @@ interface Filters {
 }
 
 const VolunteerPage: React.FC = () => {
+    const navigate = useNavigate();
     const [filters, setFilters] = useState<Filters>({
         alphabetical: "asc",
         yearOrder: "desc",
@@ -60,6 +61,8 @@ const VolunteerPage: React.FC = () => {
 
     if (loading) return <Loading />;
 
+    const filteredUsers = filter(users, filters, "user") as User[];
+
     return (
         <div className={styles.container}>
             <ToolBar
@@ -68,12 +71,45 @@ const VolunteerPage: React.FC = () => {
                 showCreate={false}
             />
 
-            <div className={styles.usersList}>
+            <div className={`glassCard ${styles.tableWrapper}`}>
-                {filter(users, filters, "user").map((user: User) => (
+                <table className={styles.table}>
-                        <VolunteerCard key={user.id} user={user} />
+                    <thead>
-                ))}
+                        <tr>
+                            <th></th>
+                            <th>Nom</th>
+                            <th>Email</th>
+                            <th>Rôle</th>
+                            <th>Téléphone</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {filteredUsers.map((user: User) => {
+                            const avatar = user.profile_photo_path
+                                ? `${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`
+                                : "/react.svg";
+                            return (
+                                <tr
+                                    key={user.id}
+                                    className={styles.row}
+                                    onClick={() => navigate(`/profile/${user.id}`)}
+                                >
+                                    <td className={styles.avatarCell}>
+                                        <img src={avatar} alt="avatar" className={styles.avatar} />
+                                    </td>
+                                    <td>{user.name} {user.lastname}</td>
+                                    <td>{user.email}</td>
+                                    <td>{user.role}</td>
+                                    <td>{user.phone ?? "/"}</td>
+                                    <td className={styles.actionCell}>
+                                        <span className={styles.viewBtn}>Voir</span>
+                                    </td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
             </div>
-
         </div>
     );
 };