redesign

admin dashboard
2025-11-19 03:34:18 +01:00
1 parent 39021dca35
commit b1bb5d8166
@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+    LayoutDashboard,
+    Users,
+    CalendarCheck,
+    CreditCard,
+    Settings,
+    LogOut
+} from "lucide-react";
+import { UserButton, useUser } from "@clerk/nextjs";
+
+const menuItems = [
+    { icon: LayoutDashboard, label: "Dashboard", href: "/" },
+    { icon: Users, label: "Users", href: "/users" },
+    { icon: CalendarCheck, label: "Attendance", href: "/attendance" },
+    { icon: CreditCard, label: "Payments", href: "/payments" },
+    { icon: Settings, label: "Settings", href: "/settings" },
+];
+
+export function Sidebar() {
+    const pathname = usePathname();
+    const { user } = useUser();
+
+    return (
+        <aside className="w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800">
+            <div className="p-6 border-b border-slate-800">
+                <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
+                    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;
+
+                    return (
+                        <Link
+                            key={item.href}
+                            href={item.href}
+                            className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group ${isActive
+                                    ? "bg-blue-600 text-white shadow-lg shadow-blue-900/20"
+                                    : "text-slate-400 hover:bg-slate-800 hover:text-white"
+                                }`}
+                        >
+                            <Icon size={20} className={isActive ? "text-white" : "text-slate-500 group-hover:text-white"} />
+                            <span className="font-medium">{item.label}</span>
+                        </Link>
+                    );
+                })}
+            </nav>
+
+            <div className="p-4 border-t border-slate-800">
+                <div className="flex items-center gap-3 px-4 py-3 rounded-lg bg-slate-800/50">
+                    <UserButton afterSignOutUrl="/" />
+                    <div className="flex-1 min-w-0">
+                        <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>
+    );
+}