admin ui enhacement
This commit is contained in:
dimitar committed
1 parent
02c9681aca
commit
0abb41f573
16 files changed
+988
-435
No files matched your search
@@ -9,38 +9,48 @@ import {
|
||||
CalendarCheck,
|
||||
CreditCard,
|
||||
Settings,
|
||||
LogOut,
|
||||
Brain,
|
||||
ChevronLeft,
|
||||
Activity,
|
||||
} from "lucide-react";
|
||||
import { UserButton, useUser } from "@clerk/nextjs";
|
||||
import { usePendingRecommendationsCount } from "@/hooks/use-api";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface NavItem {
|
||||
icon: React.ElementType;
|
||||
label: string;
|
||||
href: string;
|
||||
badge?: number;
|
||||
}
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const { user } = useUser();
|
||||
const { data: pendingCount = 0 } = usePendingRecommendationsCount();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const saved = localStorage.getItem("sidebar-collapsed");
|
||||
if (saved) setIsCollapsed(JSON.parse(saved));
|
||||
}, []);
|
||||
|
||||
const menuItems = [
|
||||
const handleToggle = () => {
|
||||
const newState = !isCollapsed;
|
||||
setIsCollapsed(newState);
|
||||
localStorage.setItem("sidebar-collapsed", JSON.stringify(newState));
|
||||
};
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ icon: LayoutDashboard, label: "Dashboard", href: "/" },
|
||||
{ icon: Users, label: "Users", href: "/users" },
|
||||
{
|
||||
icon: Brain,
|
||||
label: (
|
||||
<span className="flex items-center">
|
||||
AI Recommendations
|
||||
{pendingCount > 0 && (
|
||||
<span className="ml-2 inline-block bg-red-600 text-xs rounded-full px-2 py-0.5">
|
||||
{pendingCount}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
),
|
||||
label: "AI Recommendations",
|
||||
href: "/recommendations",
|
||||
badge: pendingCount > 0 ? pendingCount : undefined,
|
||||
},
|
||||
{ icon: CalendarCheck, label: "Attendance", href: "/attendance" },
|
||||
{ icon: CreditCard, label: "Payments", href: "/payments" },
|
||||
@@ -48,59 +58,126 @@ export function Sidebar() {
|
||||
];
|
||||
|
||||
return (
|
||||
<aside className="w-20 hover:w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800 transition-all duration-300 z-50 group overflow-hidden">
|
||||
<div className="p-6 border-b border-slate-800 flex items-center overflow-hidden whitespace-nowrap">
|
||||
<h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
FitAI Admin
|
||||
</h1>
|
||||
</div>
|
||||
<aside
|
||||
className={cn(
|
||||
"fixed left-0 top-0 z-40 h-screen transition-all duration-300 ease-in-out",
|
||||
isCollapsed ? "w-[72px]" : "w-[260px]",
|
||||
"bg-gradient-to-b from-[var(--sidebar-background)] to-[#0f172a]",
|
||||
)}
|
||||
>
|
||||
<div className="flex h-full flex-col border-r border-white/5">
|
||||
{/* Logo */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-16 items-center border-b border-white/5 px-4",
|
||||
isCollapsed ? "justify-center" : "justify-between",
|
||||
)}
|
||||
>
|
||||
{!isCollapsed && (
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg shadow-blue-500/25">
|
||||
<Activity className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<span className="text-lg font-bold text-white">FitAI</span>
|
||||
</Link>
|
||||
)}
|
||||
{isCollapsed && (
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg shadow-blue-500/25">
|
||||
<Activity className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-4 space-y-2">
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.href;
|
||||
const label =
|
||||
typeof item.label === "string" ? item.label : item.label;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
|
||||
isActive
|
||||
? "bg-blue-600 text-white shadow-lg shadow-blue-900/20"
|
||||
: "text-slate-400 hover:bg-slate-800 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<div className="min-w-[20px]">
|
||||
{/* Toggle Button */}
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
className={cn(
|
||||
"absolute -right-3 top-20 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-white/10 bg-slate-800 text-white/60 shadow-lg transition-all hover:bg-slate-700 hover:text-white",
|
||||
isCollapsed ? "left-[60px]" : "left-[244px]",
|
||||
)}
|
||||
>
|
||||
<ChevronLeft
|
||||
className={cn(
|
||||
"h-3.5 w-3.5 transition-transform",
|
||||
isCollapsed && "rotate-180",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 space-y-1 overflow-y-auto p-3">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive =
|
||||
pathname === item.href ||
|
||||
(item.href !== "/" && pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200",
|
||||
isActive
|
||||
? "bg-gradient-to-r from-blue-600 to-blue-500 text-white shadow-lg shadow-blue-500/25"
|
||||
: "text-slate-400 hover:bg-white/5 hover:text-white",
|
||||
isCollapsed && "justify-center px-2",
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
size={20}
|
||||
className={
|
||||
className={cn(
|
||||
"h-5 w-5 flex-shrink-0 transition-colors",
|
||||
isActive
|
||||
? "text-white"
|
||||
: "text-slate-500 group-hover:text-white"
|
||||
}
|
||||
: "text-slate-500 group-hover:text-white",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<span className="font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap overflow-hidden">
|
||||
{label}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
<span className="flex-1">{item.label}</span>
|
||||
{item.badge !== undefined && (
|
||||
<span className="flex h-5 min-w-[20px] items-center justify-center rounded-full bg-red-500 px-1.5 text-xs font-bold text-white">
|
||||
{item.badge > 99 ? "99+" : item.badge}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isCollapsed && item.badge !== undefined && (
|
||||
<span className="absolute -right-1 -top-1 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white">
|
||||
{item.badge > 9 ? "9+" : item.badge}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-slate-800">
|
||||
<div className="flex items-center gap-3 px-2 py-3 rounded-lg bg-slate-800/50 overflow-hidden whitespace-nowrap">
|
||||
<div className="min-w-[32px]">
|
||||
{mounted && <UserButton afterSignOutUrl="/" />}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<p className="text-sm font-medium text-white truncate">
|
||||
{user?.fullName || "Admin User"}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 truncate">
|
||||
{user?.primaryEmailAddress?.emailAddress}
|
||||
</p>
|
||||
{/* User Section */}
|
||||
<div
|
||||
className={cn(
|
||||
"border-t border-white/5 p-3",
|
||||
isCollapsed && "flex justify-center",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-lg bg-white/5 p-2 transition-colors hover:bg-white/10",
|
||||
isCollapsed && "justify-center p-2",
|
||||
)}
|
||||
>
|
||||
<div className={cn("flex-shrink-0", isCollapsed ? "" : "ml-1")}>
|
||||
{mounted && <UserButton afterSignOutUrl="/" />}
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-white">
|
||||
{user?.fullName || "Admin"}
|
||||
</p>
|
||||
<p className="truncate text-xs text-slate-400">
|
||||
{user?.primaryEmailAddress?.emailAddress}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user