Fix - Users ajout admintable

client/src/Types/LabelMap.tsx

@@ -1,2 +1,12 @@
 
 export type LabelMap = { [key: string]: string };
+
+export interface AdminTableType {
+    _id: string;
+    email: string;
+    title: string;
+    created_at: Date;
+    updated_at: Date;
+    name: string;
+    roles: string[];
+}

client/src/components/AdminTable/AdminTable.tsx

@@ -22,12 +22,12 @@ import {
 import DeleteIcon from "@mui/icons-material/Delete";
 import SearchIcon from "@mui/icons-material/Search";
 import { QuizTypeShort } from "../../Types/QuizType";
-import { LabelMap } from "../../Types/LabelMap";
+import { LabelMap, AdminTableType } from "../../Types/LabelMap";
 
 
 interface AdminTableProps {
-  data: QuizTypeShort[];
-  onDelete: (row: QuizTypeShort) => void;
+  data: AdminTableType[];
+  onDelete: (row: AdminTableType) => void;
   filterKeys?: string[];
   labelMap?: LabelMap;
 }
@@ -42,7 +42,7 @@ const AdminTable: React.FC<AdminTableProps> = ({
   const [rowsPerPage, setRowsPerPage] = useState<number>(10);
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [openDialog, setOpenDialog] = useState<boolean>(false);
-  const [deleteRow, setDeleteRow] = useState<QuizTypeShort | null>(null);
+  const [deleteRow, setDeleteRow] = useState<AdminTableType | null>(null);
 
   const handleChangePage = (_event: unknown, newPage: number) => {
     setPage(newPage);
@@ -58,7 +58,7 @@ const AdminTable: React.FC<AdminTableProps> = ({
     setPage(0);
   };
 
-  const handleOpenDialog = (row: QuizTypeShort) => {
+  const handleOpenDialog = (row: AdminTableType) => {
     setDeleteRow(row);
     setOpenDialog(true);
   };
@@ -116,12 +116,12 @@ const AdminTable: React.FC<AdminTableProps> = ({
               .map((row, index) => (
                 <TableRow key={row._id} sx={{ backgroundColor: index % 2 === 0 ? "#f9f9f9" : "inherit" }}>
                   {headers.map((key) => {
-                    const value = row[key as keyof QuizTypeShort];
+                    const value = row[key as keyof AdminTableType];
                     let displayValue;
                     if (value instanceof Date) {
-                      displayValue = value.toLocaleDateString("en-GB");
+                      displayValue = value.toLocaleDateString();
                     } else if (value && typeof value === "string" && !isNaN(Date.parse(value))) {
-                      displayValue = new Date(value).toLocaleDateString("en-GB");
+                      displayValue = new Date(value).toLocaleDateString();
                     } else {
                       displayValue = value;
                     }

client/src/pages/Admin/Stats.tsx

@@ -2,13 +2,13 @@ import React, { useState, useEffect } from "react";
 import { Paper, Grid, Typography, CircularProgress, Box, TextField, Accordion, AccordionSummary, AccordionDetails} from "@mui/material";
 import ApiService from '../../services/ApiService';
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { QuizTypeShort } from "../../Types/QuizType";
+import { AdminTableType } from "../../Types/LabelMap/AdminTableType";
 import AdminTable from "../../components/AdminTable/AdminTable";
 
 
 const Users: React.FC = () => {
-  const [quizzes, setQuizzes] = useState<QuizTypeShort[]>([]);
-  const [filteredQuizzes, setFilteredQuizzes] = useState<QuizTypeShort[]>([]);
+  const [quizzes, setQuizzes] = useState<AdminTableType[]>([]);
+  const [filteredQuizzes, setFilteredQuizzes] = useState<AdminTableType[]>([]);
   const [monthlyQuizzes, setMonthlyQuizzes] = useState(0);
   const [totalUsers, setTotalUsers] = useState(0);
   const [loading, setLoading] = useState(true);
@@ -26,7 +26,7 @@ const Users: React.FC = () => {
 
         const currentMonth = new Date().getMonth();
         const currentYear = new Date().getFullYear();
-        const filteredMonthlyQuizzes = data.quizzes.filter((quiz: QuizTypeShort) => {
+        const filteredMonthlyQuizzes = data.quizzes.filter((quiz: AdminTableType) => {
           const quizDate = new Date(quiz.created_at);
           return quizDate.getMonth() === currentMonth && quizDate.getFullYear() === currentYear;
         });
@@ -50,7 +50,7 @@ const Users: React.FC = () => {
     setFilteredQuizzes(filtered);
   }, [emailFilter, dateFilter, quizzes]);
 
-  const handleQuizDelete = (rowToDelete: QuizTypeShort) => {
+  const handleQuizDelete = (rowToDelete: AdminTableType) => {
     setQuizzes((prevData) => prevData.filter((row) => row._id !== rowToDelete._id));
   };
 

client/src/pages/Admin/Users.tsx

@@ -2,15 +2,17 @@ import React, { useState, useEffect } from "react";
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, IconButton } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ApiService from '../../services/ApiService';
-import { UserType } from "../../Types/UserType";
+import { LabelMap, AdminTableType } from "../../Types/LabelMap";
+import AdminTable from "../../components/AdminTable/AdminTable";
 
 const Users: React.FC = () => {
-  const [users, setUsers] = useState<UserType[]>([]);
+  const [users, setUsers] = useState<AdminTableType[]>([]);
 
   useEffect(() => {
     const fetchUsers = async () => {
       try {
         const data = await ApiService.getUsers();
+        console.log(data);
         setUsers(data);
       } catch (error) {
         console.error("Error fetching users:", error);
@@ -19,38 +21,27 @@ const Users: React.FC = () => {
     fetchUsers();
   }, []);
 
-  const handleDelete = (email: string) => {
-    setUsers(users.filter(user => user.email !== email));
+  const handleDelete = (data: AdminTableType) => {
+    setUsers(users.filter(user => user.email !== data.email));
+  };
+
+  
+  const labelMap = {
+    _id: "ID",
+    name: "Enseignant",
+    email: "Courriel",
+    created_at: "Création",
+    roles: "Rôles",
   };
 
   return (
-    <TableContainer component={Paper} className="p-4">
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Nom</TableCell>
-            <TableCell>Courriel</TableCell>
-            <TableCell>Crée</TableCell>
-            <TableCell>Roles</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {users.map((user) => (
-            <TableRow key={user.email}>
-              <TableCell>{user.name}</TableCell>
-              <TableCell>{user.email}</TableCell>
-              <TableCell>{new Date(user.created_at).toLocaleDateString()}</TableCell>
-              <TableCell>{user.roles?.join(", ")}</TableCell>
-              <TableCell>
-                <IconButton onClick={() => handleDelete(user.email)} color="error">
-                  <DeleteIcon />
-                </IconButton>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <AdminTable 
+      data={users} 
+      onDelete={handleDelete} 
+      filterKeys={["_id", "password"]} 
+      labelMap={labelMap}
+    />
+    
   );
 };
 

client/src/services/ApiService.tsx

@@ -5,7 +5,7 @@ import { ENV_VARIABLES } from '../constants';
 import { FolderType } from 'src/Types/FolderType';
 import { QuizType, QuizResponse } from 'src/Types/QuizType';
 import { RoomType } from 'src/Types/RoomType';
-import { UserType } from 'src/Types/UserType';
+import { AdminTableType } from 'src/Types/LabelMap';
 import { ImagesResponse, ImagesParams } from 'src/Types/ImageType';
 
 type ApiResponse = boolean | string;
@@ -1171,7 +1171,7 @@ public async login(email: string, password: string): Promise<any> {
         }
     }
 
-    public async getUsers(): Promise<UserType[]> {
+    public async getUsers(): Promise<AdminTableType[]> {
         try {
 
             const url: string = this.constructRequestUrl(`/admin/getUsers`);