117 lines
4.7 KiB
TypeScript
117 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
LayoutDashboard,
|
|
Users,
|
|
CalendarCheck,
|
|
CreditCard,
|
|
Settings,
|
|
LogOut,
|
|
Brain,
|
|
} from "lucide-react";
|
|
import { UserButton, useUser } from "@clerk/nextjs";
|
|
|
|
interface Recommendation {
|
|
id: string;
|
|
status: string;
|
|
}
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
const { user } = useUser();
|
|
const [pendingCount, setPendingCount] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const fetchPending = async () => {
|
|
try {
|
|
const res = await fetch("/api/recommendations");
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
const pending = (data.recommendations || []).filter(
|
|
(r: Recommendation) => r.status === "pending"
|
|
);
|
|
setPendingCount(pending.length);
|
|
}
|
|
} catch (e) {
|
|
console.error("Failed to fetch pending recommendations", e);
|
|
}
|
|
};
|
|
fetchPending();
|
|
}, []);
|
|
|
|
const menuItems = [
|
|
{ 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>
|
|
),
|
|
href: "/recommendations",
|
|
},
|
|
{ icon: CalendarCheck, label: "Attendance", href: "/attendance" },
|
|
{ icon: CreditCard, label: "Payments", href: "/payments" },
|
|
{ icon: Settings, label: "Settings", href: "/settings" },
|
|
];
|
|
|
|
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>
|
|
|
|
<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]">
|
|
<Icon size={20} className={isActive ? "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>
|
|
|
|
<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]">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|