fix: Suppression de la top bar admin [#34]

Front-End/src/components/ProfileSelector.js

@@ -1,8 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
+import { LogOut } from 'lucide-react';
+import { disconnect } from '@/app/actions/authAction';
+import { getGravatarUrl } from '@/utils/gravatar';
 import { useEstablishment } from '@/context/EstablishmentContext';
 import DropdownMenu from '@/components/DropdownMenu';
+import { usePopup } from '@/context/PopupContext';
 import { getRightStr } from '@/utils/rights';
 import { ChevronDown } from 'lucide-react'; // Import de l'icône
+import Image from 'next/image'; // Import du composant Image
 
 const ProfileSelector = ({ onRoleChange, className = '' }) => {
   const {
@@ -14,6 +19,7 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
     user,
   } = useEstablishment();
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { showPopup } = usePopup();
 
   const handleRoleChange = (roleId) => {
     // Pas bon quand on a plusieur role pour le même établissement
@@ -28,52 +34,96 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
     setDropdownOpen(false); // Fermer le menu après sélection
   };
 
-  // Si on a pas de rôle ou un seul rôle, on n'affiche pas le sélecteur
-  if (
-    !establishments ||
-    establishments.length === 0 ||
-    establishments.length === 1
-  ) {
-    return null;
-  }
+  const handleDisconnect = () => {
+    setDropdownOpen(false);
+    setTimeout(() => {
+      showPopup &&
+        showPopup(
+          'Êtes-vous sûr(e) de vouloir vous déconnecter ?',
+          () => disconnect(),
+          undefined
+        );
+    }, 150);
+  };
 
   const selectedEstablishment = establishments.find(
     (est) => est.role_id === selectedRoleId
   );
 
+  // Suppression du tronquage JS, on utilise uniquement CSS
+  const isSingleRole = establishments && establishments.length === 1;
+
   return (
     <div className={`relative ${className}`}>
       <DropdownMenu
         buttonContent={
           <div className="h-16 flex items-center gap-2 cursor-pointer px-4 bg-white">
-            <div className="flex-1">
-              <div className="font-bold text-left">
-                {getRightStr(selectedEstablishment?.role_type) || ''}
+            <Image
+              src={getGravatarUrl(user?.email)}
+              alt="Profile"
+              className="w-8 h-8 rounded-full mr-2"
+              width={32}
+              height={32}
+            />
+            <div className="flex-1 min-w-0">
+              <div
+                className="font-bold text-left truncate max-w-full"
+                title={user?.email}
+              >
+                {user?.email}
               </div>
-              <div className="text-sm text-gray-500 text-left">
-                {selectedEstablishment?.name || 'Sélectionnez un établissement'}
+              <div
+                className="text-sm text-gray-500 text-left truncate max-w-full"
+                title={`${getRightStr(selectedEstablishment?.role_type) || ''}${selectedEstablishment?.name ? ', ' + selectedEstablishment.name : ''}`}
+              >
+                {getRightStr(selectedEstablishment?.role_type) || ''}
+                {selectedEstablishment?.name
+                  ? `, ${selectedEstablishment.name}`
+                  : ''}
               </div>
             </div>
-            {/* Icône ChevronDown avec rotation conditionnelle */}
             <ChevronDown
-              className={`w-5 h-5 transition-transform duration-200 ${
-                dropdownOpen ? 'rotate-180' : 'rotate-0'
-              }`}
+              className={`w-5 h-5 transition-transform duration-200 ${dropdownOpen ? 'rotate-180' : 'rotate-0'}`}
             />
           </div>
         }
-        items={establishments.map((establishment) => ({
-          type: 'item',
-          label: (
-            <div className="text-left">
-              <div className="font-bold">
-                {getRightStr(establishment.role_type)}
-              </div>
-              <div className="text-sm text-gray-500">{establishment.name}</div>
-            </div>
-          ),
-          onClick: () => handleRoleChange(establishment.role_id),
-        }))}
+        items={
+          isSingleRole
+            ? [
+                {
+                  type: 'item',
+                  label: 'Déconnexion',
+                  onClick: handleDisconnect,
+                  icon: LogOut,
+                },
+              ]
+            : [
+                ...establishments.map((establishment) => ({
+                  type: 'item',
+                  label: (
+                    <div className="text-left">
+                      <div className="font-bold">
+                        {getRightStr(establishment.role_type)}
+                      </div>
+                      <div className="text-sm text-gray-500">
+                        {establishment.name}
+                      </div>
+                    </div>
+                  ),
+                  onClick: () => handleRoleChange(establishment.role_id),
+                })),
+                {
+                  type: 'separator',
+                  content: <hr className="my-2 border-gray-200" />,
+                },
+                {
+                  type: 'item',
+                  label: 'Déconnexion',
+                  onClick: handleDisconnect,
+                  icon: LogOut,
+                },
+              ]
+        }
         buttonClassName="w-full"
         menuClassName="absolute mt-2 w-full bg-white border border-gray-200 rounded shadow-lg z-10"
         dropdownOpen={dropdownOpen}