feat: Création d'un annuaire / mise à jour du subscribe

2026-01-29 07:53:23 +00:00 · 2025-03-14 19:51:35 +01:00
parent cd9c10a88a
commit 6bd5704983
22 changed files with 585 additions and 185 deletions
--- a/Front-End/src/app/[locale]/admin/directory/page.js
+++ b/Front-End/src/app/[locale]/admin/directory/page.js
@ -0,0 +1,66 @@
+'use client'
+import React, { useState, useEffect } from 'react';
+import { fetchProfileRoles, updateProfileRoles, deleteProfileRoles } from '@/app/actions/authAction';
+import logger from '@/utils/logger';
+import { useEstablishment } from '@/context/EstablishmentContext';
+import DjangoCSRFToken from '@/components/DjangoCSRFToken';
+import { useCsrfToken } from '@/context/CsrfContext';
+import ProfileDirectory from '@/components/ProfileDirectory';
+import { BE_AUTH_PROFILES_ROLES_URL } from '@/utils/Url';
+
+export default function Page() {
+  const [profileRoles, setProfileRoles] = useState([]);
+
+  const csrfToken = useCsrfToken();
+  const { selectedEstablishmentId } = useEstablishment();
+
+  useEffect(() => {
+    if (selectedEstablishmentId) {
+      // Fetch data for profileRoles
+      handleProfiles();
+    }
+  }, [selectedEstablishmentId]);
+
+  const handleProfiles = () => {
+    fetchProfileRoles(selectedEstablishmentId)
+      .then(data => {
+        setProfileRoles(data);
+      })
+      .catch(error => logger.error('Error fetching profileRoles:', error));
+  };
+
+  const handleEdit = (profileRole) => {
+    const updatedData = { ...profileRole, is_active: !profileRole.is_active };
+    return updateProfileRoles(profileRole.id, updatedData, csrfToken)
+      .then(data => {
+        setProfileRoles(prevState => prevState.map(item => item.id === profileRole.id ? data : item));
+        return data;
+      })
+      .catch(error => {
+        logger.error('Error editing data:', error);
+        throw error;
+      });
+  };
+
+  const handleDelete = (id) => {
+    return deleteProfileRoles(id, csrfToken)
+      .then(() => {
+        setProfileRoles(prevState => prevState.filter(item => item.id !== id));
+        logger.debug("Profile deleted successfully:", id);
+      })
+      .catch(error => {
+        logger.error('Error deleting profile:', error);
+        throw error;
+      });
+  };
+
+  return (
+    <div className='p-8'>
+      <DjangoCSRFToken csrfToken={csrfToken} />
+
+      <div className="w-full p-4">
+        <ProfileDirectory profileRoles={profileRoles} handleActivateProfile={handleEdit} handleDeleteProfile={handleDelete} />
+      </div>
+    </div>
+  );
+}
--- a/Front-End/src/app/[locale]/admin/layout.js
+++ b/Front-End/src/app/[locale]/admin/layout.js
@ -5,12 +5,13 @@ import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import {
+  LayoutDashboard,
+  FileText,
+  School,
  Users,
-  Building,
-  Home,
+  Award,
  Calendar,
  Settings,
-  FileText,
  LogOut,
  Menu,
  X
@ -22,6 +23,7 @@ import {
  FE_ADMIN_HOME_URL,
  FE_ADMIN_SUBSCRIPTIONS_URL,
  FE_ADMIN_STRUCTURE_URL,
+  FE_ADMIN_DIRECTORY_URL,
  FE_ADMIN_GRADES_URL,
  FE_ADMIN_PLANNING_URL,
  FE_ADMIN_SETTINGS_URL
@ -43,10 +45,11 @@ export default function Layout({
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  const sidebarItems = {
-    "admin": { "id": "admin", "name": t('dashboard'), "url": FE_ADMIN_HOME_URL, "icon": Home },
-    "subscriptions": { "id": "subscriptions", "name": t('subscriptions'), "url": FE_ADMIN_SUBSCRIPTIONS_URL, "icon": Users },
-    "structure": { "id": "structure", "name": t('structure'), "url": FE_ADMIN_STRUCTURE_URL, "icon": Building },
-    "grades": { "id": "grades", "name": t('grades'), "url": FE_ADMIN_GRADES_URL, "icon": FileText },
+    "admin": { "id": "admin", "name": t('dashboard'), "url": FE_ADMIN_HOME_URL, "icon": LayoutDashboard },
+    "subscriptions": { "id": "subscriptions", "name": t('subscriptions'), "url": FE_ADMIN_SUBSCRIPTIONS_URL, "icon": FileText },
+    "structure": { "id": "structure", "name": t('structure'), "url": FE_ADMIN_STRUCTURE_URL, "icon": School },
+    "directory": { "id": "directory", "name": t('directory'), "url": FE_ADMIN_DIRECTORY_URL, "icon": Users },
+    "grades": { "id": "grades", "name": t('grades'), "url": FE_ADMIN_GRADES_URL, "icon": Award },
    "planning": { "id": "planning", "name": t('events'), "url": FE_ADMIN_PLANNING_URL, "icon": Calendar },
    "settings": { "id": "settings", "name": t('settings'), "url": FE_ADMIN_SETTINGS_URL, "icon": Settings }
  };
--- a/Front-End/src/app/[locale]/admin/structure/page.js
+++ b/Front-End/src/app/[locale]/admin/structure/page.js
@ -6,26 +6,26 @@ import FeesManagement from '@/components/Structure/Tarification/FeesManagement';
 import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import { useCsrfToken } from '@/context/CsrfContext';
 import { ClassesProvider } from '@/context/ClassesContext';
-import { createDatas,
-  updateDatas,
-  removeDatas,
-  fetchSpecialities,
-  fetchTeachers,
-  fetchClasses,
-  fetchSchedules,
-  fetchRegistrationDiscounts,
-  fetchTuitionDiscounts,
-  fetchRegistrationFees,
-  fetchTuitionFees,
-  fetchRegistrationPaymentPlans,
-  fetchTuitionPaymentPlans,
-  fetchRegistrationPaymentModes,
+import { 
+  createDatas, 
+  updateDatas, 
+  removeDatas, 
+  fetchSpecialities, 
+  fetchTeachers, 
+  fetchClasses, 
+  fetchSchedules, 
+  fetchRegistrationDiscounts, 
+  fetchTuitionDiscounts, 
+  fetchRegistrationFees, 
+  fetchTuitionFees, 
+  fetchRegistrationPaymentPlans, 
+  fetchTuitionPaymentPlans, 
+  fetchRegistrationPaymentModes, 
  fetchTuitionPaymentModes } from '@/app/actions/schoolAction';
+import { fetchProfileRoles } from '@/app/actions/authAction';
 import SidebarTabs from '@/components/SidebarTabs';
 import FilesGroupsManagement from '@/components/Structure/Files/FilesGroupsManagement';
-import {
-  fetchRegistrationTemplateMaster
-} from "@/app/actions/registerFileGroupAction";
+import { fetchRegistrationTemplateMaster } from "@/app/actions/registerFileGroupAction";
 import logger from '@/utils/logger';
 import { useEstablishment } from '@/context/EstablishmentContext';

--- a/Front-End/src/app/[locale]/admin/subscriptions/page.js
+++ b/Front-End/src/app/[locale]/admin/subscriptions/page.js
@ -453,8 +453,8 @@ useEffect(()=>{
 const columns = [
  { name: t('studentName'), transform: (row) => row.student.last_name },
  { name: t('studentFistName'), transform: (row) => row.student.first_name },
-  { name: t('mainContactMail'), transform: (row) => row.student.guardians[0].associated_profile_email },
-  { name: t('phone'), transform: (row) => formatPhoneNumber(row.student.guardians[0].phone) },
+  { name: t('mainContactMail'), transform: (row) => (row.student.guardians && row.student.guardians.length > 0) ? row.student.guardians[0].associated_profile_email : '' },
+  { name: t('phone'), transform: (row) => formatPhoneNumber(row.student.guardians[0]?.phone) },
  { name: t('lastUpdateDate'), transform: (row) => row.formatted_last_update},
  { name: t('registrationFileStatus'), transform: (row) => (
            <div className="flex justify-center items-center h-full">
--- a/Front-End/src/app/[locale]/users/subscribe/page.js
+++ b/Front-End/src/app/[locale]/users/subscribe/page.js
@ -13,8 +13,8 @@ import { User, KeySquare } from 'lucide-react'; // Importez directement les icô
 import { FE_USERS_LOGIN_URL  } from '@/utils/Url';
 import { useCsrfToken } from '@/context/CsrfContext';
 import { subscribe } from '@/app/actions/authAction';
-const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
 import logger from '@/utils/logger';
+import { useEstablishment } from '@/context/EstablishmentContext';

 export default function Page() {
    const searchParams = useSearchParams();
@ -29,40 +29,28 @@ export default function Page() {

    const router = useRouter();
    const csrfToken = useCsrfToken();
-
-    useEffect(() => {
-        if (useFakeData) {
-            setIsLoading(true);
-            // Simuler une réponse réussie
-            const data = {
-                errorFields: {},
-                errorMessage: ""
-            };
-            setUserFieldError("")
-            setPassword1FieldError("")
-            setPassword2FieldError("")
-            setErrorMessage("")
-            setIsLoading(false);
-        }
-      }, []);
+    
+    const establishment_id = searchParams.get('establishment_id');

    function isOK(data) {
        return data.errorMessage === ""
    }

    function subscribeFormSubmit(formData) {
-        if (useFakeData) {
-            // Simuler une réponse réussie
-            const data = {
-                errorFields: {},
-                errorMessage: ""
-            };
+        const data ={
+            email: formData.get('login'),
+            password1: formData.get('password1'),
+            password2: formData.get('password2'),
+            establishment_id: establishment_id
+        }
+        subscribe(data,csrfToken).then(data => {
+            logger.debug('Success:', data);
            setUserFieldError("")
            setPassword1FieldError("")
            setPassword2FieldError("")
            setErrorMessage("")
            if(isOK(data)){
-                setPopupMessage("Votre compte a été créé avec succès");
+                setPopupMessage(data.message);
                setPopupVisible(true);
            } else {
                if(data.errorMessage){
@ -74,38 +62,12 @@ export default function Page() {
                    setPassword2FieldError(data.errorFields.password2)
                }
            }
-        } else {
-            const data ={
-                email: formData.get('login'),
-                password1: formData.get('password1'),
-                password2: formData.get('password2'),
-            }
-            subscribe(data,csrfToken).then(data => {
-                logger.debug('Success:', data);
-                setUserFieldError("")
-                setPassword1FieldError("")
-                setPassword2FieldError("")
-                setErrorMessage("")
-                if(isOK(data)){
-                    setPopupMessage(data.message);
-                    setPopupVisible(true);
-                } else {
-                    if(data.errorMessage){
-                        setErrorMessage(data.errorMessage);
-                    }
-                    if(data.errorFields){
-                        setUserFieldError(data.errorFields.email)
-                        setPassword1FieldError(data.errorFields.password1)
-                        setPassword2FieldError(data.errorFields.password2)
-                    }
-                }
-            })
-            .catch(error => {
-                logger.error('Error fetching data:', error);
-                error = error.errorMessage;
-                logger.debug(error);
-            });
-        }
+        })
+        .catch(error => {
+            logger.error('Error fetching data:', error);
+            error = error.errorMessage;
+            logger.debug(error);
+        });
    }

    if (isLoading === true) {
--- a/Front-End/src/app/actions/authAction.js
+++ b/Front-End/src/app/actions/authAction.js
@ -4,6 +4,7 @@ import {
  BE_AUTH_REFRESH_JWT_URL,
  BE_AUTH_REGISTER_URL,
  BE_AUTH_PROFILES_URL,
+  BE_AUTH_PROFILES_ROLES_URL,
  BE_AUTH_RESET_PASSWORD_URL,
  BE_AUTH_NEW_PASSWORD_URL,
  FE_USERS_LOGIN_URL,
@ -77,6 +78,41 @@ export const disconnect = () => {
    signOut({ callbackUrl: FE_USERS_LOGIN_URL });
 };

+export const fetchProfileRoles = (establishment) => {
+  return fetch(`${BE_AUTH_PROFILES_ROLES_URL}?establishment_id=${establishment}`)
+  .then(requestResponseHandler)
+};
+
+export const updateProfileRoles = (id, data, csrfToken) => {
+  const request = new Request(
+    `${BE_AUTH_PROFILES_ROLES_URL}/${id}`,
+    {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRFToken': csrfToken
+      },
+      credentials: 'include',
+      body: JSON.stringify(data),
+    }
+  );
+  return fetch(request).then(requestResponseHandler);
+};
+
+export const deleteProfileRoles = (id, csrfToken) => {
+  const request = new Request(
+    `${BE_AUTH_PROFILES_ROLES_URL}/${id}`,
+    {
+      method: 'DELETE',
+      headers: {
+        'X-CSRFToken': csrfToken
+      },
+      credentials: 'include'
+    }
+  );
+  return fetch(request).then(requestResponseHandler);
+};
+
 export const createProfile = (data, csrfToken) => {
  const request = new Request(
    `${BE_AUTH_PROFILES_URL}`,
--- a/Front-End/src/components/CheckBoxList.js
+++ b/Front-End/src/components/CheckBoxList.js
@ -22,7 +22,7 @@ const CheckBoxList = ({
      <div className={`mt-2 grid ${horizontal ? 'grid-cols-6 gap-2' : 'grid-cols-1 gap-4'}`}>
        {items.map(item => (
          <CheckBox
-            key={item.id}
+            key={`${fieldName}-${item.id}`}
            item={item}
            formData={formData}
            handleChange={handleChange}
--- a/Front-End/src/components/Inscription/InscriptionForm.js
+++ b/Front-End/src/components/Inscription/InscriptionForm.js
@ -291,6 +291,24 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
            </div>
            {formData.responsableType === 'new' && (
              <>
+              <InputTextIcon
+                  name="guardianLastName"
+                  type="text"
+                  IconItem={User}
+                  placeholder="Nom du responsable (optionnel)"
+                  value={formData.guardianLastName}
+                  onChange={handleChange}
+                  className="w-full mt-4"
+              />
+              <InputTextIcon
+                  name="guardianFirstName"
+                  type="text"
+                  IconItem={User}
+                  placeholder="Prénom du responsable (optionnel)"
+                  value={formData.guardianFirstName}
+                  onChange={handleChange}
+                  className="w-full mt-4"
+              />
              <InputTextIcon
                  name="guardianEmail"
                  type="email"
--- a/Front-End/src/components/ProfileDirectory.js
+++ b/Front-End/src/components/ProfileDirectory.js
@ -0,0 +1,218 @@
+import React, { useState } from 'react';
+import { Trash2, Eye, EyeOff, ToggleLeft, ToggleRight } from 'lucide-react';
+import Table from '@/components/Table';
+import Popup from '@/components/Popup';
+import StatusLabel from '@/components/StatusLabel';
+import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem';
+
+const roleTypeToLabel = (roleType) => {
+  switch (roleType) {
+    case 0:
+      return 'ECOLE';
+    case 1:
+      return 'ADMIN';
+    case 2:
+      return 'PARENT';
+    default:
+      return 'UNKNOWN';
+  }
+};
+
+const roleTypeToBadgeClass = (roleType) => {
+  switch (roleType) {
+    case 0:
+      return 'bg-blue-100 text-blue-600';
+    case 1:
+      return 'bg-red-100 text-red-600';
+    case 2:
+      return 'bg-green-100 text-green-600';
+    default:
+      return 'bg-gray-100 text-gray-600';
+  }
+};
+
+const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeleteProfile }) => {
+  const parentProfiles = profileRoles.filter(profileRole => profileRole.role_type === 2);
+  const schoolAdminProfiles = profileRoles.filter(profileRole => profileRole.role_type !== 2);
+
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [popupMessage, setPopupMessage] = useState("");
+  const [confirmPopupVisible, setConfirmPopupVisible] = useState(false);
+  const [confirmPopupMessage, setConfirmPopupMessage] = useState("");
+  const [confirmPopupOnConfirm, setConfirmPopupOnConfirm] = useState(() => {});
+
+  const handleConfirmActivateProfile = (profileRole) => {
+    setConfirmPopupMessage(`Êtes-vous sûr de vouloir ${profileRole.is_active ? 'désactiver' : 'activer'} ce profil ?`);
+    setConfirmPopupOnConfirm(() => () => {
+      handleActivateProfile(profileRole)
+        .then(() => {
+          setPopupMessage(`Le profil a été ${profileRole.is_active ? 'désactivé' : 'activé'} avec succès.`);
+          setPopupVisible(true);
+        })
+        .catch(error => {
+          setPopupMessage(`Erreur lors de la ${profileRole.is_active ? 'désactivation' : 'activation'} du profil.`);
+          setPopupVisible(true);
+        });
+      setConfirmPopupVisible(false);
+    });
+    setConfirmPopupVisible(true);
+  };
+
+  const handleConfirmDeleteProfile = (id) => {
+    setConfirmPopupMessage("Êtes-vous sûr de vouloir supprimer ce profil ?");
+    setConfirmPopupOnConfirm(() => () => {
+      handleDeleteProfile(id)
+        .then(() => {
+          setPopupMessage("Le profil a été supprimé avec succès.");
+          setPopupVisible(true);
+        })
+        .catch(error => {
+          setPopupMessage("Erreur lors de la suppression du profil.");
+          setPopupVisible(true);
+        });
+      setConfirmPopupVisible(false);
+    });
+    setConfirmPopupVisible(true);
+  };
+
+  const parentColumns = [
+    { name: 'Identifiant', transform: (row) => row.associated_profile_email },
+    { name: 'Rôle', transform: (row) => (
+        <span className={`px-2 py-1 rounded-full font-bold ${roleTypeToBadgeClass(row.role_type)}`}>
+          {roleTypeToLabel(row.role_type)}
+        </span>
+      )
+    },
+    { name: 'Utilisateur', transform: (row) => row.associated_person?.guardian_name },
+    { name: 'Elève(s) associé(s)', transform: (row) => (
+      <div className="flex flex-col justify-center space-y-2">
+        {row.associated_person?.students?.map(student => (
+          <span key={student.student_name} className="px-2 py-1 rounded-full text-gray-800">
+            {student.student_name}
+          </span>
+        ))}
+      </div>
+      )
+    },
+    { name: 'Etat du dossier d\'inscription', transform: (row) => (
+        <div className="flex flex-col justify-center items-center space-y-2">
+          {row.associated_person?.students?.map(student => (
+            <StatusLabel key={student.student_name} status={student.registration_status} showDropdown={false} />
+          ))}
+        </div>
+      )
+    },
+    {
+      name: 'Actions',
+      transform: (row) => (
+        <div className="flex justify-center space-x-2">
+          <button
+            type="button"
+            className={row.is_active ? 'text-emerald-500 hover:text-emerald-700' : 'text-orange-500 hover:text-orange-700'}
+            onClick={() => handleConfirmActivateProfile(row)}
+          >
+            {row.is_active ? <ToggleRight className="w-5 h-5 " /> : <ToggleLeft className="w-5 h-5" />}
+          </button>
+          <button
+            type="button"
+            className="text-red-500 hover:text-red-700"
+            onClick={() => handleConfirmDeleteProfile(row.id)}
+          >
+            <Trash2 className="w-5 h-5" />
+          </button>
+        </div>
+      )
+    }
+  ];
+
+  const schoolAdminColumns = [
+    { name: 'Identifiant', transform: (row) => row.associated_profile_email },
+    { name: 'Rôle', transform: (row) => (
+        <span className={`px-2 py-1 rounded-full font-bold ${roleTypeToBadgeClass(row.role_type)}`}>
+          {roleTypeToLabel(row.role_type)}
+        </span>
+      )
+    },
+    { name: 'Utilisateur', transform: (row) => row.associated_person?.teacher_name },
+    { name: 'Classe(s) associée(s)', transform: (row) => (
+        <div className="flex flex-wrap justify-center space-x-2">
+          {row.associated_person?.classes?.map(classe => (
+            <span key={classe.id} className="px-2 py-1 rounded-full bg-gray-200 text-gray-800">
+              {classe.name}
+            </span>
+          ))}
+        </div>
+      )
+    },
+    { name: 'Spécialités', transform: (row) => (
+        <div className="flex flex-wrap justify-center space-x-2">
+          {row.associated_person?.specialities?.map(speciality => (
+            <SpecialityItem speciality={speciality} isDraggable={false}/>
+          ))}
+        </div>
+      )
+    },
+    {
+      name: 'Actions',
+      transform: (row) => (
+        <div className="flex justify-center space-x-2">
+          <button
+            type="button"
+            className={row.is_active ? 'text-emerald-500 hover:text-emerald-700' : 'text-orange-500 hover:text-orange-700'}
+            onClick={() => handleConfirmActivateProfile(row)}
+          >
+            {row.is_active ? <ToggleRight className="w-5 h-5 " /> : <ToggleLeft className="w-5 h-5" />}
+          </button>
+          <button
+            type="button"
+            className="text-red-500 hover:text-red-700"
+            onClick={() => handleConfirmDeleteProfile(row.id)}
+          >
+            <Trash2 className="w-5 h-5" />
+          </button>
+        </div>
+      )
+    }
+  ];
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg w-full p-6">
+      <div className="space-y-8">
+        <div className="max-h-128 overflow-y-auto border rounded p-4">
+          {parentProfiles.length === 0 ? (
+            <div>Aucun profil trouvé</div>
+          ) : (
+            <Table
+              data={parentProfiles}
+              columns={parentColumns}
+            />
+          )}
+        </div>
+        <div className="max-h-128 overflow-y-auto border rounded p-4">
+          {schoolAdminProfiles.length === 0 ? (
+            <div>Aucun profil trouvé</div>
+          ) : (
+            <Table
+              data={schoolAdminProfiles}
+              columns={schoolAdminColumns}
+            />
+          )}
+        </div>
+      </div>
+      <Popup
+        visible={popupVisible}
+        message={popupMessage}
+        onConfirm={() => setPopupVisible(false)}
+        uniqueConfirmButton={true}
+      />
+      <Popup
+        visible={confirmPopupVisible}
+        message={confirmPopupMessage}
+        onConfirm={confirmPopupOnConfirm}
+        onCancel={() => setConfirmPopupVisible(false)}
+      />
+    </div>
+  );
+};
+
+export default ProfileDirectory;
--- a/Front-End/src/components/Providers.js
+++ b/Front-End/src/components/Providers.js
@ -4,6 +4,8 @@ import { SessionProvider } from "next-auth/react"
 import { CsrfProvider } from '@/context/CsrfContext'
 import { NextIntlClientProvider } from 'next-intl'
 import { EstablishmentProvider } from '@/context/EstablishmentContext';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';


 export default function Providers({ children, messages, locale, session }) {
@ -13,13 +15,15 @@ export default function Providers({ children, messages, locale, session }) {
  }
  return (
    <SessionProvider session={session}>
-      <CsrfProvider>
-        <EstablishmentProvider>
-          <NextIntlClientProvider messages={messages} locale={locale}>
-            {children}
-          </NextIntlClientProvider>
-        </EstablishmentProvider>
-      </CsrfProvider>
+      <DndProvider backend={HTML5Backend}>
+        <CsrfProvider>
+          <EstablishmentProvider>
+            <NextIntlClientProvider messages={messages} locale={locale}>
+              {children}
+            </NextIntlClientProvider>
+          </EstablishmentProvider>
+        </CsrfProvider>
+      </DndProvider>
    </SessionProvider>
  )
 }
--- a/Front-End/src/components/Structure/Configuration/TeachersSection.js
+++ b/Front-End/src/components/Structure/Configuration/TeachersSection.js
@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Plus, Edit3, Trash2, GraduationCap, Check, X, Hand } from 'lucide-react';
+import { Plus, Edit3, Trash2, GraduationCap, Check, X, Hand, Search } from 'lucide-react';
 import Table from '@/components/Table';
 import Popup from '@/components/Popup';
 import ToggleSwitch from '@/components/ToggleSwitch';
@ -11,6 +11,8 @@ import InputText from '@/components/InputText';
 import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem';
 import TeacherItem from './TeacherItem';
 import logger from '@/utils/logger';
+import { fetchProfiles } from '@/app/actions/authAction';
+import { useEstablishment } from '@/context/EstablishmentContext';

 const ItemTypes = {
  SPECIALITY: 'speciality',
@ -103,14 +105,40 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
  const [removePopupMessage, setRemovePopupMessage] = useState("");
  const [removePopupOnConfirm, setRemovePopupOnConfirm] = useState(() => {});

+  const [confirmPopupVisible, setConfirmPopupVisible] = useState(false);
+  const [confirmPopupMessage, setConfirmPopupMessage] = useState("");
+  const [confirmPopupOnConfirm, setConfirmPopupOnConfirm] = useState(() => {});
+
+  const { selectedEstablishmentId } = useEstablishment();
+
+  const handleSelectProfile = (profile) => {
+    setNewTeacher((prevData) => ({
+      ...prevData,
+      selectedProfile: profile,
+    }));
+    setFormData((prevData) => ({
+      ...prevData,
+      selectedProfile: profile
+    }));
+    setConfirmPopupMessage(`Vous êtes sur le point de rattacher l'enseignant ${newTeacher?.first_name} ${newTeacher?.last_name} au profil ${profile.email} ID = ${profile.id}.`);
+    setConfirmPopupOnConfirm(() => () => {
+      setConfirmPopupVisible(false);
+    });
+    setConfirmPopupVisible(true);
+  };
+
+  const handleCancelConfirmation = () => {
+      setConfirmPopupVisible(false);
+  };
+
  // Récupération des messages d'erreur
  const getError = (field) => {
    return localErrors?.[field]?.[0];
  };

  const handleAddTeacher = () => {
-    setNewTeacher({ id: Date.now(), last_name: '', first_name: '', email: '', specialities: [], droit: 0 });
-    setFormData({ last_name: '', first_name: '', email: '', specialities: [], droit: 0 });
+    setNewTeacher({ id: Date.now(), last_name: '', first_name: '', selectedProfile: null, specialities: [], droit: 0 });
+    setFormData({ last_name: '', first_name: '', selectedProfile: null, specialities: [], droit: 0});
  };

  const handleRemoveTeacher = (id) => {
@ -124,43 +152,32 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
  };

  const handleSaveNewTeacher = () => {
-    if (formData.last_name && formData.first_name && formData.email) {
+    if (formData.last_name && formData.first_name && formData.selectedProfile) {
      const data = {
-        email: formData.email,
-        password: 'Provisoire01!',
-        username: formData.email,
-        is_active: 1,
-        droit: formData.droit,
+        last_name: formData.last_name,
+        first_name: formData.first_name,
+        profile_role_data: {
+          role_type: formData.droit,
+          establishment: selectedEstablishmentId,
+          is_active: true,
+          profile: formData.selectedProfile.id
+        },
+        specialities: formData.specialities
      };
-      createProfile(data, csrfToken)
-      .then(response => {
-        logger.debug('Success:', response);
-        if (response.id) {
-            let idProfil = response.id;
-            newTeacher.associated_profile = idProfil;
-            handleCreate(newTeacher)
-            .then((createdTeacher) => {
-              setTeachers([createdTeacher, ...teachers]);
-              setNewTeacher(null);
-              setLocalErrors({});
-            })
-            .catch((error) => {
-              logger.error('Error:', error.message);
-              if (error.details) {
-                  logger.error('Form errors:', error.details);
-                  setLocalErrors(error.details);
-              }
-            });
-        }
-        setLocalErrors({});
-      })
-      .catch((error) => {
-        logger.error('Error:', error.message);
-        if (error.details) {
+
+      handleCreate(data)
+        .then((createdTeacher) => {
+          setTeachers([createdTeacher, ...teachers]);
+          setNewTeacher(null);
+          setLocalErrors({});
+        })
+        .catch((error) => {
+          logger.error('Error:', error.message);
+          if (error.details) {
            logger.error('Form errors:', error.details);
            setLocalErrors(error.details);
-        }
-      });
+          }
+        });
    } else {
      setPopupMessage("Tous les champs doivent être remplis et valides");
      setPopupVisible(true);
@ -260,7 +277,6 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
            <div className="flex justify-center space-x-2">
              <InputText
                name="last_name"
-                label="nom"
                value={currentData.last_name}
                onChange={handleChange}
                placeholder="Nom de l'enseignant"
@ -268,7 +284,6 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
              />
              <InputText
                name="first_name"
-                label="prénom"
                value={currentData.first_name}
                onChange={handleChange}
                placeholder="Prénom de l'enseignant"
@ -276,16 +291,26 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
              />
            </div>
          );
-        case 'EMAIL':
-          return (
-            <InputText
-              name="email"
-              value={currentData.email}
-              onChange={handleChange}
-              placeholder="Email de l'enseignant"
-              errorMsg={getError('email')}
-            />
-          );
+          case 'EMAIL':
+            return (
+              <div className="flex items-center space-x-2">
+                {currentData.selectedProfile ? (
+                  <span className="text-gray-900">
+                    {currentData.selectedProfile.email}
+                  </span>
+                ) : (
+                  <span className="text-gray-500 italic">
+                    Rechercher un profil existant
+                  </span>
+                )}
+                <button
+                  type="button"
+                  onClick={() => setDirectoryPopupVisible(true)}
+                >
+                  <Search className="w-5 h-5 text-emerald-500 hover:text-emerald-700"/>
+                </button>
+              </div>
+            );
        case 'SPECIALITES':
          return (
            <SpecialitiesDropZone teacher={currentData} handleSpecialitiesChange={handleSpecialitiesChange} specialities={specialities} isEditing={isEditing || isCreating} />
@ -339,9 +364,9 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
            </div>
          );
        case 'ADMINISTRATEUR':
-            if (teacher.associated_profile) {
-              const badgeClass = teacher.droit === 1 ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600';
-              const label = teacher.droit === 1 ? 'OUI' : 'NON';
+            if (teacher.associated_profile_email) {
+              const badgeClass = teacher.role_type.role_type === 1 ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600';
+              const label = teacher.role_type.role_type === 1 ? 'OUI' : 'NON';
              return (
                <div key={teacher.id} className="flex justify-center items-center space-x-2">
                  <span className={`px-3 py-1 rounded-full font-bold ${badgeClass}`}>
--- a/Front-End/src/utils/Telephone.js
+++ b/Front-End/src/utils/Telephone.js
@ -6,6 +6,7 @@ const localePrefixes = {


 export function formatPhoneNumber(phoneString, fromFormat = 'XX-XX-XX-XX-XX', toFormat = 'LX-XX-XX-XX-XX', locale = "fr-FR") {
+    if (!phoneString) return;
    // Extraire les chiffres du numéro de téléphone
    const digits = phoneString.replace(/\D/g, '');

--- a/Front-End/src/utils/Url.js
+++ b/Front-End/src/utils/Url.js
@ -18,6 +18,7 @@ export const BE_AUTH_LOGIN_URL = `${BASE_URL}/Auth/login`
 export const BE_AUTH_REFRESH_JWT_URL = `${BASE_URL}/Auth/refreshJWT`
 export const BE_AUTH_LOGOUT_URL = `${BASE_URL}/Auth/logout`
 export const BE_AUTH_PROFILES_URL = `${BASE_URL}/Auth/profiles`
+export const BE_AUTH_PROFILES_ROLES_URL = `${BASE_URL}/Auth/profileRoles`
 export const BE_AUTH_CSRF_URL = `${BASE_URL}/Auth/csrf`
 export const BE_AUTH_INFO_SESSION = `${BASE_URL}/Auth/infoSession`

@ -79,6 +80,9 @@ export const FE_ADMIN_CLASSES_URL = `/admin/classes`
 //ADMIN/STRUCTURE URL
 export const FE_ADMIN_STRUCTURE_URL = `/admin/structure`

+//ADMIN/DIRECTORY URL
+export const FE_ADMIN_DIRECTORY_URL = `/admin/directory`
+
 //ADMIN/GRADES URL
 export const FE_ADMIN_GRADES_URL = `/admin/grades`