feat: integrate authentication and password management features, including bcrypt for hashing and NextAuth for session handling

components/dashboard/sidebar.tsx

@@ -2,7 +2,8 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { signOut } from "next-auth/react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import {
@@ -16,7 +17,9 @@ import {
   ChevronRight,
   Settings,
   Wand2,
+  LogOut,
 } from "lucide-react";
+import { toast } from "sonner";
 
 const navItems = [
   { href: "/", label: "Tableau de bord", icon: LayoutDashboard },
@@ -30,8 +33,21 @@ const navItems = [
 
 export function Sidebar() {
   const pathname = usePathname();
+  const router = useRouter();
   const [collapsed, setCollapsed] = useState(false);
 
+  const handleSignOut = async () => {
+    try {
+      await signOut({ redirect: false });
+      toast.success("Déconnexion réussie");
+      router.push("/login");
+      router.refresh();
+    } catch (error) {
+      console.error("Error signing out:", error);
+      toast.error("Erreur lors de la déconnexion");
+    }
+  };
+
   return (
     <aside
       className={cn(
@@ -82,7 +98,7 @@ export function Sidebar() {
         })}
       </nav>
 
-      <div className="p-2 border-t border-border">
+      <div className="p-2 border-t border-border space-y-1">
         <Link href="/settings">
           <Button
             variant="ghost"
@@ -95,6 +111,17 @@ export function Sidebar() {
             {!collapsed && <span>Paramètres</span>}
           </Button>
         </Link>
+        <Button
+          variant="ghost"
+          onClick={handleSignOut}
+          className={cn(
+            "w-full justify-start gap-3 text-destructive hover:text-destructive hover:bg-destructive/10",
+            collapsed && "justify-center px-2",
+          )}
+        >
+          <LogOut className="w-5 h-5 shrink-0" />
+          {!collapsed && <span>Déconnexion</span>}
+        </Button>
       </div>
     </aside>
   );