ai rec works

as intended, needs refinments

apps/admin/src/components/ui/Sidebar.tsx

@@ -8,13 +8,15 @@ import {
     CalendarCheck,
     CreditCard,
     Settings,
-    LogOut
+    LogOut,
+    Brain
 } from "lucide-react";
 import { UserButton, useUser } from "@clerk/nextjs";
 
 const menuItems = [
     { icon: LayoutDashboard, label: "Dashboard", href: "/" },
     { icon: Users, label: "Users", href: "/users" },
+    { icon: Brain, label: "AI Recommendations", href: "/recommendations" },
     { icon: CalendarCheck, label: "Attendance", href: "/attendance" },
     { icon: CreditCard, label: "Payments", href: "/payments" },
     { icon: Settings, label: "Settings", href: "/settings" },
@@ -42,8 +44,8 @@ export function Sidebar() {
                             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"
+                                ? "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"} />