recommendatio edit added

apps/admin/src/app/recommendations/page.tsx

@@ -98,6 +98,41 @@ export default function RecommendationsPage() {
         }
     };
 
+    const handleEdit = async (rec: Recommendation) => {
+        const newContent = prompt("Edit Advice:", rec.content);
+        const newActivityPlan = prompt("Edit Activity Plan:", rec.activityPlan);
+        const newDietPlan = prompt("Edit Diet Plan:", rec.dietPlan);
+
+        if (newContent === null || newActivityPlan === null || newDietPlan === null) {
+            // User cancelled one of the prompts
+            return;
+        }
+
+        try {
+            const res = await fetch("/api/recommendations", {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    id: rec.id,
+                    content: newContent,
+                    activityPlan: newActivityPlan,
+                    dietPlan: newDietPlan,
+                }),
+            });
+
+            if (!res.ok) {
+                const errorData = await res.json();
+                alert(`Failed to update recommendation: ${errorData.error || 'Unknown error'}`);
+            } else {
+                alert("Recommendation updated successfully!");
+                fetchData(); // Refresh data
+            }
+        } catch (error) {
+            console.error("Error updating recommendation:", error);
+            alert("Failed to update recommendation.");
+        }
+    };
+
     if (loading) {
         return (
             <div className="flex items-center justify-center h-screen">
@@ -171,6 +206,12 @@ export default function RecommendationsPage() {
                                             </div>
                                         </div>
                                         <div className="flex space-x-2">
+                                            <button
+                                                onClick={() => handleEdit(rec)}
+                                                className="flex-1 bg-blue-500 text-white py-2 rounded hover:bg-blue-600"
+                                            >
+                                                Edit
+                                            </button>
                                             <button
                                                 onClick={() => handleApprove(rec.id, "approved")}
                                                 className="flex-1 bg-green-600 text-white py-2 rounded hover:bg-green-700"

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

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 import {
     LayoutDashboard,
     Users,
@@ -9,22 +10,59 @@ import {
     CreditCard,
     Settings,
     LogOut,
-    Brain
+    Brain,
 } from "lucide-react";
 import { UserButton, useUser } from "@clerk/nextjs";
 
-const menuItems = [
+interface Recommendation {
-    { icon: LayoutDashboard, label: "Dashboard", href: "/" },
+    id: string;
-    { icon: Users, label: "Users", href: "/users" },
+    status: string;
-    { 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" },
-];
 
 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-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800">
@@ -38,18 +76,17 @@ export function Sidebar() {
                 {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 group ${isActive
                                 ? "bg-blue-600 text-white shadow-lg shadow-blue-900/20"
-                                : "text-slate-400 hover:bg-slate-800 hover:text-white"
+                                : "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>
+                            <span className="font-medium">{label}</span>
                         </Link>
                     );
                 })}