first commit

components/layout/sidebar.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import Image from "next/image";
+import {
+  LayoutDashboard,
+  Users,
+  MessageSquare,
+  CreditCard,
+  Settings,
+  Database,
+  FileText,
+  Shield,
+  Bot,
+  ChevronLeft,
+  ChevronRight,
+  BarChart3,
+  Activity,
+} from "lucide-react";
+
+interface NavigationItem {
+  name: string;
+  href: string;
+  icon: React.ElementType;
+  badge?: string | null;
+}
+
+const navigation: NavigationItem[] = [
+  {
+    name: "Vue d'ensemble",
+    href: "/",
+    icon: LayoutDashboard,
+    badge: null,
+  },
+  {
+    name: "Analytics",
+    href: "/analytics",
+    icon: BarChart3,
+    badge: "Nouveau",
+  },
+];
+
+const dataNavigation: NavigationItem[] = [
+  { name: "Utilisateurs", href: "/users", icon: Users, badge: null },
+  {
+    name: "Conversations",
+    href: "/conversations",
+    icon: MessageSquare,
+    badge: null,
+  },
+  { name: "Messages", href: "/messages", icon: FileText, badge: null },
+  {
+    name: "Transactions",
+    href: "/transactions",
+    icon: CreditCard,
+    badge: null,
+  },
+];
+
+const systemNavigation: NavigationItem[] = [
+  { name: "Agents", href: "/agents", icon: Bot, badge: null },
+  { name: "Rôles", href: "/roles", icon: Shield, badge: null },
+  { name: "Collections", href: "/collections", icon: Database, badge: null },
+  { name: "Paramètres", href: "/settings", icon: Settings, badge: null },
+];
+
+export function Sidebar() {
+  const [collapsed, setCollapsed] = useState(false);
+  const pathname = usePathname();
+
+  const NavSection = ({
+    title,
+    items,
+    showTitle = true,
+  }: {
+    title: string;
+    items: NavigationItem[];
+    showTitle?: boolean;
+  }) => (
+    <div className="space-y-2">
+      {!collapsed && showTitle && (
+        <h3 className="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+          {title}
+        </h3>
+      )}
+      {items.map((item) => {
+        const isActive = pathname === item.href;
+        return (
+          <Link key={item.name} href={item.href}>
+            <Button
+              variant={isActive ? "secondary" : "ghost"}
+              className={cn(
+                "w-full justify-start h-9 px-3",
+                collapsed && "px-2 justify-center",
+                isActive && "bg-secondary font-medium"
+              )}
+            >
+              <item.icon className={cn("h-4 w-4", collapsed ? "" : "mr-3")} />
+              {!collapsed && (
+                <div className="flex items-center justify-between w-full">
+                  <span>{item.name}</span>
+                  {item.badge && (
+                    <Badge variant="secondary" className="text-xs">
+                      {item.badge}
+                    </Badge>
+                  )}
+                </div>
+              )}
+            </Button>
+          </Link>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col h-screen bg-background border-r border-border transition-all duration-300 ease-in-out",
+        collapsed ? "w-16" : "w-64"
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border">
+        {!collapsed && (
+          <div className="flex items-center space-x-2">
+            <div className="w-8 h-8 rounded-lg flex items-center justify-center">
+              <Image
+                src="/img/logo.png"
+                alt="Cercle GPT Logo"
+                width={32}
+                height={32}
+                className="rounded-lg"
+              />
+            </div>
+            <div>
+              <h1 className="text-sm font-semibold">Cercle GPT</h1>
+              <p className="text-xs text-muted-foreground">Admin Dashboard</p>
+            </div>
+          </div>
+        )}
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setCollapsed(!collapsed)}
+          className="h-8 w-8"
+        >
+          {collapsed ? (
+            <ChevronRight className="h-4 w-4" />
+          ) : (
+            <ChevronLeft className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-3 space-y-6 overflow-y-auto">
+        <NavSection title="Dashboard" items={navigation} showTitle={false} />
+
+        {!collapsed && <Separator />}
+
+        <NavSection title="Données" items={dataNavigation} />
+
+        {!collapsed && <Separator />}
+
+        <NavSection title="Système" items={systemNavigation} />
+      </nav>
+
+      {/* Footer */}
+      {!collapsed && (
+        <div className="p-3 border-t border-border">
+          <div className="flex items-center space-x-3 p-2 rounded-lg bg-muted/50">
+            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
+              <Activity className="h-4 w-4 text-primary" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-xs font-medium">Système en ligne</p>
+              <p className="text-xs text-muted-foreground">Tout fonctionne</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}