derniere version

database/Models/AnneeScolaire.js

@@ -23,7 +23,7 @@ async function createAnneeScolaire(code, debut, fin) {
 }
 
 /**
- * function to get all année scolaire
+ * function to get all Année Univesitaire
  * @returns promise
  */
 async function getAnneeScolaire() {
@@ -71,13 +71,13 @@ async function deleteAnneeScolaire(id) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année universitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année universitaire supprimé avec succès.'
     }
   } catch (error) {
     return { success: false, error: 'Erreur veullez réeseyer' }
@@ -93,13 +93,13 @@ async function updateAnneeScolaire(id, code, debut, fin) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé ou aucune modification effectuée.'
+        message: 'Année universitaire non trouvé ou aucune modification effectuée.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire mis à jour avec succès.'
+      message: 'Année universitaire mis à jour avec succès.'
     }
   } catch (error) {
     return { success: false, error: 'Erreur veullez réeseyer' }

database/Models/Etudiants.backup.js

@@ -191,7 +191,7 @@ async function updateEtudiant(
 async function getDataToDashboard() {
   const query = database.prepare('SELECT * FROM niveaus')
   const query2 = database.prepare('SELECT * FROM etudiants')
-  const query3 = database.prepare('SELECT DISTINCT annee_scolaire FROM etudiants') // get all année scolaire sans doublan
+  const query3 = database.prepare('SELECT DISTINCT annee_scolaire FROM etudiants') // get all Année Univesitaire sans doublan
 
   try {
     let niveau = query.all()

database/Models/Etudiants.js

@@ -83,7 +83,7 @@ async function getAllEtudiants() {
  * @returns Promise
  */
 async function getSingleEtudiant(id) {
-  const sql = 'SELECT * FROM etudiants WHERE id = ?'
+  const sql = 'SELECT e.*, m.uniter AS mentionUnite FROM etudiants e JOIN mentions m ON e.mention_id = m.id WHERE e.id = ?'
 
   try {
     const [rows] = await pool.query(sql, [id])
@@ -176,13 +176,13 @@ async function updateEtudiant(
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année Univesitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année Univesitaire supprimé avec succès.'
     }
   } catch (error) {
     return error
@@ -197,7 +197,7 @@ async function updateEtudiant(
 async function getDataToDashboard() {
   const query = 'SELECT * FROM niveaus'
   const query2 = 'SELECT * FROM etudiants'
-  const query3 = 'SELECT DISTINCT annee_scolaire FROM etudiants' // get all année scolaire sans doublan
+  const query3 = 'SELECT DISTINCT annee_scolaire FROM etudiants' // get all Année Univesitaire sans doublan
 
   try {
     let [rows] = await pool.query(query)
@@ -222,13 +222,13 @@ async function changePDP(photos, id) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année Univesitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année Univesitaire supprimé avec succès.'
     }
   } catch (error) {
     return error
@@ -244,13 +244,13 @@ async function updateParcours(parcours, id) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année Univesitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année Univesitaire supprimé avec succès.'
     }
   } catch (error) {
     return error
@@ -294,13 +294,13 @@ async function updateTranche(id, tranchename, montant) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année Univesitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année Univesitaire supprimé avec succès.'
     }
   } catch (error) {
     console.log('resultat error:',error);
@@ -317,13 +317,13 @@ async function deleteTranche(id) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année Univesitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année Univesitaire supprimé avec succès.'
     }
   } catch (error) {
     return error

database/Models/Matieres.js

@@ -41,19 +41,19 @@ async function getMatiere() {
     return { success: false, error: 'Erreur veullez réeseyer' + error }
   }
 }
-
 async function displayMatiereFromForm(niveau, mention_id, parcours) {
-  // Fetch the semestre array
-  let semestre = await matiereSysteme(niveau) // Ensure this returns an array with at least 2 items
+  console.log('modele: ',niveau,mention_id,parcours);
+  let semestre = await matiereSysteme(niveau);
+  console.log(semestre);
+  if (!semestre || semestre.length < 2) {
+    console.error('Semestre insuffisant pour', niveau);
+    return [];
+  }
+
+  let sql, params;
 
   if (niveau !== 'L1') {
-    if (semestre.length < 2) {
-      console.error('Error: Semestre array does not contain enough elements.')
-      return
-    }
-
-    // Prepare the query
-    let matiereQuery = `
+    sql = `
       SELECT DISTINCT m.*
       FROM matieres m
       JOIN matiere_semestre ms ON m.id = ms.matiere_id
@@ -62,55 +62,31 @@ async function displayMatiereFromForm(niveau, mention_id, parcours) {
       JOIN parcours p ON pm.parcour_id = p.id
       WHERE (s.nom LIKE ? OR s.nom LIKE ?)
         AND ms.mention_id = ?
-        AND p.nom = ?
-    `
-
-    try {
-      // Execute the query with parameters
-      let [rows] = await pool.query(matiereQuery, [
-        `%${semestre[0]}%`,
-        `%${semestre[1]}%`,
-        mention_id,
-        parcours
-      ])
-
-      // Log the response
-      return rows
-    } catch (error) {
-      return { success: false, error: 'Erreur veullez réeseyer' + error }
-    }
+        AND p.nom LIKE ?
+    `;
+    params = [`%${semestre[0]}%`, `%${semestre[1]}%`, mention_id, `%${parcours}%`];
   } else {
-    if (semestre.length < 2) {
-      console.error('Error: Semestre array does not contain enough elements.')
-      return
-    }
-
-    // Prepare the query
-    let matiereQuery = `
+    sql = `
       SELECT DISTINCT m.*
       FROM matieres m
       JOIN matiere_semestre ms ON m.id = ms.matiere_id
       JOIN semestres s ON ms.semestre_id = s.id
       WHERE (s.nom LIKE ? OR s.nom LIKE ?)
         AND ms.mention_id = ?
-    `
+    `;
+    params = [`%${semestre[0]}%`, `%${semestre[1]}%`, mention_id];
+  }
 
-    try {
-      // Execute the query with parameters
-      let [rows] = await pool.query(matiereQuery, [
-        `%${semestre[0]}%`,
-        `%${semestre[1]}%`,
-        mention_id
-      ])
-
-      // Log the response
-      return rows
-    } catch (error) {
-      return { success: false, error: 'Erreur veullez réeseyer' + error }
-    }
+  try {
+    const [rows] = await pool.query(sql, params);
+    return rows;
+  } catch (error) {
+    console.error(error);
+    return [];
   }
 }
 
+
 /**
  * function to get single matiere
  * @param {*} id
@@ -149,13 +125,13 @@ async function updateMatiere(nom, id, credit, uniter, ue) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé ou aucune modification effectuée.'
+        message: 'Année Univesitaire non trouvé ou aucune modification effectuée.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire mis à jour avec succès.'
+      message: 'Année Univesitaire mis à jour avec succès.'
     }
   } catch (error) {
     return { success: false, error: 'Erreur veullez réeseyer' + error }
@@ -188,12 +164,10 @@ async function updateMatiereNiveau(formData) {
 }
 
 async function deleteMatiere(id) {
-  console.log("id: ", id);
   const sql = 'DELETE FROM matieres WHERE id = ?';
 
   try {
     let [result] = await pool.query(sql, [id]);
-    console.log("Résultat DELETE:", result);
 
     if (result.affectedRows === 0) {
       return {
@@ -474,13 +448,13 @@ async function updateProf(matiere_id, nom, prenom, contact, date) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année Univesitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année Univesitaire supprimé avec succès.'
     }
   } catch (error) {
     console.error(error)

database/Models/Mentions.js

@@ -24,13 +24,13 @@ async function deleteMention(id) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année Univesitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année Univesitaire supprimé avec succès.'
     }
   } catch (error) {
     return { success: false, error: 'Erreur veullez réeseyer' + error }
@@ -70,13 +70,13 @@ async function updateMention(nom, uniter, id) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé ou aucune modification effectuée.'
+        message: 'Année Univesitaire non trouvé ou aucune modification effectuée.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire mis à jour avec succès.'
+      message: 'Année Univesitaire mis à jour avec succès.'
     }
   } catch (error) {
     return { success: false, error: 'Erreur veullez réeseyer' + error }

database/Models/NoteSysrem.js

@@ -33,13 +33,13 @@ async function updateSysteme(id, admis, redouble, renvoyer) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année Univesitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année Univesitaire supprimé avec succès.'
     }
   } catch (error) {
     return error

database/Models/Parcours.js

@@ -41,6 +41,8 @@ async function getParcours() {
   }
 }
 
+
+
 async function getSingleParcours(id) {
   const sql = 'SELECT * FROM parcours WHERE id = ?'
 
@@ -62,13 +64,13 @@ async function deletes(id) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année Univesitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année Univesitaire supprimé avec succès.'
     }
   } catch (error) {
     return error
@@ -84,13 +86,13 @@ async function updateparcour(id, nom, uniter, mention_id) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé ou aucune modification effectuée.'
+        message: 'Année Univesitaire non trouvé ou aucune modification effectuée.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire mis à jour avec succès.'
+      message: 'Année Univesitaire mis à jour avec succès.'
     }
   } catch (error) {
     return error
@@ -219,6 +221,32 @@ async function extractFiche(matiere_id) {
   }
 }
 
+async function deleteParcours(id) {
+  console.log("id: ", id);
+  const sql = 'DELETE FROM parcours WHERE id = ?';
+
+  try {
+    let [result] = await pool.query(sql, [id]);
+    console.log("Résultat DELETE:", result);
+
+    if (result.affectedRows === 0) {
+      return {
+        success: false,
+        message: 'Parcours non trouvée.'
+      };
+    }
+
+    return {
+      success: true,
+      message: 'Matière supprimée avec succès.'
+    };
+  } catch (error) {
+    console.log("err: ",+ error)
+    return { success: false, error: 'Erreur, veuillez réessayer: ' + error };
+    
+  }
+}
+
 module.exports = {
   insertParcour,
   getParcours,
@@ -227,5 +255,6 @@ module.exports = {
   updateparcour,
   parcourMatiere,
   extractFiche,
+  deleteParcours,
   getParcourMatiere
 }

database/database.backup.js

@@ -2,9 +2,9 @@ const mysql = require('mysql2/promise')
 const bcrypt = require('bcryptjs')
 
 const pool = mysql.createPool({
-  host: '127.0.0.1',
+  host: '192.168.200.200',
   user: 'root',
-  password: '',
+  password: 'stephane1313',
   database: 'university',
 waitForConnections: true,
 connectionLimit: 10,

database/database.js

@@ -2,9 +2,9 @@ const mysql = require('mysql2/promise')
 const bcrypt = require('bcryptjs')
 
   const pool = mysql.createPool({
-    host: '127.0.0.1',
+    host: '192.168.200.200',
     user: 'root',
-    password: '',
+    password: 'stephane1313',
     database: 'university',
   waitForConnections: true,
   connectionLimit: 10,

database/database2.js

@@ -2,9 +2,9 @@ const mysql = require('mysql2/promise')
 const bcrypt = require('bcryptjs')
 
 const pool = mysql.createPool({
-  host: '127.0.0.1',
+  host: '192.168.200.200',
   user: 'root',
-  password: '',
+  password: 'stephane1313',
   database: 'university',
 waitForConnections: true,
 connectionLimit: 10,

database/function/System.js

@@ -287,13 +287,13 @@ async function updateNessesaryTable(id, multiplicateur) {
     if (result.affectedRows === 0) {
       return {
         success: false,
-        message: 'Année Scolaire non trouvé.'
+        message: 'Année universitaire non trouvé.'
       }
     }
 
     return {
       success: true,
-      message: 'Année Scolaire supprimé avec succès.'
+      message: 'Année universitaire supprimé avec succès.'
     }
   } catch (error) {
     return error

src/main/backup.js

@@ -92,7 +92,7 @@ const {
   deletes,
   updateparcour,
   parcourMatiere,
-  extractFiche,
+  deleteParcours,
   getParcourMatiere
 } = require('../../database/Models/Parcours')
 
@@ -797,13 +797,9 @@ ipcMain.handle('getSingleParcours', async (event, credentials) => {
   return get
 })
 
-ipcMain.handle('deleteParcours', async (event, credentials) => {
-  const { id } = credentials
-  // console.log(formData, id);
-  const get = deletes(id)
-
-  return get
-})
+  ipcMain.handle('deleteParcours', async (event, id) => {
+    return await deleteParcours(id);
+  });
 
 ipcMain.handle('updateParcours', async (event, credentials) => {
   const { nom, uniter, mention_id, id } = credentials

src/main/index.js

@@ -20,6 +20,7 @@ const {
   FilterDataByNiveau,
   updateEtudiant,
   changePDP,
+  deleteEtudiant,
   updateParcours,
   createTranche,
   getTranche,
@@ -48,7 +49,6 @@ const {
   updateMatiereNiveau,
   displayMatiereFromForm,
   deleteMatiere,
-  deleteEtudiant,
   asygnationToMention,
   getMentionMatiere,
   getMentionMatiereChecked,
@@ -93,6 +93,7 @@ const {
   updateparcour,
   parcourMatiere,
   extractFiche,
+  deleteParcours,
   getParcourMatiere
 } = require('../../database/Models/Parcours')
 
@@ -622,11 +623,11 @@ ipcMain.handle('noteMatiere', async (event, credentials) => {
 })
 
 ipcMain.handle('displayMatiereFromForm', async (event, credentials) => {
-  const { niveau, mention_id, parcours } = credentials
+  const { niveau, mention_id, parcours } = credentials;
+  const get = displayMatiereFromForm(niveau, mention_id, parcours);
+  return get;
+});
 
-  const get = displayMatiereFromForm(niveau, mention_id, parcours)
-  return get
-})
 
 ipcMain.handle('createMention', async (event, credentials) => {
   const { nom, uniter } = credentials
@@ -665,11 +666,13 @@ ipcMain.handle('deleteNiveaus', async (event, credentials) => {
   ipcMain.handle('deleteMatiere', async (event, id) => {
     return await deleteMatiere(id);
   });
+ 
   ipcMain.handle('deleteEtudiant', async (event, id) => {
     return await deleteEtudiant(id);
   });
 
 
+
 ipcMain.handle('asign', async (event, credentials) => {
   const { formData, id } = credentials
   // console.log(formData, id);
@@ -782,13 +785,10 @@ ipcMain.handle('getSingleParcours', async (event, credentials) => {
   return get
 })
 
-ipcMain.handle('deleteParcours', async (event, credentials) => {
-  const { id } = credentials
-  // console.log(formData, id);
-  const get = deletes(id)
+ipcMain.handle('deleteParcours', async (event, id) => {
+  return await deleteParcours(id);
+});
 
-  return get
-})
 
 ipcMain.handle('updateParcours', async (event, credentials) => {
   const { nom, uniter, mention_id, id } = credentials

src/main/test.js

@@ -0,0 +1,135 @@
+import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { join } from 'path'
+import { electronApp, optimizer, is } from '@electron-toolkit/utils'
+import icon from '../../resources/icon.png?asset'
+const { loginUser, forgotPassword } = require('../../database/Models/Users')
+
+let splashWindow
+let mainWindow
+
+// Create splash window
+function createSplashScreen() {
+  splashWindow = new BrowserWindow({
+    width: 400,
+    height: 300,
+    frame: false,
+    alwaysOnTop: true,
+    transparent: true,
+    resizable: false,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  })
+
+  splashWindow.loadFile(join(__dirname, '../renderer/splash.html'))
+
+  splashWindow.on('closed', () => {
+    splashWindow = null
+  })
+}
+
+// Create main application window
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1000,
+    minWidth: 1000,
+    height: 670,
+    minHeight: 670,
+    show: false,
+    autoHideMenuBar: true,
+    fullscreen: true,
+    ...(process.platform === 'linux' ? { icon } : {}),
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      nodeIntegration: true,
+      contextIsolation: true,
+      sandbox: false
+    }
+  })
+
+  mainWindow.on('ready-to-show', () => {
+    if (splashWindow) {
+      splashWindow.close() // Close splash screen when main window is ready
+    }
+    mainWindow.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  // Load the initial content
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+  }
+}
+
+// Function to load new content and show the splash screen
+function loadNewContent(contentPath) {
+  createSplashScreen() // Show splash screen before loading new content
+
+  mainWindow.loadFile(contentPath).then(() => {
+    if (splashWindow) {
+      splashWindow.close() // Close splash screen after loading content
+    }
+    mainWindow.show() // Show main window
+  })
+}
+
+// This method will be called when Electron has finished initialization
+app.whenReady().then(() => {
+  // Set app user model id for Windows
+  electronApp.setAppUserModelId('com.electron')
+
+  // Default open or close DevTools by F12 in development
+  app.on('browser-window-created', (_, window) => {
+    optimizer.watchWindowShortcuts(window)
+  })
+
+  // Create initial main window
+  createWindow()
+
+  // IPC for loading new content
+  ipcMain.on('load-content', (event, contentPath) => {
+    loadNewContent(contentPath)
+  })
+
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+// Quit when all windows are closed, except on macOS
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+// Event for handling login
+ipcMain.handle('login', async (event, credentials) => {
+  const { username, password } = credentials
+
+  const users = await loginUser(username, password)
+
+  if (users) {
+    return { success: true, user: users }
+  } else {
+    return { success: false }
+  }
+})
+
+// Event for handling forgot password
+ipcMain.handle('forgotPassword', async (event, credentials) => {
+  const { email, password, passwordConfirmation } = credentials
+
+  const updated = await forgotPassword(email, password, passwordConfirmation)
+
+  if (updated) {
+    return updated
+  }
+})

src/preload/index.backup.js

@@ -79,6 +79,7 @@ if (process.contextIsolated) {
       getSingle: (credential) => ipcRenderer.invoke('single', credential),
       updateEtudiants: (credentials) => ipcRenderer.invoke('updateETudiants', credentials),
       getDataToDashboards: () => getDataToDashboard(),
+      deleteEtudiant: (credentials) => ipcRenderer.invoke('deleteEtudiant', credentials),
       updateEtudiantsPDP: (credentials) => ipcRenderer.invoke('updateETudiantsPDP', credentials),
       importExcel: (credentials) => ipcRenderer.invoke('importexcel', credentials),
       changeParcours: (credentials) => ipcRenderer.invoke('changeParcours', credentials),
@@ -137,7 +138,6 @@ if (process.contextIsolated) {
       displayMatiereFromForm: (credentials) =>
         ipcRenderer.invoke('displayMatiereFromForm', credentials),
       deleteMatiere: (credentials) => ipcRenderer.invoke('deleteMatiere', credentials),
-      deleteEtudiant: (credentials) => ipcRenderer.invoke('deleteEtudiant', credentials),
       asign: (credentials) => ipcRenderer.invoke('asign', credentials),
       getAsign: (credentials) => ipcRenderer.invoke('getAsign', credentials),
       asignSemestre: (credentials) => ipcRenderer.invoke('asignSemestre', credentials),
@@ -157,7 +157,7 @@ if (process.contextIsolated) {
      * contextBridge for note systeme
      */
     contextBridge.exposeInMainWorld('notesysteme', {
-      getSyteme: () => getSysteme(),
+      getSysteme: () => getSysteme(),
       updateNoteSysteme: (credentials) => ipcRenderer.invoke('updateNoteSysteme', credentials),
       insertParcours: (credentials) => ipcRenderer.invoke('insertParcours', credentials),
       getSingleParcours: (credentials) => ipcRenderer.invoke('getSingleParcours', credentials),

src/preload/index.js

@@ -82,6 +82,7 @@ if (process.contextIsolated) {
       getTranche: (credentials) => ipcRenderer.invoke('getTranche', credentials),
       updateTranche: (credentials) => ipcRenderer.invoke('updateTranche', credentials),
       deleteTranche: (credentials) => ipcRenderer.invoke('deleteTranche', credentials),
+      deleteEtudiant: (id) => ipcRenderer.invoke('deleteEtudiant', id),
       getSingleTranche: (credentials) => ipcRenderer.invoke('getSingleTranche', credentials)
     })
 
@@ -133,7 +134,6 @@ if (process.contextIsolated) {
       displayMatiereFromForm: (credentials) =>
         ipcRenderer.invoke('displayMatiereFromForm', credentials),
         deleteMatiere: (id) => ipcRenderer.invoke('deleteMatiere', id),
-        deleteEtudiant: (id) => ipcRenderer.invoke('deleteEtudiant', id),
       asign: (credentials) => ipcRenderer.invoke('asign', credentials),
       getAsign: (credentials) => ipcRenderer.invoke('getAsign', credentials),
       asignSemestre: (credentials) => ipcRenderer.invoke('asignSemestre', credentials),
@@ -153,11 +153,11 @@ if (process.contextIsolated) {
      * contextBridge for note systeme
      */
     contextBridge.exposeInMainWorld('notesysteme', {
-      getSyteme: () => getSysteme(),
+      getSysteme: () => getSysteme(),
       updateNoteSysteme: (credentials) => ipcRenderer.invoke('updateNoteSysteme', credentials),
       insertParcours: (credentials) => ipcRenderer.invoke('insertParcours', credentials),
+      deleteParcours: (id) => ipcRenderer.invoke('deleteParcours', id),
       getSingleParcours: (credentials) => ipcRenderer.invoke('getSingleParcours', credentials),
-      deleteParcours: (credentials) => ipcRenderer.invoke('deleteParcours', credentials),
       updateParcours: (credentials) => ipcRenderer.invoke('updateParcours', credentials),
       parcourMatiere: (credentials) => ipcRenderer.invoke('parcourMatiere', credentials),
       getParcours: () => getParcours(),

src/renderer/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Université de Toamasina</title>
+    <link rel="shortcut icon" href="src/assets/logo.ico" type="image/x-icon" />
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; connect-src 'self' https://api.polytechnique.c4m.mg; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

src/renderer/src/App.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react'
+import { RouterProvider } from 'react-router-dom'
+import Router from './Routes/Routes'
+import { AuthContextProvider, useAuthContext } from './contexts/AuthContext'
+import { ClipLoader } from 'react-spinners' // Import the loader
+import preloader from './assets/preloader.jpg'
+import { DataProvider } from './contexts/MoyenneDeClasseContext'
+
+const App = () => {
+  const [loading, setLoading] = useState(true)
+  const { setToken } = useAuthContext()
+
+  // Simulate loading (e.g., fetching some initial data or assets)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false) // Set loading to false after the simulated loading time
+    }, 3000) // 3 seconds delay to simulate loading
+
+    return () => clearTimeout(timer) // Cleanup the timer
+  }, [])
+
+  // Show Preloader while loading, else show your content
+  if (loading) {
+    return (
+      <div
+        className="preloader-container"
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+          backgroundImage: `url("${preloader}")`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          minHeight: '100vh'
+        }}
+      >
+        <ClipLoader color="blue" loading={loading} size={50} />
+      </div>
+    )
+  }
+
+  /**
+   * condition usign with the Tray icon on the bottom
+   */
+  if (window.Tray && typeof window.Tray.onNavigate === 'function') {
+    window.Tray.onNavigate((route) => {
+      if (route) {
+        window.location.hash = route // Navigate by updating the hash
+      }
+    })
+  }
+
+  return (
+    <AuthContextProvider>
+      <DataProvider>
+        <RouterProvider router={Router} />
+      </DataProvider>
+    </AuthContextProvider>
+  )
+}
+
+export default App

src/renderer/src/Routes/Routes.jsx

@@ -0,0 +1,207 @@
+import { createHashRouter } from 'react-router-dom'
+import DefaultLayout from '../layouts/DefaultLayout'
+import Login from '../components/Login'
+import LoginLayout from '../layouts/LoginLayout'
+import NotFound from '../components/NotFound'
+import ForgotPassword from '../components/ForgotPassword'
+import Home from '../components/Home'
+import Student from '../components/Student'
+import Notes from '../components/Notes'
+import AddStudent from '../components/AddStudent'
+import SingleEtudiant from '../components/SingleEtudiant'
+import AddNotes from '../components/AddNotes'
+import Apropos from '../components/Apropos'
+import Niveau from '../components/Niveau'
+import AddNiveau from '../components/AddNiveau'
+import Admin from '../components/Addadmin'
+import Setting from '../components/Param'
+import SingleNotes from '../components/SingleNotes'
+import ExportEtudiants from '../components/ExportEtudiants'
+import SingleNiveau from '../components/singleNiveau'
+import Matieres from '../components/Matieres'
+import AddMatiere from '../components/AddMatiere'
+import ImportMatiere from '../components/ImportMatiere'
+import SingleMatiere from '../components/SingleMatiere'
+import ImportNiveau from '../components/ImportNiveau'
+import SystemeNote from '../components/SystemeNote'
+import AnneeScolaire from '../components/AnneeScolaire'
+import AddAnneeScolaire from '../components/AddAnneeScolaire'
+import Noteclasse from '../components/Noteclasse'
+import TesteDatagrid from '../components/TesteDatagrid'
+import Manuel from '../components/Manuel'
+import Mentions from '../components/Mentions'
+import AddMention from '../components/AddMention'
+import SinleMention from '../components/SinleMention'
+import AssignMatiereToMention from '../components/AssignMatiereToMention'
+import AssingMatiereToSemestre from '../components/AssingMatiereToSemestre'
+import SingleAnneeScolaire from '../components/SingleAnneeScolaire'
+import Parcours from '../components/Parcours'
+import ModalExportFichr from '../components/ModalExportFichr'
+import Resultat from '../components/Resultat'
+import TrancheEcolage from '../components/TrancheEcolage'
+
+// Use createHashRouter instead of createBrowserRouter because the desktop app is in local machine
+const Router = createHashRouter([
+  {
+    path: '/',
+    element: <DefaultLayout />,
+    children: [
+      {
+        path: '/', // This will now be accessed as #/
+        element: <Home />
+      },
+      {
+        path: '/student',
+        element: <Student />
+      },
+      {
+        path: '/notes',
+        element: <Notes />
+      },
+      {
+        path: '/addstudent',
+        element: <AddStudent />
+      },
+      {
+        path: '/single/:id',
+        element: <SingleEtudiant />
+      },
+      {
+        path: '/addnotes/:id/:niveau/:mention_id/:parcours',
+        element: <AddNotes />
+      },
+      {
+        path: '/anneescolaire/:id',
+        element: <SingleAnneeScolaire />
+      },
+      {
+        path: '/asignmatiere/:id',
+        element: <AssignMatiereToMention />
+      },
+      {
+        path: '/asignmatieresemestre/:id',
+        element: <AssingMatiereToSemestre />
+      },
+      {
+        path: '/manual',
+        element: <Manuel />
+      },
+      {
+        path: '/mention',
+        element: <Mentions />
+      },
+      {
+        path: '/addmention',
+        element: <AddMention />
+      },
+      {
+        path: '/singlemention/:id',
+        element: <SinleMention />
+      },
+      {
+        path: '/apropos',
+        element: <Apropos />
+      },
+      {
+        path: '/niveau',
+        element: <Niveau />
+      },
+      {
+        path: '/addniveau',
+        element: <AddNiveau />
+      },
+      {
+        path: '/para',
+        element: <Setting />
+      },
+      {
+        path: '/admin',
+        element: <Admin />
+      },
+      {
+        path: '/single/notes/:id/:niveau/:scolaire',
+        element: <SingleNotes />
+      },
+      {
+        path: '/exportetudiant',
+        element: <ExportEtudiants />
+      },
+      {
+        path: '/single/niveau/:id',
+        element: <SingleNiveau />
+      },
+      {
+        path: '/matiere',
+        element: <Matieres />
+      },
+      {
+        path: '/addmatiere',
+        element: <AddMatiere />
+      },
+      {
+        path: '/addmatiere/import',
+        element: <ImportMatiere />
+      },
+      {
+        path: '/singlematiere/:id',
+        element: <SingleMatiere />
+      },
+      {
+        path: '/importniveau',
+        element: <ImportNiveau />
+      },
+      {
+        path: '/systemenote',
+        element: <SystemeNote />
+      },
+      {
+        path: '/anneescolaire',
+        element: <AnneeScolaire />
+      },
+      {
+        path: '/addanneescolaire',
+        element: <AddAnneeScolaire />
+      },
+      {
+        path: '/noteclass/:niveau/:scolaire',
+        element: <Noteclasse />
+      },
+      {
+        path: '/parcours',
+        element: <Parcours />
+      },
+      {
+        path: '/fiche/:matiere_id/:nom',
+        element: <ModalExportFichr />
+      },
+      {
+        path: '/resultat/:niveau/:scolaire',
+        element: <Resultat />
+      },
+      {
+        path: '/tranche/:id',
+        element: <TrancheEcolage />
+      }
+    ]
+  },
+  {
+    path: '/',
+    element: <LoginLayout />,
+    children: [
+      {
+        path: '/login',
+        element: <Login />
+      },
+      {
+        path: '/forgotpassword',
+        element: <ForgotPassword />
+      }
+    ]
+  },
+  {
+    path: '/*',
+    element: <NotFound />
+  }
+])
+
+export default Router

src/renderer/src/assets/AddNotes.module.css

@@ -0,0 +1,12 @@
+.blockTitle h1 {
+  font-size: 10px;
+  font-weight: bold;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.boxEtudiantsCard {
+  width: 10%;
+  padding: 1%;
+}

src/renderer/src/assets/AddStudent.module.css

@@ -0,0 +1,15 @@
+.blockTitle h1 {
+  font-size: 20px;
+  font-weight: bold;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.boxEtudiantsCard {
+  width: 100%;
+  padding: 1%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/renderer/src/assets/CarteStudent.module.css

@@ -0,0 +1,86 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  gap: 20px;
+}
+.cart {
+  width: 33%;
+  /* height: 35%; */
+  border: solid 1px rgba(0, 0, 0, 0.315);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Adds a soft shadow */
+  /* border-radius: 10px;  */
+  padding: 1px;
+  background-color: #ffded4;
+  position: relative;
+}
+.cart-footer {
+  position: absolute;
+  height: 40px;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  background-color: #ff5a27;
+}
+.title {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  text-transform: uppercase;
+  z-index: 1;
+}
+.title h1,
+p {
+  margin: 0;
+  font-size: 15px;
+}
+.content {
+  z-index: 1;
+  height: 70%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cart_photos {
+  width: 30%;
+  text-align: center;
+}
+.cart_photos img {
+  border-radius: 50px;
+  border: solid 2px #ff5a27;
+  width: 95px;
+  height: 100px;
+  object-fit: cover;
+}
+.cart_info {
+  width: 60%;
+  padding-left: 1%;
+}
+.cart_info p {
+  font-size: 16px;
+}
+.qrContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 2%;
+}
+.gauche h1,
+.droite h1 {
+  font-size: 17px;
+  text-align: center;
+}
+.gauche img,
+.droite img {
+  width: 150px;
+}
+.droite .qrcodeDroite {
+  width: 150px;
+}

src/renderer/src/assets/Dashboard.module.css

@@ -0,0 +1,4 @@
+.display {
+  background-color: rgba(255, 255, 255, 0.9);
+  /* margin-bottom: 2%; */
+}

src/renderer/src/assets/DefaultLayout.module.css

@@ -0,0 +1,20 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/* DefaultLayout.css */
+.default_layout {
+  /* height: 100%; Use full viewport height */
+  min-height: 100vh;
+  overflow-y: auto;
+  background: url('../assets/background2.jpg') no-repeat center/cover;
+  /* background-color: #aad4e571; */
+}
+.outlet {
+  padding-left: 55px;
+  margin-top: 0;
+  height: 100%;
+}

src/renderer/src/assets/ExportReleverNote.module.css

@@ -0,0 +1,78 @@
+.header {
+  width: 100%;
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+}
+.headerCenter {
+  text-align: center;
+  color: black;
+  line-height: 15px;
+  width: 60%;
+}
+.headerCenter h5 {
+  text-transform: uppercase;
+  line-height: 12px;
+  font-size: 14px;
+}
+.headerCenter p {
+  font-style: italic;
+  font-weight: 400;
+  font-size: 14px;
+}
+.transition {
+  border: solid 1px gray;
+  width: 100%;
+  padding: 1% 2%;
+  font-weight: bold;
+}
+.transition h6 {
+  font-size: 12px;
+}
+
+/* content */
+.content {
+  text-align: center;
+}
+.contentHeader {
+  color: black;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+}
+.contentHeader h1 {
+  font-size: 28px;
+}
+.contentHeaderList {
+  font-weight: bold;
+  font-size: 13px;
+}
+.contentHeaderList p {
+  font-size: 13px;
+  display: flex;
+  gap: 30px;
+}
+.ContentTable {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ContentTable table {
+  border-color: black !important;
+  font-size: 13px;
+  margin: 0;
+}
+.contentFooter {
+  display: flex;
+  align-items: end;
+  flex-direction: column;
+  margin-top: 5px;
+}
+.signature {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}

src/renderer/src/assets/Home.module.css

@@ -0,0 +1,78 @@
+.boxEtudiantsCard {
+  width: 100%;
+  padding: 1%;
+  /* margin-top: 12%; */
+}
+.cards {
+  /* width: 30%; */
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1%;
+}
+.nomEtudiants {
+  font-weight: bold;
+}
+.header {
+  color: white;
+  /* backdrop-filter: blur(5px); */
+  /* position: fixed; */
+  width: 100%;
+  z-index: 9;
+}
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1% 2%;
+  background: linear-gradient(to left, #ffaf01b4, transparent);
+}
+.blockTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 3%;
+}
+.blockTitle h1 {
+  font-size: 20px;
+  font-weight: bold;
+  /* text-transform: uppercase; */
+  color: white;
+}
+.blockTitle button {
+  font-size: 12px;
+  display: inline-flex;
+  gap: 10px;
+}
+.boxImg {
+  padding: 2%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.imagePDP {
+  object-fit: cover;
+  border: solid 2px rgb(156, 39, 176);
+}
+.mainHome {
+  border: solid 1px red;
+}
+.select:hover {
+  border-color: rgb(156, 39, 176) !important;
+}
+.details {
+  background-color: rgba(128, 128, 128, 0.4);
+  border-radius: 8px;
+  padding: 3% 1% 3% 4%;
+  text-align: left;
+}
+.details span {
+  display: block;
+  line-height: 25px;
+}
+.cardOverflow {
+  height: 450px;
+  transition: 1s ease;
+}
+.cardOverflow:hover {
+  transform: scale(1.03);
+}

src/renderer/src/assets/Login.module.css

@@ -0,0 +1,20 @@
+/* .container{
+  background: url(bg2.jpg) no-repeat fixed center/cover;
+  background-color: #08000e;
+} */
+.cards {
+  background-color: #06000aa4 !important;
+  color: white !important;
+  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2) !important; /* Light white shadow */
+  border: solid 1px rgba(245, 245, 245, 0.692);
+}
+.formulaireLogin {
+  color: white !important;
+}
+.formulaireLogin label {
+  color: white;
+  font-size: 17px;
+}
+.formulaireLogin input {
+  color: white;
+}

src/renderer/src/assets/Navbar.module.css

@@ -0,0 +1,25 @@
+.navnar {
+  color: rgba(0, 0, 0, 0.7);
+  background-color: #2d2d2d;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px 15px;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  border-bottom: solid 1px white;
+  color: white;
+  z-index: 99999;
+}
+.gauche {
+  width: 30%;
+  display: flex;
+  align-items: center;
+}
+.droite {
+  width: 4%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

src/renderer/src/assets/Sidenav.module.css

@@ -0,0 +1,51 @@
+.navbar {
+  background-color: #2d2d2d;
+  border-top: solid 1px white;
+  color: white;
+  width: 50px;
+  /* top: 28px; */
+  position: fixed;
+  height: 100%;
+  /* bottom: 0; */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+  padding: 0 0 5% 0;
+  margin: 0;
+  border-right: solid 1px white;
+  z-index: 99;
+}
+.liste1,
+.liste2 {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.liste1 li,
+.liste2 li {
+  font-size: 25px;
+  cursor: pointer;
+}
+.nav_link {
+  color: white;
+  position: relative;
+  transition: 0.8s ease;
+}
+.icon_label {
+  position: absolute;
+  top: 0; /* Below the icon */
+  left: 60px;
+  transform: translateX(-50%);
+  background-color: black;
+  color: white;
+  padding: 5px;
+  border-radius: 4px;
+  white-space: nowrap; /* Keep the label on one line */
+  font-size: 12px;
+  margin-top: 5px; /* Slight gap between icon and label */
+  z-index: 1;
+}

src/renderer/src/assets/base.css

@@ -0,0 +1,97 @@
+/* :root {
+  --ev-c-white: #ffffff;
+  --ev-c-white-soft: #f8f8f8;
+  --ev-c-white-mute: #f2f2f2;
+
+  --ev-c-black: #1b1b1f;
+  --ev-c-black-soft: #222222;
+  --ev-c-black-mute: #282828;
+
+  --ev-c-gray-1: #515c67;
+  --ev-c-gray-2: #414853;
+  --ev-c-gray-3: #32363f;
+
+  --ev-c-text-1: rgba(255, 255, 245, 0.86);
+  --ev-c-text-2: rgba(235, 235, 245, 0.6);
+  --ev-c-text-3: rgba(235, 235, 245, 0.38);
+
+  --ev-button-alt-border: transparent;
+  --ev-button-alt-text: var(--ev-c-text-1);
+  --ev-button-alt-bg: var(--ev-c-gray-3);
+  --ev-button-alt-hover-border: transparent;
+  --ev-button-alt-hover-text: var(--ev-c-text-1);
+  --ev-button-alt-hover-bg: var(--ev-c-gray-2);
+}
+
+:root {
+  --color-background: var(--ev-c-black);
+  --color-background-soft: var(--ev-c-black-soft);
+  --color-background-mute: var(--ev-c-black-mute);
+
+  --color-text: var(--ev-c-text-1);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+ul {
+  list-style: none;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+} */
+.form-control:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: initial; /* Optional: restore the default border color */
+}
+table {
+  border-collapse: collapse; /* Ensure there is no space between table cells */
+  width: 100%; /* Adjust width as needed */
+  margin: 0;
+  padding: 0;
+}
+
+td,
+th {
+  padding: 0; /* Remove padding from table cells */
+  margin: 0; /* Ensure no margin inside cells */
+  border: 1px solid black; /* Optional: Add border if needed */
+  text-align: center; /* Center text horizontally */
+  vertical-align: middle; /* Center text vertically */
+}
+
+tr {
+  margin: 0;
+  padding: 0;
+}
+
+tbody {
+  margin: 0;
+  padding: 0;
+}

src/renderer/src/assets/electron.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="64" cy="64" r="64" fill="#2F3242"/>
+  <ellipse cx="63.9835" cy="23.2036" rx="4.48794" ry="4.495" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
+  <path d="M51.3954 39.5028C52.3733 39.6812 53.3108 39.033 53.4892 38.055C53.6676 37.0771 53.0194 36.1396 52.0414 35.9612L51.3954 39.5028ZM28.6153 43.5751L30.1748 44.4741L30.1748 44.4741L28.6153 43.5751ZM28.9393 60.9358C29.4332 61.7985 30.5329 62.0976 31.3957 61.6037C32.2585 61.1098 32.5575 60.0101 32.0636 59.1473L28.9393 60.9358ZM37.6935 66.7457C37.025 66.01 35.8866 65.9554 35.1508 66.6239C34.415 67.2924 34.3605 68.4308 35.029 69.1666L37.6935 66.7457ZM53.7489 81.7014L52.8478 83.2597L53.7489 81.7014ZM96.9206 89.515C97.7416 88.9544 97.9526 87.8344 97.3919 87.0135C96.8313 86.1925 95.7113 85.9815 94.8904 86.5422L96.9206 89.515ZM52.0414 35.9612C46.4712 34.9451 41.2848 34.8966 36.9738 35.9376C32.6548 36.9806 29.0841 39.1576 27.0559 42.6762L30.1748 44.4741C31.5693 42.0549 34.1448 40.3243 37.8188 39.4371C41.5009 38.5479 46.1547 38.5468 51.3954 39.5028L52.0414 35.9612ZM27.0559 42.6762C24.043 47.9029 25.2781 54.5399 28.9393 60.9358L32.0636 59.1473C28.6579 53.1977 28.1088 48.0581 30.1748 44.4741L27.0559 42.6762ZM35.029 69.1666C39.6385 74.24 45.7158 79.1355 52.8478 83.2597L54.6499 80.1432C47.8081 76.1868 42.0298 71.5185 37.6935 66.7457L35.029 69.1666ZM52.8478 83.2597C61.344 88.1726 70.0465 91.2445 77.7351 92.3608C85.359 93.4677 92.2744 92.6881 96.9206 89.515L94.8904 86.5422C91.3255 88.9767 85.4902 89.849 78.2524 88.7982C71.0793 87.7567 62.809 84.8612 54.6499 80.1432L52.8478 83.2597ZM105.359 84.9077C105.359 81.4337 102.546 78.6127 99.071 78.6127V82.2127C100.553 82.2127 101.759 83.4166 101.759 84.9077H105.359ZM99.071 78.6127C95.5956 78.6127 92.7831 81.4337 92.7831 84.9077H96.3831C96.3831 83.4166 97.5892 82.2127 99.071 82.2127V78.6127ZM92.7831 84.9077C92.7831 88.3817 95.5956 91.2027 99.071 91.2027V87.6027C97.5892 87.6027 96.3831 86.3988 96.3831 84.9077H92.7831ZM99.071 91.2027C102.546 91.2027 105.359 88.3817 105.359 84.9077H101.759C101.759 86.3988 100.553 87.6027 99.071 87.6027V91.2027Z" fill="#A2ECFB"/>
+  <path d="M91.4873 65.382C90.8456 66.1412 90.9409 67.2769 91.7002 67.9186C92.4594 68.5603 93.5951 68.465 94.2368 67.7058L91.4873 65.382ZM99.3169 43.6354L97.7574 44.5344L99.3169 43.6354ZM84.507 35.2412C83.513 35.2282 82.6967 36.0236 82.6838 37.0176C82.6708 38.0116 83.4661 38.8279 84.4602 38.8409L84.507 35.2412ZM74.9407 39.8801C75.9127 39.6716 76.5315 38.7145 76.323 37.7425C76.1144 36.7706 75.1573 36.1517 74.1854 36.3603L74.9407 39.8801ZM53.7836 46.3728L54.6847 47.931L53.7836 46.3728ZM25.5491 80.9047C25.6932 81.8883 26.6074 82.5688 27.5911 82.4247C28.5747 82.2806 29.2552 81.3664 29.1111 80.3828L25.5491 80.9047ZM94.2368 67.7058C97.8838 63.3907 100.505 58.927 101.752 54.678C103.001 50.4213 102.9 46.2472 100.876 42.7365L97.7574 44.5344C99.1494 46.9491 99.3603 50.0419 98.2974 53.6644C97.2323 57.2945 94.9184 61.3223 91.4873 65.382L94.2368 67.7058ZM100.876 42.7365C97.9119 37.5938 91.7082 35.335 84.507 35.2412L84.4602 38.8409C91.1328 38.9278 95.7262 41.0106 97.7574 44.5344L100.876 42.7365ZM74.1854 36.3603C67.4362 37.8086 60.0878 40.648 52.8826 44.8146L54.6847 47.931C61.5972 43.9338 68.5948 41.2419 74.9407 39.8801L74.1854 36.3603ZM52.8826 44.8146C44.1366 49.872 36.9669 56.0954 32.1491 62.3927C27.3774 68.63 24.7148 75.2115 25.5491 80.9047L29.1111 80.3828C28.4839 76.1026 30.4747 70.5062 35.0084 64.5802C39.496 58.7143 46.2839 52.7889 54.6847 47.931L52.8826 44.8146Z" fill="#A2ECFB"/>
+  <path d="M49.0825 87.2295C48.7478 86.2934 47.7176 85.8059 46.7816 86.1406C45.8455 86.4753 45.358 87.5055 45.6927 88.4416L49.0825 87.2295ZM78.5635 96.4256C79.075 95.5732 78.7988 94.4675 77.9464 93.9559C77.0941 93.4443 75.9884 93.7205 75.4768 94.5729L78.5635 96.4256ZM79.5703 85.1795C79.2738 86.1284 79.8027 87.1379 80.7516 87.4344C81.7004 87.7308 82.71 87.2019 83.0064 86.2531L79.5703 85.1795ZM84.3832 64.0673H82.5832H84.3832ZM69.156 22.5301C68.2477 22.1261 67.1838 22.535 66.7799 23.4433C66.3759 24.3517 66.7848 25.4155 67.6931 25.8194L69.156 22.5301ZM45.6927 88.4416C47.5994 93.7741 50.1496 98.2905 53.2032 101.505C56.2623 104.724 59.9279 106.731 63.9835 106.731V103.131C61.1984 103.131 58.4165 101.765 55.8131 99.0249C53.2042 96.279 50.8768 92.2477 49.0825 87.2295L45.6927 88.4416ZM63.9835 106.731C69.8694 106.731 74.8921 102.542 78.5635 96.4256L75.4768 94.5729C72.0781 100.235 68.0122 103.131 63.9835 103.131V106.731ZM83.0064 86.2531C85.0269 79.7864 86.1832 72.1831 86.1832 64.0673H82.5832C82.5832 71.8536 81.4723 79.0919 79.5703 85.1795L83.0064 86.2531ZM86.1832 64.0673C86.1832 54.1144 84.4439 44.922 81.4961 37.6502C78.5748 30.4436 74.3436 24.8371 69.156 22.5301L67.6931 25.8194C71.6364 27.5731 75.3846 32.1564 78.1598 39.0026C80.9086 45.7836 82.5832 54.507 82.5832 64.0673H86.1832Z" fill="#A2ECFB"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M103.559 84.9077C103.559 82.4252 101.55 80.4127 99.071 80.4127C96.5924 80.4127 94.5831 82.4252 94.5831 84.9077C94.5831 87.3902 96.5924 89.4027 99.071 89.4027C101.55 89.4027 103.559 87.3902 103.559 84.9077V84.9077Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M28.8143 89.4027C31.2929 89.4027 33.3023 87.3902 33.3023 84.9077C33.3023 82.4252 31.2929 80.4127 28.8143 80.4127C26.3357 80.4127 24.3264 82.4252 24.3264 84.9077C24.3264 87.3902 26.3357 89.4027 28.8143 89.4027V89.4027V89.4027Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M64.8501 68.0857C62.6341 68.5652 60.451 67.1547 59.9713 64.9353C59.4934 62.7159 60.9007 60.5293 63.1167 60.0489C65.3326 59.5693 67.5157 60.9798 67.9954 63.1992C68.4742 65.4186 67.066 67.6052 64.8501 68.0857Z" fill="#A2ECFB"/>
+</svg>

src/renderer/src/assets/error.svg

@@ -0,0 +1,52 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 52 52"
+  width="100"
+  height="100"
+>
+  <circle
+    cx="26"
+    cy="26"
+    r="25"
+    fill="none"
+    stroke="#f44336"
+    stroke-width="2"
+  />
+  <path
+    fill="none"
+    stroke="#f44336"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-dasharray="40"
+    stroke-dashoffset="40"
+    d="M16 16l20 20M16 36l20-20"
+    id="error-cross"
+  />
+  <style>
+    @keyframes drawError {
+      0% {
+        stroke-dashoffset: 40;
+      }
+      50% {
+        stroke-dashoffset: 0;
+      }
+      100% {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    #error-cross {
+      animation: drawError 1s ease forwards infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.1);
+      }
+    }
+  </style>
+</svg>

src/renderer/src/assets/main.css

@@ -0,0 +1,163 @@
+@import './base.css';
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-image: url('./wavy-lines.svg');
+  background-size: cover;
+  user-select: none;
+}
+
+code {
+  font-weight: 600;
+  padding: 3px 5px;
+  border-radius: 2px;
+  background-color: var(--color-background-mute);
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Menlo,
+    Consolas,
+    Liberation Mono,
+    monospace;
+  font-size: 85%;
+}
+
+#root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 80px;
+}
+
+.logo {
+  margin-bottom: 20px;
+  -webkit-user-drag: none;
+  height: 128px;
+  width: 128px;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 1.2em #6988e6aa);
+}
+
+.creator {
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--ev-c-text-2);
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.text {
+  font-size: 28px;
+  color: var(--ev-c-text-1);
+  font-weight: 700;
+  line-height: 32px;
+  text-align: center;
+  margin: 0 10px;
+  padding: 16px 0;
+}
+
+.tip {
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--ev-c-text-2);
+  font-weight: 600;
+}
+
+.react {
+  background: -webkit-linear-gradient(315deg, #087ea4 55%, #7c93ee);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 700;
+}
+
+.actions {
+  display: flex;
+  padding-top: 32px;
+  margin: -6px;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.action {
+  flex-shrink: 0;
+  padding: 6px;
+}
+
+.action a {
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+  border-color: var(--ev-button-alt-border);
+  color: var(--ev-button-alt-text);
+  background-color: var(--ev-button-alt-bg);
+}
+
+.action a:hover {
+  border-color: var(--ev-button-alt-hover-border);
+  color: var(--ev-button-alt-hover-text);
+  background-color: var(--ev-button-alt-hover-bg);
+}
+
+.versions {
+  position: absolute;
+  bottom: 30px;
+  margin: 0 auto;
+  padding: 15px 0;
+  font-family: 'Menlo', 'Lucida Console', monospace;
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+  border-radius: 22px;
+  background-color: #202127;
+  backdrop-filter: blur(24px);
+}
+
+.versions li {
+  display: block;
+  float: left;
+  border-right: 1px solid var(--ev-c-gray-1);
+  padding: 0 20px;
+  font-size: 14px;
+  line-height: 14px;
+  opacity: 0.8;
+  &:last-child {
+    border: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .text {
+    font-size: 20px;
+  }
+}
+
+@media (max-width: 620px) {
+  .versions {
+    display: none;
+  }
+}
+
+@media (max-width: 350px) {
+  .tip,
+  .actions {
+    display: none;
+  }
+}

src/renderer/src/assets/success.svg

@@ -0,0 +1,52 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 52 52"
+  width="100"
+  height="100"
+>
+  <circle
+    cx="26"
+    cy="26"
+    r="25"
+    fill="none"
+    stroke="#4caf50"
+    stroke-width="2"
+  />
+  <path
+    fill="none"
+    stroke="#4caf50"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-dasharray="48"
+    stroke-dashoffset="48"
+    d="M14 27l7 7 17-17"
+    id="success-checkmark"
+  />
+  <style>
+    @keyframes drawSuccess {
+      0% {
+        stroke-dashoffset: 48;
+      }
+      50% {
+        stroke-dashoffset: 0;
+      }
+      100% {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    #success-checkmark {
+      animation: drawSuccess 1s ease forwards infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.1);
+      }
+    }
+  </style>
+</svg>

src/renderer/src/assets/warning.svg

@@ -0,0 +1,65 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 52 52"
+  width="100"
+  height="100"
+>
+  <circle
+    cx="26"
+    cy="26"
+    r="25"
+    fill="none"
+    stroke="#ffa500"
+    stroke-width="2"
+    class="pulse-circle"
+  />
+  <!-- Ligne du point d'exclamation -->
+  <line
+    x1="26"
+    y1="15"
+    x2="26"
+    y2="32"
+    stroke="#ffa500"
+    stroke-width="5"
+    stroke-linecap="round"
+    id="exclamation-line"
+  />
+  <!-- Point du point d'exclamation -->
+  <circle
+    cx="26"
+    cy="38"
+    r="2.5"
+    fill="#ffa500"
+    id="exclamation-dot"
+  />
+  <style>
+    @keyframes drawExclamation {
+      0% {
+        stroke-dashoffset: 17;
+      }
+      100% {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    #exclamation-line {
+      stroke-dasharray: 17;
+      stroke-dashoffset: 17;
+      animation: drawExclamation 0.5s ease forwards;
+    }
+
+    .pulse-circle {
+      animation: pulse 2s infinite;
+      transform-origin: center;
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.1);
+      }
+    }
+  </style>
+</svg>

src/renderer/src/assets/wavy-lines.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1422 800" opacity="0.3">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="oooscillate-grad">
+      <stop stop-color="hsl(206, 75%, 49%)" stop-opacity="1" offset="0%"></stop>
+      <stop stop-color="hsl(331, 90%, 56%)" stop-opacity="1" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g stroke-width="1" stroke="url(#oooscillate-grad)" fill="none" stroke-linecap="round">
+    <path d="M 0 448 Q 355.5 -100 711 400 Q 1066.5 900 1422 448" opacity="0.05"></path>
+    <path d="M 0 420 Q 355.5 -100 711 400 Q 1066.5 900 1422 420" opacity="0.11"></path>
+    <path d="M 0 392 Q 352.5 -100 711 400 Q 1066.5 900 1422 392" opacity="0.18"></path>
+    <path d="M 0 364 Q 355.5 -100 711 400 Q 1066.5 900 1422 364" opacity="0.24"></path>
+    <path d="M 0 336 Q 355.5 -100 711 400 Q 1066.5 900 1422 336" opacity="0.30"></path>
+    <path d="M 0 308 Q 355.5 -100 711 400 Q 1066.5 900 1422 308" opacity="0.37"></path>
+    <path d="M 0 280 Q 355.5 -100 711 400 Q 1066.5 900 1422 280" opacity="0.43"></path>
+    <path d="M 0 252 Q 355.5 -100 711 400 Q 1066.5 900 1422 252" opacity="0.49"></path>
+    <path d="M 0 224 Q 355.5 -100 711 400 Q 1066.5 900 1422 224" opacity="0.56"></path>
+    <path d="M 0 196 Q 355.5 -100 711 400 Q 1066.5 900 1422 196" opacity="0.62"></path>
+    <path d="M 0 168 Q 355.5 -100 711 400 Q 1066.5 900 1422 168" opacity="0.68"></path>
+    <path d="M 0 140 Q 355.5 -100 711 400 Q 1066.5 900 1422 140" opacity="0.75"></path>
+    <path d="M 0 112 Q 355.5 -100 711 400 Q 1066.5 900 1422 112" opacity="0.81"></path>
+    <path d="M 0 84 Q 355.5 -100 711 400 Q 1066.5 900 1422 84" opacity="0.87"></path>
+    <path d="M 0 56 Q 355.5 -100 711 400 Q 1066.5 900 1422 56" opacity="0.94"></path>
+  </g>
+</svg>

src/renderer/src/components/AddAnneeScolaire.jsx

@@ -98,7 +98,7 @@ const AddAnneeScolaire = () => {
         {status === 200 ? (
           <Typography style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
             <img src={svgSuccess} alt="" width={50} height={50} />{' '}
-            <span>Année Scolaire insérer avec succes</span>
+            <span>Année Univesitaire insérer avec succes</span>
           </Typography>
         ) : (
           <Typography style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -136,7 +136,7 @@ const AddAnneeScolaire = () => {
         <div className={classe.h1style}>
           <div className={classeHome.blockTitle}>
             <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-              <FaCalendarPlus /> Ajout Année Scolaire
+              <FaCalendarPlus /> Ajout Année Univesitaire
             </h1>
             <Link to={'#'} onClick={() => window.history.back()}>
               <Button color="warning" variant="contained">
@@ -170,12 +170,12 @@ const AddAnneeScolaire = () => {
             }}
           >
             <h4 style={{ textAlign: 'center', padding: '0 0 3% 0' }}>
-              Creation de nouvelle Année Scolaire
+              Creation de nouvelle Année Univesitaire
             </h4>
             <Grid container spacing={2}>
               <Grid item xs={12} sm={6}>
                 <TextField
-                  label={'Année Scolaire'}
+                  label={'Année Univesitaire'}
                   name={'code'}
                   placeholder="2024-2025"
                   color="warning"

src/renderer/src/components/AddMatiere.jsx

@@ -0,0 +1,413 @@
+import React, { useEffect, useRef, useState } from 'react'
+import classe from '../assets/AllStyleComponents.module.css'
+import classeAdd from '../assets/AddStudent.module.css'
+import classeHome from '../assets/Home.module.css'
+import { Link, useNavigate } from 'react-router-dom'
+import { IoMdReturnRight } from 'react-icons/io'
+import {
+  Box,
+  Button,
+  InputAdornment,
+  Typography,
+  Modal,
+  TextField,
+  Grid,
+  Autocomplete
+} from '@mui/material'
+import { BsBookmarkPlusFill } from 'react-icons/bs'
+import { FaBook, FaClipboardList, FaClock, FaFileExcel } from 'react-icons/fa'
+import validationMatiereAdd from './validation/ValidationMatiereAdd'
+import svgSuccess from '../assets/success.svg'
+import ChangeCapitalize from './function/ChangeCapitalizeLetter'
+import { MdOutlineNumbers } from 'react-icons/md'
+import { IoBookmark } from 'react-icons/io5'
+import ChangeCapital from './function/ChangeCapitalLetter'
+import { CgPathUnite } from 'react-icons/cg'
+
+const AddMatiere = () => {
+  const [formData, setFormData] = useState({
+    nom: '',
+    credit: '',
+    uniter: '',
+    ue: ''
+  })
+
+  const navigate = useNavigate()
+
+  const [matieres, setMatieres] = useState([])
+  const [mention, setMention] = useState([])
+
+  useEffect(() => {
+    window.matieres.getMatiere().then((response) => {
+      setMatieres(response)
+    })
+
+    window.mention.getMention().then((response) => {
+      setMention(Array.isArray(response) ? response : [])
+    })
+  }, [])
+
+  /**
+   * hook to open modal
+   */
+  const [open, setOpen] = useState(false)
+
+  /**
+   * function to close modal
+   */
+  const handleClose = () => {
+    setOpen(false)
+    navigate('/matiere')
+  }
+
+  /**
+   * function to set the data in state
+   * @param {*} e
+   */
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value
+    }))
+  }
+
+  const nomRef = useRef()
+  const errorRef = useRef()
+  const creditRef = useRef()
+  const ueRef = useRef()
+  const uniterRef = useRef()
+
+  const formSubmit = async (e) => {
+    e.preventDefault()
+
+    let arrayMatiere = []
+
+    matieres.map((matiere) => {
+      arrayMatiere.push(matiere.nom)
+    })
+
+    let valid = validationMatiereAdd(
+      nomRef.current,
+      errorRef.current,
+      arrayMatiere,
+      creditRef.current
+    )
+    console.log(formData, valid)
+    if (valid) {
+      let response = await window.matieres.createMatiere(formData)
+      console.log(response)
+      if (response.success) {
+        setOpen(true)
+      }
+
+      if (response.code) {
+        errorRef.current.textContent = `${formData.nom} existe déjà`
+      }
+    }
+  }
+
+  /**
+   * function to return the view Modal
+   *
+   * @returns {JSX}
+   */
+  const modals = () => (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 450,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Typography style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <img src={svgSuccess} alt="" width={50} height={50} />{' '}
+          <span>Matière insérer avec succes</span>
+        </Typography>
+        <Box
+          sx={{
+            marginTop: '2%',
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button onClick={handleClose} color="warning" variant="contained">
+            OK
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  )
+
+  return (
+    <div className={classe.mainHome}>
+      {modals()}
+      <div className={classeAdd.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <BsBookmarkPlusFill />
+              Ajout Matière
+            </h1>
+            <Link to={'/matiere'}>
+              <Button color="warning" variant="contained">
+                <IoMdReturnRight style={{ fontSize: '20px' }} />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* displaying the formulaire */}
+      <div className={classeHome.boxEtudiantsCard}>
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '55%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 700,
+            borderRadius: '2%',
+            bgcolor: 'background.paper',
+            boxShadow: 24,
+            p: 4
+          }}
+        >
+          <div style={{ textAlign: 'right', fontWeight: 'bold' }}>
+            <Link to={'/addmatiere/import'} style={{ textDecoration: 'none', color: 'orange' }}>
+              Importer un fichier excel <FaFileExcel />
+            </Link>
+          </div>
+          <h3 style={{ textAlign: 'center', paddingBottom: '15px', textDecoration: 'underline' }}>
+            Ajout d'un Matière
+          </h3>
+          <Box
+            sx={{
+              marginTop: '2%',
+              width: '100%'
+            }}
+          >
+            <form onSubmit={formSubmit}>
+              <Grid container spacing={2}>
+                <Grid item xs={12} sm={6}>
+                  <TextField
+                    label="Nom"
+                    name="nom"
+                    color="warning"
+                    fullWidth
+                    placeholder="Nom du matière"
+                    value={formData.nom}
+                    onChange={handleInputChange}
+                    onInput={() => ChangeCapitalize(nomRef)}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <FaBook />
+                        </InputAdornment>
+                      )
+                    }}
+                    inputRef={nomRef}
+                    sx={{
+                      marginBottom: '5px',
+                      '& .MuiOutlinedInput-root': {
+                        '&:hover fieldset': {
+                          borderColor: '#ff9800' // Set the border color on hover
+                        }
+                      }
+                    }}
+                  />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                  <TextField
+                    label="Crédit"
+                    name="credit"
+                    color="warning"
+                    fullWidth
+                    placeholder="Crédit pour la matiere"
+                    type="number"
+                    value={formData.credit}
+                    onChange={handleInputChange}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <MdOutlineNumbers />
+                        </InputAdornment>
+                      )
+                    }}
+                    inputProps={{ min: 1 }}
+                    inputRef={creditRef}
+                    sx={{
+                      marginBottom: '5px',
+                      '& .MuiOutlinedInput-root': {
+                        '&:hover fieldset': {
+                          borderColor: '#ff9800' // Set the border color on hover
+                        }
+                      }
+                    }}
+                  />
+                </Grid>
+                {/* <Grid item xs={12} sm={6}>
+              <TextField
+                label="Semestre"
+                name="semestre"
+                color='warning'
+                fullWidth
+                placeholder='exemple S1, S2, S3, S4'
+                type='text'
+                value={formData.semestre}
+                onChange={handleInputChange}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <CiCalendar />
+                    </InputAdornment>
+                  ),
+                }}
+                inputProps={{ min: 1 }}
+                inputRef={semestreRef}
+                sx={{
+                  marginBottom:"5px",
+                  '& .MuiOutlinedInput-root': {
+                    '&:hover fieldset': {
+                      borderColor: '#ff9800', // Set the border color on hover
+                    },
+                  },
+                }}
+              />
+            </Grid> */}
+                <Grid item xs={12} sm={6}>
+                  <TextField
+                    label="Unité d'enseignement"
+                    name="uniter"
+                    color="warning"
+                    fullWidth
+                    placeholder="Le matiere sera dans quelle unité d'enseignement"
+                    value={formData.uniter}
+                    onChange={handleInputChange}
+                    onInput={() => ChangeCapital(uniterRef)}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <IoBookmark />
+                        </InputAdornment>
+                      )
+                    }}
+                    inputProps={{ min: 1 }}
+                    inputRef={uniterRef}
+                    sx={{
+                      marginBottom: '5px',
+                      '& .MuiOutlinedInput-root': {
+                        '&:hover fieldset': {
+                          borderColor: '#ff9800' // Set the border color on hover
+                        }
+                      }
+                    }}
+                  />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                  <TextField
+                    label="UE"
+                    name="ue"
+                    color="warning"
+                    fullWidth
+                    placeholder="TI2"
+                    value={formData.ue}
+                    onInput={() => ChangeCapital(ueRef)}
+                    onChange={handleInputChange}
+                    type="text"
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <CgPathUnite />
+                        </InputAdornment>
+                      )
+                    }}
+                    inputProps={{ min: 1 }}
+                    inputRef={ueRef}
+                    sx={{
+                      marginBottom: '5px',
+                      '& .MuiOutlinedInput-root': {
+                        '&:hover fieldset': {
+                          borderColor: '#ff9800' // Set the border color on hover
+                        }
+                      }
+                    }}
+                  />
+                </Grid>
+                {/* <Grid item xs={12} sm={6}>
+            <Autocomplete
+              multiple
+              options={mention} // Options array for Autocomplete
+              getOptionLabel={(option) => option.nom || ""} // Safely access `nom`
+              value={formData.mention_id.map(id => mention.find(item => item.id === id)) || []} // Bind selected values to form data
+              onChange={(event, newValue) => {
+                setFormData((prevData) => ({
+                  ...prevData,
+                  mention_id: newValue.map((item) => item.id), // Store only the IDs of selected mentions
+                }));
+              }}
+              isOptionEqualToValue={(option, value) => option.id === value.id} // Ensure correct matching of options
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Mention"
+                  color="warning"
+                  placeholder="Sélectionnez les mentions"
+                  InputProps={{
+                    ...params.InputProps,
+                    startAdornment: (
+                      <>
+                        <InputAdornment position="start">
+                          <FaClipboardList />
+                        </InputAdornment>
+                        {params.InputProps.startAdornment}
+                      </>
+                    ),
+                  }}
+                  sx={{
+                    marginBottom: "5px",
+                    '& .MuiOutlinedInput-root': {
+                      '&:hover fieldset': {
+                        borderColor: '#ff9800', // Set border color on hover
+                      },
+                    },
+                  }}
+                />
+              )}
+            />
+
+            </Grid> */}
+              </Grid>
+              <span style={{ color: 'red', marginBottom: '15px' }} ref={errorRef}></span>
+              <br />
+              <Grid
+                item
+                xs={12}
+                style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }}
+              >
+                <Button type="submit" color="warning" variant="contained">
+                  Enregister
+                </Button>
+              </Grid>
+            </form>
+          </Box>
+        </Box>
+      </div>
+    </div>
+  )
+}
+
+export default AddMatiere

src/renderer/src/components/AddMention.jsx

@@ -0,0 +1,257 @@
+import React, { useEffect, useRef, useState } from 'react'
+import classe from '../assets/AllStyleComponents.module.css'
+import classeAdd from '../assets/AddStudent.module.css'
+import classeHome from '../assets/Home.module.css'
+import { Link, useNavigate } from 'react-router-dom'
+import { IoMdReturnRight } from 'react-icons/io'
+import { Box, Button, InputAdornment, Typography, Modal, TextField, Grid } from '@mui/material'
+import { BsBookmarkPlusFill } from 'react-icons/bs'
+import { FaClipboardList } from 'react-icons/fa6'
+import ChangeCapital from './function/ChangeCapitalLetter'
+import { IoBookmark } from 'react-icons/io5'
+import svgSuccess from '../assets/success.svg'
+
+const AddMention = () => {
+  const [formData, setFormData] = useState({
+    nom: '',
+    uniter: ''
+  })
+
+  const [errors, setErrors] = useState({
+    nom: false,
+    uniter: false
+  })
+
+  const navigate = useNavigate()
+
+  /**
+   * function to set the data in state
+   * @param {*} e
+   */
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setFormData({
+      ...formData,
+      [name]: value
+    })
+    setErrors({
+      ...errors,
+      [name]: false // Reset the error when user starts typing
+    })
+  }
+
+  const formSubmit = async (e) => {
+    e.preventDefault()
+    const newErrors = {}
+    let hasError = false
+
+    // Check for empty fields
+    Object.keys(formData).forEach((key) => {
+      if (!formData[key].trim()) {
+        newErrors[key] = true // Set error for empty fields
+        hasError = true
+      }
+    })
+
+    setErrors(newErrors)
+
+    if (!hasError) {
+      try {
+        let response = await window.mention.createMention(formData)
+
+        if (response.success) {
+          setOpen(true)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+
+  /**
+   * hook to open modal
+   */
+  const [open, setOpen] = useState(false)
+
+  /**
+   * function to close modal
+   */
+  const handleClose = () => {
+    setOpen(false)
+    navigate('/mention')
+  }
+
+  /**
+   * function to return the view Modal
+   *
+   * @returns {JSX}
+   */
+  const modals = () => (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 450,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Typography style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <img src={svgSuccess} alt="" width={50} height={50} />{' '}
+          <span>Mention insérer avec succes</span>
+        </Typography>
+        <Box
+          sx={{
+            marginTop: '2%',
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button onClick={handleClose} color="warning" variant="contained">
+            OK
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  )
+
+  // Helper function to get helperText dynamically
+  const getHelperText = (field) => (errors[field] ? 'Ce champ est requis.' : '')
+
+  const nomRef = useRef()
+  const uniterRef = useRef()
+  return (
+    <div className={classe.mainHome}>
+      {modals()}
+      <div className={classeAdd.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <BsBookmarkPlusFill />
+              Ajout Mention
+            </h1>
+            <Link to={'/mention'}>
+              <Button color="warning" variant="contained">
+                <IoMdReturnRight style={{ fontSize: '20px' }} />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* displaying the formulaire */}
+      <div className={classeHome.boxEtudiantsCard}>
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '55%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 700,
+            borderRadius: '2%',
+            bgcolor: 'background.paper',
+            boxShadow: 24,
+            p: 4
+          }}
+        >
+          <h3 style={{ textAlign: 'center', paddingBottom: '15px', textDecoration: 'underline' }}>
+            Ajout d'un Mention
+          </h3>
+          <Box
+            sx={{
+              marginTop: '2%',
+              width: '100%'
+            }}
+          >
+            <form onSubmit={formSubmit}>
+              <Grid container spacing={2}>
+                <Grid item xs={12} sm={6}>
+                  <TextField
+                    label="Nom"
+                    error={errors.nom}
+                    name="nom"
+                    color="warning"
+                    fullWidth
+                    placeholder="GENIE DES MINES"
+                    value={formData.nom}
+                    onChange={handleInputChange}
+                    onInput={() => ChangeCapital(nomRef)}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <FaClipboardList />
+                        </InputAdornment>
+                      )
+                    }}
+                    helperText={getHelperText('nom')}
+                    inputRef={nomRef}
+                    sx={{
+                      marginBottom: '5px',
+                      '& .MuiOutlinedInput-root': {
+                        '&:hover fieldset': {
+                          borderColor: '#ff9800' // Set the border color on hover
+                        }
+                      }
+                    }}
+                  />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                  <TextField
+                    label="Unité"
+                    error={errors.uniter}
+                    helperText={getHelperText('uniter')}
+                    name="uniter"
+                    color="warning"
+                    fullWidth
+                    placeholder="GM"
+                    value={formData.uniter}
+                    onChange={handleInputChange}
+                    onInput={() => ChangeCapital(uniterRef)}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <IoBookmark />
+                        </InputAdornment>
+                      )
+                    }}
+                    inputRef={uniterRef}
+                    sx={{
+                      marginBottom: '5px',
+                      '& .MuiOutlinedInput-root': {
+                        '&:hover fieldset': {
+                          borderColor: '#ff9800' // Set the border color on hover
+                        }
+                      }
+                    }}
+                  />
+                </Grid>
+                <Grid
+                  item
+                  xs={12}
+                  style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }}
+                >
+                  <Button type="submit" color="warning" variant="contained">
+                    Enregister
+                  </Button>
+                </Grid>
+              </Grid>
+            </form>
+          </Box>
+        </Box>
+      </div>
+    </div>
+  )
+}
+
+export default AddMention

src/renderer/src/components/AddNiveau.jsx

@@ -0,0 +1,214 @@
+import React, { useEffect, useRef, useState } from 'react'
+import classe from '../assets/AllStyleComponents.module.css'
+import classeAdd from '../assets/AddStudent.module.css'
+import { Link, useNavigate } from 'react-router-dom'
+import { IoMdPersonAdd, IoMdReturnRight } from 'react-icons/io'
+import { FaFileExcel, FaUser } from 'react-icons/fa'
+import { Box, Button, InputAdornment, TextField, Grid, Modal, Typography } from '@mui/material'
+import classeHome from '../assets/Home.module.css'
+import validationNote from './validation/AddNiveau'
+import svgSuccess from '../assets/success.svg'
+
+const AddNiveau = () => {
+  const navigate = useNavigate()
+  /**
+   * hook for storing data in the input
+   */
+  const [formData, setFormData] = useState({
+    nom: ''
+  })
+  const [niveau, setNiveau] = useState([])
+  /**
+   * hook to open modal
+   */
+  const [open, setOpen] = useState(false)
+
+  /**
+   * function to close modal
+   */
+  const handleClose = () => {
+    setOpen(false)
+    navigate('/niveau')
+  }
+
+  useEffect(() => {
+    window.niveaus.getNiveau().then((response) => {
+      setNiveau(response)
+    })
+  }, [])
+
+  /**
+   * function to set the data in state
+   * @param {*} e
+   */
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value
+    }))
+  }
+
+  const nomRef = useRef()
+  const nomError = useRef()
+
+  /**
+   * function to return the view Modal
+   *
+   * @returns {JSX}
+   */
+  const modals = () => (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 450,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Typography style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+          <img src={svgSuccess} alt="" width={50} height={50} />{' '}
+          <span>Insertion a été effectuée avec succès</span>
+        </Typography>
+        <Box
+          sx={{
+            marginTop: '2%',
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button onClick={handleClose} color="warning" variant="contained">
+            OK
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  )
+
+  const formSubmit = async (e) => {
+    e.preventDefault()
+    let niveauNom = []
+    niveau.map((niv) => {
+      niveauNom.push(niv.nom)
+    })
+    let validation = validationNote(nomRef.current, nomError.current, niveauNom)
+
+    if (validation) {
+      let response = await window.niveaus.insertNiveau(formData)
+
+      let responses = JSON.parse(response)
+      if (responses.changes == 1) {
+        setOpen(true)
+        setFormData({
+          nom: ''
+        })
+      }
+    }
+  }
+
+  return (
+    <div className={classe.mainHome}>
+      {modals()}
+      <div className={classeAdd.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <IoMdPersonAdd />
+              Ajout niveau
+            </h1>
+            <Link to={'/niveau'}>
+              <Button color="warning" variant="contained">
+                <IoMdReturnRight style={{ fontSize: '20px' }} />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className={classeAdd.boxEtudiantsCard}>
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 700,
+            borderRadius: '2%',
+            bgcolor: 'background.paper',
+            boxShadow: 24,
+            p: 4
+          }}
+        >
+          <h3 style={{ textAlign: 'center', paddingBottom: '15px', textDecoration: 'underline' }}>
+            Ajout d'un niveau
+          </h3>
+          <div style={{ textAlign: 'right', fontWeight: 'bold' }}>
+            <Link to={'/importniveau'} style={{ textDecoration: 'none', color: 'orange' }}>
+              Importer un fichier excel <FaFileExcel />
+            </Link>
+          </div>
+          <Box
+            sx={{
+              marginTop: '2%',
+              width: '100%'
+            }}
+          >
+            <form onSubmit={formSubmit}>
+              <TextField
+                label="Nom"
+                name="nom"
+                color="warning"
+                fullWidth
+                placeholder="L1 ou L2 ou L3 ou M1 ou M2 ou D1 ou D2 ou D3"
+                value={formData.nom}
+                onChange={handleInputChange}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FaUser />
+                    </InputAdornment>
+                  )
+                }}
+                inputRef={nomRef}
+                sx={{
+                  marginBottom: '5px',
+                  '& .MuiOutlinedInput-root': {
+                    '&:hover fieldset': {
+                      borderColor: '#ff9800' // Set the border color on hover
+                    }
+                  }
+                }}
+              />
+              <span style={{ color: 'red', marginBottom: '15px' }} ref={nomError}></span>
+              <br />
+              {/* Submit Button */}
+              <Grid
+                item
+                xs={12}
+                style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }}
+              >
+                <Button type="submit" color="warning" variant="contained">
+                  Enregister
+                </Button>
+              </Grid>
+            </form>
+          </Box>
+        </Box>
+      </div>
+    </div>
+  )
+}
+
+export default AddNiveau

src/renderer/src/components/AddNotes.jsx

@@ -52,9 +52,6 @@ const AddNotes = () => {
 
       window.matieres.displayMatiereFromForm({ niveau, mention_id, parcours }).then((response) => {
         setMatieres(response)
-        console.log("resulat teste:1", response);
-        console.log("resulat teste:2", mention_id);
-        console.log("resulat teste:3", parcours);
       })
       setIsSubmitted(false)
     }
@@ -95,7 +92,6 @@ const AddNotes = () => {
         formData,
         annee_scolaire
       })
-      console.log(response)
       if (response.success) {
         setOpen(true)
         setStatut(200)
@@ -112,8 +108,6 @@ const AddNotes = () => {
     }
   }
 
-  console.log('matiere: ',matieres);
-
   const [statut, setStatut] = useState(200)
 
   /**
@@ -258,7 +252,7 @@ const AddNotes = () => {
                 {/* map the all matiere to the form */}
                 <Grid container spacing={2}>
                   {matieres.map((mat) => (
-                    <Grid item xs={12} sm={3} key={mat.nom}>
+                    <Grid item xs={12} sm={3} key={mat.id}>
                       <TextField
                         label={mat.nom}
                         name={mat.id}
@@ -266,31 +260,32 @@ const AddNotes = () => {
                         color="warning"
                         fullWidth
                         value={formData[mat.id] || ''} // Access the correct value from formData
-                        onChange={
-                          (e) => setFormData({ ...formData, [mat.id]: e.target.value }) // Update the specific key
+                        onChange={(e) =>
+                          setFormData({ ...formData, [mat.id]: e.target.value }) // Update the specific key
                         }
                         InputProps={{
                           startAdornment: (
                             <InputAdornment position="start">
                               <CgNotes />
                             </InputAdornment>
-                          )
+                          ),
                         }}
                         className="inputAddNote"
                         sx={{
                           '& .MuiOutlinedInput-root': {
                             '&:hover fieldset': {
-                              borderColor: '#ff9800' // Set the border color on hover
-                            }
+                              borderColor: '#ff9800', // Set the border color on hover
+                            },
                           },
                           '& .MuiInputBase-input::placeholder': {
-                            fontSize: '11px' // Set the placeholder font size
-                          }
+                            fontSize: '11px', // Set the placeholder font size
+                          },
                         }}
                       />
                     </Grid>
                   ))}
                 </Grid>
+
                 <Grid
                   item
                   xs={12}

src/renderer/src/components/AddParcours.jsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  Button,
+  Autocomplete,
+  InputAdornment,
+  Box,
+  Grid
+} from '@mui/material'
+import { MdRule } from 'react-icons/md'
+import { FaClipboardList } from 'react-icons/fa'
+
+const AddParcours = ({ open, onClose, onSubmitSuccess }) => {
+  const [formData, setFormData] = useState({
+    nom: '',
+    uniter: '',
+    mention_id: null
+  })
+
+  const [mention, setMention] = useState([])
+
+  useEffect(() => {
+    window.mention.getMention().then((response) => {
+      setMention(response)
+    })
+  }, [])
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormData({ ...formData, [name]: value })
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    let response = await window.notesysteme.insertParcours(formData)
+    console.log(response) 
+    if (response.success) {
+      onSubmitSuccess(true)
+      onClose() // Close the modal after submission
+      setFormData({
+        nom: '',
+        uniter: '',
+        mention_id: null
+      })
+    }
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <form action="" onSubmit={handleSubmit}>
+        <DialogTitle>Information sur le parcour</DialogTitle>
+        <DialogContent>
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoFocus
+                  margin="normal"
+                  required
+                  name="nom"
+                  label="Nom du parcours"
+                  type="text"
+                  fullWidth
+                  placeholder="Nom du parcours"
+                  variant="outlined"
+                  value={formData.nom}
+                  color="warning"
+                  onChange={handleChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <MdRule />
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoFocus
+                  margin="normal"
+                  required
+                  name="uniter"
+                  label="Uniter parcours"
+                  type="text"
+                  fullWidth
+                  placeholder="GPESB"
+                  variant="outlined"
+                  value={formData.uniter}
+                  color="warning"
+                  onChange={handleChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <MdRule />
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={12}>
+                <Autocomplete
+                  options={mention} // Options array for Autocomplete
+                  getOptionLabel={(option) => option.nom || ''} // Safely access `nom`
+                  value={mention.find((item) => item.id === formData.mention_id) || null} // Bind selected value to form data
+                  onChange={(event, newValue) => {
+                    setFormData((prevData) => ({
+                      ...prevData,
+                      mention_id: newValue ? newValue.id : null // Store the ID of the selected mention
+                    }))
+                  }}
+                  isOptionEqualToValue={(option, value) => option.id === value.id} // Ensure correct matching of options
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      label="Mention"
+                      color="warning"
+                      placeholder="Sélectionnez une mention"
+                      InputProps={{
+                        ...params.InputProps,
+                        startAdornment: (
+                          <>
+                            <InputAdornment position="start">
+                              <FaClipboardList />
+                            </InputAdornment>
+                            {params.InputProps.startAdornment}
+                          </>
+                        )
+                      }}
+                      sx={{
+                        marginBottom: '5px',
+                        '& .MuiOutlinedInput-root': {
+                          '&:hover fieldset': {
+                            borderColor: '#ff9800' // Set border color on hover
+                          }
+                        }
+                      }}
+                    />
+                  )}
+                />
+              </Grid>
+            </Grid>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} color="error">
+            Annuler
+          </Button>
+          <Button type="submit" color="warning">
+            Soumettre
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  )
+}
+
+export default AddParcours

src/renderer/src/components/AddStudent.jsx

@@ -409,7 +409,7 @@ const AddStudent = () => {
                     </Grid>
                     <Grid item xs={12} sm={6}>
                       <TextField
-                        label="Prenom"
+                        label="Prénom"
                         name="prenom"
                         fullWidth
                         size="small"
@@ -503,13 +503,13 @@ const AddStudent = () => {
                         variant="outlined"
                       >
                         <InputLabel id="demo-select-small-label" color="warning">
-                          Année Scolaire
+                          Année Univesitaire
                         </InputLabel>
                         <Select
                           labelId="demo-select-small-label"
                           id="demo-select-small"
                           value={formData.annee_scolaire}
-                          label="Année Scolaire"
+                          label="Année Univesitaire"
                           color="warning"
                           size="small"
                           onChange={handleInputChange}
@@ -521,7 +521,7 @@ const AddStudent = () => {
                                   <FaCalendarAlt />
                                 </InputAdornment>
                               }
-                              label="Année Scolaire"
+                              label="Année Univesitaire"
                             />
                           }
                           sx={{

src/renderer/src/components/Addadmin.jsx

@@ -0,0 +1,336 @@
+import React, { useRef, useState } from 'react'
+import classe from '../assets/AllStyleComponents.module.css'
+import img from '../assets/admin.png'
+import classeHome from '../assets/Home.module.css'
+import { Box, Button, InputAdornment, TextField, Grid, Typography, Modal } from '@mui/material'
+import classeAdd from '../assets/AddStudent.module.css'
+import validationAddAdmin from './validation/AddAdmin'
+import svgSuccess from '../assets/success.svg'
+import svgError from '../assets/error.svg'
+import { FaEnvelope, FaLock, FaUser } from 'react-icons/fa'
+
+const Admin = () => {
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    password: '',
+    roles: 'Enseignant'
+  })
+
+  const usernameRef = useRef()
+  const emailRef = useRef()
+  const passwordRef = useRef()
+  const rolesRef = useRef()
+  const errorUsername = useRef()
+  const errorEmail = useRef()
+  const errorPassword = useRef()
+
+  /**
+   * function to set the data in state
+   * @param {*} e
+   */
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value
+    }))
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    // Handle form submission logic
+    const valid = validationAddAdmin(
+      usernameRef.current,
+      emailRef.current,
+      passwordRef.current,
+      errorUsername.current,
+      errorEmail.current,
+      errorPassword.current
+    )
+    console.log(formData)
+    console.log(valid)
+
+    if (valid) {
+      const response = await window.allUser.insertUsers(formData)
+      console.log(response)
+      if (response.success) {
+        setOpen(true)
+        setFormData({
+          username: '',
+          email: '',
+          password: '',
+          roles: 'Enseignant'
+        })
+      }
+
+      if (response.code) {
+        setCode(422)
+        setOpen(true)
+      }
+    }
+  }
+
+  /**
+   * hook to open modal
+   */
+  const [open, setOpen] = useState(false)
+  const [code, setCode] = useState(200)
+
+  /**
+   * function to close modal
+   */
+  const handleClose = () => setOpen(false)
+
+  /**
+   * function to return the view Modal
+   *
+   * @returns {JSX}
+   */
+  const modals = () => (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 450,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        {code == 422 ? (
+          <Typography
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}
+          >
+            <img src={svgError} alt="" width={50} height={50} />{' '}
+            <span style={{ marginLeft: '10px' }}>Email déjà pris</span>
+          </Typography>
+        ) : (
+          <Typography
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}
+          >
+            <img src={svgSuccess} alt="" width={50} height={50} />{' '}
+            <span>Insertion a été effectuée avec succès</span>
+          </Typography>
+        )}
+        <Box
+          sx={{
+            marginTop: '2%',
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button onClick={handleClose} color="warning" variant="contained">
+            OK
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  )
+
+  const sendData = async () => {
+    await window.syncro.getall()
+  }
+
+  return (
+    <div className={classe.mainHome}>
+      {modals()}
+      <div className={classeHome.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1>Ajout d'admin</h1>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <Button color="warning" variant="contained">
+                Recevoir une mise à jour au server
+              </Button>
+              <Button color="warning" variant="contained" onClick={sendData}>
+                Envoyer une mise à jour au server
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* contenu */}
+      <div className={classeHome.contenaire}>
+        <div className={classeAdd.boxEtudiantsCard}>
+          <Box
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: 700,
+              borderRadius: '3%',
+              bgcolor: 'background.paper',
+              boxShadow: 24,
+              p: 4
+            }}
+          >
+            <Box
+              sx={{
+                marginTop: '5%',
+                display: 'flex',
+                gap: '10px',
+                alignItems: 'start',
+                flexDirection: 'column',
+                fontSize: 16,
+                fontFamily: 'sans-serif',
+                justifyContent: 'flex-end'
+              }}
+            >
+              <span style={{ display: 'flex', marginLeft: '40%' }}>
+                <img src={img} alt="" height={150} width={150} />
+              </span>
+
+              <form onSubmit={handleSubmit} style={{ marginTop: '5%' }}>
+                <Grid container spacing={2}>
+                  {/* matieres Algebre */}
+                  <Grid item xs={12} sm={6}>
+                    <TextField
+                      label="username"
+                      name="username"
+                      color="warning"
+                      fullWidth
+                      value={formData.username}
+                      onChange={handleInputChange}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <FaUser />
+                          </InputAdornment>
+                        )
+                      }}
+                      inputRef={usernameRef}
+                      sx={{
+                        '& .MuiOutlinedInput-root': {
+                          '&:hover fieldset': {
+                            borderColor: '#ff9800' // Set the border color on hover
+                          }
+                        }
+                      }}
+                    />
+                    {/* error username */}
+                    <span
+                      className="text-danger"
+                      ref={errorUsername}
+                      style={{ fontSize: '13px' }}
+                    ></span>
+                  </Grid>
+                  {/* matieres Analyse */}
+                  <Grid item xs={12} sm={6}>
+                    <TextField
+                      label="email"
+                      name="email"
+                      fullWidth
+                      color="warning"
+                      value={formData.email}
+                      onChange={handleInputChange}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <FaEnvelope />
+                          </InputAdornment>
+                        )
+                      }}
+                      inputRef={emailRef}
+                      sx={{
+                        '& .MuiOutlinedInput-root': {
+                          '&:hover fieldset': {
+                            borderColor: '#ff9800' // Set the border color on hover
+                          }
+                        }
+                      }}
+                    />
+                    {/* error email */}
+                    <span
+                      className="text-danger"
+                      style={{ fontSize: '13px' }}
+                      ref={errorEmail}
+                    ></span>
+                  </Grid>
+                  {/* matieres Mecanique general */}
+                  <Grid item xs={12} sm={6}>
+                    <TextField
+                      label="password"
+                      name="password"
+                      fullWidth
+                      color="warning"
+                      value={formData.password}
+                      onChange={handleInputChange}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <FaLock />
+                          </InputAdornment>
+                        )
+                      }}
+                      inputRef={passwordRef}
+                      sx={{
+                        '& .MuiOutlinedInput-root': {
+                          '&:hover fieldset': {
+                            borderColor: '#ff9800' // Set the border color on hover
+                          }
+                        }
+                      }}
+                    />
+                    {/* error password */}
+                    <span
+                      className="text-danger"
+                      ref={errorPassword}
+                      style={{ fontSize: '13px' }}
+                    ></span>
+                  </Grid>
+                  {/* Matieres Resistance Materiaux */}
+                  <Grid item xs={12} sm={6}>
+                    <TextField
+                      label="roles"
+                      name="roles"
+                      fullWidth
+                      color="warning"
+                      value={formData.roles}
+                      onChange={handleInputChange}
+                      disabled
+                      InputProps={{
+                        startAdornment: <InputAdornment position="start"></InputAdornment>
+                      }}
+                      inputRef={rolesRef}
+                      sx={{
+                        '& .MuiOutlinedInput-root': {
+                          '&:hover fieldset': {
+                            borderColor: '#ff9800' // Set the border color on hover
+                          }
+                        }
+                      }}
+                    />
+                  </Grid>
+                  {/* Submit Button */}
+                  <Grid
+                    item
+                    xs={12}
+                    style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }}
+                  >
+                    <Button type="submit" color="warning" variant="contained">
+                      Enregister
+                    </Button>
+                  </Grid>
+                </Grid>
+              </form>
+            </Box>
+          </Box>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Admin

src/renderer/src/components/AjoutTranche.jsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react'
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  Button,
+  Autocomplete,
+  InputAdornment,
+  Box,
+  Grid
+} from '@mui/material'
+import { MdLabelImportantOutline } from 'react-icons/md'
+
+const AjoutTranche = ({ open, onClose, onSubmitSuccess, id }) => {
+  const [formData, setFormData] = useState({
+    etudiant_id: id,
+    tranchename: '',
+    montant: ''
+  })
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormData({ ...formData, [name]: value })
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    let response = await window.etudiants.createTranche(formData)
+
+    if (response.success) {
+      onClose()
+      onSubmitSuccess(true)
+      setFormData({
+        etudiant_id: id,
+        tranchename: '',
+        montant: ''
+      })
+    }
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <form action="" onSubmit={handleSubmit}>
+        <DialogTitle>Ajout tranche</DialogTitle>
+        <DialogContent>
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoFocus
+                  margin="normal"
+                  required
+                  name="tranchename"
+                  label="Désignation"
+                  type="text"
+                  fullWidth
+                  placeholder="Tranche 1"
+                  variant="outlined"
+                  value={formData.tranchename}
+                  color="warning"
+                  onChange={handleChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <MdLabelImportantOutline />
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoFocus
+                  margin="normal"
+                  required
+                  name="montant"
+                  label="Montant"
+                  type="number"
+                  fullWidth
+                  placeholder="Montant"
+                  variant="outlined"
+                  value={formData.montant}
+                  color="warning"
+                  onChange={handleChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <MdLabelImportantOutline />
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+            </Grid>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} color="error">
+            Annuler
+          </Button>
+          <Button type="submit" color="warning">
+            Soumettre
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  )
+}
+
+export default AjoutTranche

src/renderer/src/components/AnneeScolaire.jsx

@@ -48,7 +48,7 @@ const AnneeScolaire = () => {
   const [ids, setIds] = useState(0)
 
   const column = [
-    { field: 'code', headerName: 'Année Scolaire', width: 130 },
+    { field: 'code', headerName: 'Année Univesitaire', width: 130 },
     { field: 'debut', headerName: 'Date de début', width: 130 },
     { field: 'fin', headerName: 'Date de fin', width: 130 },
     {
@@ -259,7 +259,7 @@ const AnneeScolaire = () => {
         <div className={classe.h1style}>
           <div className={classeHome.blockTitle}>
             <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-              <BsCalendar2Date /> Année Scolaire
+              <BsCalendar2Date /> Année Univesitaire
             </h1>
             <Link to={'/addanneescolaire'}>
               <Button color="warning" variant="contained">

src/renderer/src/components/AssignMatiereToMention.jsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { FaPlus } from 'react-icons/fa'
+import { Button, Grid, Paper, Checkbox, Modal, Typography, Box } from '@mui/material'
+import { IoMdReturnRight } from 'react-icons/io'
+import classe from '../assets/AllStyleComponents.module.css'
+import classeAdd from '../assets/AddStudent.module.css'
+import classeHome from '../assets/Home.module.css'
+import svgSuccess from '../assets/success.svg'
+
+const AssignMatiereToMention = () => {
+  let { id } = useParams()
+
+  const [mention, setMention] = useState([])
+  const [matiere, setMatiere] = useState({})
+  const [matiereMention, setMatiereMention] = useState([])
+  const [formData, setFormData] = useState({})
+
+  // Fetch data on component mount
+  useEffect(() => {
+    window.matieres.getAsign({ id }).then((response) => {
+      setMatiereMention(response) // Set matiereMention
+    })
+    window.mention.getMention().then((response) => {
+      setMention(response) // Set mention
+    })
+    window.matieres.getMatiereByID({ id }).then((response) => {
+      setMatiere(response) // Set matiere
+    })
+  }, [id])
+
+  // Initialize formData based on mentions and matiereMention
+  useEffect(() => {
+    if (mention.length && matiereMention.length) {
+      const initialFormData = mention.reduce((acc, mens) => {
+        // Check if the current mention ID exists in matiereMention
+        const isChecked = matiereMention.some((item) => item.mention_id === mens.id)
+        acc[mens.id] = isChecked // Set true if matched, false otherwise
+        return acc
+      }, {})
+      setFormData(initialFormData) // Update formData
+    }
+  }, [mention, matiereMention])
+
+  /**
+   * Handle form submission
+   */
+  const formSubmit = async (e) => {
+    e.preventDefault()
+
+    let response = await window.matieres.asign({ formData, id })
+    console.log(response)
+    if (response.success) {
+      setOpen(true)
+    }
+  }
+
+  /**
+   * Handle checkbox change
+   */
+  const handleCheckboxChange = (id) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      [id]: !prevData[id] // Toggle the checkbox value
+    }))
+  }
+
+  /**
+   * hook to open modal
+   */
+  const [open, setOpen] = useState(false)
+
+  /**
+   * function to close modal
+   */
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  /**
+   * function to return the view Modal
+   *
+   * @returns {JSX}
+   */
+  const modals = () => (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 450,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Typography style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+          <img src={svgSuccess} alt="" width={50} height={50} />{' '}
+          <span>Changemet effectuée avec succès</span>
+        </Typography>
+        <Box
+          sx={{
+            marginTop: '2%',
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button onClick={handleClose} color="warning" variant="contained">
+            OK
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  )
+
+  return (
+    <div className={classe.mainHome}>
+      {modals()}
+      <div className={classeAdd.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <FaPlus /> Asignation
+            </h1>
+            <Link to={'#'} onClick={() => window.history.back()}>
+              <Button color="warning" variant="contained">
+                <IoMdReturnRight style={{ fontSize: '20px' }} />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <Paper
+        sx={{
+          height: 'auto',
+          minHeight: 500,
+          display: 'flex',
+          width: '100%'
+        }}
+      >
+        <form style={{ width: '100%', padding: '2%' }} onSubmit={formSubmit}>
+          <h5 style={{ textAlign: 'center', textDecoration: 'underline' }}>
+            Choisissez les mentions qui utilisent {matiere?.nom || 'la matière'}
+          </h5>
+          <Grid container spacing={2}>
+            {mention.map((mens) => (
+              <Grid
+                item
+                xs={12}
+                sm={3}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: 5
+                }}
+                key={mens.id}
+              >
+                <span>
+                  <b>
+                    <i>{mens.nom}</i>
+                  </b>
+                </span>
+                <span>
+                  <Checkbox
+                    checked={formData[mens.id] || false} // Bind checkbox to formData
+                    onChange={() => handleCheckboxChange(mens.id)} // Handle change
+                    color="success"
+                  />
+                </span>
+              </Grid>
+            ))}
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            style={{
+              display: 'flex',
+              gap: '30px',
+              justifyContent: 'flex-end'
+            }}
+          >
+            <Button type="submit" color="warning" variant="contained">
+              Enregistrer
+            </Button>
+          </Grid>
+        </form>
+      </Paper>
+    </div>
+  )
+}
+
+export default AssignMatiereToMention

src/renderer/src/components/AssingMatiereToSemestre.jsx

@@ -0,0 +1,259 @@
+import React, { useEffect, useState } from 'react'
+import classe from '../assets/AllStyleComponents.module.css'
+import classeAdd from '../assets/AddStudent.module.css'
+import classeHome from '../assets/Home.module.css'
+import { Link, useParams } from 'react-router-dom'
+import { Button, Grid, Paper, Modal, Typography, Box } from '@mui/material'
+import { IoMdReturnRight } from 'react-icons/io'
+import { FaPlus } from 'react-icons/fa'
+import OutlinedInput from '@mui/material/OutlinedInput'
+import InputLabel from '@mui/material/InputLabel'
+import MenuItem from '@mui/material/MenuItem'
+import FormControl from '@mui/material/FormControl'
+import Select from '@mui/material/Select'
+import svgSuccess from '../assets/success.svg'
+
+const AssingMatiereToSemestre = () => {
+  let { id } = useParams()
+
+  const [mentions, setMentions] = useState([])
+  const [matiereSemestre, setMatiereSemestre] = useState([])
+  const [matiere, setMatiere] = useState({})
+  const [semestre, setSemestre] = useState([])
+
+  useEffect(() => {
+    window.matieres.asignSemestre({ id }).then((response) => {
+      setMentions(response)
+    })
+
+    window.matieres.getMatiereByID({ id }).then((response) => {
+      setMatiere(response) // Set matiere
+    })
+
+    window.matieres.getSemestreMatiere({ id }).then((response) => {
+      setMatiereSemestre(response) // Set matiere
+    })
+
+    window.matieres.getSemestre().then((response) => {
+      setSemestre(response) // Set matiere
+    })
+  }, [id])
+
+  // State to manage selected semestres for each mention
+  const [selectedSemestres, setSelectedSemestres] = useState({})
+
+  // Populate the initial state for selectedSemestres
+  useEffect(() => {
+    const initialSelectedSemestres = {}
+    matiereSemestre.forEach((item) => {
+      if (!initialSelectedSemestres[item.mention_id]) {
+        initialSelectedSemestres[item.mention_id] = []
+      }
+      initialSelectedSemestres[item.mention_id].push(item.semestre_id)
+    })
+    setSelectedSemestres(initialSelectedSemestres)
+  }, [matiereSemestre])
+
+  // Handle change in Select
+  const handleChange = (id) => (event) => {
+    const {
+      target: { value }
+    } = event
+
+    // Update state for the specific mention ID
+    setSelectedSemestres((prevState) => ({
+      ...prevState,
+      [id]: typeof value === 'string' ? value.split(',') : value
+    }))
+  }
+
+  const formSubmit = async (e) => {
+    e.preventDefault()
+
+    let response = await window.matieres.insertUpdateMentionSemestre({ id, selectedSemestres })
+
+    console.log(response)
+    if (response.success) {
+      setOpen(true)
+    }
+  }
+
+  /**
+   * hook to open modal
+   */
+  const [open, setOpen] = useState(false)
+
+  /**
+   * function to close modal
+   */
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  /**
+   * function to return the view Modal
+   *
+   * @returns {JSX}
+   */
+  const modals = () => (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 450,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Typography style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+          <img src={svgSuccess} alt="" width={50} height={50} />{' '}
+          <span>Changemet effectuée avec succès</span>
+        </Typography>
+        <Box
+          sx={{
+            marginTop: '2%',
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button onClick={handleClose} color="warning" variant="contained">
+            OK
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  )
+
+  console.log(matiereSemestre)
+
+  // Step 1: Preprocess matiereSemestre to create a mapping
+  const preprocessSemestres = () => {
+    const mapping = {}
+    matiereSemestre.forEach((item) => {
+      if (item.matiere_id === id) {
+        // Filter by matiere_id if necessary
+        if (!mapping[item.mention_id]) {
+          mapping[item.mention_id] = []
+        }
+        mapping[item.mention_id].push(item.semestre_id)
+      }
+    })
+    return mapping
+  }
+
+  return (
+    <div className={classe.mainHome}>
+      {modals()}
+      <div className={classeAdd.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <FaPlus /> Asignation Semestre
+            </h1>
+            <Link to={'/matiere'}>
+              <Button color="warning" variant="contained">
+                <IoMdReturnRight style={{ fontSize: '20px' }} />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+      <Paper
+        sx={{
+          height: 'auto',
+          minHeight: 500,
+          display: 'flex',
+          width: '100%'
+        }}
+      >
+        <form style={{ width: '100%', padding: '2%' }} onSubmit={formSubmit}>
+          <h5 style={{ textAlign: 'center', textDecoration: 'underline' }}>
+            Choisissez les semestre dans la quelle on enseigne {matiere?.nom || 'la matière'}
+          </h5>
+          <Grid container spacing={2}>
+            {mentions.map((mens) => (
+              <Grid
+                item
+                xs={12}
+                sm={4}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: 5
+                }}
+                key={mens.id}
+              >
+                <div>
+                  <div>
+                    <b>
+                      <i>{mens.nom}</i>
+                    </b>
+                  </div>
+                  <div>
+                    <FormControl sx={{ m: 1, width: 300 }}>
+                      <InputLabel id={`semestre-label-${mens.id}`} color="warning">
+                        Semestre
+                      </InputLabel>
+                      <Select
+                        labelId={`semestre-label-${mens.id}`}
+                        id={`semestre-select-${mens.id}`}
+                        multiple
+                        color="warning"
+                        size="small"
+                        required
+                        value={selectedSemestres[mens.id] || []} // Pre-select semestres for this mention
+                        onChange={handleChange(mens.id)} // Pass mention ID to handler
+                        input={<OutlinedInput label="Semestre" />}
+                        MenuProps={{
+                          PaperProps: {
+                            style: {
+                              maxHeight: 200, // Limit dropdown height
+                              width: 250 // Adjust dropdown width if needed
+                            }
+                          }
+                        }}
+                      >
+                        {semestre.map((sem) => (
+                          <MenuItem key={sem.id} value={sem.id}>
+                            {sem.nom}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  </div>
+                </div>
+              </Grid>
+            ))}
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            style={{
+              display: 'flex',
+              gap: '30px',
+              justifyContent: 'flex-end'
+            }}
+          >
+            <Button type="submit" color="warning" variant="contained">
+              Enregistrer
+            </Button>
+          </Grid>
+        </form>
+      </Paper>
+    </div>
+  )
+}
+
+export default AssingMatiereToSemestre

src/renderer/src/components/CustomBar.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {
+  GridToolbarContainer,
+  GridToolbarFilterButton,
+  GridToolbarColumnsButton,
+  GridToolbarExport
+} from '@mui/x-data-grid'
+import { Button } from '@mui/material'
+import { FaCloudUploadAlt } from 'react-icons/fa'
+
+const CustomBar = ({ onImport }) => {
+  return (
+    <GridToolbarContainer>
+      <GridToolbarColumnsButton />
+      <GridToolbarFilterButton />
+      {/* Custom import button */}
+      <Button
+        variant="contained"
+        color="inherit"
+        startIcon={<FaCloudUploadAlt />}
+        onClick={onImport}
+      >
+        Importer
+      </Button>
+      <GridToolbarExport />
+    </GridToolbarContainer>
+  )
+}
+
+export default CustomBar

src/renderer/src/components/DeleteTranche.jsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react'
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Button,
+  Box,
+  Typography
+} from '@mui/material'
+
+const DeleteTranche = ({ open, onClose, id, onSubmitSuccess }) => {
+  const [idDelete, setIdDelete] = useState(null)
+
+  useEffect(() => {
+    setIdDelete(id)
+  }, [id])
+
+  console.log(idDelete)
+
+  const deleteOption = async () => {
+    if (idDelete !== null) {
+      const id = idDelete
+      let response = await window.etudiants.deleteTranche({ id })
+      if (response.success) {
+        onSubmitSuccess(true)
+        onClose()
+      }
+    }
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Suppression</DialogTitle>
+      <DialogContent>
+        <Box sx={{ flexGrow: 1, width: '300px' }}>
+          <Typography>Voulez vous Supprimer ?</Typography>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="error">
+          Annuler
+        </Button>
+        <Button onClick={deleteOption} color="warning">
+          Soumettre
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default DeleteTranche

src/renderer/src/components/ExportEtudiants.jsx

@@ -460,16 +460,16 @@ const ExportEtudiants = () => {
                     >
                       <MenuItem value={col.headerName}>{col.headerName}</MenuItem>
                       <MenuItem value={'nom'}>nom</MenuItem>
-                      <MenuItem value={'prenom'}>prenom</MenuItem>
+                      <MenuItem value={'prenom'}>prénom</MenuItem>
                       <MenuItem value={`niveau`}>niveau</MenuItem>
                       <MenuItem value={`date_naissance`}>date de naissance</MenuItem>
-                      <MenuItem value={`annee_scolaire`}>année scolaire</MenuItem>
+                      <MenuItem value={`annee_scolaire`}>Année Univesitaire</MenuItem>
                       <MenuItem value={`mention`}>mention</MenuItem>
                       <MenuItem value={`num_inscription`}>numéro d'inscription</MenuItem>
-                      <MenuItem value={`nationalite`}>Nationaliter</MenuItem>
+                      <MenuItem value={`nationalite`}>Nationalité</MenuItem>
                       <MenuItem value={`sexe`}>Sexe</MenuItem>
                       <MenuItem value={`cin`}>CIN</MenuItem>
-                      <MenuItem value={`date_de_livraison`}>Date de livraison</MenuItem>
+                      <MenuItem value={`date_de_livraison`}>Date de délivrance(CIN)</MenuItem>
                       <MenuItem value={`annee_baccalaureat`}>Année du baccalaureat</MenuItem>
                       <MenuItem value={`serie`}>Série</MenuItem>
                       <MenuItem value={`code_redoublement`}>Code redoublement</MenuItem>

src/renderer/src/components/ForgotPassword.jsx

@@ -0,0 +1,247 @@
+import React, { useRef, useState } from 'react'
+import classe from '../assets/Login.module.css'
+import { FaEnvelope, FaLock, FaLockOpen } from 'react-icons/fa'
+import { Link } from 'react-router-dom'
+import {
+  Modal,
+  Box,
+  Container,
+  Grid,
+  Card,
+  Typography,
+  TextField,
+  Button,
+  InputAdornment
+} from '@mui/material'
+import { validationForgotPassword } from './validation/ForgotPassword'
+
+const ForgotPassword = () => {
+  /**
+   * hook to store data from the input field
+   */
+  const [email, setEmail] = useState()
+  const [password, setPassword] = useState()
+  const [passwordConfirmation, setPasswordConfirmation] = useState()
+
+  /**
+   * hook to open modal and set the sattus and message
+   */
+  const [open, setOpen] = useState(false)
+  const [message, setMessage] = useState('')
+  const [status, setStatus] = useState(null)
+
+  const handleClose = () => setOpen(false)
+
+  /**
+   * ref for our email and password, confirm password input and the error span
+   */
+  const emailRef = useRef()
+  const passwordRef = useRef()
+  const passwordConfirmationRef = useRef()
+  const emailError = useRef()
+  const passwordError = useRef()
+  const passwordConfirmationError = useRef()
+
+  /**
+   * function to return the view Modal
+   *
+   * @returns {JSX}
+   */
+  const modals = () => (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 400,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Typography id="modal-title" variant="h6" component="h2">
+          {status === 200 ? 'Success' : 'Error'}
+        </Typography>
+        <Typography id="modal-description" sx={{ mt: 2 }}>
+          {message}
+        </Typography>
+        <Button onClick={handleClose}>Close</Button>
+      </Box>
+    </Modal>
+  )
+
+  /**
+   * function to send the email verification
+   * to change the password and redirect the user to login
+   *
+   * @param {any} e
+   */
+  const verification = async (e) => {
+    e.preventDefault()
+
+    let validation = validationForgotPassword(
+      emailRef.current,
+      passwordRef.current,
+      passwordConfirmationRef.current,
+      emailError.current,
+      passwordError.current,
+      passwordConfirmationError.current
+    )
+    console.log(validation)
+    if (validation === true) {
+      const response = await window.allUser.forgotPassword({
+        email,
+        password,
+        passwordConfirmation
+      })
+
+      if (response.status === 200) {
+        setMessage(response.message)
+        setStatus(200)
+      } else {
+        setMessage(response.message)
+        setStatus(response.status)
+      }
+      setOpen(true)
+      console.log(response)
+    }
+  }
+
+  return (
+    <Container
+      maxWidth={false}
+      sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      className={classe.container}
+    >
+      {modals()}
+      <Grid container justifyContent="center">
+        <Grid item xs={12} md={6} lg={4}>
+          <Card className={`p-4 shadow ${classe.cards}`} sx={{ padding: 4, boxShadow: 3 }}>
+            <Typography variant="h5" align="center" gutterBottom>
+              Changer de mot de passe
+            </Typography>
+            <form onSubmit={verification} className={classe.formulaireLogin}>
+              <TextField
+                label="Email"
+                variant="outlined"
+                type="text"
+                color="secondary"
+                className={classe.input}
+                fullWidth
+                margin="normal"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FaEnvelope style={{ color: 'white' }} />
+                    </InputAdornment>
+                  )
+                }}
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '& fieldset': {
+                      borderColor: 'white' // Set the border color when not focused
+                    },
+                    '&:hover fieldset': {
+                      borderColor: 'rgb(156, 39, 176)' // Set the border color on hover
+                    }
+                  }
+                }}
+                placeholder="Entrer email"
+                onChange={(e) => setEmail(e.target.value)}
+                inputRef={emailRef}
+              />
+              <span ref={emailError} className="text-danger"></span>
+
+              <TextField
+                label="Nouveau Mot de passe"
+                variant="outlined"
+                type="password"
+                className={classe.input}
+                color="secondary"
+                fullWidth
+                margin="normal"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FaLock style={{ color: 'white' }} />
+                    </InputAdornment>
+                  )
+                }}
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '& fieldset': {
+                      borderColor: 'white' // Set the border color when not focused
+                    },
+                    '&:hover fieldset': {
+                      borderColor: 'rgb(156, 39, 176)' // Set the border color on hover
+                    }
+                  }
+                }}
+                placeholder="Mot de passe"
+                onChange={(e) => setPassword(e.target.value)}
+                inputRef={passwordRef}
+              />
+              <span ref={passwordError} className="text-danger"></span>
+
+              <TextField
+                label="Confirmation Mot de passe"
+                variant="outlined"
+                type="password"
+                color="secondary"
+                fullWidth
+                margin="normal"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FaLockOpen style={{ color: 'white' }} />
+                    </InputAdornment>
+                  )
+                }}
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '& fieldset': {
+                      borderColor: 'white' // Set the border color when not focused
+                    },
+                    '&:hover fieldset': {
+                      borderColor: 'rgb(156, 39, 176)' // Set the border color on hover
+                    }
+                  }
+                }}
+                className={classe.input}
+                placeholder="Confirmation Mot de passe"
+                onChange={(e) => setPasswordConfirmation(e.target.value)}
+                inputRef={passwordConfirmationRef}
+              />
+              <span ref={passwordConfirmationError} className="text-danger"></span>
+
+              <Button
+                variant="contained"
+                color="secondary"
+                type="submit"
+                fullWidth
+                sx={{ marginTop: 2 }}
+              >
+                Modifier
+              </Button>
+
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
+                <Link to="/login" style={{ color: '#FFFFFF' }}>
+                  Se connecter
+                </Link>
+              </div>
+            </form>
+          </Card>
+        </Grid>
+      </Grid>
+    </Container>
+  )
+}
+
+export default ForgotPassword

src/renderer/src/components/Home.jsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useState } from 'react'
+import classe from '../assets/AllStyleComponents.module.css'
+import { Bar } from 'react-chartjs-2'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js'
+import classeHome from '../assets/Home.module.css'
+import dclass from '../assets/Dashboard.module.css'
+import dayjs from 'dayjs'
+import MenuItem from '@mui/material/MenuItem'
+import FormControl from '@mui/material/FormControl'
+import Select from '@mui/material/Select'
+import InputLabel from '@mui/material/InputLabel'
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+
+const Home = () => {
+  const [etudiants, setEtudiants] = useState([])
+  const [niveau, setNiveau] = useState([])
+  const [annee_scolaire, setAnnee_scolaire] = useState([])
+  const [originalEtudiants, setOriginalEtudiants] = useState([])
+  // Get the current year
+  const currentYear = dayjs().year()
+
+  useEffect(() => {
+    // Fetch data and update state
+    window.etudiants.getDataToDashboards().then((response) => {
+      setEtudiants(response.etudiants)
+      setOriginalEtudiants(response.etudiants)
+      setNiveau(response.niveau)
+      setAnnee_scolaire(response.anne_scolaire)
+    })
+  }, [])
+
+  // filter all data
+
+  // ordre des colones de filtre
+  const desiredOrder = ['L1', 'L2', 'L3', 'M1', 'M2', 'D1', 'D2', 'D3']
+  let allNiveau = niveau.map((item) => item.nom)
+  allNiveau.sort((a, b) => desiredOrder.indexOf(a) - desiredOrder.indexOf(b))
+
+  const studentGrades = {}
+
+  // Loop through allNiveau and set the number of students for each key
+  allNiveau.forEach((niveauNom) => {
+    // Filter etudiants based on the matching niveau
+    const studentCount = etudiants.filter((etudiant) => etudiant.niveau === niveauNom).length
+
+    // Assign the student count as the value for the corresponding key in studentGrades
+    studentGrades[niveauNom] = studentCount
+  })
+  const studentCounts = Object.values(studentGrades)
+
+  // Find the maximum value using Math.max
+  const maxStudentCount = Math.max(...studentCounts)
+
+  const FilterAnneeScolaire = (e) => {
+    let annee_scolaire = e.target.value
+    const filteredEtudiants = originalEtudiants.filter(
+      (etudiant) => etudiant.annee_scolaire === annee_scolaire
+    )
+    setEtudiants(filteredEtudiants)
+    if (annee_scolaire == 'general') {
+      setEtudiants(originalEtudiants)
+    }
+  }
+  // end filter all data
+
+  // Calculate the number of classes
+  const numberOfClasses = Object.keys(studentGrades).length
+
+  // Data for the Bar chart
+  const data = {
+    labels: Object.keys(studentGrades), // Class levels
+    datasets: [
+      {
+        label: 'Nombre des étudiants',
+        data: Object.values(studentGrades), // Student counts
+        backgroundColor: [
+          '#FF6384',
+          '#36A2EB',
+          '#FFCE56',
+          '#4BC0C0',
+          '#9966FF',
+          '#FF9F40',
+          '#C9CBCF',
+          '#00A36C'
+        ], // Colors for each bar
+        borderColor: [
+          '#FF6384',
+          '#36A2EB',
+          '#FFCE56',
+          '#4BC0C0',
+          '#9966FF',
+          '#FF9F40',
+          '#C9CBCF',
+          '#00A36C'
+        ],
+        borderWidth: 1
+      }
+    ]
+  }
+
+  // Chart options
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top'
+      },
+      title: {
+        display: true,
+        text: `Nombre des niveau (Total : ${numberOfClasses})`
+      }
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        max: maxStudentCount // Set max value for the Y axis
+      }
+    }
+  }
+
+  return (
+    <div className={classe.mainHome}>
+      <div className={classeHome.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1>Dashboard</h1>
+            <FormControl
+              sx={{
+                m: 1,
+                width: '30%',
+                '& .MuiOutlinedInput-root': {
+                  '&:hover fieldset': {
+                    borderColor: '#ff9800' // Set the border color on hover
+                  }
+                }
+              }}
+              size="small"
+              variant="outlined"
+            >
+              <InputLabel
+                id="demo-select-small-label"
+                sx={{ color: 'black', fontSize: '15px', textTransform: 'capitalize' }}
+                color="warning"
+              >
+                Année Univesitaire
+              </InputLabel>
+              <Select
+                labelId="demo-select-small-label"
+                id="demo-select-small"
+                label="Année Univesitaire"
+                color="warning"
+                defaultValue={'general'}
+                onChange={FilterAnneeScolaire}
+                sx={{
+                  background: 'white',
+                  textTransform: 'capitalize',
+                  display: 'flex',
+                  alignItems: 'center', // Align icon and text vertically
+                  '& .MuiSelect-icon': {
+                    marginLeft: 'auto' // Keep the dropdown arrow to the right
+                  }
+                }}
+              >
+                <MenuItem value="general" selected>
+                  <em>Géneral</em>
+                </MenuItem>
+                {annee_scolaire.map((niveau) => (
+                  <MenuItem value={niveau.annee_scolaire} key={niveau.annee_scolaire}>
+                    {niveau.annee_scolaire}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </div>
+        </div>
+      </div>
+      {/* display each bars */}
+      <div className={dclass.display}>
+        <Bar data={data} options={options} />
+      </div>
+    </div>
+  )
+}
+
+export default Home

src/renderer/src/components/ImportMatiere.jsx

@@ -0,0 +1,489 @@
+import React, { useEffect, useState } from 'react'
+import classe from '../assets/AllStyleComponents.module.css'
+import classeAdd from '../assets/AddStudent.module.css'
+import classeHome from '../assets/Home.module.css'
+import { Box, Button, Typography, ThemeProvider, Modal } from '@mui/material'
+import { Link } from 'react-router-dom'
+import { FaCloudDownloadAlt, FaCloudUploadAlt, FaFileExcel } from 'react-icons/fa'
+import { IoMdReturnRight } from 'react-icons/io'
+import { styled, createTheme } from '@mui/material/styles'
+import * as XLSX from 'xlsx'
+import Papa from 'papaparse'
+import { DataGrid, GridToolbarContainer, GridToolbarColumnsButton } from '@mui/x-data-grid'
+import { frFR } from '@mui/x-data-grid/locales'
+import CustomBar from './CustomBar'
+import dayjs from 'dayjs'
+import svgSuccess from '../assets/success.svg'
+import svgError from '../assets/error.svg'
+import { MenuItem, Select, FormControl, InputLabel } from '@mui/material'
+
+const ImportMatiere = () => {
+  const VisuallyHiddenInput = styled('input')({
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: 1,
+    overflow: 'hidden',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    whiteSpace: 'nowrap',
+    width: 1
+  })
+
+  const [error, setError] = useState('')
+  const [isInserted, setIsinserted] = useState(true)
+  const [message, setMessage] = useState('')
+  const [tableData, setTableData] = useState([])
+  const [files, setFiles] = useState()
+  const [header, setHeader] = useState([])
+  let field = []
+  const [dynamicColumns, setColumns] = useState([])
+
+  for (let index = 0; index < header.length; index++) {
+    field.push(header[index].toLowerCase().replace(/\s+/g, '_'))
+  }
+
+  useEffect(() => {
+    setColumns(
+      header.map((col, index) => ({
+        field: field[index], // Converts the header text to field names (e.g., "Nom" -> "nom")
+        headerName: col, // Display the header as is
+        width: 150 // Adjust the width as needed
+      }))
+    )
+  }, [header])
+
+  const theme = createTheme({
+    components: {
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            color: 'gray' // Toolbar icons color
+          }
+        }
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            color: '#121212' // Button text color
+          }
+        }
+      }
+    }
+  })
+
+  const paginationModel = { page: 0, pageSize: 5 }
+
+  // Assuming `tableData` is an array where each entry corresponds to a student's data
+  const dataRow = tableData.map((etudiant, index) => {
+    // Dynamically create an object with fields from the header and data from `etudiant`
+    let row = { id: index + 1 } // Unique ID for each row
+
+    field.forEach((fieldName, idx) => {
+      if (fieldName === 'date_de_naissance') {
+        row[fieldName] = dayjs(etudiant[idx]).format('DD-MM-YYYY') // Format date
+      } else {
+        row[fieldName] = etudiant[idx] // Assign value to field dynamically
+      }
+    })
+
+    return row
+  })
+
+  const handleFileChange = (event) => {
+    const file = event.target.files[0]
+    setFiles(event.target.files[0])
+    if (!file) {
+      setError('No file selected')
+      return
+    }
+
+    const fileExtension = file.name.split('.').pop().toLowerCase()
+
+    if (fileExtension === 'xlsx') {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const data = new Uint8Array(e.target.result)
+        const workbook = XLSX.read(data, { type: 'array' })
+
+        // Extract data from all sheets and combine
+        const allData = []
+        workbook.SheetNames.forEach((sheetName) => {
+          const worksheet = workbook.Sheets[sheetName]
+          const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
+          setHeader(rows[0]) // keep the header
+          allData.push(...rows.slice(1)) // Skip header row for each sheet
+        })
+        setTableData(allData)
+      }
+      reader.readAsArrayBuffer(file)
+    } else if (fileExtension === 'csv') {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        Papa.parse(e.target.result, {
+          complete: (results) => {
+            setHeader(results.data[0]) // keep the header
+            setTableData(results.data.slice(1)) // Skip header row
+          },
+          header: false
+        })
+      }
+      reader.readAsText(file)
+    } else {
+      setError('Unsupported file format. Please upload .xlsx or .csv file.')
+      setTableData([])
+    }
+  }
+
+  const exemplaireFileExcel = [
+    {
+      nom: 'matiere 1',
+      credit: 5,
+      uniter: 'MUI',
+      heure: 39
+    },
+    {
+      nom: 'matiere 2',
+      credit: 5,
+      uniter: 'MUI',
+      heure: 39
+    },
+    {
+      nom: 'matiere 3',
+      credit: 5,
+      uniter: 'MUI',
+      heure: 39
+    },
+    {
+      nom: 'matiere 4',
+      credit: 5,
+      uniter: 'MUI',
+      heure: 39
+    },
+    {
+      nom: 'matiere 5',
+      credit: 5,
+      uniter: 'MUI',
+      heure: 39
+    }
+  ]
+
+  const convertToExcel = () => {
+    // convert json to sheet
+    const worksheet = XLSX.utils.json_to_sheet(exemplaireFileExcel)
+
+    // Create a new workbook and append the worksheet
+    const workbook = XLSX.utils.book_new()
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+
+    // Write the workbook to a Blob and create a download link
+    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
+    const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
+    const url = URL.createObjectURL(data)
+
+    // Trigger a download
+    const link = document.createElement('a')
+    link.href = url
+    link.download = 'exemplaier_matiere.xlsx'
+    link.click()
+
+    // Clean up
+    URL.revokeObjectURL(url)
+  }
+
+  const handleColumnVisibilityChange = (model) => {
+    // Get the currently visible columns
+    const visibleColumns = dynamicColumns.filter((column) => model[column.field] !== false)
+
+    // Create a new Excel file with visible columns
+    createExcelFile(visibleColumns)
+  }
+
+  const createExcelFile = (columns) => {
+    // Extract and set the header
+    const header = columns.reduce((acc, col) => {
+      acc[col.field] = col.headerName || col.field // Use headerName or field as default
+      return acc
+    }, {})
+
+    // Map the data rows to match the extracted headers
+    const worksheetData = dataRow.map((row) => {
+      const filteredRow = {}
+      columns.forEach((col) => {
+        const headerName = header[col.field]
+        filteredRow[headerName] = row[col.field]
+      })
+      return filteredRow
+    })
+
+    // Create a worksheet from the data
+    const ws = XLSX.utils.json_to_sheet(worksheetData)
+
+    // Create a workbook and add the worksheet to it
+    const wb = XLSX.utils.book_new()
+    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
+
+    // Generate the Excel file as binary data
+    const excelFile = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
+
+    // Create a Blob for the Excel data
+    const blob = new Blob([excelFile], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    })
+
+    // Create a link element to trigger the download
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = 'original-file.xlsx' // Original file name or any desired name
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url) // Clean up
+  }
+
+  /**
+   * fonction qui envoye dans le back
+   */
+  const handleImport = async () => {
+    // Code to handle file import (can open a file dialog or call handleFileChange)
+
+    let response = await window.matieres.importExcel(files.path)
+
+    console.log(response)
+
+    if (response.message) {
+      setMessage(response.message)
+    }
+
+    if (response.error) {
+      setIsinserted(true)
+      setOpen(true)
+      setTableData([])
+    } else {
+      setIsinserted(false)
+      setOpen(true)
+    }
+  }
+
+  /**
+   * hook to open modal
+   */
+  const [open, setOpen] = useState(false)
+
+  /**
+   * function to close modal
+   */
+  const handleClose = () => setOpen(false)
+
+  /**
+   * function to return the view Modal
+   *
+   * @returns {JSX}
+   */
+  const modals = () => (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 450,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        {isInserted ? (
+          <Typography
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}
+          >
+            <img src={svgSuccess} alt="" width={50} height={50} />{' '}
+            <span>Importation a été effectuée avec succès</span>
+          </Typography>
+        ) : (
+          <Typography
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}
+          >
+            <img src={svgError} alt="" width={50} height={50} />{' '}
+            <span>
+              L'importation n'a pas été effectuée
+              <br />
+              {message}
+            </span>
+          </Typography>
+        )}
+        <Box
+          sx={{
+            marginTop: '2%',
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button onClick={handleClose} color="warning" variant="contained">
+            OK
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  )
+
+  // Handle header name change for a specific field and auto-export to Excel
+  const handleHeaderChange = (field, newHeaderName) => {
+    setColumns((prevColumns) =>
+      prevColumns.map((col) => (col.field === field ? { ...col, headerName: newHeaderName } : col))
+    )
+  }
+
+  return (
+    <div className={classe.mainHome}>
+      {modals()}
+      <div className={classeAdd.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <FaFileExcel />
+              Importation de données
+            </h1>
+            <Link to={'/addmatiere'}>
+              <Button color="warning" variant="contained">
+                <IoMdReturnRight style={{ fontSize: '20px' }} />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* displaying */}
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '52%',
+          left: '52%',
+          transform: 'translate(-50%, -50%)',
+          width: '95%',
+          borderRadius: '2%',
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Box sx={{ mt: 2, display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+          <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
+            <Button
+              component="label"
+              variant="contained"
+              color="warning"
+              startIcon={<FaCloudUploadAlt />}
+            >
+              Charger un fichier excel
+              <VisuallyHiddenInput type="file" onChange={handleFileChange} accept=".xlsx, .csv" />
+            </Button>
+            <Button
+              component="label"
+              variant="contained"
+              color="error"
+              startIcon={<FaCloudDownloadAlt />}
+              onClick={convertToExcel}
+            >
+              Télécharger le modèle d'import
+            </Button>
+          </div>
+          {error && (
+            <Typography color="error" variant="body2">
+              {error}
+            </Typography>
+          )}
+          {tableData.length > 0 && (
+            <ThemeProvider theme={theme}>
+              <div
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
+              >
+                {/* Dropdowns for each column */}
+                {dynamicColumns.map((col) => (
+                  <FormControl
+                    key={col.field}
+                    sx={{
+                      m: 1,
+                      width: '100%',
+                      '& .MuiOutlinedInput-root': {
+                        '&:hover fieldset': {
+                          borderColor: '#ff9800' // Set the border color on hover
+                        }
+                      }
+                    }}
+                    size="small"
+                    color="warning"
+                    variant="outlined"
+                    style={{ margin: 10, width: 200 }}
+                  >
+                    <InputLabel id={col.headerName}>{col.headerName}</InputLabel>
+                    <Select
+                      labelId={col.headerName}
+                      value={col.headerName}
+                      label={col.headerName}
+                      color="warning"
+                      name={col.headerName}
+                      onChange={(e) => handleHeaderChange(col.field, e.target.value)}
+                    >
+                      <MenuItem value={col.headerName}>{col.headerName}</MenuItem>
+                      <MenuItem value={'nom'}>nom</MenuItem>
+                      <MenuItem value={'credit'}>credit</MenuItem>
+                      <MenuItem value={`uniter`}>uniter d'enseignement</MenuItem>
+                      <MenuItem value={`ue`}>UE</MenuItem>
+                    </Select>
+                  </FormControl>
+                ))}
+              </div>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexDirection: 'column',
+                  width: '100%'
+                }}
+              >
+                <DataGrid
+                  rows={dataRow}
+                  columns={dynamicColumns}
+                  initialState={{ pagination: { paginationModel } }}
+                  onColumnVisibilityModelChange={handleColumnVisibilityChange} // Listen for column visibility changes
+                  pageSizeOptions={[5, 10]}
+                  disableRowSelectionOnClick
+                  sx={{
+                    width: '100%',
+                    height: '100%',
+                    minHeight: 400,
+                    maxWidth: '100%', // Prevents grid from exceeding the container width
+                    '@media (max-width: 600px)': {
+                      width: '100%',
+                      height: 'auto', // Adjust height for smaller screens
+                      fontSize: '0.8rem' // Smaller font size for better readability on small screens
+                    },
+                    '@media (max-width: 960px)': {
+                      fontSize: '1rem' // Adjust font size for medium screens
+                    }
+                  }}
+                  slots={{ toolbar: CustomBar }}
+                  slotProps={{ toolbar: { onImport: handleImport } }}
+                  localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
+                />
+              </div>
+            </ThemeProvider>
+          )}
+        </Box>
+      </Box>
+    </div>
+  )
+}
+
+export default ImportMatiere

src/renderer/src/components/ImportNiveau.jsx

@@ -0,0 +1,397 @@
+import React, { useState } from 'react'
+import classe from '../assets/AllStyleComponents.module.css'
+import classeAdd from '../assets/AddStudent.module.css'
+import classeHome from '../assets/Home.module.css'
+import { Box, Button, Typography, ThemeProvider, Modal } from '@mui/material'
+import { Link } from 'react-router-dom'
+import { FaCloudDownloadAlt, FaCloudUploadAlt, FaFileExcel } from 'react-icons/fa'
+import { IoMdReturnRight } from 'react-icons/io'
+import { styled, createTheme } from '@mui/material/styles'
+import * as XLSX from 'xlsx'
+import Papa from 'papaparse'
+import { DataGrid, GridToolbarContainer, GridToolbarColumnsButton } from '@mui/x-data-grid'
+import { frFR } from '@mui/x-data-grid/locales'
+import CustomBar from './CustomBar'
+import dayjs from 'dayjs'
+import svgSuccess from '../assets/success.svg'
+
+const ImportNiveau = () => {
+  const VisuallyHiddenInput = styled('input')({
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: 1,
+    overflow: 'hidden',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    whiteSpace: 'nowrap',
+    width: 1
+  })
+
+  const [error, setError] = useState('')
+  const [tableData, setTableData] = useState([])
+  const [files, setFiles] = useState()
+  const [header, setHeader] = useState([])
+  let field = []
+
+  for (let index = 0; index < header.length; index++) {
+    field.push(header[index].toLowerCase().replace(/\s+/g, '_'))
+  }
+
+  const dynamicColumns = header.map((col, index) => ({
+    field: col.toLowerCase().replace(/\s+/g, '_'), // Converts the header text to field names (e.g., "Nom" -> "nom")
+    headerName: col, // Display the header as is
+    width: 150 // Adjust the width as needed
+  }))
+
+  const theme = createTheme({
+    components: {
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            color: 'gray' // Toolbar icons color
+          }
+        }
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            color: '#121212' // Button text color
+          }
+        }
+      }
+    }
+  })
+
+  const paginationModel = { page: 0, pageSize: 5 }
+
+  // Assuming `tableData` is an array where each entry corresponds to a student's data
+  const dataRow = tableData.map((etudiant, index) => {
+    // Dynamically create an object with fields from the header and data from `etudiant`
+    let row = { id: index + 1 } // Unique ID for each row
+
+    field.forEach((fieldName, idx) => {
+      if (fieldName === 'date_de_naissance') {
+        row[fieldName] = dayjs(etudiant[idx]).format('DD-MM-YYYY') // Format date
+      } else {
+        row[fieldName] = etudiant[idx] // Assign value to field dynamically
+      }
+    })
+
+    return row
+  })
+
+  const handleFileChange = (event) => {
+    const file = event.target.files[0]
+    setFiles(event.target.files[0])
+    if (!file) {
+      setError('No file selected')
+      return
+    }
+
+    const fileExtension = file.name.split('.').pop().toLowerCase()
+
+    if (fileExtension === 'xlsx') {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const data = new Uint8Array(e.target.result)
+        const workbook = XLSX.read(data, { type: 'array' })
+
+        // Extract data from all sheets and combine
+        const allData = []
+        workbook.SheetNames.forEach((sheetName) => {
+          const worksheet = workbook.Sheets[sheetName]
+          const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
+          setHeader(rows[0]) // keep the header
+          allData.push(...rows.slice(1)) // Skip header row for each sheet
+        })
+        setTableData(allData)
+      }
+      reader.readAsArrayBuffer(file)
+    } else if (fileExtension === 'csv') {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        Papa.parse(e.target.result, {
+          complete: (results) => {
+            setHeader(results.data[0]) // keep the header
+            setTableData(results.data.slice(1)) // Skip header row
+          },
+          header: false
+        })
+      }
+      reader.readAsText(file)
+    } else {
+      setError('Unsupported file format. Please upload .xlsx or .csv file.')
+      setTableData([])
+    }
+  }
+
+  const exemplaireFileExcel = [
+    {
+      Nom: 'L1'
+    },
+    {
+      Nom: 'L2'
+    },
+    {
+      Nom: 'L3'
+    },
+    {
+      Nom: 'M1'
+    },
+    {
+      Nom: 'M2'
+    }
+  ]
+
+  const convertToExcel = () => {
+    // convert json to sheet
+    const worksheet = XLSX.utils.json_to_sheet(exemplaireFileExcel)
+
+    // Create a new workbook and append the worksheet
+    const workbook = XLSX.utils.book_new()
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+
+    // Write the workbook to a Blob and create a download link
+    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
+    const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
+    const url = URL.createObjectURL(data)
+
+    // Trigger a download
+    const link = document.createElement('a')
+    link.href = url
+    link.download = 'exemplaire_niveau.xlsx'
+    link.click()
+
+    // Clean up
+    URL.revokeObjectURL(url)
+  }
+
+  const handleColumnVisibilityChange = (model) => {
+    // Get the currently visible columns
+    const visibleColumns = dynamicColumns.filter((column) => model[column.field] !== false)
+
+    // Create a new Excel file with visible columns
+    createExcelFile(visibleColumns)
+  }
+
+  const createExcelFile = (columns) => {
+    // Extract and set the header
+    const header = columns.reduce((acc, col) => {
+      acc[col.field] = col.headerName || col.field // Use headerName or field as default
+      return acc
+    }, {})
+
+    // Map the data rows to match the extracted headers
+    const worksheetData = dataRow.map((row) => {
+      const filteredRow = {}
+      columns.forEach((col) => {
+        const headerName = header[col.field]
+        filteredRow[headerName] = row[col.field]
+      })
+      return filteredRow
+    })
+
+    // Create a worksheet from the data
+    const ws = XLSX.utils.json_to_sheet(worksheetData)
+
+    // Create a workbook and add the worksheet to it
+    const wb = XLSX.utils.book_new()
+    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
+
+    // Generate the Excel file as binary data
+    const excelFile = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
+
+    // Create a Blob for the Excel data
+    const blob = new Blob([excelFile], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    })
+
+    // Create a link element to trigger the download
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = 'original-file.xlsx' // Original file name or any desired name
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url) // Clean up
+  }
+
+  /**
+   * fonction qui envoye dans le back
+   */
+  const handleImport = async () => {
+    // Code to handle file import (can open a file dialog or call handleFileChange)
+
+    let response = await window.niveaus.importNiveau(files.path)
+
+    console.log(response)
+    if (response.success) {
+      setOpen(true)
+      setTableData([])
+    }
+  }
+
+  /**
+   * hook to open modal
+   */
+  const [open, setOpen] = useState(false)
+
+  /**
+   * function to close modal
+   */
+  const handleClose = () => setOpen(false)
+
+  /**
+   * function to return the view Modal
+   *
+   * @returns {JSX}
+   */
+  const modals = () => (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 450,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Typography
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}
+        >
+          <img src={svgSuccess} alt="" width={50} height={50} />{' '}
+          <span>Importation a été effectuée avec succès</span>
+        </Typography>
+        <Box
+          sx={{
+            marginTop: '2%',
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button onClick={handleClose} color="warning" variant="contained">
+            OK
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  )
+
+  return (
+    <div className={classe.mainHome}>
+      {modals()}
+      <div className={classeAdd.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <FaFileExcel />
+              Importation de données
+            </h1>
+            <Link to={'/addniveau'}>
+              <Button color="warning" variant="contained">
+                <IoMdReturnRight style={{ fontSize: '20px' }} />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* displaying */}
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '52%',
+          left: '52%',
+          transform: 'translate(-50%, -50%)',
+          width: '95%',
+          borderRadius: '2%',
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Box sx={{ mt: 2, display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+          <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
+            <Button
+              component="label"
+              variant="contained"
+              color="warning"
+              startIcon={<FaCloudUploadAlt />}
+            >
+              Charger un fichier excel
+              <VisuallyHiddenInput type="file" onChange={handleFileChange} accept=".xlsx, .csv" />
+            </Button>
+            <Button
+              component="label"
+              variant="contained"
+              color="error"
+              startIcon={<FaCloudDownloadAlt />}
+              onClick={convertToExcel}
+            >
+              Télécharger le modèle d'import
+            </Button>
+          </div>
+          {error && (
+            <Typography color="error" variant="body2">
+              {error}
+            </Typography>
+          )}
+          {tableData.length > 0 && (
+            <ThemeProvider theme={theme}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexDirection: 'column',
+                  width: '100%'
+                }}
+              >
+                <DataGrid
+                  rows={dataRow}
+                  columns={dynamicColumns}
+                  initialState={{ pagination: { paginationModel } }}
+                  onColumnVisibilityModelChange={handleColumnVisibilityChange} // Listen for column visibility changes
+                  pageSizeOptions={[5, 10]}
+                  disableRowSelectionOnClick
+                  sx={{
+                    width: '100%',
+                    height: '100%',
+                    minHeight: 400,
+                    maxWidth: '100%', // Prevents grid from exceeding the container width
+                    '@media (max-width: 600px)': {
+                      width: '100%',
+                      height: 'auto', // Adjust height for smaller screens
+                      fontSize: '0.8rem' // Smaller font size for better readability on small screens
+                    },
+                    '@media (max-width: 960px)': {
+                      fontSize: '1rem' // Adjust font size for medium screens
+                    }
+                  }}
+                  slots={{ toolbar: CustomBar }}
+                  slotProps={{ toolbar: { onImport: handleImport } }}
+                  localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
+                />
+              </div>
+            </ThemeProvider>
+          )}
+        </Box>
+      </Box>
+    </div>
+  )
+}
+
+export default ImportNiveau

src/renderer/src/components/IpConfig.jsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useState } from 'react'
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  Button,
+  InputAdornment,
+  Box,
+  Grid,
+  FormControl,
+  InputLabel,
+  Select,
+  OutlinedInput,
+  MenuItem
+} from '@mui/material'
+
+
+const IpConfig = ({ open, onClose }) => {
+
+  const [localIp, setLocalIp] = useState("");
+  const [formData, setFormData] = useState({
+    ipname: "",
+    id: '',
+  })
+  const [ip, setIp] = useState({});
+
+  useEffect(() => {
+
+    window.notesysteme.getIPConfig().then((response) => {
+      setIp(response)
+    })
+
+    const getLocalIP = async () => {
+      const pc = new RTCPeerConnection();
+      pc.createDataChannel(""); // Create a data channel
+      pc.createOffer().then((offer) => pc.setLocalDescription(offer));
+
+      pc.onicecandidate = (event) => {
+        if (event && event.candidate) {
+          const ipRegex = /([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})/;
+          const match = ipRegex.exec(event.candidate.candidate);
+          if (match) setLocalIp(match[1]);
+          pc.close();
+        }
+      };
+    };
+
+    getLocalIP();
+  }, []);
+
+  useEffect(() => {
+    if (ip) {
+      setFormData((prevData) => ({
+        ...prevData,
+        ipname: ip.ipname,
+        id: ip.id
+      }))
+    }
+
+  }, [ip]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormData({ ...formData, [name]: value })
+  }
+
+  const formSubmit = async (e) => {
+    e.preventDefault()
+
+    if (ip == undefined) {
+      let response = await window.notesysteme.createIPConfig(formData)
+      console.log('running the creation: ', response);
+      if (response.changes) {
+        window.notesysteme.getIPConfig().then((response) => {
+          setIp(response)
+        })
+        onClose()
+      }
+    } else {
+      let response = await window.notesysteme.updateIPConfig(formData)
+      console.log('running the update: ', response);
+      if (response.changes) {
+        window.notesysteme.getIPConfig().then((response) => {
+          setIp(response)
+        })
+        onClose()
+      }
+    }
+
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <form action="" onSubmit={formSubmit}>
+        <DialogTitle>Configuration de l'adresse IP</DialogTitle>
+        <div style={{textAlign:"end"}}>Votre Local IP: {localIp || "Detecting..."}</div>
+        <DialogContent>
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={12}>
+                <TextField
+                  autoFocus
+                  margin="dense"
+                  name="ipname"
+                  required
+                  label="IP du PC serveur"
+                  type="text"
+                  fullWidth
+                  variant="outlined"
+                  value={formData.ipname}
+                  color="warning"
+                  onChange={handleChange}
+                />
+              </Grid>
+            </Grid>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} color="warning">
+            Annuler
+          </Button>
+          <Button type="submit" color="warning">
+            Soumettre
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  )
+}
+
+export default IpConfig

src/renderer/src/components/Login.jsx

@@ -0,0 +1,208 @@
+import { useRef, useState, useEffect } from 'react'
+import { Container, Grid, Card, Typography, TextField, Button, InputAdornment } from '@mui/material'
+import { FaUserCircle, FaLock, FaUser } from 'react-icons/fa'
+import classe from '../assets/Login.module.css'
+import { useAuthContext } from '../contexts/AuthContext'
+import { Link, useNavigate } from 'react-router-dom'
+import { ValidationLogin, invalidCredential } from './validation/Login'
+
+const Login = () => {
+  const { token, setToken, setUser, isAuthenticated, isLoading } = useAuthContext()
+  const navigate = useNavigate()
+
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const userNameRef = useRef()
+  const passwordRef = useRef()
+  const userNameError = useRef()
+  const passwordError = useRef()
+
+  // Redirection si déjà authentifié
+  useEffect(() => {
+    if (!isLoading && isAuthenticated) {
+      console.log('Utilisateur déjà authentifié, redirection vers home')
+      navigate('/', { replace: true })
+    }
+  }, [isAuthenticated, isLoading, navigate])
+
+  const formLogin = async (e) => {
+    e.preventDefault()
+    
+    if (isSubmitting) return
+    setIsSubmitting(true)
+
+    try {
+      const validate = ValidationLogin(
+        userNameRef.current,
+        passwordRef.current,
+        userNameError.current,
+        passwordError.current
+      )
+
+      if (!validate) {
+        setIsSubmitting(false)
+        return
+      }
+
+      console.log('Tentative de connexion pour:', username)
+      
+      const response = await window.allUser.login({ username, password })
+      console.log('Réponse login:', response)
+
+      if (response.success) {
+        // Extraire le token et les données utilisateur
+        const userData = response.user
+        // Essayer plusieurs sources pour le token
+        const userToken = response.user.token || response.token || response.user.access_token || response.access_token
+
+        console.log('Connexion réussie:', { userData, userToken })
+        console.log('Structure complète de response:', response)
+
+        if (!userToken) {
+          console.error('Aucun token trouvé dans la réponse!')
+          // Générer un token temporaire ou utiliser l'ID utilisateur
+          const tempToken = `temp_token_${userData.id}_${Date.now()}`
+          console.log('Utilisation d\'un token temporaire:', tempToken)
+          setUser(userData)
+          setToken(tempToken)
+        } else {
+          // Sauvegarder les données
+          setUser(userData)
+          setToken(userToken)
+        }
+
+        console.log('Redirection vers home...')
+        // Forcer la redirection avec un délai
+        setTimeout(() => {
+          navigate('/', { replace: true })
+        }, 100)
+        
+      } else {
+        console.error('Échec de la connexion:', response.error)
+        invalidCredential(userNameError.current, response.error || 'Erreur de connexion')
+      }
+    } catch (error) {
+      console.error('Erreur login :', error)
+      invalidCredential(userNameError.current, 'Erreur de connexion')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  // Afficher un loader pendant la vérification initiale
+  if (isLoading) {
+    return (
+      <Container
+        maxWidth={false}
+        sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      >
+        <Typography>Chargement...</Typography>
+      </Container>
+    )
+  }
+
+  // Ne pas afficher le formulaire si déjà authentifié
+  if (isAuthenticated) {
+    return null
+  }
+
+  return (
+    <Container
+      maxWidth={false}
+      sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      className={classe.container}
+    >
+      <Grid container justifyContent="center">
+        <Grid item xs={12} md={6} lg={4}>
+          <Card className={`p-4 shadow ${classe.cards}`} sx={{ padding: 4, boxShadow: 3 }}>
+            <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
+              <FaUserCircle size={60} color="dark" className="text-light" />
+            </div>
+            <Typography variant="h5" align="center" className="text-light" gutterBottom>
+              Université de Toamasina
+            </Typography>
+            <form onSubmit={formLogin} className={classe.formulaireLogin}>
+              <TextField
+                label="Nom d'utilisateur"
+                color="secondary"
+                variant="outlined"
+                fullWidth
+                placeholder="Nom d'utilisateur"
+                margin="normal"
+                value={username}
+                disabled={isSubmitting}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FaUser style={{ color: 'white' }} />
+                    </InputAdornment>
+                  )
+                }}
+                className={classe.input}
+                onChange={(e) => setUsername(e.target.value)}
+                inputRef={userNameRef}
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '& fieldset': { borderColor: 'white' },
+                    '&:hover fieldset': { borderColor: 'rgb(156, 39, 176)' }
+                  }
+                }}
+              />
+              <span className="text-danger" ref={userNameError}></span>
+
+              <TextField
+                label="Mot de passe"
+                color="secondary"
+                variant="outlined"
+                type="password"
+                fullWidth
+                placeholder="Mot de passe"
+                margin="normal"
+                value={password}
+                disabled={isSubmitting}
+                className={classe.input}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FaLock style={{ color: 'white' }} />
+                    </InputAdornment>
+                  )
+                }}
+                onChange={(e) => setPassword(e.target.value)}
+                inputRef={passwordRef}
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '& fieldset': { borderColor: 'white' },
+                    '&:hover fieldset': { borderColor: 'rgb(156, 39, 176)' }
+                  }
+                }}
+              />
+              <span ref={passwordError} className="text-danger"></span>
+
+              <Button 
+                variant="contained" 
+                color="secondary" 
+                type="submit" 
+                fullWidth 
+                disabled={isSubmitting}
+                sx={{ mt: 2 }}
+              >
+                {isSubmitting ? 'Connexion...' : 'Se connecter'}
+              </Button>
+
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1rem' }}>
+                <Link to="/forgotpassword" className="text-light">
+                  Mot de passe oublié ?
+                </Link>
+              </div>
+            </form>
+          </Card>
+        </Grid>
+      </Grid>
+    </Container>
+  )
+}
+
+export default Login

src/renderer/src/components/Manuel.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import { Box, Button, Typography, Grid, Paper } from '@mui/material'
+import { GrManual } from 'react-icons/gr'
+import { Document, Page } from 'react-pdf/dist/esm/entry.webpack5'
+import { FaAngleDoubleLeft, FaAngleDoubleRight } from 'react-icons/fa'
+import pdfUrl from '../assets/manuel.pdf'
+import classe from '../assets/AllStyleComponents.module.css'
+import classeAdd from '../assets/AddStudent.module.css'
+import classeHome from '../assets/Home.module.css'
+
+const Manuel = () => {
+  const [numPages, setNumPages] = useState(null) // Use correct name
+  const [pageNumber, setPageNumber] = useState(1)
+
+  // Fix the onDocumentSuccess function
+  function onDocumentSuccess({ numPages }) {
+    setNumPages(numPages) // Use the correct property
+  }
+
+  const prevPage = () => {
+    if (pageNumber > 1) {
+      setPageNumber(pageNumber - 1)
+    }
+  }
+
+  const nextPage = () => {
+    if (pageNumber < numPages) {
+      setPageNumber(pageNumber + 1)
+    }
+  }
+
+  return (
+    <div className={classe.mainHome}>
+      <div className={classeAdd.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <GrManual /> Manuel d'utilisation
+            </h1>
+          </div>
+        </div>
+      </div>
+      <Paper
+        sx={{
+          height: 'auto',
+          minHeight: 500,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          width: '100%'
+        }}
+      >
+        <Grid sx={{ display: 'flex', gap: '20px', padding: '1%' }}>
+          <Button color="warning" variant="contained" onClick={prevPage}>
+            <FaAngleDoubleLeft />
+          </Button>
+          <Button color="warning" variant="contained" onClick={nextPage}>
+            <FaAngleDoubleRight />
+          </Button>
+        </Grid>
+
+        <Typography variant="h6">
+          Page {pageNumber} sur {numPages}
+        </Typography>
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%'
+          }}
+        >
+          <Document
+            file={pdfUrl}
+            onLoadSuccess={onDocumentSuccess}
+            loading={<div>Chargement du Manuel...</div>}
+            error={<div>Une erreur s'est produite lors du chargement du Manuel.</div>}
+          >
+            <Page pageNumber={pageNumber} width={1200} />
+          </Document>
+        </div>
+
+        <Grid sx={{ display: 'flex', gap: '20px', padding: '1%' }}>
+          <Button color="warning" variant="contained" onClick={prevPage}>
+            <FaAngleDoubleLeft />
+          </Button>
+          <Button color="warning" variant="contained" onClick={nextPage}>
+            <FaAngleDoubleRight />
+          </Button>
+        </Grid>
+      </Paper>
+    </div>
+  )
+}
+
+export default Manuel

src/renderer/src/components/Mentions.jsx

@@ -0,0 +1,261 @@
+import React, { useEffect, useState } from 'react'
+import classe from '../assets/AllStyleComponents.module.css'
+import classeAdd from '../assets/AddStudent.module.css'
+import classeHome from '../assets/Home.module.css'
+import { Link } from 'react-router-dom'
+import { Box, Button, InputAdornment, Typography, Modal, TextField, Grid } from '@mui/material'
+import { BsBookmarkPlusFill } from 'react-icons/bs'
+import { FaClipboardList, FaPenToSquare, FaTrash } from 'react-icons/fa6'
+import Paper from '@mui/material/Paper'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { DataGrid, GridToolbar } from '@mui/x-data-grid'
+import { frFR } from '@mui/x-data-grid/locales'
+import { Tooltip } from 'react-tooltip'
+import warning from '../assets/warning.svg'
+import success from '../assets/success.svg'
+
+const Mentions = () => {
+  const theme = createTheme({
+    components: {
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            color: 'gray' // Change the color of toolbar icons
+          }
+        }
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            color: '#121212' // Change the color of toolbar icons
+          }
+        }
+      }
+    }
+  })
+
+  const [isDeleted, setIsDeleted] = useState(false)
+  const [ids, setIds] = useState(0)
+
+  const [mentions, setMentions] = useState([])
+
+  useEffect(() => {
+    window.mention.getMention().then((response) => {
+      setMentions(response)
+    })
+  }, [])
+
+  const columns = [
+    { field: 'nom', headerName: 'Nom', width: 350 },
+    { field: 'uniter', headerName: 'Unité ', width: 180 },
+    {
+      field: 'action',
+      headerName: 'Action',
+      flex: 1,
+      renderCell: (params) => (
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <Link to={`/singlemention/${params.value}`}>
+            <Button color="warning" variant="contained">
+              <FaPenToSquare
+                style={{ fontSize: '20px', color: 'white' }}
+                className={`update${params.value}`}
+              />
+              <Tooltip
+                anchorSelect={`.update${params.value}`}
+                style={{ fontSize: '15px', zIndex: 22 }}
+                place="top"
+              >
+                Modifier
+              </Tooltip>
+            </Button>
+          </Link>
+          <Link
+            to={`#`}
+            onClick={() => {
+              setIds(params.row.id)
+              setOpen(true)
+            }}
+          >
+            <Button color="error" variant="contained">
+              <FaTrash
+                style={{ fontSize: '20px', color: 'white' }}
+                className={`update${params.value}`}
+              />
+              <Tooltip
+                anchorSelect={`.update${params.value}`}
+                style={{ fontSize: '15px', zIndex: 22 }}
+                place="top"
+              >
+                Supprimer
+              </Tooltip>
+            </Button>
+          </Link>
+        </div>
+      )
+    }
+  ]
+
+  const paginationModel = { page: 0, pageSize: 5 }
+
+  const dataRow = mentions.map((men) => ({
+    id: men.id, // Ensure this exists and is unique for each etudiant
+    nom: men.nom,
+    uniter: men.uniter,
+    action: men.id // Ensure this is a valid URL for the image
+  }))
+
+  const deleteButton = async (id) => {
+    let response = await window.mention.deleteMention({ id })
+    if (response.success) {
+      const updatedMentions = mentions.filter((mention) => mention.id !== id)
+      setMentions(updatedMentions)
+      setIsDeleted(true)
+    }
+  }
+
+  /**
+   * hook to open modal
+   */
+  const [open, setOpen] = useState(false)
+
+  /**
+   * function to close modal
+   */
+  const handleClose = () => {
+    setOpen(false)
+    setIsDeleted(false)
+  }
+
+  /**
+   * function to return the view Modal
+   *
+   * @returns {JSX}
+   */
+  const modals = () => (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 450,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        {isDeleted ? (
+          <Typography
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}
+          >
+            <img src={success} alt="" width={50} height={50} /> <span>Suprimer avec succèss</span>
+          </Typography>
+        ) : (
+          <Typography
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}
+          >
+            <img src={warning} alt="" width={50} height={50} />{' '}
+            <span>Voulez vous supprimer ce mention ?</span>
+          </Typography>
+        )}
+        <Box
+          sx={{
+            marginTop: '2%',
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        >
+          {isDeleted ? (
+            <Button onClick={handleClose} color="warning" variant="contained">
+              OK
+            </Button>
+          ) : (
+            <div>
+              <Button
+                onClick={() => deleteButton(ids)}
+                sx={{ mr: 1 }}
+                color="warning"
+                variant="contained"
+              >
+                Oui
+              </Button>
+              <Button onClick={handleClose} color="warning" variant="contained">
+                Non
+              </Button>
+            </div>
+          )}
+        </Box>
+      </Box>
+    </Modal>
+  )
+
+  return (
+    <div className={classe.mainHome}>
+      {modals()}
+      <div className={classeAdd.header}>
+        <div className={classe.h1style}>
+          <div className={classeHome.blockTitle}>
+            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <FaClipboardList />
+              Mentions
+            </h1>
+            <Link to={'/addmention'}>
+              <Button color="warning" variant="contained">
+                <BsBookmarkPlusFill style={{ fontSize: '20px' }} /> AJouter
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* displaying data */}
+      <div className={classeHome.boxEtudiantsCard}>
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <Paper
+            sx={{
+              height: 'auto', // Auto height to make the grid responsive
+              minHeight: 500, // Ensures a minimum height
+              display: 'flex',
+              // alignItems: "center",
+              // justifyContent: "center",
+              width: '100%'
+            }}
+          >
+            <ThemeProvider theme={theme}>
+              <DataGrid
+                rows={dataRow}
+                columns={columns}
+                initialState={{ pagination: { paginationModel } }}
+                pageSizeOptions={[5, 10]}
+                sx={{
+                  border: 0,
+                  width: '100%', // Ensures the DataGrid takes full width
+                  height: '100%', // Ensures it grows to fit content
+                  minHeight: 400, // Minimum height for the DataGrid
+                  display: 'flex',
+                  justifyContent: 'center',
+                  '@media (max-width: 600px)': {
+                    width: '100%', // 100% width on small screens
+                    height: 'auto' // Allow height to grow with content
+                  }
+                }}
+                slots={{ toolbar: GridToolbar }}
+                localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
+              />
+            </ThemeProvider>
+          </Paper>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Mentions

src/renderer/src/components/ModalAddEtudiants.jsx

@@ -0,0 +1,343 @@
+import React, { useRef, useState } from 'react'
+import {
+  Modal,
+  Box,
+  Typography,
+  Button,
+  InputAdornment,
+  TextField,
+  Card,
+  Grid,
+  Container
+} from '@mui/material'
+import {
+  FaUser,
+  FaIdBadge,
+  FaBirthdayCake,
+  FaGraduationCap,
+  FaCalendarAlt,
+  FaFileUpload
+} from 'react-icons/fa'
+
+const ModalAddEtudiants = ({ open, handleClose }) => {
+  /**
+   * hook for storing data in the input
+   */
+  const [formData, setFormData] = useState({
+    nom: '',
+    prenom: '',
+    photos: null,
+    date_de_naissances: '',
+    niveau: '',
+    annee_scolaire: '',
+    num_inscription: ''
+  })
+
+  /**
+   * ref for each input
+   */
+  const nomRef = useRef()
+  const prenomRef = useRef()
+  const date_de_naissancesRef = useRef()
+  const niveauRef = useRef()
+  const annee_scolaireRef = useRef()
+  const numero_inscriptionRef = useRef()
+  const photosRef = useRef()
+
+  /**
+   * function to set the data in state
+   * @param {*} e
+   */
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value
+    }))
+  }
+
+  const handleFileChange = (e) => {
+    let img_file = e.target.files[0]
+    const reader = new FileReader()
+    reader.readAsDataURL(img_file)
+    reader.onload = (ev) => {
+      const url = ev.target.result
+      // initialisation de nouvelle imageURL
+      const image = document.createElement('img')
+      image.src = url
+
+      // create a new image
+      image.onload = (event) => {
+        let canvas = document.createElement('canvas')
+        let ratio = 250 / event.target.width
+        canvas.width = 250
+        canvas.height = event.target.height * ratio
+        const context = canvas.getContext('2d')
+        context.drawImage(image, 0, 0, canvas.width, canvas.height)
+
+        // new url
+        const new_URL = canvas.toDataURL('image/jpeg', 90)
+        // rendement de l'url a notre variable global
+        setFormData((prevData) => ({
+          ...prevData,
+          photos: new_URL
+        }))
+      }
+    }
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    // Handle form submission logic
+    const response = await window.etudiants.insertEtudiant(formData)
+    console.log(response)
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 600,
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Typography id="modal-title" variant="h6" component="h2">
+          Ajoutez un etudiants
+        </Typography>
+        <Box
+          sx={{
+            marginTop: '2%',
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'end',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <form onSubmit={handleSubmit}>
+            <Grid container spacing={2}>
+              {/* Nom and Prenom Fields */}
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label="Nom"
+                  name="nom"
+                  color="secondary"
+                  fullWidth
+                  value={formData.nom}
+                  onChange={handleInputChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <FaUser />
+                      </InputAdornment>
+                    )
+                  }}
+                  inputRef={nomRef}
+                  sx={{
+                    '& .MuiOutlinedInput-root': {
+                      '&:hover fieldset': {
+                        borderColor: 'rgb(156, 39, 176)' // Set the border color on hover
+                      }
+                    }
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label="Prénom"
+                  name="prenom"
+                  fullWidth
+                  color="secondary"
+                  value={formData.prenom}
+                  onChange={handleInputChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <FaUser />
+                      </InputAdornment>
+                    )
+                  }}
+                  inputRef={prenomRef}
+                  sx={{
+                    '& .MuiOutlinedInput-root': {
+                      '&:hover fieldset': {
+                        borderColor: 'rgb(156, 39, 176)' // Set the border color on hover
+                      }
+                    }
+                  }}
+                />
+              </Grid>
+
+              {/* Date de Naissance and Niveau Fields */}
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label="Date de Naissance"
+                  name="date_de_naissances"
+                  fullWidth
+                  color="secondary"
+                  value={formData.date_de_naissances}
+                  onChange={handleInputChange}
+                  type="date"
+                  InputLabelProps={{ shrink: true }}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <FaBirthdayCake />
+                      </InputAdornment>
+                    )
+                  }}
+                  inputRef={date_de_naissancesRef}
+                  sx={{
+                    '& .MuiOutlinedInput-root': {
+                      '&:hover fieldset': {
+                        borderColor: 'rgb(156, 39, 176)' // Set the border color on hover
+                      }
+                    }
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label="Niveau"
+                  name="niveau"
+                  fullWidth
+                  color="secondary"
+                  value={formData.niveau}
+                  onChange={handleInputChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <FaGraduationCap />
+                      </InputAdornment>
+                    )
+                  }}
+                  inputRef={niveauRef}
+                  sx={{
+                    '& .MuiOutlinedInput-root': {
+                      '&:hover fieldset': {
+                        borderColor: 'rgb(156, 39, 176)' // Set the border color on hover
+                      }
+                    }
+                  }}
+                />
+              </Grid>
+
+              {/* Année Univesitaire and Numéro d'Inscription Fields */}
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label="Année Univesitaire"
+                  name="annee_scolaire"
+                  fullWidth
+                  color="secondary"
+                  value={formData.annee_scolaire}
+                  onChange={handleInputChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <FaCalendarAlt />
+                      </InputAdornment>
+                    )
+                  }}
+                  inputRef={annee_scolaireRef}
+                  sx={{
+                    '& .MuiOutlinedInput-root': {
+                      '&:hover fieldset': {
+                        borderColor: 'rgb(156, 39, 176)' // Set the border color on hover
+                      }
+                    }
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label="Numéro d'Inscription"
+                  name="num_inscription"
+                  fullWidth
+                  color="secondary"
+                  value={formData.num_inscription}
+                  onChange={handleInputChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <FaIdBadge />
+                      </InputAdornment>
+                    )
+                  }}
+                  inputRef={numero_inscriptionRef}
+                  sx={{
+                    '& .MuiOutlinedInput-root': {
+                      '&:hover fieldset': {
+                        borderColor: 'rgb(156, 39, 176)' // Set the border color on hover
+                      }
+                    }
+                  }}
+                />
+              </Grid>
+
+              {/* Photos Field */}
+              <Grid item xs={12}>
+                <TextField
+                  label="Photos"
+                  name="photos"
+                  fullWidth
+                  color="secondary"
+                  onChange={handleFileChange}
+                  type="file"
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <FaFileUpload />
+                      </InputAdornment>
+                    )
+                  }}
+                  InputLabelProps={{
+                    shrink: true
+                  }}
+                  inputRef={photosRef}
+                  sx={{
+                    '& .MuiOutlinedInput-root': {
+                      '&:hover fieldset': {
+                        borderColor: 'rgb(156, 39, 176)' // Set the border color on hover
+                      }
+                    }
+                  }}
+                />
+              </Grid>
+
+              {/* Submit Button */}
+              <Grid
+                item
+                xs={12}
+                style={{ display: 'flex', gap: '30px', justifyContent: 'flex-end' }}
+              >
+                <Button type="submit" color="secondary" variant="contained">
+                  Enregister
+                </Button>
+                <Button
+                  onClick={handleClose}
+                  color="error"
+                  variant="contained"
+                  sx={{ width: '30px' }}
+                >
+                  Close
+                </Button>
+              </Grid>
+            </Grid>
+          </form>
+        </Box>
+      </Box>
+    </Modal>
+  )
+}
+
+export default ModalAddEtudiants

src/renderer/src/components/ModalAddProf.jsx

@@ -0,0 +1,178 @@
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  Button,
+  InputAdornment,
+  Box,
+  Grid
+} from '@mui/material'
+import ChangeCapital from './function/ChangeCapitalLetter'
+import ChangeCapitalize from './function/ChangeCapitalizeLetter'
+import { PiChalkboardTeacher } from 'react-icons/pi'
+import { MdContactPhone, MdDateRange } from 'react-icons/md'
+
+const ModalAddProf = ({ open, onClose, matiere_id, onSubmitSuccess }) => {
+  const [formData, setFormData] = useState({
+    nom_enseignant: '',
+    prenom_enseignant: '',
+    contact: '',
+    date: '',
+    matiere_id: ''
+  })
+
+  const nomRefs = useRef()
+  const prenomRefs = useRef()
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormData({ ...formData, [name]: value })
+  }
+
+  useEffect(() => {
+    setFormData((prev) => ({
+      ...prev,
+      matiere_id: matiere_id
+    }))
+  }, [matiere_id])
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    let response = await window.matieres.insertProf(formData)
+    console.log(response)
+    
+    if (response.success) {
+      onSubmitSuccess(true)
+      onClose() // Close the modal after submission
+      setFormData({
+        nom_enseignant: '',
+        prenom_enseignant: '',
+        contact: '',
+        date: '',
+        matiere_id: ''
+      })
+    }
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <form action="" onSubmit={handleSubmit}>
+        <DialogTitle>Information sur enseignant</DialogTitle>
+        <DialogContent>
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoFocus
+                  margin="normal"
+                  required
+                  name="nom_enseignant"
+                  label="Nom du professeur"
+                  type="text"
+                  fullWidth
+                  placeholder="Nom du professeur"
+                  variant="outlined"
+                  value={formData.nom_enseignant}
+                  color="warning"
+                  inputRef={nomRefs}
+                  onInput={() => ChangeCapital(nomRefs)}
+                  onChange={handleChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <PiChalkboardTeacher />
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoFocus
+                  margin="normal"
+                  required
+                  name="prenom_enseignant"
+                  label="Prénom du professeur"
+                  type="text"
+                  fullWidth
+                  placeholder="Prénom du professeur"
+                  variant="outlined"
+                  value={formData.prenom_enseignant}
+                  color="warning"
+                  inputRef={prenomRefs}
+                  onInput={() => ChangeCapitalize(prenomRefs)}
+                  onChange={handleChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <PiChalkboardTeacher />
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoFocus
+                  margin="normal"
+                  required
+                  name="contact"
+                  label="Contact"
+                  type="number"
+                  fullWidth
+                  placeholder="Contact"
+                  variant="outlined"
+                  value={formData.contact}
+                  color="warning"
+                  onChange={handleChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <MdContactPhone />
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoFocus
+                  margin="normal"
+                  required
+                  name="date"
+                  label="Date de prise du poste"
+                  type="date"
+                  fullWidth
+                  variant="outlined"
+                  value={formData.date}
+                  color="warning"
+                  onChange={handleChange}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <MdDateRange />
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+            </Grid>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} color="error">
+            Annuler
+          </Button>
+          <Button type="submit" color="warning">
+            Soumettre
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  )
+}
+
+export default ModalAddProf

src/renderer/src/components/ModalCertificate.jsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react'
+import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Button } from '@mui/material'
+import PDFEditorCertificat from './function/PDFEditorCertificate'
+
+const ModalCertificate = ({ open, onClose, json }) => {
+  const [formData, setFormData] = useState({
+    pere: '',
+    mere: '',
+    chefService: ''
+  })
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormData({ ...formData, [name]: value })
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    console.log('Form submitted:', formData, json)
+    let data = {
+      f1: json.nomPrenom,
+      f2: json.naissances,
+      f3: formData.pere,
+      f4: formData.mere,
+      f5: json.niveau,
+      f6: json.mention,
+      f7: json.inscri,
+      f8: json.annee,
+      f9: formData.chefService
+    }
+    // Handle the form submission (e.g., send to a server or process data)
+    PDFEditorCertificat(data)
+    setFormData({
+      mere: '',
+      pere: '',
+      chefService: ''
+    })
+    onClose() // Close the modal after submission
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <form action="">
+        <DialogTitle>Informations sur l'étudiant</DialogTitle>
+        <DialogContent>
+          <TextField
+            autoFocus
+            margin="dense"
+            required
+            name="pere"
+            label="Père de l'étudiant"
+            type="text"
+            fullWidth
+            variant="outlined"
+            value={formData.pere}
+            color="warning"
+            onChange={handleChange}
+          />
+          <TextField
+            margin="dense"
+            name="mere"
+            required
+            label="Mère de l'étudiant"
+            type="text"
+            fullWidth
+            variant="outlined"
+            value={formData.mere}
+            color="warning"
+            onChange={handleChange}
+          />
+          <TextField
+            margin="dense"
+            name="chefService"
+            label="Chef de service de scolarité"
+            type="text"
+            fullWidth
+            required
+            color="warning"
+            variant="outlined"
+            value={formData.chefService}
+            onChange={handleChange}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} color="warning" variant="contained">
+            Annuler
+          </Button>
+          <Button onClick={handleSubmit} type="submit" color="warning" variant="contained">
+            Soumettre
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  )
+}
+
+export default ModalCertificate

src/renderer/src/components/ModalExportFichr.jsx

@@ -170,7 +170,7 @@ const ModalExportFichr = () => {
                 </tr>
                 <tr style={{ borderBottom: 'solid 1px gray' }}>
                   <th style={{ borderRight: 'solid 1px gray' }}>N°</th>
-                  <th style={{ borderRight: 'solid 1px gray' }}>Nom et Prenom</th>
+                  <th style={{ borderRight: 'solid 1px gray' }}>Nom et Prénom</th>
                   <th style={{ borderRight: 'solid 1px gray' }}>Mention</th>
                   <th>Emergement</th>
                 </tr>