ai rec works

as intended, needs refinments

apps/admin/src/components/Navigation.tsx

@@ -3,10 +3,10 @@
 import { type ReactElement } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Home, Users, BarChart3, User } from "lucide-react";
+import { Home, Users, BarChart3, User, Brain } from "lucide-react";
 import { SignedIn, UserButton } from "@clerk/nextjs";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/Button";
 
 interface NavItem {
   href: string;
@@ -25,6 +25,11 @@ const navItems: NavItem[] = [
     label: "Clients",
     icon: Users,
   },
+  {
+    href: "/recommendations",
+    label: "AI Recommendations",
+    icon: Brain,
+  },
   {
     href: "/analytics",
     label: "Analytics",
@@ -59,22 +64,20 @@ export function Navigation(): ReactElement {
           >
             {navItems.map((item) => (
               <li key={item.href}>
-                <Button
-                  asChild
-                  variant={pathname === item.href ? "default" : "ghost"}
-                  size="sm"
-                  className={cn(
-                    "h-9 px-4 py-2",
-                    pathname === item.href &&
+                <Link href={item.href} className="flex items-center gap-2">
+                  <Button
+                    variant={pathname === item.href ? "primary" : "secondary"}
+                    className={cn(
+                      "h-9 px-4 py-2",
+                      pathname === item.href &&
                       "bg-primary text-primary-foreground",
-                  )}
-                  aria-current={pathname === item.href ? "page" : undefined}
-                >
-                  <Link href={item.href} className="flex items-center gap-2">
+                    )}
+                    aria-current={pathname === item.href ? "page" : undefined}
+                  >
                     <item.icon className="h-4 w-4" />
                     <span>{item.label}</span>
-                  </Link>
-                </Button>
+                  </Button>
+                </Link>
               </li>
             ))}
           </ul>