mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-11 17:26:45 +02:00
Improve sidebar functionality and update dashboard statistics
Update sidebar component to support collapsing, expand the icons to fit the collapsed view, and add collapse/expand toggle buttons. Fix dashboard statistics cards to display accurate data. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/ycYcQjF
This commit is contained in:
michaelschal committed
1 parent
bcef8b012f
commit
387e390cb8
1 file changed
+109
-38
@@ -1,15 +1,24 @@
|
||||
import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut } from "lucide-react";
|
||||
import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Link, useLocation } from "wouter";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function Sidebar() {
|
||||
const [location] = useLocation();
|
||||
const [, setLocation] = useLocation();
|
||||
const { toast } = useToast();
|
||||
const [isCollapsed, setIsCollapsed] = useState(() => {
|
||||
const saved = localStorage.getItem('sidebar-collapsed');
|
||||
return saved === 'true';
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('sidebar-collapsed', String(isCollapsed));
|
||||
}, [isCollapsed]);
|
||||
|
||||
const { data: session } = useQuery<{ id: string; username: string; role: string }>({
|
||||
queryKey: ["/api/auth/session"],
|
||||
@@ -46,7 +55,7 @@ export default function Sidebar() {
|
||||
];
|
||||
|
||||
return (
|
||||
<aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col h-screen">
|
||||
<aside className={`bg-sidebar border-r border-sidebar-border flex flex-col h-screen transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-72'}`}>
|
||||
{/* Logo & Brand */}
|
||||
<div className="p-6 border-b border-sidebar-border">
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -55,10 +64,12 @@ export default function Sidebar() {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold gradient-text">Social Flow</h1>
|
||||
<p className="text-xs text-muted-foreground">Automatisation sociale</p>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div>
|
||||
<h1 className="text-xl font-bold gradient-text">Social Flow</h1>
|
||||
<p className="text-xs text-muted-foreground">Automatisation sociale</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -70,15 +81,16 @@ export default function Sidebar() {
|
||||
const isActive = location === item.href;
|
||||
|
||||
return (
|
||||
<li key={item.href}>
|
||||
<li key={item.href} className="relative group">
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`
|
||||
group flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all relative
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all relative
|
||||
${isActive
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
${isCollapsed ? 'justify-center' : ''}
|
||||
`}
|
||||
data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
|
||||
>
|
||||
@@ -86,13 +98,22 @@ export default function Sidebar() {
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
|
||||
<span className="flex-1">{item.label}</span>
|
||||
{item.badge && (
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold gradient-primary text-white shadow-sm">
|
||||
{item.badge}
|
||||
</span>
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
<span className="flex-1">{item.label}</span>
|
||||
{item.badge && (
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold gradient-primary text-white shadow-sm">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
{isCollapsed && (
|
||||
<div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
|
||||
{item.label}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
@@ -100,22 +121,25 @@ export default function Sidebar() {
|
||||
|
||||
{/* Stats Section */}
|
||||
<div className="mt-8 pt-6 border-t border-sidebar-border">
|
||||
<p className="text-xs font-semibold text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
|
||||
{!isCollapsed && (
|
||||
<p className="text-xs font-semibold text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
|
||||
)}
|
||||
<ul className="space-y-1">
|
||||
{statsItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = location === item.href;
|
||||
|
||||
return (
|
||||
<li key={item.href}>
|
||||
<li key={item.href} className="relative group">
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`
|
||||
group flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
${isActive
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
${isCollapsed ? 'justify-center' : ''}
|
||||
`}
|
||||
data-testid={`link-${item.label.toLowerCase()}`}
|
||||
>
|
||||
@@ -123,8 +147,13 @@ export default function Sidebar() {
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
|
||||
<span>{item.label}</span>
|
||||
{!isCollapsed && <span>{item.label}</span>}
|
||||
</Link>
|
||||
{isCollapsed && (
|
||||
<div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
|
||||
{item.label}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
@@ -136,17 +165,20 @@ export default function Sidebar() {
|
||||
<div className="p-4 border-t border-sidebar-border space-y-2">
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="mb-2">
|
||||
<p className="text-xs font-semibold text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div className="mb-2">
|
||||
<p className="text-xs font-semibold text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
|
||||
</div>
|
||||
)}
|
||||
<Link
|
||||
href="/pages"
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
|
||||
${location === "/pages"
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
${isCollapsed ? 'justify-center' : ''}
|
||||
`}
|
||||
data-testid="link-pages-gérées"
|
||||
>
|
||||
@@ -154,16 +186,22 @@ export default function Sidebar() {
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Users className="w-5 h-5" />
|
||||
<span>Pages gérées</span>
|
||||
{!isCollapsed && <span>Pages gérées</span>}
|
||||
{isCollapsed && (
|
||||
<div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
|
||||
Pages gérées
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
<Link
|
||||
href="/users"
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
|
||||
${location === "/users"
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
${isCollapsed ? 'justify-center' : ''}
|
||||
`}
|
||||
data-testid="link-users"
|
||||
>
|
||||
@@ -171,16 +209,22 @@ export default function Sidebar() {
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<UserCog className="w-5 h-5" />
|
||||
<span>Utilisateurs</span>
|
||||
{!isCollapsed && <span>Utilisateurs</span>}
|
||||
{isCollapsed && (
|
||||
<div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
|
||||
Utilisateurs
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
<Link
|
||||
href="/sql"
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
|
||||
${location === "/sql"
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
${isCollapsed ? 'justify-center' : ''}
|
||||
`}
|
||||
data-testid="link-sql"
|
||||
>
|
||||
@@ -188,16 +232,22 @@ export default function Sidebar() {
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Database className="w-5 h-5" />
|
||||
<span>SQL</span>
|
||||
{!isCollapsed && <span>SQL</span>}
|
||||
{isCollapsed && (
|
||||
<div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
|
||||
SQL
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
<Link
|
||||
href="/settings"
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
|
||||
${location === "/settings"
|
||||
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||
}
|
||||
${isCollapsed ? 'justify-center' : ''}
|
||||
`}
|
||||
data-testid="link-settings"
|
||||
>
|
||||
@@ -205,40 +255,61 @@ export default function Sidebar() {
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||
)}
|
||||
<Settings className="w-5 h-5" />
|
||||
<span>Paramètres</span>
|
||||
{!isCollapsed && <span>Paramètres</span>}
|
||||
{isCollapsed && (
|
||||
<div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
|
||||
Paramètres
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="pt-2">
|
||||
<div className="pt-2 relative group">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start text-muted-foreground hover:text-foreground hover:bg-sidebar-accent rounded-xl"
|
||||
className={`w-full text-muted-foreground hover:text-foreground hover:bg-sidebar-accent rounded-xl ${isCollapsed ? 'justify-center px-0' : 'justify-start'}`}
|
||||
onClick={() => logoutMutation.mutate()}
|
||||
disabled={logoutMutation.isPending}
|
||||
data-testid="button-logout"
|
||||
>
|
||||
<LogOut className="w-5 h-5 mr-3" />
|
||||
{logoutMutation.isPending ? "Déconnexion..." : "Déconnexion"}
|
||||
<LogOut className={`w-5 h-5 ${isCollapsed ? '' : 'mr-3'}`} />
|
||||
{!isCollapsed && (logoutMutation.isPending ? "Déconnexion..." : "Déconnexion")}
|
||||
</Button>
|
||||
{isCollapsed && (
|
||||
<div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 top-0">
|
||||
Déconnexion
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* User Profile Card */}
|
||||
{session && (
|
||||
<div className="mt-4 p-4 bg-gradient-to-br from-primary/5 to-secondary/5 border border-primary/10 rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`mt-4 bg-gradient-to-br from-primary/5 to-secondary/5 border border-primary/10 rounded-xl ${isCollapsed ? 'p-2' : 'p-4'}`}>
|
||||
<div className={`flex items-center gap-3 ${isCollapsed ? 'justify-center' : ''}`}>
|
||||
<Avatar className="w-10 h-10 border-2 border-primary/20">
|
||||
<AvatarFallback className="gradient-primary text-white font-semibold">
|
||||
{session.username.substring(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold truncate">{session.username}</p>
|
||||
<p className="text-xs text-muted-foreground capitalize">{session.role}</p>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold truncate">{session.username}</p>
|
||||
<p className="text-xs text-muted-foreground capitalize">{session.role}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Toggle Button */}
|
||||
<button
|
||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||
className="mt-2 w-full flex items-center justify-center p-2 text-muted-foreground hover:text-primary hover:bg-sidebar-accent rounded-xl transition-all"
|
||||
data-testid="button-toggle-sidebar"
|
||||
>
|
||||
{isCollapsed ? <ChevronRight className="w-5 h-5" /> : <ChevronLeft className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user