From abfebeb9923393c8af4a05438c3ec750d768d331 Mon Sep 17 00:00:00 2001
From: Eddi3_As <AQ43820@etsmtl.net>
Date: Mon, 17 Mar 2025 20:47:07 -0400
Subject: [PATCH] added filters

---
 client/src/pages/Admin/Stats.tsx | 66 +++++++++++++++++++++++++++++---
 1 file changed, 61 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/Admin/Stats.tsx b/client/src/pages/Admin/Stats.tsx
index 334ecea..8dab712 100644
--- a/client/src/pages/Admin/Stats.tsx
+++ b/client/src/pages/Admin/Stats.tsx
@@ -1,30 +1,39 @@
 import React, { useState, useEffect } from "react";
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, IconButton, Grid, Typography, CircularProgress, Box } from "@mui/material";
+import {
+  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper,
+  IconButton, Grid, Typography, CircularProgress, Box, TextField, Accordion, AccordionSummary, AccordionDetails
+} from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ApiService from '../../services/ApiService';
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { QuizTypeShort } from "../../Types/QuizType";
 
 const Users: React.FC = () => {
   const [quizzes, setQuizzes] = useState<QuizTypeShort[]>([]);
+  const [filteredQuizzes, setFilteredQuizzes] = useState<QuizTypeShort[]>([]);
   const [monthlyQuizzes, setMonthlyQuizzes] = useState(0);
   const [totalUsers, setTotalUsers] = useState(0);
   const [loading, setLoading] = useState(true);
+  const [emailFilter, setEmailFilter] = useState("");
+  const [dateFilter, setDateFilter] = useState("");
+  const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
     const fetchStats = async () => {
       try {
         const data = await ApiService.getStats();
         setQuizzes(data.quizzes);
+        setFilteredQuizzes(data.quizzes);
         setTotalUsers(data.total);
 
         const currentMonth = new Date().getMonth();
         const currentYear = new Date().getFullYear();
-        const filteredQuizzes = data.quizzes.filter((quiz: QuizTypeShort) => {
+        const filteredMonthlyQuizzes = data.quizzes.filter((quiz: QuizTypeShort) => {
           const quizDate = new Date(quiz.created_at);
           return quizDate.getMonth() === currentMonth && quizDate.getFullYear() === currentYear;
         });
 
-        setMonthlyQuizzes(filteredQuizzes.length === 0 ? 10 : 0);
+        setMonthlyQuizzes(filteredMonthlyQuizzes.length === 0 ? 10 : 0);
       } catch (error) {
         console.error("Error fetching quizzes:", error);
       } finally {
@@ -34,6 +43,15 @@ const Users: React.FC = () => {
     fetchStats();
   }, []);
 
+  useEffect(() => {
+    const filtered = quizzes.filter(quiz =>
+      quiz.email.toLowerCase().includes(emailFilter.toLowerCase()) &&
+      ((new Date(quiz.created_at).toLocaleDateString().includes(dateFilter) || 
+      new Date(quiz.updated_at).toLocaleDateString().includes(dateFilter)))
+    );
+    setFilteredQuizzes(filtered);
+  }, [emailFilter, dateFilter, quizzes]);
+
   const handleDelete = (id: string) => {
     setQuizzes(quizzes.filter(quiz => quiz._id !== id));
   };
@@ -80,19 +98,57 @@ const Users: React.FC = () => {
         </Grid>
       </Grid>
 
+      
+      <Accordion expanded={expanded} onChange={() => setExpanded(!expanded)}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="filter-content"
+          id="filter-header"
+        >
+          <Typography variant="h6">Filtres</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={3}>
+              <TextField
+                fullWidth
+                variant="outlined"
+                size="small"
+                placeholder="Filtrer par email"
+                value={emailFilter}
+                onChange={(e) => setEmailFilter(e.target.value)}
+              />
+            </Grid>
+            <Grid item xs={12} sm={3}>
+              <TextField
+                fullWidth
+                variant="outlined"
+                size="small"
+                placeholder="Filtrer par date"
+                value={dateFilter}
+                onChange={(e) => setDateFilter(e.target.value)}
+              />
+            </Grid>
+          </Grid>
+        </AccordionDetails>
+      </Accordion>
+
+
       {/* Table */}
       <TableContainer component={Paper} className="mt-4">
         <Table>
           <TableHead>
             <TableRow>
-              <TableCell>Enseignant</TableCell>
+              <TableCell>
+                Enseignant
+              </TableCell>
               <TableCell>Titre</TableCell>
               <TableCell>Crée</TableCell>
               <TableCell>Modifié</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
-            {quizzes.map((quiz) => (
+            {filteredQuizzes.map((quiz) => (
               <TableRow key={quiz._id}>
                 <TableCell>{quiz.email}</TableCell>
                 <TableCell>{quiz.title}</TableCell>