add filtre chapitre

frontend/src/components/Admin/ListeCours.jsx

@@ -39,6 +39,19 @@ const ListeCours = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const [assignmentQuery, setAssignmentQuery] = useState("");
   const [showOnlyMedia, setShowOnlyMedia] = useState(false);
+  const [selectedSection, setSelectedSection] = useState(null);
+ 
+  const sectionOptions = pages
+  .reduce((acc, page) => {
+    if (!acc.find((s) => s.section === page.section)) {
+      acc.push({
+        section: page.section,
+        label: page.sectionname || `Chapitre ${page.section}`,
+      });
+    }
+    return acc;
+  }, []);
+
   const [tabIndex, setTabIndex] = useState(0);
   const navigate = useNavigate();
 
@@ -174,7 +187,9 @@ const ListeCours = () => {
       .toLowerCase()
       .includes(searchQuery.toLowerCase());
     const mediaMatch = showOnlyMedia ? pageHasMedia(page.content) : true;
-    return nameMatch && mediaMatch;
+    const sectionMatch =
+      selectedSection === null || page.section === selectedSection;
+    return nameMatch && mediaMatch && sectionMatch;
   });
 
   const filteredAssignments = assignments.filter((assign) =>
@@ -253,6 +268,21 @@ const ListeCours = () => {
             </Tabs>
             {tabIndex === 0 ? (
               <>
+                <Autocomplete
+                  options={sectionOptions}
+                  getOptionLabel={(option) => option.label}
+                  onChange={(e, value) =>
+                    setSelectedSection(value?.section ?? null)
+                  }
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      label="Filtrer par chapitre"
+                      sx={{ mb: 2 }}
+                    />
+                  )}
+                />
+
                 <Autocomplete
                   options={pages.map((p) => p.name)}
                   freeSolo
@@ -271,6 +301,12 @@ const ListeCours = () => {
                   <>
                     {paginatedPages.map((page) => (
                       <Box key={page.id} sx={{ mb: 4 }}>
+                        <Typography
+                          variant="overline"
+                          sx={{ fontWeight: "bold", color: "gray" }}
+                        >
+                          {page.sectionname || `Chapitre ${page.section}`}
+                        </Typography>
                         <Typography variant="h6" sx={{ mb: 1 }}>
                           {page.name}
                         </Typography>
@@ -301,7 +337,6 @@ const ListeCours = () => {
                           >
                             Générer lien public
                           </Button>
-                          
                         </Box>
                         <Divider sx={{ mt: 3 }} />
                       </Box>
@@ -336,11 +371,11 @@ const ListeCours = () => {
                 {filteredAssignments.length > 0 ? (
                   filteredAssignments.map((assign) => (
                     <Box key={assign.id} sx={{ mb: 3 }}>
+                          <Typography variant="overline" sx={{ fontWeight: "bold", color: "gray" }}>
+      {assign.sectionname || `Chapitre ${assign.section}`}
+    </Typography>
                       <Typography variant="h6">{assign.name}</Typography>
-                      <Typography
-                        variant="body2"
-                        sx={{ mb: 1 }}
-                      />
+                      <Typography variant="body2" sx={{ mb: 1 }} />
                       <Button
                         size="small"
                         variant="outlined"
@@ -405,7 +440,7 @@ const ListeCours = () => {
               </Button>
             </Box>
             <Box
-              sx={{margin: "0 auto", paddingBottom: 8 }}
+              sx={{ margin: "0 auto", paddingBottom: 8 }}
               dangerouslySetInnerHTML={{
                 __html:
                   selectedPage?.content || selectedAssignment?.intro || "",