chore: Initial Commit

feat: Gestion des inscriptions [#1] feat(frontend): Création des vues pour le paramétrage de l'école [#2] feat: Gestion du login [#6] fix: Correction lors de la migration des modèle [#8] feat: Révision du menu principal [#9] feat: Ajout d'un footer [#10] feat: Création des dockers compose pour les environnements de développement et de production [#12] doc(ci): Mise en place de Husky et d'un suivi de version automatique [#14]
2026-01-29 07:53:23 +00:00 · 2024-11-18 10:02:58 +01:00
commit af0cd1c840
228 changed files with 22694 additions and 0 deletions
--- a/Front-End/src/app/[locale]/admin/classes/page.js
+++ b/Front-End/src/app/[locale]/admin/classes/page.js
@ -0,0 +1,49 @@
+'use client'
+import React, { useState, useEffect } from 'react';
+import Table from '@/components/Table';
+import Button from '@/components/Button';
+
+const columns = [
+  { name: 'Nom', transform: (row) => row.Nom },
+  { name: 'Niveau', transform: (row) => row.Niveau },
+  { name: 'Effectif', transform: (row) => row.Effectif },
+];
+
+export default function Page() {
+  const [classes, setClasses] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+
+  useEffect(() => {
+    fetchClasses();
+  }, [currentPage]);
+
+  const fetchClasses = async () => {
+    const fakeData = {
+      classes: [
+        { Nom: 'Classe A', Niveau: '1ère année', Effectif: 30 },
+        { Nom: 'Classe B', Niveau: '2ème année', Effectif: 25 },
+        { Nom: 'Classe C', Niveau: '3ème année', Effectif: 28 },
+      ],
+      totalPages: 3
+    };
+    setClasses(fakeData.classes);
+    setTotalPages(fakeData.totalPages);
+  };
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  const handleCreateClass = () => {
+    console.log('Créer une nouvelle classe');
+  };
+
+  return (
+    <div className='p-8'>
+      <h1 className='heading-section'>Gestion des Classes</h1>
+      <Button text="Créer une nouvelle classe" onClick={handleCreateClass} primary />
+      <Table data={classes} columns={columns} itemsPerPage={5} />
+    </div>
+  );
+}
--- a/Front-End/src/app/[locale]/admin/grades/page.js
+++ b/Front-End/src/app/[locale]/admin/grades/page.js
@ -0,0 +1,10 @@
+'use client'
+import React, { useState, useEffect } from 'react';
+
+export default function Page() {
+return (
+<div className='p-8'>
+    <h1 className='heading-section'>Statistiques</h1>
+  </div>
+);
+}
--- a/Front-End/src/app/[locale]/admin/layout.js
+++ b/Front-End/src/app/[locale]/admin/layout.js
@ -0,0 +1,96 @@
+'use client'
+// src/components/Layout.js
+import React from 'react';
+import Sidebar from '@/components/Sidebar';
+import { usePathname } from 'next/navigation';
+import {useTranslations} from 'next-intl';
+import {
+  Users,
+  Building,
+  Home,
+  Calendar,
+  Settings,
+  FileText,
+  LogOut
+} from 'lucide-react';
+import DropdownMenu from '@/components/DropdownMenu';
+import Logo from '@/components/Logo';
+import {
+  FR_ADMIN_HOME_URL,
+  FR_ADMIN_STUDENT_URL,
+  FR_ADMIN_STRUCTURE_URL,
+  FR_ADMIN_GRADES_URL,
+  FR_ADMIN_PLANNING_URL,
+  FR_ADMIN_SETTINGS_URL
+} from '@/utils/Url';
+
+import { disconnect } from '@/app/lib/actions';
+
+export default function Layout({
+  children,
+}) {
+   const t = useTranslations('sidebar');
+
+  const sidebarItems = {
+    "admin": { "id": "admin", "name": t('dashboard'), "url": FR_ADMIN_HOME_URL, "icon": Home },
+    "students": { "id": "students", "name": t('students'), "url": FR_ADMIN_STUDENT_URL, "icon": Users },
+    "structure": { "id": "structure", "name": t('structure'), "url": FR_ADMIN_STRUCTURE_URL, "icon": Building },
+    "grades": { "id": "grades", "name": t('grades'), "url": FR_ADMIN_GRADES_URL, "icon": FileText },
+    "planning": { "id": "planning", "name": t('planning'), "url": FR_ADMIN_PLANNING_URL, "icon": Calendar },
+    "settings": { "id": "settings", "name": t('settings'), "url": FR_ADMIN_SETTINGS_URL, "icon": Settings }
+  };
+
+  const pathname = usePathname();
+  const currentPage = pathname.split('/').pop();
+
+  const headerTitle = sidebarItems[currentPage]?.name || t('dashboard');
+
+  const softwareName = "N3WT School";
+  const softwareVersion = "v1.0.0";
+
+
+  const dropdownItems = [
+    {
+      label: 'Déconnexion',
+      onClick: disconnect,
+      icon: LogOut,
+    },
+  ];
+
+  return (
+    <>
+      <div className="flex min-h-screen bg-gray-50">
+        <Sidebar currentPage={currentPage} items={Object.values(sidebarItems)} className="h-full" />
+        <div className="flex flex-col flex-1">
+          {/* Header - h-16 = 64px */}
+          <header className="h-16 bg-white border-b border-gray-200 px-8 py-4 flex items-center justify-between z-10">
+            <div className="text-xl font-semibold">{headerTitle}</div>
+            <DropdownMenu
+              buttonContent={<img src="https://i.pravatar.cc/32" alt="Profile" className="w-8 h-8 rounded-full cursor-pointer" />}
+              items={dropdownItems}
+              buttonClassName=""
+              menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded shadow-lg"
+            />
+          </header>
+          {/* Main Content */}
+          <div className="flex-1 flex flex-col">
+            {/* Content avec scroll si nécessaire */}
+            <div className="flex-1 overflow-auto">
+              {children}
+            </div>
+            {/* Footer - h-16 = 64px */}
+            <footer className="h-16 bg-white border-t border-gray-200 px-8 py-4 flex items-center justify-between">
+              <div>
+                <span>&copy; {new Date().getFullYear()} N3WT-INNOV Tous droits réservés.</span>
+                <div>{softwareName} - {softwareVersion}</div>
+              </div>
+              <Logo className="w-8 h-8" />
+            </footer>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+
--- a/Front-End/src/app/[locale]/admin/page.js
+++ b/Front-End/src/app/[locale]/admin/page.js
@ -0,0 +1,143 @@
+
+'use client'
+import React, { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { Users, Clock, CalendarCheck, School, TrendingUp, UserCheck } from 'lucide-react';
+import Loader from '@/components/Loader';
+
+// Composant StatCard pour afficher une statistique
+const StatCard = ({ title, value, icon, change, color = "blue" }) => (
+  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+    <div className="flex justify-between items-start">
+      <div>
+        <h3 className="text-gray-500 text-sm font-medium">{title}</h3>
+        <p className="text-2xl font-semibold mt-1">{value}</p>
+        {change && (
+          <p className={`text-sm ${change > 0 ? 'text-green-500' : 'text-red-500'}`}>
+            {change > 0 ? '+' : ''}{change}% depuis le mois dernier
+          </p>
+        )}
+      </div>
+      <div className={`p-3 rounded-full bg-${color}-100`}>
+        {icon}
+      </div>
+    </div>
+  </div>
+);
+
+// Composant EventCard pour afficher les événements
+const EventCard = ({ title, date, description, type }) => (
+  <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4">
+    <div className="flex items-center gap-3">
+      <CalendarCheck className="text-blue-500" size={20} />
+      <div>
+        <h4 className="font-medium">{title}</h4>
+        <p className="text-sm text-gray-500">{date}</p>
+        <p className="text-sm mt-1">{description}</p>
+      </div>
+    </div>
+  </div>
+);
+
+export default function DashboardPage() {
+  const t = useTranslations('dashboard');
+  const [isLoading, setIsLoading] = useState(true);
+  const [stats, setStats] = useState({
+    totalStudents: 0,
+    averageInscriptionTime: 0,
+    reInscriptionRate: 0,
+    structureCapacity: 0,
+    upcomingEvents: [],
+    monthlyStats: {
+      inscriptions: [],
+      completionRate: 0
+    }
+  });
+
+  useEffect(() => {
+    // Simulation de chargement des données
+    setTimeout(() => {
+      setStats({
+        totalStudents: 245,
+        averageInscriptionTime: 3.5,
+        reInscriptionRate: 85,
+        structureCapacity: 300,
+        upcomingEvents: [
+          {
+            title: "Réunion de rentrée",
+            date: "2024-09-01",
+            description: "Présentation de l'année scolaire",
+            type: "meeting"
+          },
+          {
+            title: "Date limite inscriptions",
+            date: "2024-08-15",
+            description: "Clôture des inscriptions",
+            type: "deadline"
+          }
+        ],
+        monthlyStats: {
+          inscriptions: [150, 180, 210, 245],
+          completionRate: 78
+        }
+      });
+      setIsLoading(false);
+    }, 1000);
+  }, []);
+
+  if (isLoading) return <Loader />;
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-6">{t('dashboard')}</h1>
+
+      {/* Statistiques principales */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <StatCard
+          title={t('totalStudents')}
+          value={stats.totalStudents}
+          icon={<Users className="text-blue-500" size={24} />}
+          change={12}
+        />
+        <StatCard
+          title={t('averageInscriptionTime')}
+          value={`${stats.averageInscriptionTime} jours`}
+          icon={<Clock className="text-green-500" size={24} />}
+          color="green"
+        />
+        <StatCard
+          title={t('reInscriptionRate')}
+          value={`${stats.reInscriptionRate}%`}
+          icon={<UserCheck className="text-purple-500" size={24} />}
+          color="purple"
+        />
+        <StatCard
+          title={t('structureCapacity')}
+          value={`${(stats.totalStudents/stats.structureCapacity * 100).toFixed(1)}%`}
+          icon={<School className="text-orange-500" size={24} />}
+          color="orange"
+        />
+      </div>
+
+      {/* Événements et KPIs */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Graphique des inscriptions */}
+        <div className="lg:col-span-2 bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+          <h2 className="text-lg font-semibold mb-4">{t('inscriptionTrends')}</h2>
+          {/* Insérer ici un composant de graphique */}
+          <div className="h-64 bg-gray-50 rounded flex items-center justify-center">
+            <TrendingUp size={48} className="text-gray-300" />
+          </div>
+        </div>
+
+        {/* Événements à venir */}
+        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+          <h2 className="text-lg font-semibold mb-4">{t('upcomingEvents')}</h2>
+          {stats.upcomingEvents.map((event, index) => (
+            <EventCard key={index} {...event} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/Front-End/src/app/[locale]/admin/planning/page.js
+++ b/Front-End/src/app/[locale]/admin/planning/page.js
@ -0,0 +1,65 @@
+'use client'
+import { PlanningProvider } from '@/context/PlanningContext';
+import Calendar from '@/components/Calendar';
+import EventModal from '@/components/EventModal';
+import ScheduleNavigation from '@/components/ScheduleNavigation';
+import { useState } from 'react';
+
+export default function Page() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [eventData, setEventData] = useState({
+    title: '',
+    description: '',
+    start: '',
+    end: '',
+    location: '',
+    scheduleId: '', // Enlever la valeur par défaut ici
+    recurrence: 'none',
+    selectedDays: [],
+    recurrenceEnd: '',
+    customInterval: 1,
+    customUnit: 'days',
+    viewType: 'week' // Ajouter la vue semaine par défaut
+  });
+
+  const initializeNewEvent = (date = new Date()) => {
+    // S'assurer que date est un objet Date valide
+    const eventDate = date instanceof Date ? date : new Date();
+
+    setEventData({
+      title: '',
+      description: '',
+      start: eventDate.toISOString(),
+      end: new Date(eventDate.getTime() + 2 * 60 * 60 * 1000).toISOString(),
+      location: '',
+      scheduleId: '', // Ne pas définir de valeur par défaut ici non plus
+      recurrence: 'none',
+      selectedDays: [],
+      recurrenceEnd: '',
+      customInterval: 1,
+      customUnit: 'days'
+    });
+    setIsModalOpen(true);
+  };
+
+  return (
+    <PlanningProvider>
+      <div className="flex h-full overflow-hidden">
+        <ScheduleNavigation />
+        <Calendar
+          onDateClick={initializeNewEvent}
+          onEventClick={(event) => {
+            setEventData(event);
+            setIsModalOpen(true);
+          }}
+        />
+        <EventModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          eventData={eventData}
+          setEventData={setEventData}
+        />
+      </div>
+    </PlanningProvider>
+  );
+}
--- a/Front-End/src/app/[locale]/admin/settings/page.js
+++ b/Front-End/src/app/[locale]/admin/settings/page.js
@ -0,0 +1,105 @@
+'use client'
+import React, { useState } from 'react';
+import Tab from '@/components/Tab';
+import TabContent from '@/components/TabContent';
+import Button from '@/components/Button';
+import InputText from '@/components/InputText';
+
+export default function SettingsPage() {
+  const [activeTab, setActiveTab] = useState('structure');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [smtpServer, setSmtpServer] = useState('');
+  const [smtpPort, setSmtpPort] = useState('');
+  const [smtpUser, setSmtpUser] = useState('');
+  const [smtpPassword, setSmtpPassword] = useState('');
+
+  const handleTabClick = (tab) => {
+    setActiveTab(tab);
+  };
+
+  const handleEmailChange = (e) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e) => {
+    setPassword(e.target.value);
+  };
+
+  const handleConfirmPasswordChange = (e) => {
+    setConfirmPassword(e.target.value);
+  };
+
+  const handleSmtpServerChange = (e) => {
+    setSmtpServer(e.target.value);
+  };
+
+  const handleSmtpPortChange = (e) => {
+    setSmtpPort(e.target.value);
+  };
+
+  const handleSmtpUserChange = (e) => {
+    setSmtpUser(e.target.value);
+  };
+
+  const handleSmtpPasswordChange = (e) => {
+    setSmtpPassword(e.target.value);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      alert('Les mots de passe ne correspondent pas');
+      return;
+    }
+    // Logique pour mettre à jour l'email et le mot de passe
+    console.log('Email:', email);
+    console.log('Password:', password);
+  };
+
+  const handleSmtpSubmit = (e) => {
+    e.preventDefault();
+    // Logique pour mettre à jour les paramètres SMTP
+    console.log('SMTP Server:', smtpServer);
+    console.log('SMTP Port:', smtpPort);
+    console.log('SMTP User:', smtpUser);
+    console.log('SMTP Password:', smtpPassword);
+  };
+
+  return (
+    <div className="p-8">
+      <div className="flex space-x-4 mb-4">
+        <Tab
+          text="Informations de la structure"
+          active={activeTab === 'structure'}
+          onClick={() => handleTabClick('structure')}
+        />
+        <Tab
+          text="Paramètres SMTP"
+          active={activeTab === 'smtp'}
+          onClick={() => handleTabClick('smtp')}
+        />
+      </div>
+      <div className="mt-4">
+        <TabContent isActive={activeTab === 'structure'}>
+          <form onSubmit={handleSubmit}>
+            <InputText label="Email" value={email} onChange={handleEmailChange} />
+            <InputText label="Mot de passe" type="password" value={password} onChange={handlePasswordChange} />
+            <InputText label="Confirmer le mot de passe" type="password" value={confirmPassword} onChange={handleConfirmPasswordChange} />
+            <Button type="submit" primary text="Mettre à jour"></Button>
+          </form>
+        </TabContent>
+        <TabContent isActive={activeTab === 'smtp'}>
+          <form onSubmit={handleSmtpSubmit}>
+            <InputText label="Serveur SMTP" value={smtpServer} onChange={handleSmtpServerChange} />
+            <InputText label="Port SMTP" value={smtpPort} onChange={handleSmtpPortChange} />
+            <InputText label="Utilisateur SMTP" value={smtpUser} onChange={handleSmtpUserChange} />
+            <InputText label="Mot de passe SMTP" type="password" value={smtpPassword} onChange={handleSmtpPasswordChange} />
+            <Button type="submit" primary text="Mettre à jour"></Button>
+          </form>
+        </TabContent>
+      </div>
+    </div>
+  );
+}
--- a/Front-End/src/app/[locale]/admin/structure/page.js
+++ b/Front-End/src/app/[locale]/admin/structure/page.js
@ -0,0 +1,159 @@
+'use client'
+import React, { useState, useEffect } from 'react';
+import Table from '@/components/Table';
+import SpecialitiesSection from '@/components/SpecialitiesSection'
+import ClassesSection from '@/components/ClassesSection'
+import TeachersSection from '@/components/TeachersSection';
+import { User, School } from 'lucide-react'
+import { BK_GESTIONINSCRIPTION_SPECIALITES_URL, 
+  BK_GESTIONINSCRIPTION_CLASSES_URL,
+  BK_GESTIONINSCRIPTION_SPECIALITE_URL,
+  BK_GESTIONINSCRIPTION_CLASSE_URL,
+  BK_GESTIONINSCRIPTION_TEACHERS_URL,
+  BK_GESTIONINSCRIPTION_TEACHER_URL } from '@/utils/Url';
+import DjangoCSRFToken from '@/components/DjangoCSRFToken'
+import useCsrfToken from '@/hooks/useCsrfToken';
+
+export default function Page() {
+  const [specialities, setSpecialities] = useState([]);
+  const [classes, setClasses] = useState([]);
+  const [teachers, setTeachers] = useState([]);
+
+  const csrfToken = useCsrfToken();
+
+  useEffect(() => {
+    // Fetch data for specialities
+    fetchSpecialities();
+
+    // Fetch data for teachers
+    fetchTeachers();
+
+    // Fetch data for classes
+    fetchClasses();
+  }, []);
+
+  const fetchSpecialities = () => {
+    fetch(`${BK_GESTIONINSCRIPTION_SPECIALITES_URL}`)
+      .then(response => response.json())
+      .then(data => {
+        setSpecialities(data);
+      })
+      .catch(error => {
+        console.error('Error fetching specialities:', error);
+      });
+  };
+
+  const fetchTeachers = () => {
+    fetch(`${BK_GESTIONINSCRIPTION_TEACHERS_URL}`)
+      .then(response => response.json())
+      .then(data => {
+        setTeachers(data);
+      })
+      .catch(error => {
+        console.error('Error fetching teachers:', error);
+      });
+  };
+
+  const fetchClasses = () => {
+    fetch(`${BK_GESTIONINSCRIPTION_CLASSES_URL}`)
+      .then(response => response.json())
+      .then(data => {
+        setClasses(data);
+      })
+      .catch(error => {
+        console.error('Error fetching classes:', error);
+      });
+  };
+
+  const handleCreate = (url, newData, setDatas) => {
+    console.log('SEND POST :', JSON.stringify(newData));
+    fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRFToken': csrfToken
+      },
+      body: JSON.stringify(newData),
+      credentials: 'include'
+    })
+    .then(response => response.json())
+    .then(data => {
+      console.log('Succes :', data);
+      setDatas(prevState => [...prevState, data]);
+    })
+    .catch(error => {
+      console.error('Erreur :', error);
+    });
+  };
+
+  const handleEdit = (url, id, updatedData, setDatas) => {
+    fetch(`${url}/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRFToken': csrfToken
+      },
+      body: JSON.stringify(updatedData),
+      credentials: 'include'
+    })
+    .then(response => response.json())
+    .then(data => {
+      setDatas(prevState => prevState.map(item => item.id === id ? data : item));
+    })
+    .catch(error => {
+      console.error('Erreur :', error);
+    });
+  };
+
+  const handleDelete = (url, id, setDatas) => {
+    fetch(`${url}/${id}`, {
+        method:'DELETE',
+        headers: {
+            'Content-Type':'application/json', 
+            'X-CSRFToken': csrfToken
+        },
+        credentials: 'include'
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log('Success:', data);
+        setDatas(prevState => prevState.filter(item => item.id !== id));
+    })
+    .catch(error => {
+        console.error('Error fetching data:', error);
+        error = error.errorMessage;
+        console.log(error);
+    });
+  };
+
+  return (
+    <div className='p-8'>
+      <DjangoCSRFToken csrfToken={csrfToken} />
+
+      <SpecialitiesSection 
+        specialities={specialities} 
+        setSpecialities={setSpecialities}
+        handleCreate={(newData) => handleCreate(`${BK_GESTIONINSCRIPTION_SPECIALITE_URL}`, newData, setSpecialities)}
+        handleEdit={(id, updatedData) => handleEdit(`${BK_GESTIONINSCRIPTION_SPECIALITE_URL}`, id, updatedData, setSpecialities)}
+        handleDelete={(id) => handleDelete(`${BK_GESTIONINSCRIPTION_SPECIALITE_URL}`, id, setSpecialities)}
+      />
+
+      <TeachersSection
+        teachers={teachers}
+        specialities={specialities}
+        handleCreate={(newData) => handleCreate(`${BK_GESTIONINSCRIPTION_TEACHER_URL}`, newData, setTeachers)}
+        handleEdit={(id, updatedData) => handleEdit(`${BK_GESTIONINSCRIPTION_TEACHER_URL}`, id, updatedData, setTeachers)}
+        handleDelete={(id) => handleDelete(`${BK_GESTIONINSCRIPTION_TEACHER_URL}`, id, setTeachers)}
+      />
+
+      <ClassesSection 
+        classes={classes} 
+        specialities={specialities}
+        teachers={teachers}
+        handleCreate={(newData) => handleCreate(`${BK_GESTIONINSCRIPTION_CLASSE_URL}`, newData, setClasses)}
+        handleEdit={(id, updatedData) => handleEdit(`${BK_GESTIONINSCRIPTION_CLASSE_URL}`, id, updatedData, setClasses)}
+        handleDelete={(id) => handleDelete(`${BK_GESTIONINSCRIPTION_CLASSE_URL}`, id, setClasses)}
+      />
+    </div>
+  );
+};
--- a/Front-End/src/app/[locale]/admin/students/editInscription/page.js
+++ b/Front-End/src/app/[locale]/admin/students/editInscription/page.js
@ -0,0 +1,91 @@
+'use client'
+import React, { useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import InscriptionFormShared from '@/components/Inscription/InscriptionFormShared';
+import { FR_ADMIN_STUDENT_URL,
+    BK_GESTIONINSCRIPTION_ELEVE_URL,
+    BK_GESTIONINSCRIPTION_FICHEINSCRIPTION_URL } from '@/utils/Url';
+import useCsrfToken from '@/hooks/useCsrfToken';
+import { mockStudent } from '@/data/mockStudent';
+
+const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
+
+export default function Page() {
+    const searchParams = useSearchParams();
+    const idProfil = searchParams.get('id');
+    const idEleve = searchParams.get('idEleve');  // Changé de codeDI à idEleve
+
+    const [initialData, setInitialData] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const csrfToken = useCsrfToken();
+
+    useEffect(() => {
+        if (useFakeData) {
+            setInitialData(mockStudent);
+            setIsLoading(false);
+        } else {
+            fetch(`${BK_GESTIONINSCRIPTION_ELEVE_URL}/${idEleve}`)  // Utilisation de idEleve au lieu de codeDI
+                .then(response => response.json())
+                .then(data => {
+                    console.log('Fetched data:', data);  // Pour le débogage
+                    const formattedData = {
+                        id: data.id,
+                        nom: data.nom,
+                        prenom: data.prenom,
+                        adresse: data.adresse,
+                        dateNaissance: data.dateNaissance,
+                        lieuNaissance: data.lieuNaissance,
+                        codePostalNaissance: data.codePostalNaissance,
+                        nationalite: data.nationalite,
+                        medecinTraitant: data.medecinTraitant,
+                        niveau: data.niveau,
+                        responsables: data.responsables || []
+                    };
+                    setInitialData(formattedData);
+                    setIsLoading(false);
+                })
+                .catch(error => {
+                    console.error('Error fetching student data:', error);
+                    setIsLoading(false);
+                });
+        }
+    }, [idEleve]);  // Dépendance changée à idEleve
+
+    const handleSubmit = async (data) => {
+        if (useFakeData) {
+            console.log('Fake submit:', data);
+            return;
+        }
+
+        try {
+            const response = await fetch(`${BK_GESTIONINSCRIPTION_FICHEINSCRIPTION_URL}/${idEleve}`, {  // Utilisation de idEleve
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrfToken
+                },
+                credentials: 'include',
+                body: JSON.stringify(data),
+
+            });
+
+            const result = await response.json();
+            console.log('Success:', result);
+            // Redirection après succès
+            window.location.href = FR_ADMIN_STUDENT_URL;
+        } catch (error) {
+            console.error('Error:', error);
+            alert('Une erreur est survenue lors de la mise à jour des données');
+        }
+    };
+
+    return (
+        <InscriptionFormShared
+            initialData={initialData}
+            csrfToken={csrfToken}
+            onSubmit={handleSubmit}
+            cancelUrl={FR_ADMIN_STUDENT_URL}
+            isLoading={isLoading}
+        />
+    );
+}
--- a/Front-End/src/app/[locale]/admin/students/page.js
+++ b/Front-End/src/app/[locale]/admin/students/page.js
@ -0,0 +1,334 @@
+'use client'
+import React, { useState, useEffect } from 'react';
+import Table from '@/components/Table';
+import {mockFicheInscription} from '@/data/mockFicheInscription';
+import Tab from '@/components/Tab';
+import { useTranslations } from 'next-intl';
+import StatusLabel  from '@/components/StatusLabel';
+import { Search } from 'lucide-react';
+import Popup from '@/components/Popup';
+import Loader from '@/components/Loader';
+import AlertWithModal from '@/components/AlertWithModal';
+import Button from '@/components/Button';
+import DropdownMenu from "@/components/DropdownMenu";
+import { swapFormatDate } from '@/utils/Date';
+import { formatPhoneNumber } from '@/utils/Telephone';
+import { MoreVertical, Send, Edit, Trash2, FileText, ChevronUp, UserPlus } from 'lucide-react';
+import Modal from '@/components/Modal';
+import InscriptionForm from '@/components/Inscription/InscriptionForm'
+
+import { BK_GESTIONINSCRIPTION_FICHESINSCRIPTION_URL, BK_GESTIONINSCRIPTION_SEND_URL, FR_ADMIN_STUDENT_EDIT_SUBSCRIBE, BK_GESTIONINSCRIPTION_ARCHIVE_URL } from '@/utils/Url';
+
+const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
+
+export default function Page({ params: { locale } }) {
+  const t = useTranslations('students');
+  const [ficheInscriptions, setFicheInscriptions] = useState([]);
+  const [ficheInscriptionsData, setFicheInscriptionsData] = useState([]);
+  const [fichesInscriptionsDataArchivees, setFicheInscriptionsDataArchivees] = useState([]);
+  // const [filter, setFilter] = useState('*');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [alertPage, setAlertPage] = useState(false);
+  const [mailSent, setMailSent] = useState(false);
+  const [ficheArchivee, setFicheArchivee] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [popup, setPopup] = useState({ visible: false, message: '', onConfirm: null });
+  const [activeTab, setActiveTab] = useState('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalStudents, setTotalStudents] = useState(0);
+  const [totalArchives, setTotalArchives] = useState(0);
+  const [itemsPerPage, setItemsPerPage] = useState(5); // Définir le nombre d'éléments par page
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openModal = () => {
+    setIsOpen(true);
+  }
+
+  // Modifier la fonction fetchData pour inclure le terme de recherche
+  const fetchData = (page, pageSize, search = '') => {
+    const url = `${BK_GESTIONINSCRIPTION_FICHESINSCRIPTION_URL}/all?page=${page}&page_size=${pageSize}&search=${search}`;
+    fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }).then(response => response.json())
+      .then(data => {
+        setIsLoading(false);
+        if (data) {
+          const { fichesInscriptions, count } = data;
+          setFicheInscriptionsData(fichesInscriptions);
+          const calculatedTotalPages = Math.ceil(count / pageSize);
+          setTotalStudents(count);
+          setTotalPages(calculatedTotalPages);
+        }
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+        setIsLoading(false);
+      });
+  };
+
+  const fetchDataArchived = () => {
+    fetch(`${BK_GESTIONINSCRIPTION_FICHESINSCRIPTION_URL}/archived`, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }).then(response => response.json())
+      .then(data => {
+        setIsLoading(false);
+        if (data) {
+          const { fichesInscriptions, count } = data;
+          setTotalArchives(count);
+          setFicheInscriptionsDataArchivees(fichesInscriptions);
+        }
+        console.log('Success ARCHIVED:', data);
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+        setIsLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    const fetchDataAndSetState = () => {
+      if (!useFakeData) {
+        fetchData(currentPage, itemsPerPage, searchTerm);
+        fetchDataArchived();
+      } else {
+        setTimeout(() => {
+          setFicheInscriptionsData(mockFicheInscription);
+          setIsLoading(false);
+        }, 1000);
+      }
+      setFicheArchivee(false);
+      setMailSent(false);
+    };
+
+    fetchDataAndSetState();
+  }, [mailSent, ficheArchivee, currentPage, itemsPerPage]);
+
+  // Modifier le useEffect pour la recherche
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      fetchData(currentPage, itemsPerPage, searchTerm);
+    }, 500); // Debounce la recherche
+
+    return () => clearTimeout(timeoutId);
+  }, [searchTerm, currentPage, itemsPerPage]);
+
+  const archiveFicheInscription = (id, nom, prenom) => {
+    setPopup({
+      visible: true,
+      message: `Attentions ! \nVous êtes sur le point d'archiver le dossier d'inscription de ${nom} ${prenom}\nÊtes-vous sûr(e) de vouloir poursuivre l'opération ?`,
+      onConfirm: () => {
+        const url = `${BK_GESTIONINSCRIPTION_ARCHIVE_URL}/${id}`;
+        fetch(url, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        }).then(response => response.json())
+          .then(data => {
+            console.log('Success:', data);
+            setFicheInscriptions(ficheInscriptions.filter(fiche => fiche.id !== id));
+            setFicheArchivee(true);
+            alert("Le dossier d'inscription a été correctement archivé");
+          })
+          .catch(error => {
+            console.error('Error archiving data:', error);
+            alert("Erreur lors de l'archivage du dossier d'inscription.\nContactez l'administrateur.");
+          });
+      }
+    });
+  };
+
+  const sendConfirmFicheInscription = (id, nom, prenom) => {
+    setPopup({
+      visible: true,
+      message: `Avertissement ! \nVous êtes sur le point d'envoyer un dossier d'inscription à ${nom} ${prenom}\nÊtes-vous sûr(e) de vouloir poursuivre l'opération ?`,
+      onConfirm: () => {
+        const url = `${BK_GESTIONINSCRIPTION_SEND_URL}/${id}`;
+        fetch(url, {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        }).then(response => response.json())
+          .then(data => {
+            console.log('Success:', data);
+            setMailSent(true);
+          })
+          .catch(error => {
+            console.error('Error fetching data:', error);
+          });
+      }
+    });
+  };
+
+  const updateStatusAction = (id, newStatus) => {
+    console.log('Edit fiche inscription with id:', id);
+  };
+
+  const handleLetterClick = (letter) => {
+    setFilter(letter);
+  };
+
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+
+  const handlePageChange = (newPage) => {
+    setCurrentPage(newPage);
+    fetchData(newPage, itemsPerPage); // Appeler fetchData directement ici
+  };
+
+const columns = [
+  { name: t('studentName'), transform: (row) => row.eleve.nom },
+  { name: t('studentFistName'), transform: (row) => row.eleve.prenom },
+  { name: t('mainContactMail'), transform: (row) => row.eleve.responsables[0].mail },
+  { name: t('phone'), transform: (row) => formatPhoneNumber(row.eleve.responsables[0].telephone) },
+  { name: t('lastUpdateDate'), transform: (row) => swapFormatDate(row.dateMAJ, "DD-MM-YYYY hh:mm:ss", "DD/MM/YYYY hh:mm") },
+  { name: t('registrationFileStatus'), transform: (row) => <StatusLabel etat={row.etat} onChange={(newStatus) => updateStatusAction(row.eleve.id, newStatus)} /> },
+  { name: t('files'), transform: (row) => (
+    <ul>
+      {row.fichiers?.map((fichier, fileIndex) => (
+        <li key={fileIndex} className="flex items-center gap-2">
+          <FileText size={16} />
+          <a href={fichier.url}>{fichier.nom}</a>
+        </li>
+      ))}
+    </ul>
+  ) },
+  { name: 'Actions', transform: (row) => (
+    <DropdownMenu
+      buttonContent={<MoreVertical size={20} className="text-gray-400 hover:text-gray-600" />}
+      items={[
+        ...(row.etat === 1 ? [{
+          label: (
+            <>
+              <Send size={16} className="mr-2" /> Envoyer
+            </>
+          ),
+          onClick: () => sendConfirmFicheInscription(row.eleve.id, row.eleve.nom, row.eleve.prenom),
+        }] : []),
+        ...(row.etat === 1 ? [{
+          label: (
+            <>
+              <Edit size={16} className="mr-2" /> Modifier
+            </>
+          ),
+          onClick: () => window.location.href = `${FR_ADMIN_STUDENT_EDIT_SUBSCRIBE}?idEleve=${row.eleve.id}&id=1`,
+        }] : []),
+        ...(row.etat === 2 ? [{
+          label: (
+            <>
+              <Edit size={16} className="mr-2" /> Modifier
+            </>
+          ),
+          onClick: () => window.location.href = `${FR_ADMIN_STUDENT_EDIT_SUBSCRIBE}?idEleve=${row.eleve.id}&id=1`,
+        }] : []),
+        ...(row.etat !== 6 ? [{
+          label: (
+            <>
+              <Trash2 size={16} className="mr-2 text-red-700" /> Archiver
+            </>
+          ),
+          onClick: () => archiveFicheInscription(row.eleve.id, row.eleve.nom, row.eleve.prenom),
+        }] : []),
+      ]}
+      buttonClassName="text-gray-400 hover:text-gray-600"
+      menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-10 flex flex-col items-center"
+    />
+  ) },
+
+];
+
+  if (isLoading) {
+    return <Loader />;
+  } else {
+    if (ficheInscriptions.length === 0 && fichesInscriptionsDataArchivees.length === 0 && alertPage) {
+      return (
+        <div className='p-8'>
+          <AlertWithModal
+            title={t("information")}
+            message={t("no_records") + " " + t("create_first_record")}
+            buttonText={t("add_button")}
+          />
+        </div>
+      );
+    } else {
+      return (
+        <div className='p-8'>
+          <div className="border-b border-gray-200 mb-6">
+            <div className="flex gap-8">
+              <Tab
+                text={<>
+                  {t('allStudents')}
+                  <span className="ml-2 text-sm text-gray-400">({totalStudents})</span>
+                </>}
+                active={activeTab === 'all'}
+                onClick={() => setActiveTab('all')}
+              />
+              <Tab
+                text={<>
+                  {t('pending')}
+                  <span className="ml-2 text-sm text-gray-400">({12})</span>
+                </>}
+                active={activeTab === 'pending'}
+                onClick={() => setActiveTab('pending')}
+              />
+              <Tab
+                text={<>
+                  {t('archived')}
+                  <span className="ml-2 text-sm text-gray-400">({totalArchives})</span>
+                </>}
+                active={activeTab === 'archived'}
+                onClick={() => setActiveTab('archived')}
+              />
+              <Button text={t("addStudent")} primary onClick={openModal} icon={<UserPlus size={20} />} />
+              <Modal 
+                isOpen={isOpen} 
+                setIsOpen={setIsOpen} 
+                title={"Création d'un nouveau dossier d'inscription"}
+                ContentComponent={InscriptionForm}
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-between items-center mb-6">
+            <div className="relative flex-grow mr-4">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
+              <input
+                type="text"
+                placeholder={t('searchStudent')}
+                className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-md"
+                value={searchTerm}
+                onChange={handleSearchChange}
+              />
+            </div>
+          </div>
+
+          <Table
+            key={`${currentPage}-${searchTerm}`}
+            data={(activeTab === 'all' || activeTab === 'pending') ? ficheInscriptionsData : fichesInscriptionsDataArchivees}
+            columns={columns}
+            itemsPerPage={itemsPerPage}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+          />
+          <Popup
+            visible={popup.visible}
+            message={popup.message}
+            onConfirm={() => {
+              popup.onConfirm();
+              setPopup({ ...popup, visible: false });
+            }}
+            onCancel={() => setPopup({ ...popup, visible: false })}
+          />
+        </div>
+      );
+    }
+  }
+}
--- a/Front-End/src/app/[locale]/admin/teachers/page.js
+++ b/Front-End/src/app/[locale]/admin/teachers/page.js
@ -0,0 +1,23 @@
+'use client'
+import React, { useState, useEffect } from 'react';
+import Button from '@/components/Button';
+import { MoreVertical, Send, Edit, Trash2, FileText, ChevronUp, UserPlus } from 'lucide-react';
+import Modal from '@/components/Modal';
+
+export default function Page() {
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openModal = () => {
+    setIsOpen(true);
+  }
+
+
+return (
+<div className='p-8'>
+
+    <Button text={"addTeacher"} primary onClick={openModal} icon={<UserPlus size={20} />} />
+    <Modal isOpen={isOpen} setIsOpen={setIsOpen} />
+  </div>
+);
+}
--- a/Front-End/src/app/[locale]/page.js
+++ b/Front-End/src/app/[locale]/page.js
@ -0,0 +1,18 @@
+'use client'
+import {useTranslations} from 'next-intl';
+import React from 'react';
+import Button from '@/components/Button';
+import Logo from '@/components/Logo'; // Import du composant Logo
+
+export default function Home() {
+  const t = useTranslations('homePage');
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen py-2">
+      <Logo className="mb-4" /> {/* Ajout du logo */}
+      <h1 className="text-4xl font-bold mb-4">{t('welcomeParents')}</h1>
+      <p className="text-lg mb-8">{t('pleaseLogin')}</p>
+      <Button text={t('loginButton')} primary href="/users/login" />
+    </div>
+  );
+}
--- a/Front-End/src/app/[locale]/parents/editInscription/page.js
+++ b/Front-End/src/app/[locale]/parents/editInscription/page.js
@ -0,0 +1,113 @@
+'use client'
+import React, { useState, useEffect } from 'react';
+import InscriptionFormShared from '@/components/Inscription/InscriptionFormShared';
+import { useSearchParams, redirect, useRouter } from 'next/navigation';
+import useCsrfToken from '@/hooks/useCsrfToken';
+import { FR_PARENTS_HOME_URL,
+    BK_GESTIONINSCRIPTION_ELEVE_URL,
+    BK_GESTIONINSCRIPTION_FICHEINSCRIPTION_URL,
+    BK_GESTIONINSCRIPTION_RECUPEREDERNIER_RESPONSABLE_URL } from '@/utils/Url';
+import { mockStudent } from '@/data/mockStudent';
+
+const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
+
+export default function Page() {
+    const searchParams = useSearchParams();
+    const idProfil = searchParams.get('id');
+    const idEleve = searchParams.get('idEleve');
+    const router = useRouter();
+
+    const [initialData, setInitialData] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const csrfToken = useCsrfToken();
+    const [currentProfil, setCurrentProfil] = useState("");
+    const [lastIdResponsable, setLastIdResponsable] = useState(1);
+
+    useEffect(() => {
+        if (!idEleve || !idProfil) {
+            console.error('Missing idEleve or idProfil');
+            return;
+        }
+
+        if (useFakeData) {
+            setInitialData(mockStudent);
+            setLastIdResponsable(999);
+            setIsLoading(false);
+        } else {
+            Promise.all([
+                // Fetch eleve data
+                fetch(`${BK_GESTIONINSCRIPTION_ELEVE_URL}/${idEleve}`),
+                // Fetch last responsable ID
+                fetch(BK_GESTIONINSCRIPTION_RECUPEREDERNIER_RESPONSABLE_URL)
+            ])
+            .then(async ([eleveResponse, responsableResponse]) => {
+                const eleveData = await eleveResponse.json();
+                const responsableData = await responsableResponse.json();
+
+                const formattedData = {
+                    id: eleveData.id,
+                    nom: eleveData.nom,
+                    prenom: eleveData.prenom,
+                    adresse: eleveData.adresse,
+                    dateNaissance: eleveData.dateNaissance,
+                    lieuNaissance: eleveData.lieuNaissance,
+                    codePostalNaissance: eleveData.codePostalNaissance,
+                    nationalite: eleveData.nationalite,
+                    medecinTraitant: eleveData.medecinTraitant,
+                    niveau: eleveData.niveau,
+                    responsables: eleveData.responsables || []
+                };
+
+                setInitialData(formattedData);
+                setLastIdResponsable(responsableData.lastid);
+
+                let profils = eleveData.profils;
+                const currentProf = profils.find(profil => profil.id === idProfil);
+                if (currentProf) {
+                    setCurrentProfil(currentProf);
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+        }
+    }, [idEleve, idProfil]);
+
+    const handleSubmit = async (data) => {
+        if (useFakeData) {
+            console.log('Fake submit:', data);
+            return;
+        }
+
+        try {
+            const response = await fetch(`${BK_GESTIONINSCRIPTION_FICHEINSCRIPTION_URL}/${idEleve}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrfToken
+                },
+                credentials: 'include',
+                body: JSON.stringify(data),
+            });
+
+            const result = await response.json();
+            console.log('Success:', result);
+            router.push(FR_PARENTS_HOME_URL);
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    };
+
+    return (
+        <InscriptionFormShared
+            initialData={initialData}
+            csrfToken={csrfToken}
+            onSubmit={handleSubmit}
+            cancelUrl={FR_PARENTS_HOME_URL}
+            isLoading={isLoading}
+        />
+    );
+}
--- a/Front-End/src/app/[locale]/parents/layout.js
+++ b/Front-End/src/app/[locale]/parents/layout.js
@ -0,0 +1,92 @@
+'use client'
+// src/components/Layout.js
+import React, { useState, useEffect } from 'react';
+import DropdownMenu from '@/components/DropdownMenu';
+import { useRouter } from 'next/navigation'; // Ajout de l'importation
+import { Bell, User, MessageSquare, LogOut, Settings, Home } from 'lucide-react'; // Ajout de l'importation de l'icône Home
+import Logo from '@/components/Logo'; // Ajout de l'importation du composant Logo
+import { FR_PARENTS_HOME_URL,FR_PARENTS_MESSAGERIE_URL,FR_PARENTS_SETTINGS_URL, BK_GESTIONINSCRIPTION_MESSAGES_URL  } from '@/utils/Url'; // Ajout de l'importation de l'URL de la page d'accueil parent
+import useLocalStorage from '@/hooks/useLocalStorage';
+
+export default function Layout({
+  children,
+}) {
+
+  const router = useRouter(); // Définition de router
+  const [messages, setMessages] = useState([]);
+  const [userId, setUserId] = useLocalStorage("userId", '') ;
+
+
+  useEffect(() => {
+      setUserId(userId);
+      fetch(`${BK_GESTIONINSCRIPTION_MESSAGES_URL}/${userId}`, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }).then(response => response.json())
+        .then(data => {
+          if (data) {
+            setMessages(data);
+          }
+          console.log('Success :', data);
+        })
+        .catch(error => {
+          console.error('Error fetching data:', error);
+        });
+      
+  }, []);
+
+  return (
+    <>
+      <div className="flex flex-col min-h-screen bg-gray-50">
+        {/* Entête */}
+        <header className="bg-white border-b border-gray-200 px-8 py-4 flex items-center justify-between fixed top-0 left-0 right-0 z-10">
+            <div className="flex items-center space-x-2">
+              <Logo className="h-8 w-8" /> {/* Utilisation du composant Logo */}
+
+              <div className="text-xl font-semibold">Accueil</div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <button
+                  className="p-2 rounded-full hover:bg-gray-200"
+                  onClick={() => { router.push(FR_PARENTS_HOME_URL); }} // Utilisation de router pour revenir à l'accueil parent
+                >
+                  <Home />
+              </button>
+
+
+              <div className="relative">
+              <button
+                className="p-2 rounded-full hover:bg-gray-200"
+                onClick={() => { router.push(FR_PARENTS_MESSAGERIE_URL); }} // Utilisation de router
+              >
+                <MessageSquare />
+
+              </button>
+               {messages.length > 0 && (
+                  <span className="absolute top-0 right-0 block h-2 w-2 rounded-full bg-emerald-600"></span>
+                )}
+              </div>
+              <DropdownMenu
+                buttonContent={<User />}
+                items={[
+                  { label: 'Se déconnecter', icon: LogOut, onClick: () => {} },
+                  { label: 'Settings', icon: Settings , onClick: () => { router.push(FR_PARENTS_SETTINGS_URL); } }
+                ]}
+                buttonClassName="p-2 rounded-full hover:bg-gray-200"
+                menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg"
+
+              />
+            </div>
+        </header>
+
+        {/* Content */}
+        <div className="pt-20 p-8 flex-1"> {/* Ajout de flex-1 pour utiliser toute la hauteur disponible */}
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}
+
+
--- a/Front-End/src/app/[locale]/parents/messagerie/page.js
+++ b/Front-End/src/app/[locale]/parents/messagerie/page.js
@ -0,0 +1,106 @@
+'use client'
+import React, { useState, useRef, useEffect } from 'react';
+import { SendHorizontal } from 'lucide-react';
+
+const contacts = [
+  { id: 1, name: 'Facturation', profilePic: 'https://i.pravatar.cc/32' },
+  { id: 2, name: 'Enseignant 1', profilePic: 'https://i.pravatar.cc/32' },
+  { id: 3, name: 'Contact', profilePic: 'https://i.pravatar.cc/32' },
+];
+
+export default function MessageriePage() {
+  const [selectedContact, setSelectedContact] = useState(null);
+  const [messages, setMessages] = useState({});
+  const [newMessage, setNewMessage] = useState('');
+  const messagesEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const handleSendMessage = () => {
+    if (newMessage.trim() && selectedContact) {
+      const contactMessages = messages[selectedContact.id] || [];
+      setMessages({
+        ...messages,
+        [selectedContact.id]: [...contactMessages, { id: contactMessages.length + 1, text: newMessage, date: new Date() }],
+      });
+      setNewMessage('');
+      simulateContactResponse(selectedContact.id);
+    }
+  };
+
+  const handleKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      handleSendMessage();
+    }
+  };
+
+  const simulateContactResponse = (contactId) => {
+    setTimeout(() => {
+      setMessages((prevMessages) => {
+        const contactMessages = prevMessages[contactId] || [];
+        return {
+          ...prevMessages,
+          [contactId]: [...contactMessages, { id: contactMessages.length + 2, text: 'Réponse automatique', isResponse: true, date: new Date() }],
+        };
+      });
+    }, 2000);
+  };
+
+  return (
+    <div className="flex" style={{ height: 'calc(100vh - 128px )' }}> {/* Utilisation de calc pour soustraire la hauteur de l'entête */}
+      <div className="w-1/4 border-r border-gray-200 p-4 overflow-y-auto h-full ">
+        {contacts.map((contact) => (
+          <div
+            key={contact.id}
+            className={`p-2 cursor-pointer ${selectedContact?.id === contact.id ? 'bg-gray-200' : ''}`}
+            onClick={() => setSelectedContact(contact)}
+          >
+            <img src={contact.profilePic} alt={`${contact.name}'s profile`} className="w-8 h-8 rounded-full inline-block mr-2" />
+            {contact.name}
+          </div>
+        ))}
+      </div>
+      <div className="flex-1 flex flex-col h-full">
+        <div className="flex-1 overflow-y-auto p-4 h-full">
+          {selectedContact && (messages[selectedContact.id] || []).map((message) => (
+            <div
+              key={message.id}
+              className={`mb-2 p-2 rounded max-w-xs ${message.isResponse ? 'bg-gray-200 justify-self-end' : 'bg-emerald-200 justify-self-start'}`}
+              style={{ borderRadius: message.isResponse ? '20px 20px 0 20px' : '20px 20px 20px 0', minWidth: '25%' }}
+            >
+              <div className="flex items-center mb-1">
+                <img src={selectedContact.profilePic} alt={`${selectedContact.name}'s profile`} className="w-8 h-8 rounded-full inline-block mr-2" />
+                <span className="text-xs text-gray-600">{selectedContact.name}</span>
+                <span className="text-xs text-gray-400 ml-2">{new Date(message.date).toLocaleTimeString()}</span>
+              </div>
+              {message.text}
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+        <div className="p-4 border-t border-gray-200 flex">
+          <input
+            type="text"
+            value={newMessage}
+            onChange={(e) => setNewMessage(e.target.value)}
+            className="w-full p-2 border border-gray-300 rounded"
+            placeholder="Écrire un message..."
+            onKeyDown={handleKeyPress}
+          />
+          <button
+            onClick={handleSendMessage}
+            className="p-2 bg-emerald-500 text-white rounded mr-2"
+          >
+            <SendHorizontal />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/Front-End/src/app/[locale]/parents/page.js
+++ b/Front-End/src/app/[locale]/parents/page.js
@ -0,0 +1,90 @@
+'use client'
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Table from '@/components/Table';
+import { Edit } from 'lucide-react';
+import  StatusLabel  from '@/components/StatusLabel';
+import useLocalStorage from '@/hooks/useLocalStorage';
+import { BK_GESTIONINSCRIPTION_ENFANTS_URL ,  FR_PARENTS_EDIT_INSCRIPTION_URL } from '@/utils/Url';
+
+export default function ParentHomePage() {
+  const [actions, setActions] = useState([]);
+  const [children, setChildren] = useState([]);
+  const [userId, setUserId] = useLocalStorage("userId", '') ;
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!userId) return;
+
+    const fetchActions = async () => {
+      const response = await fetch('/api/actions');
+      const data = await response.json();
+      setActions(data);
+    };
+
+    const fetchEleves = async () => {
+      const response = await fetch(`${BK_GESTIONINSCRIPTION_ENFANTS_URL}/${userId}`);
+      const data = await response.json();
+      console.log(data);
+
+      setChildren(data);
+    };
+
+    fetchEleves();
+  }, [userId]);
+
+  function handleEdit(eleveId) {
+    // Logique pour éditer le dossier de l'élève
+    console.log(`Edit dossier for eleve id: ${eleveId}`);
+    router.push(`${FR_PARENTS_EDIT_INSCRIPTION_URL}?id=${userId}&idEleve=${eleveId}`);
+  }
+  const actionColumns = [
+    { name: 'Action', transform: (row) => row.action },
+  ];
+
+  const getShadowColor = (etat) => {
+    switch (etat) {
+      case 1:
+        return 'shadow-blue-500'; // Couleur d'ombre plus visible
+      case 2:
+        return 'shadow-orange-500'; // Couleur d'ombre plus visible
+      case 3:
+        return 'shadow-purple-500'; // Couleur d'ombre plus visible
+      case 4:
+        return 'shadow-red-500'; // Couleur d'ombre plus visible
+      case 5:
+        return 'shadow-green-500'; // Couleur d'ombre plus visible
+      case 6:
+        return 'shadow-red-500'; // Couleur d'ombre plus visible
+      default:
+        return 'shadow-green-500'; // Couleur d'ombre plus visible
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <h2 className="text-xl font-semibold mb-4">Dernières actions à effectuer</h2>
+        <Table data={actions} columns={actionColumns} itemsPerPage={5} />
+      </div>
+
+      <div>
+        <h2 className="text-xl font-semibold mb-4">Enfants</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {children.map((child) => (
+            <div key={child.eleve.id} className={`border p-4 rounded shadow ${getShadowColor(child.etat)}`}>
+              <div className="flex justify-between items-center">
+                <h3 className="text-lg font-semibold">{child.eleve.nom} {child.eleve.prenom}</h3>
+                <Edit className="cursor-pointer" onClick={() => handleEdit(child.eleve.id)} />
+              </div>
+                <StatusLabel etat={child.etat } showDropdown={false}/>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+
+}
--- a/Front-End/src/app/[locale]/parents/settings/page.js
+++ b/Front-End/src/app/[locale]/parents/settings/page.js
@ -0,0 +1,74 @@
+'use client'
+import React, { useState } from 'react';
+import Button from '@/components/Button';
+import InputText from '@/components/InputText';
+
+export default function SettingsPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  const handleEmailChange = (e) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e) => {
+    setPassword(e.target.value);
+  };
+
+  const handleConfirmPasswordChange = (e) => {
+    setConfirmPassword(e.target.value);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      alert('Les mots de passe ne correspondent pas');
+      return;
+    }
+    // Logique pour mettre à jour l'email et le mot de passe
+    console.log('Email:', email);
+    console.log('Password:', password);
+  };
+
+  return (
+    <div className="p-4">
+      <h2 className="text-xl mb-4">Paramètres du compte</h2>
+      <form onSubmit={handleSubmit}>
+        <InputText
+          type="email"
+          id="email"
+          label="Email"
+          value={email}
+          onChange={handleEmailChange}
+          required
+        />
+        <InputText
+          type="password"
+          id="password"
+          label="Nouveau mot de passe"
+          value={password}
+          onChange={handlePasswordChange}
+          required
+        />
+        <InputText
+          type="password"
+          id="confirmPassword"
+          label="Confirmer le mot de passe"
+          value={confirmPassword}
+          onChange={handleConfirmPasswordChange}
+          required
+        />
+        <div className="flex items-center justify-between">
+          <Button
+            type="submit"
+            primary
+            text={" Mettre à jour"}
+          />
+
+
+        </div>
+      </form>
+    </div>
+  );
+}
--- a/Front-End/src/app/[locale]/users/login/page.js
+++ b/Front-End/src/app/[locale]/users/login/page.js
@ -0,0 +1,124 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import DjangoCSRFToken from '@/components/DjangoCSRFToken'
+
+import Logo from '@/components/Logo';
+import { useSearchParams, useRouter } from 'next/navigation'
+import InputTextIcon from '@/components/InputTextIcon';
+import Loader from '@/components/Loader'; // Importez le composant Loader
+import Button from '@/components/Button'; // Importez le composant Button
+import { User, KeySquare } from 'lucide-react'; // Importez directement les icônes nécessaires
+import { BK_LOGIN_URL, FR_ADMIN_STUDENT_EDIT_SUBSCRIBE, FR_PARENTS_HOME_URL, FR_USERS_NEW_PASSWORD_URL, FR_USERS_SUBSCRIBE_URL } from '@/utils/Url';
+import useLocalStorage from '@/hooks/useLocalStorage';
+import useCsrfToken from '@/hooks/useCsrfToken';
+const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
+
+export default function Page() {
+    const searchParams = useSearchParams();
+    const [errorMessage, setErrorMessage] = useState("");
+    const [userFieldError,setUserFieldError] = useState("")
+    const [passwordFieldError,setPasswordFieldError] = useState("")
+
+    const [isLoading, setIsLoading] = useState(false);
+
+    const [userId, setUserId] = useLocalStorage("userId", '') ;
+
+    const router = useRouter();
+    const csrfToken = useCsrfToken();
+
+
+    function isOK(data) {
+        return data.errorMessage === ""
+    }
+
+    function handleFormLogin(formData) {
+        if (useFakeData) {
+            // Simuler une réponse réussie
+            const data = {
+                errorFields: {},
+                errorMessage: "",
+                profil: "fakeProfileId"
+            };
+            setUserFieldError("")
+            setPasswordFieldError("")
+            setErrorMessage("")
+            if(isOK(data)){
+                localStorage.setItem('userId', data.profil); // Stocker l'identifiant de l'utilisateur
+                router.push(`${FR_ADMIN_STUDENT_EDIT_SUBSCRIBE}?id=${data.profil}`);
+            } else {
+                if(data.errorFields){
+                    setUserFieldError(data.errorFields.email)
+                    setPasswordFieldError(data.errorFields.password);
+                }
+                if(data.errorMessage){
+                    setErrorMessage(data.errorMessage)
+                }
+            }
+        } else {
+            const request = new Request(
+                `${BK_LOGIN_URL}`,
+                {
+                    method:'POST',
+                    headers: {
+                        'Content-Type':'application/json',
+                        'X-CSRFToken': csrfToken
+                    },
+                    body: JSON.stringify( {
+                        email: formData.get('login'),
+                        password: formData.get('password'),
+                    }),
+                    credentials: 'include',
+                }
+            );
+            fetch(request).then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                setUserFieldError("")
+                setPasswordFieldError("")
+                setErrorMessage("")
+                if(isOK(data)){
+                    localStorage.setItem('userId', data.profil); // Stocker l'identifiant de l'utilisateur
+                    router.push(`${FR_PARENTS_HOME_URL}`);
+                } else {
+                    if(data.errorFields){
+                        setUserFieldError(data.errorFields.email)
+                        setPasswordFieldError(data.errorFields.password);
+                    }
+                    if(data.errorMessage){
+                        setErrorMessage(data.errorMessage)
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+                error = error.message;
+                console.log(error);
+            });
+        }
+    }
+
+    if (isLoading === true) {
+        return <Loader /> // Affichez le composant Loader
+    } else {
+        return <>
+            <div className="container max mx-auto p-4">
+                <div className="flex justify-center mb-4">
+                    <Logo className="h-150 w-150" />
+                </div>
+                <h1 className="text-2xl text-emerald-900 font-bold text-center mb-4">Authentification</h1>
+                <form className="max-w-md mx-auto" onSubmit={(e) => { e.preventDefault(); handleFormLogin(new FormData(e.target)); }}>
+                    <DjangoCSRFToken csrfToken={csrfToken} />
+                    <InputTextIcon name="login" type="text" IconItem={User} label="Identifiant" placeholder="Identifiant" errorMsg={userFieldError} className="w-full" />
+                    <InputTextIcon name="password" type="password" IconItem={KeySquare} label="Mot de passe" placeholder="Mot de passe" errorMsg={passwordFieldError} className="w-full" />
+                    <div className="input-group mb-4">
+                    </div>
+                    <label className="text-red-500">{errorMessage}</label>
+                    <label><a className="float-right text-emerald-900" href={`${FR_USERS_NEW_PASSWORD_URL}`}>Mot de passe oublié ?</a></label>
+                    <div className="form-group-submit mt-4">
+                        <Button text="Se Connecter" className="w-full" primary type="submit" name="connect" />
+                    </div>
+                </form>
+            </div>
+        </>
+    }
+};
--- a/Front-End/src/app/[locale]/users/password/new/page.js
+++ b/Front-End/src/app/[locale]/users/password/new/page.js
@ -0,0 +1,107 @@
+'use client'
+
+import React, { useState, useEffect } from 'react';
+import DjangoCSRFToken from '@/components/DjangoCSRFToken'
+import Logo from '@/components/Logo';
+import { useSearchParams, useRouter } from 'next/navigation';
+import InputTextIcon from '@/components/InputTextIcon';
+import Loader from '@/components/Loader'; // Importez le composant Loader
+import Button from '@/components/Button'; // Importez le composant Button
+import Popup from '@/components/Popup'; // Importez le composant Popup
+import { User } from 'lucide-react'; // Importez directement les icônes nécessaires
+import { BK_NEW_PASSWORD_URL,FR_USERS_LOGIN_URL } from '@/utils/Url';
+import useCsrfToken from '@/hooks/useCsrfToken';
+
+const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
+
+export default function Page() {
+    const searchParams = useSearchParams();
+    const [errorMessage, setErrorMessage] = useState("");
+    const [userFieldError, setUserFieldError] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [popupVisible, setPopupVisible] = useState(false);
+    const [popupMessage, setPopupMessage] = useState("");
+    const [popupConfirmAction, setPopupConfirmAction] = useState(null);
+    const csrfToken = useCsrfToken();
+
+    function validate(formData) {
+        if (useFakeData) {
+            setTimeout(() => {
+                setUserFieldError("");
+                setErrorMessage("");
+                setPopupMessage("Mot de passe réinitialisé avec succès !");
+                setPopupConfirmAction(() => () => setPopupVisible(false));
+                setPopupVisible(true);
+            }, 1000); // Simule un délai de traitement
+        } else {
+            const request = new Request(
+                `${BK_NEW_PASSWORD_URL}`,
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': csrfToken
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify({
+                        email: formData.get('email')
+                    }),
+                }
+            );
+            fetch(request).then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                setUserFieldError("");
+                setErrorMessage("");
+                if (data.errorMessage === "") {
+                    setPopupMessage(data.message);
+                    setPopupConfirmAction(() => () => setPopupVisible(false));
+                    setPopupVisible(true);
+                } else {
+                    if (data.errorFields) {
+                        setUserFieldError(data.errorFields.email);
+                    }
+                    if (data.errorMessage) {
+                        setErrorMessage(data.errorMessage);
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+                error = error.errorMessage;
+                console.log(error);
+            });
+        }
+    }
+
+    if (isLoading === true) {
+        return <Loader /> // Affichez le composant Loader
+    } else {
+        return <>
+            <div className="container max mx-auto p-4">
+                <div className="flex justify-center mb-4">
+                    <Logo className="h-150 w-150" />
+                </div>
+                <h1 className="text-2xl font-bold text-center mb-4">Nouveau Mot de passe</h1>
+                <form className="max-w-md mx-auto" onSubmit={(e) => { e.preventDefault(); validate(new FormData(e.target)); }}>
+                    <DjangoCSRFToken csrfToken={csrfToken} />
+                    <InputTextIcon name="email" type="text" IconItem={User} label="Identifiant" placeholder="Identifiant" errorMsg={userFieldError} className="w-full" />
+                    <p className="text-red-500">{errorMessage}</p>
+                    <div className="form-group-submit mt-4">
+                        <Button text="Réinitialiser" className="w-full" primary type="submit" name="validate" />
+                    </div>
+                </form>
+                <br />
+                <div className='flex justify-center mt-2 max-w-md mx-auto'>
+                    <Button text="Annuler" className="w-full" href={ `${FR_USERS_LOGIN_URL}`} />
+                </div>
+            </div>
+            <Popup
+                visible={popupVisible}
+                message={popupMessage}
+                onConfirm={popupConfirmAction}
+                onCancel={() => setPopupVisible(false)}
+            />
+        </>
+    }
+}
--- a/Front-End/src/app/[locale]/users/password/reset/page.js
+++ b/Front-End/src/app/[locale]/users/password/reset/page.js
@ -0,0 +1,144 @@
+'use client'
+// src/app/pages/subscribe.js
+
+import React, { useState, useEffect } from 'react';
+import DjangoCSRFToken from '@/components/DjangoCSRFToken'
+import Logo from '@/components/Logo';
+import { useSearchParams, useRouter } from 'next/navigation'
+import InputTextIcon from '@/components/InputTextIcon';
+import Loader from '@/components/Loader'; // Importez le composant Loader
+import Button from '@/components/Button'; // Importez le composant Button
+import Popup from '@/components/Popup';
+import { BK_RESET_PASSWORD_URL, FR_USERS_LOGIN_URL } from '@/utils/Url';
+import {  KeySquare } from 'lucide-react'; // Importez directement les icônes nécessaires
+import useCsrfToken from '@/hooks/useCsrfToken';
+
+const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
+
+export default function Page() {
+    const searchParams = useSearchParams();
+    const uuid = searchParams.get('uuid');
+    const [errorMessage, setErrorMessage] = useState("");
+    const [password1FieldError,setPassword1FieldError] = useState("")
+    const [password2FieldError,setPassword2FieldError] = useState("")
+    const [isLoading, setIsLoading] = useState(true);
+    const [popupVisible, setPopupVisible] = useState(false);
+    const [popupMessage, setPopupMessage] = useState("");
+
+    const router = useRouter();
+    const csrfToken = useCsrfToken();
+
+    useEffect(() => {
+        if (useFakeData) {
+            setTimeout(() => {
+                setIsLoading(false);
+            }, 1000);
+        } else {
+            const url= `${BK_RESET_PASSWORD_URL}/${uuid}`;
+            fetch(url, {
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+            }).then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                setIsLoading(true);
+                if(data.errorFields){
+                    setPassword1FieldError(data.errorFields.password1)
+                    setPassword2FieldError(data.errorFields.password2)
+                }
+                if(data.errorMessage){
+                    setErrorMessage(data.errorMessage)
+                }
+                setIsLoading(false);
+            })
+            .catch(error => {
+            console.error('Error fetching data:', error);
+            });
+        }
+      }, []);
+
+    function validate(formData) {
+        if (useFakeData) {
+            setTimeout(() => {
+                setPopupMessage("Mot de passe réinitialisé avec succès");
+                setPopupVisible(true);
+            }, 1000);
+        } else {
+            const request = new Request(
+                `${BK_RESET_PASSWORD_URL}/${uuid}`,
+                {
+                    method:'POST',
+                    headers: {
+                        'Content-Type':'application/json', 
+                        'X-CSRFToken': csrfToken
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify( {
+                        password1: formData.get('password1'),
+                        password2: formData.get('password2'),
+                    }),
+                }
+            );
+            fetch(request).then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                setPassword1FieldError("")
+                setPassword2FieldError("")
+                setErrorMessage("")
+                if(data.errorMessage === ""){
+                    setPopupMessage(data.message);
+                    setPopupVisible(true);
+                } else {
+                    if(data.errorMessage){
+                        setErrorMessage(data.errorMessage);
+                    }
+                    if(data.errorFields){
+                        setPassword1FieldError(data.errorFields.password1)
+                        setPassword2FieldError(data.errorFields.password2)
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+                error = error.errorMessage;
+                console.log(error);
+            });
+        }
+    }
+
+    if (isLoading === true) {
+        return <Loader /> // Affichez le composant Loader
+    } else {
+        return <>
+            <Popup
+                visible={popupVisible}
+                message={popupMessage}
+                onConfirm={() => {
+                    setPopupVisible(false);
+                    router.push(`${FR_USERS_LOGIN_URL}`);
+                }}
+                onCancel={() => setPopupVisible(false)}
+            />
+            <div className="container max mx-auto p-4">
+                <div className="flex justify-center mb-4">
+                    <Logo className="h-150 w-150" />
+                </div>
+                <h1 className="text-2xl font-bold text-center mb-4">Réinitialisation du mot de passe</h1>
+                <form className="max-w-md mx-auto" onSubmit={(e) => { e.preventDefault(); validate(new FormData(e.target)); }}>
+                    <DjangoCSRFToken csrfToken={csrfToken} />
+                    <InputTextIcon name="password1" type="password" IconItem={KeySquare} label="Mot de passe" placeholder="Mot de passe" errorMsg={password1FieldError} className="w-full" />
+                    <InputTextIcon name="password2" type="password" IconItem={KeySquare} label="Confirmation mot de passe" placeholder="Confirmation mot de passe" errorMsg={password2FieldError} className="w-full" />
+                    <label className="text-red-500">{errorMessage}</label>
+                    <div className="form-group-submit mt-4">
+                        <Button text="Enregistrer" className="w-full" primary type="submit" name="validate" />
+                    </div>
+                </form>
+                <br/>
+                <div className="flex justify-center mt-2 max-w-md mx-auto">
+                <Button text="Annuler" className="w-full" href={`${FR_USERS_LOGIN_URL}`} />
+                </div>
+            </div>
+        </>
+    }
+}
--- a/Front-End/src/app/[locale]/users/subscribe/page.js
+++ b/Front-End/src/app/[locale]/users/subscribe/page.js
@ -0,0 +1,180 @@
+'use client'
+// src/app/pages/subscribe.js
+
+import React, { useState, useEffect } from 'react';
+import DjangoCSRFToken from '@/components/DjangoCSRFToken'
+import Logo from '@/components/Logo';
+import { useSearchParams, useRouter } from 'next/navigation'
+import InputTextIcon from '@/components/InputTextIcon';
+import Loader from '@/components/Loader'; // Importez le composant Loader
+import Button from '@/components/Button'; // Importez le composant Button
+import Popup from '@/components/Popup'; // Importez le composant Popup
+import { User, KeySquare } from 'lucide-react'; // Importez directement les icônes nécessaires
+import { BK_REGISTER_URL, FR_USERS_LOGIN_URL  } from '@/utils/Url';
+import useCsrfToken from '@/hooks/useCsrfToken';
+const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
+
+export default function Page() {
+    const searchParams = useSearchParams();
+
+    const [errorMessage, setErrorMessage] = useState("");
+    const [userFieldError,setUserFieldError] = useState("")
+    const [password1FieldError,setPassword1FieldError] = useState("")
+    const [password2FieldError,setPassword2FieldError] = useState("")
+    const [isLoading, setIsLoading] = useState(true);
+    const [popupVisible, setPopupVisible] = useState(false);
+    const [popupMessage, setPopupMessage] = useState("");
+
+    const router = useRouter();
+    const csrfToken = useCsrfToken();
+
+    useEffect(() => {
+        if (useFakeData) {
+            // Simuler une réponse réussie
+            const data = {
+                errorFields: {},
+                errorMessage: ""
+            };
+            setUserFieldError("")
+            setPassword1FieldError("")
+            setPassword2FieldError("")
+            setErrorMessage("")
+            setIsLoading(false);
+        } else {
+            const url= `${BK_REGISTER_URL}`;
+            fetch(url, {
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+              }).then(response => response.json())
+              .then(data => {
+                    console.log('Success:', data);
+                    setUserFieldError("")
+                    setPassword1FieldError("")
+                    setPassword2FieldError("")
+                    setErrorMessage("")
+                    setIsLoading(true);
+                    if(data.errorFields){
+                        setUserFieldError(data.errorFields.email)
+                        setPassword1FieldError(data.errorFields.password1)
+                        setPassword2FieldError(data.errorFields.password2)
+                    }
+                    if(data.errorMessage){
+                        setErrorMessage(data.errorMessage)
+                    }
+                    setIsLoading(false);
+              })
+              .catch(error => {
+                console.error('Error fetching data:', error);
+              });
+        }
+      }, []);
+
+    function isOK(data) {
+        return data.errorMessage === ""
+    }
+
+    function suscribe(formData) {
+        if (useFakeData) {
+            // Simuler une réponse réussie
+            const data = {
+                errorFields: {},
+                errorMessage: ""
+            };
+            setUserFieldError("")
+            setPassword1FieldError("")
+            setPassword2FieldError("")
+            setErrorMessage("")
+            if(isOK(data)){
+                setPopupMessage("Votre compte a été créé avec succès");
+                setPopupVisible(true);
+            } else {
+                if(data.errorMessage){
+                    setErrorMessage(data.errorMessage);
+                }
+                if(data.errorFields){
+                    setUserFieldError(data.errorFields.email)
+                    setPassword1FieldError(data.errorFields.password1)
+                    setPassword2FieldError(data.errorFields.password2)
+                }
+            }
+        } else {
+            const request = new Request(
+                `${BK_REGISTER_URL}`,
+                {
+                    method:'POST',
+                    headers: {
+                        'Content-Type':'application/json', 
+                        'X-CSRFToken': csrfToken
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify( {
+                        email: formData.get('login'),
+                        password1: formData.get('password1'),
+                        password2: formData.get('password2'),
+                    }),
+                }
+            );
+            fetch(request).then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                setUserFieldError("")
+                setPassword1FieldError("")
+                setPassword2FieldError("")
+                setErrorMessage("")
+                if(isOK(data)){
+                    setPopupMessage(data.message);
+                    setPopupVisible(true);
+                } else {
+                    if(data.errorMessage){
+                        setErrorMessage(data.errorMessage);
+                    }
+                    if(data.errorFields){
+                        setUserFieldError(data.errorFields.email)
+                        setPassword1FieldError(data.errorFields.password1)
+                        setPassword2FieldError(data.errorFields.password2)
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+                error = error.errorMessage;
+                console.log(error);
+            });
+        }
+    }
+
+    if (isLoading === true) {
+        return <Loader /> // Affichez le composant Loader
+    } else {
+        return <>
+            <div className="container max mx-auto p-4">
+                <div className="flex justify-center mb-4">
+                    <Logo className="h-150 w-150" />
+                </div>
+                <h1 className="text-2xl font-bold text-center mb-4">Nouveau profil</h1>
+                <form className="max-w-md mx-auto" onSubmit={(e) => { e.preventDefault(); suscribe(new FormData(e.target)); }}>
+                    <DjangoCSRFToken csrfToken={csrfToken} />
+                    <InputTextIcon name="login" type="text" IconItem={User} label="Identifiant" placeholder="Identifiant" errorMsg={userFieldError} className="w-full" />
+                    <InputTextIcon name="password1" type="password" IconItem={KeySquare} label="Mot de passe" placeholder="Mot de passe" errorMsg={password1FieldError} className="w-full" />
+                    <InputTextIcon name="password2" type="password" IconItem={KeySquare} label="Confirmation mot de passe" placeholder="Confirmation mot de passe" errorMsg={password2FieldError} className="w-full" />
+                    <p className="text-red-500">{errorMessage}</p>
+                    <div className="form-group-submit mt-4">
+                        <Button text="Enregistrer" className="w-full" primary type="submit" name="validate" />
+                    </div>
+                </form>
+                        <br/>
+                        <div className='flex justify-center mt-2 max-w-md mx-auto'><Button text="Annuler" className="w-full" onClick={()=>{router.push(`${FR_USERS_LOGIN_URL}`)}} /></div>
+            </div>
+            <Popup
+                visible={popupVisible}
+                message={popupMessage}
+                onConfirm={() => {
+                    setPopupVisible(false);
+                    router.push(`${FR_USERS_LOGIN_URL}`);
+                }}
+                onCancel={() => setPopupVisible(false)}
+            />
+        </>
+    }
+}
--- a/Front-End/src/app/favicon.ico
+++ b/Front-End/src/app/favicon.ico
--- a/Front-End/src/app/favicon.svg
+++ b/Front-End/src/app/favicon.svg
@ -0,0 +1,42 @@
+<svg width="565" height="609" viewBox="0 0 565 609" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M170.999 374.501C167.799 383.301 172.332 402.834 174.999 411.501C189.998 452.002 218.216 463.317 223 464C237 466 238.5 464 246.5 459.5C248.1 451.9 238.333 445 234 443C224 439.8 213.833 431 210 427C246.4 422.6 255.833 416.167 256 413.5C246.8 395.9 213.5 396.834 198 399.501C181.2 372.301 172.999 371.501 170.999 374.501Z" fill="#003625"/>
+<path d="M166 84.5L208 94.5L206 112.5C203 121 196.9 138.5 196.5 140.5C196.1 142.5 174 145.333 163 146.5L112 166.5C96.3333 177.833 64.7 200.8 63.5 202C62.3 203.2 42.3333 237.5 32.5 254.5L23 320L21 389.5C29.8333 416.333 47.7 470.6 48.5 473C49.5 476 66.9995 505.5 65.9995 505.5C65.1995 505.5 92.6662 529.5 106.5 541.5C116.666 549.667 137.4 566.2 139 567C140.6 567.8 156.333 574.667 164 578L221 584.5H247.5L291.5 572.5L341 546L388 490.5L397 475L411.5 447.5L414.5 425L406.5 400L386.5 377.5L366 371L367.5 381L375 402L377 419L367.5 440.5L360.5 456.5L337 475C327.166 480.167 307.5 489.9 307.5 487.5C307.5 484.5 269 494 264 494.5C259 495 231 493 227.5 490.5C224.7 488.5 183 471.667 162.5 463.5L104 282L199 314C219.5 315.5 261.2 318.5 264 318.5C266.8 318.5 275.5 315.5 279.5 314L276 307.5L272.5 299L264 289.5C266.833 288.167 273.9 285.5 279.5 285.5C285.1 285.5 281.833 279.5 279.5 276.5L272.5 266.5L236 261L227.5 248.5V227L264 185L279.5 157.5L288.5 142.5L295 130L307.5 120.5L328 112.5L392.5 103.5L457.5 87.5H476L481 84.5V73L476 60.5L470.5 50C467 47.6667 459.5 42.4 457.5 40C455.5 37.6 449.666 33 447 31H435.5L425.5 19.5L416 16L406 11H392.5L377 16H366.5L314 19.5L264 25.5L199 55L166 84.5Z" fill="#10B981"/>
+<path d="M215 304C195.4 294 147.167 248.5 125.5 227L119.5 230.5C116.5 235.333 110.5 245.3 110.5 246.5C110.5 247.7 109.833 257 109.5 261.5C112 266.167 117.5 276.4 119.5 280C122 284.5 131.5 284.5 142 290C152.5 295.5 171 297 173.5 298C176 299 192 311 194.5 313C196.5 314.6 200.667 313.667 202.5 313L215 304Z" fill="#059669"/>
+<path d="M33.5 381.5C32 386.167 29 396.9 29 402.5V415V427.5C41.1667 449.167 65.9 493 67.5 495C69.5 497.5 84 521 87.5 524.5C91 528 105 542.5 107.5 546C109.5 548.8 124.667 560.833 132 566.5L184.5 575C281.7 595 343 545 361.5 517.5L359.5 511C275.1 571.8 199.333 562.333 172 550C178.4 550 184.333 546.333 186.5 544.5C83.3 509.3 41.5 421.167 33.5 381.5Z" fill="#059669"/>
+<path d="M346 184C315.2 203.2 291.5 245.333 283.5 264C283.5 259.599 239.5 254.166 217.5 252C232.064 267.745 261.219 267.834 273.898 267.992C273.587 267.653 273.741 267.591 274.5 268C274.304 267.997 274.103 267.995 273.898 267.992C274.473 268.621 276.642 270.201 279.5 271.5C283.9 273.5 279.5 278 274.5 276C272.1 276 265.5 279.333 262.5 281H258C250 283.8 229 272.167 219.5 266C167.1 228.8 137.333 222.5 129 224L145.5 214C149.5 210.4 184.5 230.5 201.5 241C205.9 203.4 251 177.333 273 169C251.4 135 283 116.167 301.5 111C308.7 107.4 404.5 96.1665 451.5 90.9997C464.3 86.5997 465.5 92.833 464.5 96.4997C444.9 129.7 377.334 168.666 346 184Z" fill="white"/>
+<path d="M299 33.9991C400.2 9.99913 455.167 48.3325 470 70.4991C471 68.3328 473.1 63.7 473.5 62.5C474 61 467 48.5 466 47C465 45.5 459 43 457.5 42C456 41 449.5 37.5 448 36C446.5 34.5 437 32.4987 436 32.4987C435 32.4987 430 28.4987 428.5 28.4987C427 28.4987 424 22.5 422.5 20.9987C421 19.4974 411.5 15 410.5 14C409.5 13 391.5 13 389 13C387 13 381.167 15.9991 378.5 17.4987C374.833 17.9987 366.9 18.6987 364.5 17.4987C361.5 15.9987 334 17.4987 331.5 17.4987C329 17.4987 300 20.9987 299 20.9987C298 20.9987 273 27.4987 270 28.4987C267.6 29.2987 249.667 31.4987 241 32.4987L188.5 65.9987V70.4991C223.3 46.4995 254 40.499 265 40.4987C250.2 48.8987 242.833 65.332 241 72.4987C255 53.2987 285.5 38.8323 299 33.9991Z" fill="white"/>
+<path d="M273 295.001C268.2 296.601 269.667 300.667 271 302.501C259.001 296.9 259 286.168 260.5 281.502C273.5 276.502 274.5 275.501 275 272.502C275.4 270.102 257.833 270.502 249 271.002C239.8 271.802 224.5 259.335 218 253.002C224 253.002 245.833 256.001 256 257.5C264.8 257.5 278.333 260.833 284 262.5C303.2 218.9 334.667 191 348 182.5C447.6 126.099 466.833 98.9995 464 92.5C466 88.5 454.833 90.8333 449 92.5C379 113.7 318.167 118 296.5 117.5L318.5 107C338.899 107 428.333 82.3333 470.5 70C469.7 44.8 439.834 32.5 425.001 29.5C407.001 11.5 385.834 16 377.501 20.5C341.901 19.3 323.334 21 318.5 22C226.1 32.8 185.333 67.1667 176.5 83C206.1 80.2 220.167 85.8333 223.5 89C213.5 90.6 209.667 99.3333 209 103.5C206.2 108.3 201.5 129.5 199.5 139.5L188.501 145.5C96.9026 141.9 49.001 215.668 36.5 253.002C15.7 329.003 27.8333 401.334 36.5 428C74.9 542.799 158.167 574.5 195 576C276.6 586.8 339.333 541.167 360.5 517L358.5 510C389.7 488.4 403.167 450 406 433.5C410.799 391.9 382.666 377.833 368 376C397.999 417.999 367.834 457.833 349.001 472.5C289.226 524.9 200.428 504 163.5 487C43.5 421 68.1667 314.834 95.5 270.002C95.9 203.203 141 199.834 163.5 206.5C140.7 210.9 125 227 120 234.5C97.2 262.5 125.833 278.5 143 283.001C145 281.8 167.5 290.5 178.5 295.001C179.7 293.001 193 304.501 199.5 310.501L202 309.501C207.6 295.503 218.667 301.334 223.5 306L246 348.5C248.8 360.1 242.167 362 238.5 361.5C225.3 361.9 210.667 337.667 205 325.5L206.5 350C207.7 360 202.333 363.167 199.5 363.5C185.9 363.5 180.833 340.167 180 328.5C182 313.7 173.167 311.667 168.5 312.5C156.1 322.899 153 357.5 153 373.5C157 445.899 206.667 474.333 231 479.5C311.8 500.7 354.334 451.333 365.501 424C369.101 377.2 332.334 364.167 313.5 363.5C329.899 351.1 348.667 350.667 356.001 352C422.401 360 433.001 425.667 430.001 457.5C409.201 575.899 293.667 607.833 238.5 609C96.1 601.4 31.1676 490.5 16.5015 436C-33.0985 282.8 46.1681 182.833 92.0015 152C124.001 130.4 159.668 126.333 173.501 127C185.501 127.8 188.501 122 188.501 119C192.901 106.2 165.668 105.667 151.501 107C134.701 109 134.501 98.1667 136.501 92.5C202.101 14.1 314.501 5.49998 362.501 11C404.501 -15 432.667 12.5 441.501 29.5C481.101 33.1 489.667 60 489.001 73C486.201 106.2 465.834 129.5 456.001 137C449.201 145 419.167 165.333 405.001 174.5L344.001 209L344.501 211C356.501 219 371.501 242.334 377.501 253.002C386.301 251.402 402.167 254.335 409.001 256.002C419.001 260.002 427.167 267.002 430.001 270.002V275.002C429.601 276.202 426.501 277.168 425.001 277.502C422.601 278.702 407.334 273.668 400.001 271.002H398.001V272.502L409.001 281.502C415.801 287.102 420.501 295.835 422.001 299.501C424.001 305.102 422.167 308.501 421.001 309.501C418.201 312.702 414.501 311.501 413.001 310.501L386.001 284.502L385.001 284.002L392.001 303.001C394.001 307.001 394.167 315.335 394.001 319.001C391.201 331.001 384.167 327.001 381.001 323.501L365.501 286.501L365.001 310.501C363.801 318.901 358.501 322.335 356.001 323.001C351.201 323.001 349.334 320.335 349.001 319.001C347.401 316.202 346.667 301.168 346.501 294.001C344.101 286.801 334.834 281.001 330.501 279.001C322.501 274.201 302.167 274.667 293.001 275.501C293.001 279.901 292.334 282.334 292.001 283.001L273 295.001Z" fill="#003625"/>
+<path d="M255 296.5C239.8 285.3 233.667 289.5 232.5 293C226.1 301.8 235.167 312.667 240.5 317C251.3 327 272.667 334.167 282 336.5C295.6 337.3 296 327.833 294.5 323C290.1 316.2 266.333 302.5 255 296.5Z" fill="#003625"/>
+<path d="M283.499 263.5C278.299 258.7 255.999 254.5 245.499 253C241.899 249.401 294.666 208.834 321.499 189L303.499 185.5C331.899 183.5 362.333 153.334 373.999 138.5C417.499 142 460.999 87.5004 462.999 90.5004C464.599 92.9004 464.333 95.1671 463.999 96.0004C448.799 127.2 382.666 165 351.499 180C321.499 194.8 293.666 241.834 283.499 263.5Z" fill="#EEEDE8"/>
+<path d="M201.5 147L198.5 139C191.7 143.8 184.5 143.833 182 144.5C141.6 139.3 104.5 164.5 91 176.5C37.8 218.1 21.6667 289.833 21 320.5C36.6 234.1 88.8333 186.5 112 173.5C135.2 156.3 171.667 153 187 153.5C189.8 153.5 197.833 149.167 201.5 147Z" fill="white"/>
+<path d="M331.248 39C354.848 39.4 364.414 59.5 366.248 69.5C364.081 68.8333 359.848 67.6 360.248 68C360.648 68.4 359.415 72.1667 358.748 74C352.748 89.2 336.582 93 329.248 93C311.248 92.2 303.081 77.3333 301.248 70C298.448 46 320.081 39.3333 331.248 39Z" fill="#003625"/>
+<path d="M310.749 63.4997C316.749 48.2997 331.582 50.1664 338.249 52.9997C325.849 55.7994 323.748 58.4998 324.248 59.5C329.448 70.3 323.748 73.3333 320.249 73.5C311.849 73.5 310.415 66.8331 310.749 63.4997Z" fill="white"/>
+<circle cx="226" cy="107" r="10" fill="#003625"/>
+<circle cx="226" cy="107" r="10" fill="#003625"/>
+<circle cx="432.5" cy="60.5" r="7.5" fill="#003625"/>
+<circle cx="432.5" cy="60.5" r="7.5" fill="#003625"/>
+<circle cx="209" cy="147" r="10" fill="#003625"/>
+<circle cx="209" cy="147" r="10" fill="#003625"/>
+<circle cx="214.5" cy="126.5" r="4.5" fill="#003625"/>
+<circle cx="214.5" cy="126.5" r="4.5" fill="#003625"/>
+<circle cx="220.5" cy="77.5" r="4.5" fill="#003625"/>
+<circle cx="220.5" cy="77.5" r="4.5" fill="#003625"/>
+<circle cx="228.5" cy="59.5" r="4.5" fill="#003625"/>
+<circle cx="228.5" cy="59.5" r="4.5" fill="#003625"/>
+<ellipse cx="213" cy="63.5" rx="3" ry="3.5" fill="#003625"/>
+<ellipse cx="213" cy="63.5" rx="3" ry="3.5" fill="#003625"/>
+<ellipse cx="198.5" cy="74.5" rx="5.5" ry="3.5" fill="#003625"/>
+<ellipse cx="198.5" cy="74.5" rx="5.5" ry="3.5" fill="#003625"/>
+<circle cx="189.5" cy="161.5" r="3.5" fill="#003625"/>
+<circle cx="189.5" cy="161.5" r="3.5" fill="#003625"/>
+<circle cx="169.5" cy="159.5" r="3.5" fill="#003625"/>
+<circle cx="169.5" cy="159.5" r="3.5" fill="#003625"/>
+<circle cx="189.5" cy="161.5" r="4.5" fill="#003625"/>
+<circle cx="189.5" cy="161.5" r="4.5" fill="#003625"/>
+<circle cx="133.5" cy="173.5" r="3.5" fill="#003625"/>
+<circle cx="133.5" cy="173.5" r="3.5" fill="#003625"/>
+<circle cx="117.5" cy="187.5" r="3.5" fill="#003625"/>
+<circle cx="117.5" cy="187.5" r="3.5" fill="#003625"/>
+<circle cx="102.5" cy="186.5" r="3.5" fill="#003625"/>
+<circle cx="102.5" cy="186.5" r="3.5" fill="#003625"/>
+</svg>
--- a/Front-End/src/app/layout.js
+++ b/Front-End/src/app/layout.js
@ -0,0 +1,41 @@
+
+import {NextIntlClientProvider} from 'next-intl';
+import {getMessages} from 'next-intl/server';
+import "@/css/tailwind.css";
+
+
+export const metadata = {
+  title: "N3WT-SCHOOL",
+  description: "Gestion de l'école",
+  icons: {
+    icon: [
+      {
+        url: '/favicon.svg',
+        type: 'image/svg+xml',
+      },
+      {
+        url: '/favicon.ico',  // Fallback pour les anciens navigateurs
+        sizes: 'any',
+      },
+    ],
+  },
+};
+
+export default async function RootLayout({ children, params: {locale}}) {
+
+   // Providing all messages to the client
+  // side is the easiest way to get started
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale}>
+      <body>
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
+
+
--- a/Front-End/src/app/lib/actions.js
+++ b/Front-End/src/app/lib/actions.js
@ -0,0 +1,39 @@
+
+import {
+  BK_LOGIN_URL,
+  FR_USERS_LOGIN_URL ,
+  FR_ADMIN_HOME_URL,
+  FR_ADMIN_STUDENT_URL,
+  FR_ADMIN_CLASSES_URL,
+  FR_ADMIN_GRADES_URL,
+  FR_ADMIN_PLANNING_URL,
+  FR_ADMIN_TEACHERS_URL,
+  FR_ADMIN_SETTINGS_URL
+} from '@/utils/Url';
+
+import  {mockUser}  from "@/data/mockUsersData";
+
+const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
+
+
+/**
+ * Disconnects the user after confirming the action.
+ * If `NEXT_PUBLIC_USE_FAKE_DATA` environment variable is set to 'true', it will log a fake disconnect and redirect to the login URL.
+ * Otherwise, it will send a PUT request to the backend to update the user profile and then redirect to the login URL.
+ *
+ * @function
+ * @name disconnect
+ * @returns {void}
+ */
+export function disconnect () {
+    if (confirm("\nÊtes-vous sûr(e) de vouloir vous déconnecter ?")) {
+
+      if (useFakeData) {
+        console.log('Fake disconnect:', mockUser);
+        router.push(`${FR_USERS_LOGIN_URL}`);
+      } else {
+       console.log('Fake disconnect:', mockUser);
+        router.push(`${FR_USERS_LOGIN_URL}`);
+      }
+    }
+  };
--- a/Front-End/src/app/not-found.js
+++ b/Front-End/src/app/not-found.js
@ -0,0 +1,15 @@
+import Link from 'next/link'
+import Logo from '../components/Logo'
+
+export default function NotFound() {
+  return (
+    <div className='flex items-center justify-center min-h-screen bg-emerald-500'>
+      <div className='text-center p-6 '>
+        <Logo className="w-32 h-32 mx-auto mb-4" />
+        <h2 className='text-2xl font-bold text-emerald-900 mb-4'>404 | Page non trouvée</h2>
+        <p className='text-emerald-900 mb-4'>La ressource que vous souhaitez consulter n'existe pas ou plus.</p>
+        <Link className="text-gray-900 hover:underline" href="/">Retour Accueil</Link>
+      </div>
+    </div>
+  )
+}