style darkmode

src/App.tsx

@@ -4,7 +4,7 @@ import WelcomeRoot from "./welcome/WelcomeRoot";
 import RootApp from "./root/RootApp";
 import "preline/preline";
 import { IStaticMethods } from "preline/preline";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 declare global {
   interface Window {
@@ -15,14 +15,22 @@ declare global {
 function App() {
   const isLogged = useSelector((state: RootState) => state.user.isLogged);
   const location = useLocation();
+  const [isDark, setDark] = useState(localStorage.getItem('theme') === 'dark')
+
+  useEffect(() => {
+    window.onstorage = () => {
+      const isDark = localStorage.getItem('theme') === 'dark';
+      setDark(isDark);
+    };
+  }, []);
 
   useEffect(() => {
     window.HSStaticMethods.autoInit();
   }, [location.pathname]);
 
 
   return (
-    <div className="w-screen h-screen">
+    <div className={`w-screen h-screen ${isDark ? 'dark' : ''}`}>
       {isLogged ? <RootApp /> : <WelcomeRoot />}
     </div>
   )

src/admin/labels/LabelTable.tsx

@@ -18,7 +18,7 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
 }) => {
   const rows = useMemo(() => data, [data]);
 
- const columns = useMemo(() => {
+  const columns = useMemo(() => {
     return [
       {
         accessorKey: "name",
@@ -34,12 +34,13 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
             <Popover
               withOnClick={true}
               popover={<LabelsRoles key={row.original.name} labelName={row.original.name} />}
-              placement="bottom"
+              placement="top"
               backgroundColor="bg-white"
+              width="200px"
             >
               <Button color={Colors.secondary} className="flex items-center gap-1.5">
                 <Admin size="1.3rem" />
-                <ToggleChevron isOpen={false} />
+                <ToggleChevron isOpen={false} /> 
               </Button>
             </Popover>
           </div>
@@ -60,7 +61,7 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
       },
     ];
 
-    
+
   }, []);
 
   return (

src/admin/labels/LabelsRoles.tsx

@@ -3,31 +3,30 @@ import { Role, useCustomMutation, useCustomQuery } from "../../utils";
 import { getRoles, getRolesByLabelName } from "../../services";
 import { Spinner } from "../../ui";
 import { addLabelToRole, removeLabelFromRole } from "../../services/roles";
-
+import Checkbox from "../../ui/Checkbox";
 type LabelsRolesProps = {
   labelName: string;
 };
 
 const LabelsRoles = ({ labelName }: LabelsRolesProps) => {
-
-  const { data: roles, isLoading: isLoadingRoles } = useCustomQuery<
+  const { data: roles, isLoading: isRolesLoading, error: rolesError } = useCustomQuery<
     Role[],
     string[]
   >(["roles"], () => getRoles(), {
     select: (roles) => roles.map((role) => role.name),
   });
-  
-  const { data: existingRoles, isLoading: isLoadingExistingRoles } =
+
+  const { data: existingRoles, isLoading: isExistingRolesLoading, error: existingRolesError } =
     useCustomQuery<string[]>(["labels", labelName], () =>
       getRolesByLabelName(labelName)
     );
 
-  const { mutate: addRoleMutation } = useCustomMutation<void>(
+  const { mutate: addRoleMutation, error: addRoleError } = useCustomMutation<void>(
     ({ role }) => addLabelToRole(role, labelName),
     [["labels", labelName]]
   );
 
-  const { mutate: removeRoleMutation } = useCustomMutation<void>(
+  const { mutate: removeRoleMutation, error: removeRoleError } = useCustomMutation<void>(
     ({ role }) => removeLabelFromRole(role, labelName),
     [["labels", labelName]]
   );
@@ -38,23 +37,32 @@ const LabelsRoles = ({ labelName }: LabelsRolesProps) => {
   ) => {
     const checked = event.target.checked;
     if (checked) {
-      addRoleMutation({ role: name });
+      if (!existingRoles?.includes(name)) {
+        addRoleMutation({ role: name });
+      }
     } else {
       removeRoleMutation({ role: name });
     }
   };
 
-  if (isLoadingRoles || isLoadingExistingRoles) {
+  if (isRolesLoading || isExistingRolesLoading) {
     return <Spinner />;
   }
 
+  if (rolesError || existingRolesError) {
+    return <div>Erreur de chargement des données</div>;
+  }
+
+  if (addRoleError || removeRoleError) {
+    return <div>Erreur de mutation</div>;
+  }
+
   return (
     <div className="flex flex-col w-80">
       {roles?.map((role) => {
         return (
           <div key={role} className="flex items-center gap-2 my-2">
-            <input
-              type="checkbox"
+            <Checkbox
               name={role}
               checked={existingRoles?.includes(role)}
               onChange={(event) => handleRoleChange(role, event)}
@@ -67,4 +75,4 @@ const LabelsRoles = ({ labelName }: LabelsRolesProps) => {
   );
 };
 
-export default LabelsRoles;
+export default LabelsRoles;

src/root/RootApp.tsx

@@ -64,7 +64,7 @@ const RootApp = () => {
         setOpenItem={setOpenItem}
         onLogout={handleLogout}
       />
-      <div className="flex flex-col flex-1 overflow-auto bg-slate-100 custom-scrollbar">
+      <div className="flex flex-col flex-1 overflow-auto bg-slate-100 dark:bg-neutral-800 custom-scrollbar">
         <Header title={title} />
         <div className="mx-6 my-6">
           <Routes>

src/root/SideBar.tsx

@@ -40,7 +40,7 @@ const SideBar = ({ onLogout, openItem, setOpenItem }: SideBarProps) => {
       data-gaelo-flow="sidebar"
       className="flex-shrink-0 w-64 h-screen border-transparent rounded-tr-40"
     >
-      <main className="flex flex-col h-full rounded-tr-40 bg-primary">
+      <main className="flex flex-col h-full rounded-tr-40 bg-primary dark:bg-stone-950">
         {/* Logo */}
         <div className="flex justify-center py-4">
           <LogoSideBar className="h-16" />

src/ui/Input.tsx

@@ -69,7 +69,7 @@ const Input = ({
       {label &&
         typeof label === "string" ? (
         <label
-          className="mb-2 text-sm font-medium text-dark">{label}</label>
+          className="mb-2 text-sm font-medium text-dark dark:text-white">{label}</label>
       ) : label}
 
       <div

src/ui/Popover.tsx

@@ -7,6 +7,8 @@ type PopoverProps = {
   placement?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-left' | 'bottom-right';
   className?: string;
   backgroundColor?: string;
+  disableAutoPlacement?: boolean;
+  width?: string;
 };
 
 const Popover: React.FC<PopoverProps> = ({
@@ -16,6 +18,8 @@ const Popover: React.FC<PopoverProps> = ({
   placement = 'bottom',
   className = '',
   backgroundColor = 'bg-secondary',
+  disableAutoPlacement = false,
+  width = '200px',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const popoverRef = useRef<HTMLDivElement | null>(null);
@@ -32,9 +36,9 @@ const Popover: React.FC<PopoverProps> = ({
       case 'left':
         return 'right-full top-1/2 transform -translate-y-1/2 mr-2';
       case 'bottom-left':
-        return 'top-full left-0 transform mt-2';
+        return 'top-full left-0 mt-2';
       case 'bottom-right':
-        return 'top-full right-0 transform mt-2';
+        return 'top-full right-0 mt-2';
       default:
         return 'top-full left-1/2 transform -translate-x-1/2 mt-2';
     }
@@ -74,6 +78,7 @@ const Popover: React.FC<PopoverProps> = ({
         <div
           ref={popoverRef}
           className={`absolute ${getPlacementClasses(placement)} z-50 rounded-lg p-4 text-gray-600 shadow-md dark:text-gray-400 ${className} ${backgroundColor}`}
+          style={{ width }}
         >
           {popover}
         </div>

src/ui/menu/DropdownButton.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { HSDropdown } from 'preline/preline';
 
 type DropdownOption = {
@@ -18,6 +18,7 @@ type DropdownButtonProps = {
 
 const DropdownButton: React.FC<DropdownButtonProps> = ({ options, buttonText = "Action", children, className }) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [activeDropdownId, setActiveDropdownId] = useState<string | null>(null);
 
   useEffect(() => {
     if (dropdownRef.current) {
@@ -29,10 +30,33 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({ options, buttonText = "
     option.action && option.action();
   };
 
-  const handleDropdownClick = (e: React.MouseEvent) => {
+  const handleDropdownClick = (e: React.MouseEvent, dropdownId: string) => {
     e.stopPropagation();
+    if (activeDropdownId !== dropdownId) {
+      const previousDropdownMenu = document.querySelector(`.hs-dropdown-menu#${activeDropdownId}`);
+      if (previousDropdownMenu) {
+        previousDropdownMenu.classList.add('hidden');
+      }
+      setActiveDropdownId(dropdownId);
+    }
+  };
+
+  const handleOutsideClick = (event: MouseEvent) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      const dropdownMenu = dropdownRef.current.querySelector('.hs-dropdown-menu');
+      if (dropdownMenu) {
+        dropdownMenu.classList.add('hidden');
+      }
+    }
   };
 
+  useEffect(() => {
+    document.addEventListener('click', handleOutsideClick);
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, []);
+
   return (
     <div ref={dropdownRef} className={`relative inline-flex hs-dropdown [--placement:bottom-left] ${className}`}>
       <button
@@ -58,9 +82,10 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({ options, buttonText = "
         </svg>
       </button>
       <div
-        onClick={handleDropdownClick}
-        className="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden bg-white shadow-md rounded-lg p-2 mt-2 dark:bg-slate-800 dark:border dark:border-gray-700"
+        onClick={(e) => handleDropdownClick(e, 'dropdown-id')}
+        className="hs-dropdown-menu hs-dropdown z-dropdown transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden bg-white shadow-md rounded-lg p-2 mt-2 dark:bg-slate-800 dark:border dark:border-gray-700"
         aria-labelledby="hs-dropdown-custom-trigger"
+        id="dropdown-id"
       >
         {children} 
         {options?.map((option, index) => (
@@ -80,4 +105,4 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({ options, buttonText = "
   );
 };
 
-export default DropdownButton;
+export default DropdownButton;

src/ui/menu/ToggleSwitch.tsx

@@ -1,23 +1,20 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Moon, Sun } from "../../icons";
 
-type ToggleSwitchProps = {
-  isToggled?: boolean;
-  onToggle?: (isChecked: boolean) => void;
-  className?: string;
-};
 
-const ToggleSwitch = ({ isToggled, onToggle }: ToggleSwitchProps) => {
-  const [checked, setChecked] = useState<boolean>(isToggled || false);
+const ToggleSwitch = ()  => {
+  const [checked, setChecked] = useState<boolean>(localStorage.getItem('theme') === 'dark');
 
   const handleClick = () => {
     const newValue = !checked;
     setChecked(newValue);
-    if (onToggle) {
-      onToggle(newValue);
-    }
   };
 
+  useEffect(()=>{
+    localStorage.setItem('theme', checked ? 'dark' : 'light')
+    window.dispatchEvent(new Event("storage"));
+  }, [checked])
+
   return (
     <label className="flex items-center cursor-pointer">
       {/* The real hidden checkbox input */}

src/welcome/SignInForm.tsx

@@ -64,14 +64,14 @@ export const SignInForm = () => {
   return (
     <div className="relative flex items-center justify-center w-full ">
       {/* Background square */}
-      <div className="absolute h-full w-full bg-gradient-to-r from-indigo-500 to-[#926874] shadow-2xl transform rounded-3xl rotate-6 z-0"></div>
+      <div className="absolute h-full w-full bg-gradient-to-r from-indigo-500 to-[#926874] dark:from-blue-950 dark:to-rose-950 shadow-2xl transform rounded-3xl rotate-6 z-0"></div>
 
-      <div className="relative px-10 bg-white shadow-lg py-14 rounded-3xl">
+      <div className="relative px-10 bg-white shadow-lg dark:bg-neutral-800 py-14 rounded-3xl">
         <form onSubmit={handleSubmit} className="relative z-10 flex flex-col items-center w-full">
-          <h1 className="mb-4 text-4xl font-semibold text-center text-dark">
+          <h1 className="mb-4 text-4xl font-semibold text-center text-dark dark:text-white">
             {t("titleSignInForm")} 
           </h1>
-          <p className="mb-10 text-lg text-center text-dark">
+          <p className="mb-10 text-lg text-center text-dark dark:text-white">
             Please Log in to your Account
           </p>
           <div className="w-2/3 mt-10 text-dark">
@@ -110,7 +110,7 @@ export const SignInForm = () => {
 
           <div className="mt-3 text-xs text-right">
             <span
-              className="inline-block cursor-pointer hover:text-indigo-800 hover:underline"
+              className="inline-block cursor-pointer hover:text-indigo-800 hover:underline dark:text-white"
               onClick={() => navigate("/lost-password")}
             >
               Forgot Password?

src/welcome/SignUpForm.tsx

@@ -36,16 +36,16 @@ export const SignUpForm = () => {
 
   return (
     <div className="relative flex items-center justify-center">
-      <div className="absolute h-full w-full bg-gradient-to-r from-indigo-500 to-[#926874] shadow-2xl transform rounded-3xl rotate-6 z-0"></div>
-      <div className="relative px-10 bg-white shadow-lg py-14 rounded-3xl">
-                  <form onSubmit={handleSubmit} className="relative z-10 flex flex-col items-center w-full">
-          <h1 className="mb-4 text-2xl font-semibold text-center md:text-3xl lg:text-4xl text-dark">
-            Welcome to <span className="text-primary">GaelO Flow</span>
-          </h1>
-          <p className="mb-6 text-sm text-center md:text-base lg:text-lg text-dark">
+      <div className="absolute h-full w-full bg-gradient-to-r from-indigo-500 to-[#926874] dark:from-blue-950 dark:to-rose-950 shadow-2xl transform rounded-3xl rotate-6 z-0"></div>
+      <div className="relative px-10 bg-white shadow-lg py-14 rounded-3xl dark:bg-neutral-800">                  
+        <form onSubmit={handleSubmit} className="relative z-10 flex flex-col items-center w-full">
+      <h1 className="mb-4 text-2xl font-semibold text-center md:text-3xl lg:text-4xl text-dark dark:text-white">
+  Welcome to <span className="text-primary dark:text-white">GaelO Flow</span>
+</h1>
+          <p className="mb-6 text-sm text-center md:text-base lg:text-lg text-dark dark:text-white">
             Please create your Account
           </p>
-          <div className="w-full max-w-sm text-dark">
+          <div className="w-full max-w-sm text-dark ">
             <Input
               label="Firstname:"
               svgLeft={<User />}