feat(frontend): refonte mobile planning et ameliorations suivi pedagogique [#NEWTS-4]

Fonction PWA et ajout du responsive design

Planning mobile :
- Nouvelle vue DayView avec bandeau semaine scrollable, date picker natif et navigation integree
- ScheduleNavigation converti en drawer overlay sur mobile, sidebar fixe sur desktop
- Suppression double barre navigation mobile, controles deplaces dans DayView
- Date picker natif via label+input sur mobile

Suivi pedagogique :
- Refactorisation page grades avec composant Table partage
- Colonnes stats par periode, absences, actions (Fiche + Evaluer)
- Lien cliquable sur la classe vers SchoolClassManagement

feat(backend): ajout associated_class_id dans StudentByRFCreationSerializer [#NEWTS-4]

UI global :
- Remplacement fleches texte par icones Lucide ChevronDown/ChevronRight
- Pagination conditionnelle sur tous les tableaux plats
- Layout responsive mobile : cartes separees fond transparent
- Table.js : pagination optionnelle, wrapper md uniquement

Front-End/src/components/Calendar/MonthView.js

@@ -75,22 +75,35 @@ const MonthView = ({ onDateClick, onEventClick }) => {
     );
   };
 
+  const dayLabels = [
+    { short: 'L', long: 'Lun' },
+    { short: 'M', long: 'Mar' },
+    { short: 'M', long: 'Mer' },
+    { short: 'J', long: 'Jeu' },
+    { short: 'V', long: 'Ven' },
+    { short: 'S', long: 'Sam' },
+    { short: 'D', long: 'Dim' },
+  ];
+
   return (
-    <div className="h-full flex flex-col border border-gray-200 rounded-lg bg-white">
-      {/* En-tête des jours de la semaine */}
-      <div className="grid grid-cols-7 border-b">
-        {['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].map((day) => (
-          <div
-            key={day}
-            className="p-2 text-center text-sm font-medium text-gray-500"
-          >
-            {day}
-          </div>
-        ))}
-      </div>
-      {/* Grille des jours */}
-      <div className="flex-1 grid grid-cols-7 grid-rows-[repeat(6,1fr)]">
-        {days.map((day) => renderDay(day))}
+    <div className="h-full flex flex-col border border-gray-200 rounded-lg bg-white overflow-x-auto">
+      <div className="min-w-[280px]">
+        {/* En-tête des jours de la semaine */}
+        <div className="grid grid-cols-7 border-b">
+          {dayLabels.map((day, i) => (
+            <div
+              key={i}
+              className="p-1 sm:p-2 text-center text-xs sm:text-sm font-medium text-gray-500"
+            >
+              <span className="sm:hidden">{day.short}</span>
+              <span className="hidden sm:inline">{day.long}</span>
+            </div>
+          ))}
+        </div>
+        {/* Grille des jours */}
+        <div className="grid grid-cols-7 grid-rows-[repeat(6,1fr)]">
+          {days.map((day) => renderDay(day))}
+        </div>
       </div>
     </div>
   );