modify dropdown header

src/admin/general/RedisCard.tsx

@@ -17,15 +17,15 @@ const RedisCard: React.FC<RedisCardProps> = ({ redisData }) => {
     const columns: ColumnDef<RedisData>[] = [
         {
             accessorKey: 'address',
-            header: () => <div>Address</div>, // Default left alignment
+            header: () => <div>Address</div>,
             cell: ({ getValue }) => (
-                <div>{getValue() as string}</div> // Default left alignment
+                <div>{getValue() as string}</div>
             ),
         },
         {
             accessorKey: 'port',
-            header: () => <div>Port</div>, // Default left alignment
-            cell: ({ getValue }) => <Badge value={getValue() as number} />, // Badge component for port
+            header: () => <div>Port</div>,
+            cell: ({ getValue }) => <Badge value={getValue() as number} />,
         },
     ];
 

src/admin/jobs/JobTable.tsx

@@ -82,7 +82,7 @@ const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
       className="bg-gray-100"
       enableColumnFilters
       enableSorting
-      getRowClasses={() => "hover:bg-indigo-100 cursor-pointer"} // Ajout de l'effet hover ici
+      getRowClasses={() => "hover:bg-indigo-100 cursor-pointer"}
     />
   );
 };

src/admin/labels/LabelInputForm.tsx

@@ -31,7 +31,7 @@ const LabelInputForm = function ({ onCreateLabel }: LabelInputFormProps) {
         onChange={handleInputChange}
         placeholder="Add new label"
         bordered
-        className="w-full border border-gray-300 rounded-r-none shadow-md rounded-l-xl focus:outline-none focus:ring-2 focus:ring-gray-300" // Ajout de l'ombre ici
+        className="w-full border border-gray-300 rounded-r-none shadow-md rounded-l-xl focus:outline-none focus:ring-2 focus:ring-gray-300"
       />
       <Button
         type="button"

src/delete/DeleteRoot.tsx

@@ -24,7 +24,7 @@ const DeleteRoot = () => {
         [[]],
         {
             onSuccess: (uuid) => {
-                console.log("Queue created with UUID:", uuid); // Log pour vérifier l'UUID
+                console.log("Queue created with UUID:", uuid);
                 setQueueUuid(uuid);
             },
         }

src/queue/ProgressQueueCircle.tsx

@@ -5,7 +5,7 @@ import { Queue } from "../utils/types";
 type ProgressQueueProps = {
     queueData: Queue;
     onDelete: (event: React.MouseEvent) => void;
-    colors: { background: string; progress: string }; // Ajout des couleurs
+    colors: { background: string; progress: string };
 };
 
 const ProgressQueueCircle = ({ queueData, onDelete, colors }: ProgressQueueProps) => {
@@ -15,11 +15,11 @@ const ProgressQueueCircle = ({ queueData, onDelete, colors }: ProgressQueueProps
                 text={queueData?.state}
                 progress={queueData?.progress || 0}
                 size={150}
-                className={colors.background} // Utiliser la couleur de fond
+                className={colors.background}
             >
                 <div className="flex justify-center">
                     <Cancel
-                        className={`text-sm ${colors.progress} cursor-pointer hover:text-danger-hover`} // Utiliser la couleur de progression
+                        className={`text-sm ${colors.progress} cursor-pointer hover:text-danger-hover`}
                         onClick={onDelete}
                     />
                 </div>

src/root/Dashboard/CardAnon.tsx

@@ -12,25 +12,22 @@ import { AnonQueue } from "../../utils/types";
 const CardAnon = () => {
     const currentUserId = useSelector((state) => state.user.currentUserId);
 
-    // Récupération des files d'attente existantes
     const { data: existingAnonymizeQueues } = useCustomQuery<string[]>(
         ['queue', 'anonymize', currentUserId?.toString() || ''],
         () => getExistingAnonymizeQueues(currentUserId)
     );
 
     const firstQueue = existingAnonymizeQueues?.[0];
 
-    // Récupération des données de la première file d'attente
     const { data, isPending, isFetching } = useCustomQuery<AnonQueue[]>(
         ['queue', 'anonymize', firstQueue],
         () => getAnonymizeQueue(firstQueue),
         {
-            refetchInterval: 2000, // Initialement défini, sera remplacé par globalProgress
+            refetchInterval: 2000,
             enabled: !!firstQueue,
         }
     );
 
-    // Calcul de la progression globale
     const globalProgress = useMemo(() => {
         if (!data || data.length === 0) return 0;
 
@@ -40,28 +37,27 @@ const CardAnon = () => {
         return (totalJobs === 0) ? 0 : (completedJobs / totalJobs) * 100;
     }, [data]);
 
-    // Réinitialiser le refetchInterval si la progression atteint 100
     useCustomQuery<AnonQueue[]>(['queue', 'anonymize', firstQueue], () => getAnonymizeQueue(firstQueue), {
         refetchInterval: globalProgress < 100 ? 2000 : false,
         enabled: !!firstQueue,
     });
 
-    // Si aucune file d'attente n'est trouvée, ne rien afficher
+    // If no queue is found, display nothing
     if (!firstQueue) return null;
-    // Si les données sont en cours de chargement, afficher un spinner
+    // If data is loading, display a spinner
     if (isPending || isFetching) return <Spinner />;
 
     return (
         <Card className="flex-1">
             <CardHeader centerTitle title="Anonymisation" color={Colors.blueCustom} />
             <CardBody className="flex items-center justify-center" color={Colors.light}>
                 <ProgressQueueCircle
-                    onDelete={() => { }} // Ajoutez votre fonction de suppression ici
+                    onDelete={() => { }}
                     queueData={{
                         progress: globalProgress,
-                        state: "", // Vous pouvez mettre à jour ceci si nécessaire
-                        id: "",    // Mettez l'ID de la queue ici si nécessaire
-                        results: undefined, // Mettez à jour si vous avez des résultats à afficher
+                        state: "",
+                        id: "",
+                        results: undefined,
                         userId: currentUserId || 0
                     }}
                     colors={{ background: 'text-gray-300', progress: Colors.primary }}

src/root/Dashboard/Dashboard.tsx

@@ -1,5 +1,3 @@
-// src/components/Dashboard.js
-
 import CardAnon from "./CardAnon";
 import CardExport from "./CardExport";
 import Cardretrieve from "./Cardretrieve";

src/root/Header.tsx

@@ -8,10 +8,12 @@ import ToggleSwitch from '../ui/menu/ToggleSwitch';
 import BannerItems from '../ui/menu/BannerItems';
 import DeleteList from './ToolList';
 import { Gear, Language, Notification, User } from '../icons';
+import { ToogleChevron } from '../ui';
 
 type Item = {
   title: string;
-  path: string;
+  path?: string;
+  code?: string;
   isActive: boolean;
 };
 
@@ -25,17 +27,11 @@ const Header: React.FC<HeaderProps> = ({ title }) => {
   const { i18n } = useTranslation();
 
   const [openItem, setOpenItem] = useState<string | null>(null);
-  const dropdownRefLanguage = useRef<HTMLDivElement>(null);
-  const dropdownRefSettingsUser = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const handleOutsideClick = (event: MouseEvent) => {
-      if (
-        dropdownRefLanguage.current &&
-        !dropdownRefLanguage.current.contains(event.target as Node) &&
-        dropdownRefSettingsUser.current &&
-        !dropdownRefSettingsUser.current.contains(event.target as Node)
-      ) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
         setOpenItem(null);
       }
     };
@@ -51,39 +47,20 @@ const Header: React.FC<HeaderProps> = ({ title }) => {
     };
   }, [openItem]);
 
-  const handleDropDown = (name: string) => {
-    setOpenItem(prev => (prev === name ? null : name));
+  const handleDropDown = () => {
+    setOpenItem(prev => (prev ? null : 'Dropdown'));
   };
 
-  const handleSettingsItemClick = (item: Item) => {
-    navigate(item.path);
-    setOpenItem(null);
-  };
-
-  const handleLeftIconClick = () => {
-    if (location.pathname !== '/') {
-      navigate('/');
+  const handleItemClick = (item: Item) => {
+    if (item.path) {
+      navigate(item.path);
+    } else if (item.code) {
+      i18n.changeLanguage(item.code);
     }
+    setOpenItem(null);
   };
 
-  const isOpen = (item: string): boolean => openItem === item;
-
-  const ItemsLanguage = [
-    {
-      title: 'English',
-      code: 'en',
-      path: '/english',
-      isActive: location.pathname === '/english',
-    },
-    {
-      title: 'Français',
-      code: 'fr',
-      path: '/francais',
-      isActive: location.pathname === '/francais',
-    },
-  ];
-
-  const ItemsSettingsUser: Item[] = [
+  const Items: Item[] = [
     {
       title: 'Profile',
       path: '/profile',
@@ -94,78 +71,66 @@ const Header: React.FC<HeaderProps> = ({ title }) => {
       path: '/settings',
       isActive: location.pathname === '/settings',
     },
+    {
+      title: 'English',
+      code: 'en',
+      isActive: i18n.language === 'en',
+    },
+    {
+      title: 'Français',
+      code: 'fr',
+      isActive: i18n.language === 'fr',
+    },
   ];
 
   return (
     <Banner
       title={title}
-      onLeftIconClick={handleLeftIconClick}
+      onLeftIconClick={() => navigate('/')}
       className="sticky top-0 z-50 bg-white"
     >
       <div className="flex justify-end gap-4">
         <DeleteList />
         <DropDown
-          ref={dropdownRefLanguage}
-          chevronPosition="right"
-          className="relative flex flex-col w-44"
-          isOpen={isOpen('Language')}
-          dropDownOpen={() => handleDropDown('Language')}
+          ref={dropdownRef}
+          className="relative flex flex-col w-80"
+          isOpen={openItem === 'Dropdown'}
+          dropDownOpen={handleDropDown}
           dropDown={
-            <div className="absolute -mt-2 top-full">
+            <div className="absolute -mt-2 top-full w-80">
               <BannerItems
-                elements={ItemsLanguage}
-                onSelect={(item) => {
-                  i18n.changeLanguage(item.code);
-                  setOpenItem(null);
-                }}
-                isOpen={isOpen('Language')}
-                className="w-40"
+                elements={Items}
+                onSelect={(item) => handleItemClick(item)}
+                isOpen={openItem === 'Dropdown'}
                 setOpenItem={setOpenItem}
+                className="w-80"
               />
             </div>
           }
-        >
-          <span className="inline-flex items-center" onClick={() => handleDropDown('Language')}>
-            <Language />
-            <span className="mx-4">
-              {ItemsLanguage.find((item) => item.code === i18n.language)?.title}
-            </span>
-          </span>
-        </DropDown>
-        <DropDown
-          ref={dropdownRefSettingsUser}
-          chevronPosition="left"
-          className="relative flex flex-col w-60"
-          isOpen={isOpen('SettingsUser')}
-          dropDownOpen={() => handleDropDown('SettingsUser')}
-          dropDown={
-            <div className="absolute -mt-2 top-full">
-              <BannerItems
-                elements={ItemsSettingsUser}
-                onSelect={(item) => handleSettingsItemClick(item)}
-                isOpen={isOpen('SettingsUser')}
-                setOpenItem={setOpenItem}
-                className="w-56"
-              />
-            </div>
-          }
-        >
-          <ToggleSwitch
+        ><ToggleSwitch
             isToggled={true}
             onToggle={(isChecked) => {
               console.log('Toggle state:', isChecked);
             }}
           />
-          <Notification
-            className="transition-transform duration-100 size-4 hover:scale-110" />
-          <Gear
-            className="transition-transform duration-100 size-4 hover:scale-110" />
-          <User
-            size={23}
-            className="transition-transform duration-100 hover:scale-110"
-            fill="white"
-            stroke="white"
-          />
+          <div className="flex items-center gap-2">
+
+            <Language className="w-5 h-5 mx-1" fill="currentColor" />
+            <span className="text-sm">
+              {Items.find((item) => item.code === i18n.language)?.title}
+            </span>
+            <ToogleChevron
+              isOpen={openItem === 'Dropdown'}
+              className="ml-1"
+              onClick={handleDropDown}
+            />
+            <Notification className="w-5 h-5 transition-transform duration-100 hover:scale-110" fill="currentColor" />
+            <Gear className="w-5 h-5 transition-transform duration-100 hover:scale-110" fill="currentColor" />
+            <User className="w-5 h-5 transition-transform duration-100 hover:scale-110" fill="currentColor" />
+
+          </div>
+
+
         </DropDown>
       </div>
     </Banner>

src/ui/Badge.tsx

@@ -18,10 +18,10 @@ const Badge = ({
 }: BadgeProps) => {
 
   const sizeClasses = {
-    sm: "text-xs p-1.5", // Réduction légère du texte
-    md: "text-sm p-2 px-3", // Taille par défaut pour md
-    lg: "text-base p-3", // Taille par défaut pour lg
-    xl: "text-lg p-4", // Taille par défaut pour xl
+    sm: "text-xs p-1.5",
+    md: "text-sm p-2 px-3",
+    lg: "text-base p-3",
+    xl: "text-lg p-4"
   };
 
   const variants = {

src/ui/Popover.tsx

@@ -6,7 +6,7 @@ type PopoverProps = {
   popover: React.ReactNode;
   placement?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-left' | 'bottom-right';
   className?: string;
-  backgroundColor?: string; // Color class name
+  backgroundColor?: string;
 };
 
 const Popover: React.FC<PopoverProps> = ({
@@ -15,7 +15,7 @@ const Popover: React.FC<PopoverProps> = ({
   withOnClick = false,
   placement = 'bottom',
   className = '',
-  backgroundColor = 'bg-secondary', // Default background color
+  backgroundColor = 'bg-secondary',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const popoverRef = useRef<HTMLDivElement | null>(null);