From 91976157e44e319b23fd35fa89859164bab71202 Mon Sep 17 00:00:00 2001
From: N3WT DE COMPET <n3wt.school@gmail.com>
Date: Fri, 14 Mar 2025 21:21:12 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20cr=C3=A9ation=20d'une=20tooltip=20pour?=
 =?UTF-8?q?=20les=20informations=20suppl=C3=A9mentaires=20de=20l'enseignan?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Front-End/src/components/ProfileDirectory.js | 57 +++++++++++++-------
 Front-End/src/components/Tooltip.js          | 30 +++++++++++
 2 files changed, 68 insertions(+), 19 deletions(-)
 create mode 100644 Front-End/src/components/Tooltip.js

diff --git a/Front-End/src/components/ProfileDirectory.js b/Front-End/src/components/ProfileDirectory.js
index 41226b3..0809644 100644
--- a/Front-End/src/components/ProfileDirectory.js
+++ b/Front-End/src/components/ProfileDirectory.js
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import { Trash2, Eye, EyeOff, ToggleLeft, ToggleRight } from 'lucide-react';
+import { Trash2, Eye, EyeOff, ToggleLeft, ToggleRight, Info } 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';
+import Tooltip from '@/components/Tooltip';
 
 const roleTypeToLabel = (roleType) => {
   switch (roleType) {
@@ -83,7 +84,12 @@ const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeletePro
         </span>
       )
     },
-    { name: 'Utilisateur', transform: (row) => row.associated_person?.guardian_name },
+    { name: 'Utilisateur', transform: (row) => (
+      <div className="flex flex-col justify-center space-y-2">
+        {row.associated_person?.guardian_name}
+        </div>
+      )
+    },
     { name: 'Elève(s) associé(s)', transform: (row) => (
       <div className="flex flex-col justify-center space-y-2">
         {row.associated_person?.students?.map(student => (
@@ -133,22 +139,35 @@ const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeletePro
         </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}/>
-          ))}
+    { name: 'Utilisateur', transform: (row) => (
+        <div className="flex items-center justify-center space-x-2">
+          <span>{row.associated_person?.teacher_name}</span>
+          <Tooltip content={
+            <div>
+              <div className="mb-2">
+                <strong>Classes associées:</strong>
+                <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>
+              </div>
+              <div>
+                <strong>Spécialités:</strong>
+                <div className="flex flex-wrap justify-center space-x-2">
+                  {row.associated_person?.specialities?.map(speciality => (
+                    <SpecialityItem key={speciality.name} speciality={speciality} isDraggable={false} />
+                  ))}
+                </div>
+              </div>
+            </div>
+          }>
+            <button className="text-blue-500 hover:text-blue-700">
+              <Info className="w-5 h-5" />
+            </button>
+          </Tooltip>
         </div>
       )
     },
@@ -176,7 +195,7 @@ const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeletePro
   ];
 
   return (
-    <div className="bg-white rounded-lg shadow-lg w-full p-6">
+    <div className="bg-white rounded-lg shadow-lg w-3/5 p-6">
       <div className="space-y-8">
         <div className="max-h-128 overflow-y-auto border rounded p-4">
           {parentProfiles.length === 0 ? (
diff --git a/Front-End/src/components/Tooltip.js b/Front-End/src/components/Tooltip.js
new file mode 100644
index 0000000..335c588
--- /dev/null
+++ b/Front-End/src/components/Tooltip.js
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const Tooltip = ({ content, children }) => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div className="relative inline-block">
+      <div
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        className="cursor-pointer"
+      >
+        {children}
+      </div>
+      {visible && (
+        <div className="absolute z-10 w-64 p-2 bg-white border border-gray-200 rounded shadow-lg">
+          {content}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Tooltip.propTypes = {
+  content: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default Tooltip;
\ No newline at end of file