new
This commit is contained in:
nBiqoz
@@ -1,12 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { usePathname, useRouter } 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 { createClient } from "@/lib/supabase/client";
|
||||
import Image from "next/image";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
@@ -21,135 +20,164 @@ import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
BarChart3,
|
||||
Activity,
|
||||
LogOut,
|
||||
User,
|
||||
Mail,
|
||||
} from "lucide-react";
|
||||
import type { User as SupabaseUser } from "@supabase/supabase-js";
|
||||
|
||||
interface NavigationItem {
|
||||
name: string;
|
||||
href: string;
|
||||
icon: React.ElementType;
|
||||
badge?: string | null;
|
||||
}
|
||||
|
||||
const navigation: NavigationItem[] = [
|
||||
const topLevelNavigation = [
|
||||
{
|
||||
name: "Vue d'ensemble",
|
||||
name: "Dashboard",
|
||||
href: "/",
|
||||
icon: LayoutDashboard,
|
||||
badge: null,
|
||||
},
|
||||
{
|
||||
name: "Analytics",
|
||||
href: "/analytics",
|
||||
icon: BarChart3,
|
||||
badge: "Nouveau",
|
||||
},
|
||||
];
|
||||
|
||||
const dataNavigation: NavigationItem[] = [
|
||||
{ name: "Utilisateurs", href: "/users", icon: Users, badge: null },
|
||||
const navigationGroups = [
|
||||
{
|
||||
name: "Conversations",
|
||||
href: "/conversations",
|
||||
icon: MessageSquare,
|
||||
badge: null,
|
||||
name: "Données",
|
||||
items: [
|
||||
{
|
||||
name: "Utilisateurs",
|
||||
href: "/users",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
name: "Conversations",
|
||||
href: "/conversations",
|
||||
icon: MessageSquare,
|
||||
},
|
||||
{
|
||||
name: "Messages",
|
||||
href: "/messages",
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
name: "Transactions",
|
||||
href: "/transactions",
|
||||
icon: CreditCard,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ name: "Messages", href: "/messages", icon: FileText, badge: null },
|
||||
{
|
||||
name: "Transactions",
|
||||
href: "/transactions",
|
||||
icon: CreditCard,
|
||||
badge: null,
|
||||
name: "Système",
|
||||
items: [
|
||||
{
|
||||
name: "Collections",
|
||||
href: "/collections",
|
||||
icon: Database,
|
||||
},
|
||||
{
|
||||
name: "Agents",
|
||||
href: "/agents",
|
||||
icon: Bot,
|
||||
},
|
||||
{
|
||||
name: "Rôles",
|
||||
href: "/roles",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
name: "Paramètres",
|
||||
href: "/settings",
|
||||
icon: Settings,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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 router = useRouter();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [user, setUser] = useState<SupabaseUser | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const supabase = createClient();
|
||||
|
||||
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>
|
||||
useEffect(() => {
|
||||
const getUser = async () => {
|
||||
try {
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser();
|
||||
setUser(user);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Erreur lors de la récupération de l'utilisateur:",
|
||||
error
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
setUser(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
getUser();
|
||||
|
||||
// Écouter les changements d'authentification
|
||||
const {
|
||||
data: { subscription },
|
||||
} = supabase.auth.onAuthStateChange((event, session) => {
|
||||
setUser(session?.user || null);
|
||||
setLoading(false);
|
||||
});
|
||||
|
||||
return () => subscription.unsubscribe();
|
||||
}, [supabase.auth]);
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await supabase.auth.signOut();
|
||||
router.push("/login");
|
||||
router.refresh();
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la déconnexion:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Ne pas afficher la sidebar si l'utilisateur n'est pas connecté ou en cours de chargement
|
||||
if (loading || !user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col h-screen bg-background border-r border-border transition-all duration-300 ease-in-out",
|
||||
"flex flex-col h-screen bg-white border-r border-gray-200 transition-all duration-300",
|
||||
collapsed ? "w-16" : "w-64"
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 flex-shrink-0">
|
||||
{!collapsed && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 rounded-lg flex items-center justify-center">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="relative w-8 h-8">
|
||||
<Image
|
||||
src="/img/logo.png"
|
||||
alt="Cercle GPT Logo"
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded-lg"
|
||||
alt="Logo"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-sm font-semibold">Cercle GPT</h1>
|
||||
<p className="text-xs text-muted-foreground">Admin Dashboard</p>
|
||||
<h1 className="text-lg font-semibold text-gray-900">
|
||||
Cercle GPT
|
||||
</h1>
|
||||
<p className="text-xs text-gray-500">Admin Dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
size="sm"
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
className="h-8 w-8"
|
||||
className="p-1.5 hover:bg-gray-100"
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
@@ -160,32 +188,112 @@ export function Sidebar() {
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-3 space-y-6 overflow-y-auto">
|
||||
<NavSection title="Dashboard" items={navigation} showTitle={false} />
|
||||
<nav className="flex-1 p-4 space-y-6 overflow-y-auto">
|
||||
{/* Navigation de niveau supérieur */}
|
||||
<div className="space-y-1">
|
||||
{topLevelNavigation.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
isActive
|
||||
? "bg-gray-900 text-white"
|
||||
: "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
||||
)}
|
||||
>
|
||||
<item.icon className="h-5 w-5 flex-shrink-0" />
|
||||
{!collapsed && <span>{item.name}</span>}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{!collapsed && <Separator />}
|
||||
{/* Séparateur */}
|
||||
<div className="border-t border-gray-200"></div>
|
||||
|
||||
<NavSection title="Données" items={dataNavigation} />
|
||||
{/* Groupes de navigation */}
|
||||
{navigationGroups.map((group) => (
|
||||
<div key={group.name}>
|
||||
{/* Titre du groupe */}
|
||||
{!collapsed && (
|
||||
<h3 className="px-3 mb-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
{group.name}
|
||||
</h3>
|
||||
)}
|
||||
|
||||
{!collapsed && <Separator />}
|
||||
{/* Séparateur visuel quand collapsed */}
|
||||
{collapsed && (
|
||||
<div className="mb-2 mx-auto w-8 h-px bg-gray-300"></div>
|
||||
)}
|
||||
|
||||
<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>
|
||||
{/* Items du groupe */}
|
||||
<div className="space-y-1">
|
||||
{group.items.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
|
||||
isActive
|
||||
? "bg-gray-900 text-white"
|
||||
: "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
||||
)}
|
||||
>
|
||||
<item.icon className="h-5 w-5 flex-shrink-0" />
|
||||
{!collapsed && <span>{item.name}</span>}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Section utilisateur connecté */}
|
||||
<div className="p-4 border-t border-gray-200 space-y-3 flex-shrink-0 bg-white">
|
||||
{/* Informations utilisateur */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center space-x-3 px-3 py-2 bg-gray-50 rounded-md",
|
||||
collapsed && "justify-center"
|
||||
)}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
|
||||
<User className="h-4 w-4 text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
Administrateur
|
||||
</p>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Mail className="h-3 w-3 text-gray-400" />
|
||||
<p className="text-xs text-gray-500 truncate">{user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bouton de déconnexion */}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleLogout}
|
||||
className={cn(
|
||||
"w-full flex items-center space-x-2 text-sm font-medium border-gray-200 hover:bg-gray-50",
|
||||
collapsed && "justify-center px-2"
|
||||
)}
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
{!collapsed && <span>Déconnexion</span>}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user