mirror of
https://github.com/R0m1k3/CollectFlow.git
synced 2026-10-11 17:26:32 +02:00
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
1 parent
8ce98c73fc
commit
a092572829
5 files changed
+58
-90
No files matched your search
@@ -5,9 +5,9 @@ export default async function DashboardLayout({ children }: { children: React.Re
|
||||
return (
|
||||
<div className="flex h-screen w-full overflow-hidden" style={{ background: "var(--bg-base)" }}>
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-60 flex flex-col h-full overflow-hidden">
|
||||
<main className="flex-1 ml-16 flex flex-col h-full min-w-0 overflow-hidden">
|
||||
<Header />
|
||||
<div className="flex-1 overflow-y-auto p-8">
|
||||
<div className="flex-1 overflow-auto p-4 md:p-8">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -210,53 +210,48 @@ export function BulkAiAnalyzer() {
|
||||
setTimeout(() => setIsAnalyzing(false), 3000);
|
||||
};
|
||||
|
||||
if (isAnalyzing) {
|
||||
return (
|
||||
<div className="flex items-center gap-4 h-10 px-4 rounded-xl bg-[var(--accent-bg)] border border-[var(--accent-border)] shadow-sm">
|
||||
<Loader2 className="w-4 h-4 text-[var(--accent)] animate-spin" />
|
||||
<div className="flex flex-col min-w-[150px]">
|
||||
<span className="text-[10px] font-bold text-[var(--accent)] leading-none">
|
||||
{progress.message}
|
||||
</span>
|
||||
<div className="w-full bg-[var(--bg-elevated)] rounded-full h-1 mt-1 overflow-hidden">
|
||||
<div
|
||||
className="bg-[var(--accent)] h-1 rounded-full transition-all duration-300"
|
||||
style={{ width: `${Math.max(5, (progress.current / progress.total) * 100)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleStop}
|
||||
className="p-1 hover:bg-[var(--bg-elevated)] rounded-lg transition-colors text-[var(--text-muted)] hover:text-[var(--accent-error)]"
|
||||
title="Arrêter l'analyse"
|
||||
>
|
||||
<XCircle className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (progress.current > 0 && !isAnalyzing) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 h-10 px-4 rounded-xl bg-[var(--accent-success-bg)] border border-[var(--accent-success)] shadow-sm cursor-default">
|
||||
<CheckCircle2 className="w-4 h-4 text-[var(--accent-success)]" />
|
||||
<span className="text-xs font-bold text-[var(--accent-success)]">
|
||||
{progress.errors > 0 ? `Terminé (${progress.current - progress.errors}/${progress.total})` : `Analyse Terminée`}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<SupplierAiContextModal codeFournisseur={supplierCode} nomFournisseur={supplierName} />
|
||||
<button
|
||||
onClick={handleAnalyze}
|
||||
className="group flex items-center justify-center gap-2 h-10 px-6 rounded-xl text-sm font-black transition-all shadow-md bg-[var(--accent)] text-white hover:brightness-110 active:scale-95 border border-white/10"
|
||||
>
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Analyse IA
|
||||
</button>
|
||||
|
||||
{isAnalyzing ? (
|
||||
<div className="flex items-center gap-4 h-10 px-4 rounded-xl bg-[var(--accent-bg)] border border-[var(--accent-border)] shadow-sm">
|
||||
<Loader2 className="w-4 h-4 text-[var(--accent)] animate-spin" />
|
||||
<div className="flex flex-col min-w-[150px]">
|
||||
<span className="text-[10px] font-bold text-[var(--accent)] leading-none">
|
||||
{progress.message}
|
||||
</span>
|
||||
<div className="w-full bg-[var(--bg-elevated)] rounded-full h-1 mt-1 overflow-hidden">
|
||||
<div
|
||||
className="bg-[var(--accent)] h-1 rounded-full transition-all duration-300"
|
||||
style={{ width: `${Math.max(5, (progress.current / progress.total) * 100)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleStop}
|
||||
className="p-1 hover:bg-[var(--bg-elevated)] rounded-lg transition-colors text-[var(--text-muted)] hover:text-[var(--accent-error)]"
|
||||
title="Arrêter l'analyse"
|
||||
>
|
||||
<XCircle className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
) : progress.current > 0 ? (
|
||||
<div className="flex items-center gap-2 h-10 px-4 rounded-xl bg-[var(--accent-success-bg)] border border-[var(--accent-success)] shadow-sm cursor-default">
|
||||
<CheckCircle2 className="w-4 h-4 text-[var(--accent-success)]" />
|
||||
<span className="text-xs font-bold text-[var(--accent-success)]">
|
||||
{progress.errors > 0 ? `Terminé (${progress.current - progress.errors}/${progress.total})` : `Analyse Terminée`}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleAnalyze}
|
||||
className="group flex items-center justify-center gap-2 h-10 px-6 rounded-xl text-sm font-black transition-all shadow-md bg-[var(--accent)] text-white hover:brightness-110 active:scale-95 border border-white/10"
|
||||
>
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Analyse IA
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -133,8 +133,8 @@ export function FloatingSummaryBar() {
|
||||
</button>
|
||||
<div className="w-[1px] h-4 bg-slate-200 dark:bg-slate-800 mx-1.5" />
|
||||
{hasDrafts && (
|
||||
<span className="text-[10px] font-black uppercase text-amber-600 dark:text-amber-500 bg-amber-100 dark:bg-amber-900/30 px-2 py-0.5 rounded border border-amber-200 dark:border-amber-800">
|
||||
{count} modif.
|
||||
<span className="text-[12px] font-black tracking-tight text-[#b45309] bg-[#fef08a] px-3 py-1 rounded-md border border-[#fde047] ml-2">
|
||||
{count} MODIF.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -94,7 +94,7 @@ export function SupplierAiContextModal({ codeFournisseur, nomFournisseur }: Supp
|
||||
<Button variant="outline" onClick={() => setOpen(false)} disabled={isSaving}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={isSaving || isLoading} className="gap-2 bg-gradient-to-r from-violet-600 to-indigo-600 text-white hover:from-violet-700 hover:to-indigo-700">
|
||||
<Button onClick={handleSave} disabled={isSaving || isLoading} className="gap-2 bg-emerald-600 hover:bg-emerald-700 text-white">
|
||||
{isSaving ? "Enregistrement..." : "Enregistrer les règles"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
||||
Reference in new issue
Block a user