Spaces:
Sleeping
Sleeping
| import { Link, useRouterState, useNavigate } from "@tanstack/react-router"; | |
| import { useEffect, useState, type ReactNode } from "react"; | |
| const navItems = [ | |
| { href: "/dashboard", label: "TABLEAU DE BORD", icon: "dashboard" as const }, | |
| { href: "/leads", label: "LISTE DES LEADS", icon: "leads" as const }, | |
| { href: "/stands", label: "ANALYSE DES STANDS", icon: "stands" as const }, | |
| { href: "/settings", label: "PARAMÈTRES DU MODÈLE", icon: "settings" as const }, | |
| ]; | |
| function NavIcon({ type, active }: { type: string; active: boolean }) { | |
| const color = active ? "var(--primary)" : "var(--muted-foreground)"; | |
| switch (type) { | |
| case "dashboard": | |
| return ( | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2"> | |
| <rect x="3" y="3" width="7" height="7" rx="1" /> | |
| <rect x="14" y="3" width="7" height="7" rx="1" /> | |
| <rect x="3" y="14" width="7" height="7" rx="1" /> | |
| <rect x="14" y="14" width="7" height="7" rx="1" /> | |
| </svg> | |
| ); | |
| case "leads": | |
| return ( | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2"> | |
| <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /> | |
| <circle cx="9" cy="7" r="4" /> | |
| <path d="M23 21v-2a4 4 0 0 0-3-3.87" /> | |
| <path d="M16 3.13a4 4 0 0 1 0 7.75" /> | |
| </svg> | |
| ); | |
| case "stands": | |
| return ( | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2"> | |
| <path d="M3 3v18h18" /> | |
| <path d="M18 17V9" /> | |
| <path d="M13 17V5" /> | |
| <path d="M8 17v-3" /> | |
| </svg> | |
| ); | |
| case "settings": | |
| return ( | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2"> | |
| <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /> | |
| <circle cx="12" cy="12" r="3" /> | |
| </svg> | |
| ); | |
| default: | |
| return null; | |
| } | |
| } | |
| export function AdminLayout({ | |
| title, | |
| subtitle, | |
| actions, | |
| children, | |
| }: { | |
| title: string; | |
| subtitle?: string; | |
| actions?: ReactNode; | |
| children: ReactNode; | |
| }) { | |
| const navigate = useNavigate(); | |
| const pathname = useRouterState({ select: (s) => s.location.pathname }); | |
| const [user, setUser] = useState<{ email: string; name: string }>({ | |
| email: "admin@letudiant.local", | |
| name: "admin", | |
| }); | |
| const [searchQuery, setSearchQuery] = useState(""); | |
| useEffect(() => { | |
| const auth = typeof window !== "undefined" ? localStorage.getItem("letudiant_auth") : null; | |
| if (!auth) { | |
| return; | |
| } | |
| try { | |
| setUser(JSON.parse(auth)); | |
| } catch { | |
| localStorage.removeItem("letudiant_auth"); | |
| } | |
| }, [navigate]); | |
| const handleLogout = () => { | |
| localStorage.removeItem("letudiant_auth"); | |
| navigate({ to: "/" }); | |
| }; | |
| if (!user) { | |
| return ( | |
| <div className="min-h-screen flex items-center justify-center bg-background"> | |
| <div className="animate-pulse text-muted-foreground">Chargement…</div> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="min-h-screen flex bg-background"> | |
| <aside | |
| className="w-[230px] flex flex-col fixed h-screen border-r" | |
| style={{ background: "var(--sidebar)", borderColor: "var(--outline-variant)" }} | |
| > | |
| <div className="p-6 pb-5"> | |
| <img src="/letudiant-logo.png" alt="L'etudiant" className="h-14 w-auto object-contain" /> | |
| </div> | |
| <nav className="flex-1 px-3 mt-4"> | |
| {navItems.map((item) => { | |
| const isActive = | |
| pathname === item.href || (item.href === "/leads" && pathname.startsWith("/lead/")); | |
| return ( | |
| <Link | |
| key={item.href} | |
| to={item.href} | |
| className="flex items-center gap-3 px-3 py-2.5 rounded-xl mb-1 transition-all" | |
| style={{ | |
| background: isActive ? "var(--surface-container)" : "transparent", | |
| color: isActive ? "var(--primary)" : "var(--muted-foreground)", | |
| fontWeight: isActive ? 600 : 500, | |
| }} | |
| > | |
| <NavIcon type={item.icon} active={isActive} /> | |
| <span className="text-[11px] tracking-wide">{item.label}</span> | |
| </Link> | |
| ); | |
| })} | |
| </nav> | |
| <div className="p-4"> | |
| <div | |
| className="flex items-center gap-3 px-3 py-3 rounded-2xl" | |
| style={{ background: "var(--surface-container)" }} | |
| > | |
| <div | |
| className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium text-white" | |
| style={{ background: "var(--gradient-primary)" }} | |
| > | |
| {user.name.slice(0, 2).toUpperCase()} | |
| </div> | |
| <div className="flex-1 min-w-0"> | |
| <p className="text-sm font-medium truncate" style={{ color: "var(--foreground)" }}> | |
| {user.name.charAt(0).toUpperCase() + user.name.slice(1)} | |
| </p> | |
| <p className="text-[10px] tracking-wider" style={{ color: "var(--muted-foreground)" }}> | |
| ADMIN CONSOLE | |
| </p> | |
| </div> | |
| </div> | |
| <button | |
| onClick={handleLogout} | |
| className="w-full mt-3 py-2.5 rounded-xl text-sm font-medium text-white transition-all hover:opacity-90" | |
| style={{ background: "var(--gradient-primary)" }} | |
| > | |
| Déconnexion | |
| </button> | |
| </div> | |
| </aside> | |
| <main className="flex-1 ml-[230px]"> | |
| <header | |
| className="sticky top-0 z-10 flex items-center justify-between px-10 py-5" | |
| style={{ | |
| background: "color-mix(in oklab, var(--background) 85%, transparent)", | |
| backdropFilter: "blur(14px)", | |
| }} | |
| > | |
| <div className="flex-1 max-w-md"> | |
| <div className="relative"> | |
| <svg | |
| className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4" | |
| style={{ color: "var(--muted-foreground)" }} | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| stroke="currentColor" | |
| > | |
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> | |
| </svg> | |
| <input | |
| type="text" | |
| value={searchQuery} | |
| onChange={(e) => setSearchQuery(e.target.value)} | |
| placeholder="Search parameters…" | |
| className="w-full pl-11 pr-4 py-3 rounded-2xl text-sm transition-all focus:outline-none focus:ring-2" | |
| style={{ | |
| background: "var(--surface-container)", | |
| border: "1px solid transparent", | |
| color: "var(--foreground)", | |
| }} | |
| /> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-5 ml-6"> | |
| <button className="p-2 rounded-lg hover:bg-black/5 transition-colors relative"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--muted-foreground)" strokeWidth="2"> | |
| <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /> | |
| <path d="M13.73 21a2 2 0 0 1-3.46 0" /> | |
| </svg> | |
| </button> | |
| <div className="flex items-center gap-3"> | |
| <div className="text-right"> | |
| <p className="text-sm font-semibold" style={{ color: "var(--foreground)" }}> | |
| Alex Rivers | |
| </p> | |
| <p className="text-[11px]" style={{ color: "var(--muted-foreground)" }}> | |
| Head of Growth | |
| </p> | |
| </div> | |
| <div | |
| className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold text-white" | |
| style={{ background: "var(--gradient-primary)" }} | |
| > | |
| AR | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div className="px-10 pb-10"> | |
| <div className="mb-8 flex items-start justify-between gap-6 flex-wrap"> | |
| <div> | |
| <h2 | |
| className="text-[40px] font-extrabold tracking-tight leading-none" | |
| style={{ color: "var(--foreground)", letterSpacing: "-0.03em" }} | |
| > | |
| {title} | |
| </h2> | |
| {subtitle && ( | |
| <p className="text-sm mt-3 max-w-2xl" style={{ color: "var(--muted-foreground)" }}> | |
| {subtitle} | |
| </p> | |
| )} | |
| </div> | |
| {actions && <div className="flex items-center gap-3">{actions}</div>} | |
| </div> | |
| {children} | |
| </div> | |
| </main> | |
| </div> | |
| ); | |
| } | |