feat: Implement dashboard layout with new sidebar, bulk AI analysis, supplier AI context modal, and floating summary bar.

This commit is contained in:
Michael committed 2026-02-26 15:11:04 +01:00
1 parent 8ce98c73fc
commit a092572829
5 files changed
+58 -90

No files matched your search

+14 -41
View File
@@ -32,23 +32,18 @@ export function Sidebar() {
return (
<aside
className="w-60 flex-shrink-0 flex flex-col h-screen fixed left-0 top-0 z-30 glass"
className="w-16 flex-shrink-0 flex flex-col items-center h-screen fixed left-0 top-0 z-30 glass"
style={{ borderRight: "1px solid var(--border)" }}
>
{/* Logo */}
<div className="px-5 py-[18px]" style={{ borderBottom: "1px solid var(--border)" }}>
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 rounded-[8px] bg-[var(--accent)] flex items-center justify-center shadow-sm border border-white/10">
<Package className="w-[15px] h-[15px] text-white" strokeWidth={2.2} />
</div>
<span className="text-[15px] font-semibold tracking-[-0.3px] text-[var(--text-primary)]">
CollectFlow
</span>
<div className="py-[18px] w-full flex justify-center" style={{ borderBottom: "1px solid var(--border)" }}>
<div className="w-8 h-8 rounded-xl bg-[var(--accent)] flex items-center justify-center shadow-sm border border-white/10" title="CollectFlow">
<Package className="w-[18px] h-[18px] text-white" strokeWidth={2.2} />
</div>
</div>
{/* Navigation */}
<nav className="px-2 pt-2.5 space-y-0.5 flex-1">
<nav className="w-full flex-1 flex flex-col items-center py-4 space-y-2">
{filteredItems.map(({ icon: Icon, label, href }) => {
const isActive = pathname.startsWith(href);
@@ -61,43 +56,26 @@ export function Sidebar() {
<Link
key={href}
href={resolvedHref}
title={label}
style={{
color: isActive ? "var(--text-primary)" : "var(--text-secondary)",
background: isActive ? "var(--bg-elevated)" : "transparent",
}}
className={cn(
"flex items-center gap-2.5 px-3 py-[7px] rounded-[8px] text-[13px] font-medium transition-all duration-150",
"flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-150",
!isActive && "hover:bg-[var(--bg-elevated)]"
)}
>
<Icon className="w-[15px] h-[15px] shrink-0" strokeWidth={1.8} />
{label}
<Icon className="w-[18px] h-[18px] shrink-0" strokeWidth={1.8} />
</Link>
);
})}
</nav>
{/* User Profile & Logout */}
<div className="px-3 pb-3 space-y-2">
<div className="flex items-center gap-3 px-3 py-3 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)]">
<div className="w-8 h-8 rounded-lg bg-[var(--accent-bg)] flex items-center justify-center border border-[var(--accent-border)]">
<UserIcon className="w-4 h-4 text-[var(--accent)]" />
</div>
<div className="flex-1 min-w-0">
{session?.user ? (
<>
<p className="text-[12px] font-bold text-[var(--text-primary)] truncate">{session.user.name}</p>
<p className="text-[10px] uppercase font-black text-[var(--text-muted)] tracking-wider">
{userRole === "admin" ? "Administrateur" : "Utilisateur"}
</p>
</>
) : (
<div className="flex items-center gap-2">
<Loader2 className="w-3 h-3 animate-spin text-[var(--accent)]" />
<p className="text-[10px] text-[var(--text-muted)] animate-pulse">Session...</p>
</div>
)}
</div>
<div className="w-full pb-4 flex flex-col items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)] flex items-center justify-center shadow-sm" title={session?.user?.name || "Profil"}>
<UserIcon className="w-5 h-5 text-[var(--accent)]" />
</div>
<button
@@ -105,17 +83,12 @@ export function Sidebar() {
await signOut({ redirect: false });
window.location.href = "/login";
}}
className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] font-medium text-[var(--accent-error)] hover:bg-[var(--accent-error-bg)] transition-colors"
title="Déconnexion"
className="w-10 h-10 flex items-center justify-center rounded-xl text-[var(--accent-error)] hover:bg-[var(--accent-error-bg)] transition-colors"
>
<LogOut className="w-[15px] h-[15px]" strokeWidth={1.8} />
Déconnexion
<LogOut className="w-[18px] h-[18px]" strokeWidth={1.8} />
</button>
</div>
{/* Footer */}
<div className="px-4 py-3" style={{ borderTop: "1px solid var(--border)" }}>
<p className="text-[11px]" style={{ color: "var(--text-muted)" }}>v1.0.0-beta</p>
</div>
</aside>
);
}