ai rec works

as intended, needs refinments
2025-11-24 17:57:35 +01:00
1 parent 0183a8ea6a
commit 3ab9908588
@@ -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>
@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react'
 import { UserGrowthChart } from '@/components/charts/UserGrowthChart'
 import { MembershipDistributionChart } from '@/components/charts/MembershipDistributionChart'
 import { RevenueChart } from '@/components/charts/RevenueChart'
-import { Card, CardHeader, CardContent } from '@/components/ui/Card'
+import { Card, CardHeader, CardContent } from '@/components/ui/card'

 interface ChartData {
  label: string
@@ -86,7 +86,7 @@ export function AnalyticsDashboard() {
            </div>
          </CardContent>
        </Card>
-        
+
        <Card>
          <CardContent>
            <div className="text-center">
@@ -95,7 +95,7 @@ export function AnalyticsDashboard() {
            </div>
          </CardContent>
        </Card>
-        
+
        <Card>
          <CardContent>
            <div className="text-center">
@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+
+export function GenerateButton({ userId }: { userId: string }) {
+    const [loading, setLoading] = useState(false);
+
+    const handleGenerate = async () => {
+        setLoading(true);
+        try {
+            const res = await fetch("/api/recommendations/generate", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ userId }),
+            });
+
+            if (!res.ok) {
+                const error = await res.json();
+                alert(`Error: ${error.error}`);
+            } else {
+                alert("Recommendation generated successfully! Check Pending Approvals.");
+                // In a real app, we'd revalidate the path or update state
+                window.location.reload();
+            }
+        } catch (error) {
+            console.error(error);
+            alert("Failed to generate recommendation.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <button
+            onClick={handleGenerate}
+            disabled={loading}
+            className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50 flex items-center"
+        >
+            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Generate
+        </button>
+    );
+}
@@ -0,0 +1,117 @@
+"use client";
+
+import { useState } from "react";
+import { Loader2, Check, X } from "lucide-react";
+
+type Recommendation = {
+    recommendation: {
+        id: string;
+        recommendationText: string;
+        activityPlan: string;
+        dietPlan: string;
+        createdAt: Date;
+    };
+    user: {
+        firstName: string;
+        lastName: string;
+    };
+};
+
+export function RecommendationList({
+    initialRecommendations,
+}: {
+    initialRecommendations: Recommendation[];
+}) {
+    const [recommendations, setRecommendations] = useState(initialRecommendations);
+    const [processingId, setProcessingId] = useState<string | null>(null);
+
+    const handleAction = async (id: string, status: "approved" | "rejected") => {
+        setProcessingId(id);
+        try {
+            const res = await fetch("/api/recommendations/approve", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    recommendationId: id,
+                    status,
+                    approvedBy: "admin_placeholder", // In real app, get from auth context
+                }),
+            });
+
+            if (!res.ok) {
+                alert("Failed to update status");
+            } else {
+                setRecommendations((prev) =>
+                    prev.filter((item) => item.recommendation.id !== id)
+                );
+            }
+        } catch (error) {
+            console.error(error);
+            alert("Error processing request");
+        } finally {
+            setProcessingId(null);
+        }
+    };
+
+    if (recommendations.length === 0) {
+        return <p className="text-gray-500 italic">No pending recommendations.</p>;
+    }
+
+    return (
+        <ul className="space-y-6">
+            {recommendations.map(({ recommendation, user }) => (
+                <li key={recommendation.id} className="border rounded p-4">
+                    <div className="flex justify-between items-start mb-2">
+                        <h3 className="font-bold">
+                            For: {user.firstName} {user.lastName}
+                        </h3>
+                        <span className="text-xs text-gray-500">
+                            {new Date(recommendation.createdAt).toLocaleDateString()}
+                        </span>
+                    </div>
+                    <div className="space-y-2 text-sm mb-4">
+                        <div>
+                            <span className="font-semibold">Advice:</span>{" "}
+                            {recommendation.recommendationText}
+                        </div>
+                        <div>
+                            <span className="font-semibold">Activity:</span>{" "}
+                            {recommendation.activityPlan}
+                        </div>
+                        <div>
+                            <span className="font-semibold">Diet:</span> {recommendation.dietPlan}
+                        </div>
+                    </div>
+                    <div className="flex space-x-2">
+                        <button
+                            onClick={() => handleAction(recommendation.id, "approved")}
+                            disabled={processingId === recommendation.id}
+                            className="flex-1 bg-green-600 text-white py-2 rounded hover:bg-green-700 disabled:opacity-50 flex justify-center items-center"
+                        >
+                            {processingId === recommendation.id ? (
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                            ) : (
+                                <>
+                                    <Check className="mr-2 h-4 w-4" /> Approve
+                                </>
+                            )}
+                        </button>
+                        <button
+                            onClick={() => handleAction(recommendation.id, "rejected")}
+                            disabled={processingId === recommendation.id}
+                            className="flex-1 bg-red-600 text-white py-2 rounded hover:bg-red-700 disabled:opacity-50 flex justify-center items-center"
+                        >
+                            {processingId === recommendation.id ? (
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                            ) : (
+                                <>
+                                    <X className="mr-2 h-4 w-4" /> Reject
+                                </>
+                            )}
+                        </button>
+                    </div>
+                </li>
+            ))}
+        </ul>
+    );
+}
@@ -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"} />
@@ -7,9 +7,11 @@ import { Card, CardHeader, CardContent } from "@/components/ui/card";
 interface Recommendation {
    id: string;
    userId: string;
-    type: "short_term" | "medium_term" | "long_term";
+    type: "short_term" | "medium_term" | "long_term" | "ai_plan";
    content: string;
-    status: "pending" | "completed";
+    activityPlan?: string;
+    dietPlan?: string;
+    status: "pending" | "completed" | "approved" | "rejected";
    createdAt: string;
 }

@@ -68,15 +70,8 @@ export function Recommendations({ userId }: RecommendationsProps) {
        }
    };

-    const handleDelete = async (id: string) => {
-        if (!confirm("Are you sure?")) return;
-        // Note: Delete API not implemented in route.ts yet, but good to have UI ready or we can add it.
-        // For now, let's assume we might add it or just omit.
-        // Actually, I didn't add DELETE to route.ts. Let's skip for now.
-        alert("Delete functionality not available yet.");
-    };
-
    const groupedRecs = {
+        ai_plan: recommendations.filter((r) => r.type === "ai_plan"),
        short_term: recommendations.filter((r) => r.type === "short_term"),
        medium_term: recommendations.filter((r) => r.type === "medium_term"),
        long_term: recommendations.filter((r) => r.type === "long_term"),
@@ -84,7 +79,7 @@ export function Recommendations({ userId }: RecommendationsProps) {

    const renderSection = (
        title: string,
-        type: "short_term" | "medium_term" | "long_term",
+        type: "short_term" | "medium_term" | "long_term" | "ai_plan",
        items: Recommendation[]
    ) => (
        <div className="mb-6">
@@ -96,58 +91,66 @@ export function Recommendations({ userId }: RecommendationsProps) {
                {items.map((rec) => (
                    <div
                        key={rec.id}
-                        className={`p-3 rounded border flex justify-between items-start ${rec.status === "completed"
+                        className={`p-3 rounded border flex justify-between items-start ${rec.status === "completed" || rec.status === "approved"
                            ? "bg-green-50 border-green-200"
                            : "bg-white border-gray-200"
                            }`}
                    >
-                        <div>
-                            <p className="text-sm">{rec.content}</p>
-                            <p className="text-xs text-gray-400 mt-1">
+                        <div className="w-full">
+                            <p className="text-sm font-medium">{rec.content}</p>
+                            {rec.type === 'ai_plan' && (
+                                <div className="mt-2 text-xs text-gray-600 space-y-1">
+                                    {rec.activityPlan && <p><span className="font-semibold">Activity:</span> {rec.activityPlan}</p>}
+                                    {rec.dietPlan && <p><span className="font-semibold">Diet:</span> {rec.dietPlan}</p>}
+                                </div>
+                            )}
+                            <p className="text-xs text-gray-400 mt-2">
                                {new Date(rec.createdAt).toLocaleDateString()} -{" "}
                                <span
                                    className={
-                                        rec.status === "completed"
+                                        rec.status === "completed" || rec.status === "approved"
                                            ? "text-green-600 font-medium"
                                            : "text-yellow-600"
                                    }
                                >
-                                    {rec.status === "completed" ? "Completed" : "Pending"}
+                                    {rec.status === "completed" ? "Completed" : rec.status === "approved" ? "Approved" : "Pending"}
                                </span>
                            </p>
                        </div>
                    </div>
                ))}
            </div>
-            <form onSubmit={handleAddRecommendation} className="mt-3 flex gap-2">
-                <input
-                    type="hidden"
-                    value={type}
-                    onChange={() => setNewRec({ ...newRec, type })}
-                />
-                {newRec.type === type && (
-                    <>
-                        <input
-                            type="text"
-                            placeholder={`Add ${title.toLowerCase()}...`}
-                            className="flex-1 border rounded px-3 py-1 text-sm"
-                            value={newRec.content}
-                            onChange={(e) =>
-                                setNewRec({ ...newRec, content: e.target.value })
-                            }
-                            required
-                        />
-                        <Button type="submit" variant="secondary">
-                            Add
+            {type !== 'ai_plan' && (
+                <form onSubmit={handleAddRecommendation} className="mt-3 flex gap-2">
+                    <input
+                        type="hidden"
+                        value={type}
+                        onChange={() => setNewRec({ ...newRec, type: type as any })}
+                    />
+                    {newRec.type === type && (
+                        <>
+                            <input
+                                type="text"
+                                placeholder={`Add ${title.toLowerCase()}...`}
+                                className="flex-1 border rounded px-3 py-1 text-sm"
+                                value={newRec.content}
+                                onChange={(e) =>
+                                    setNewRec({ ...newRec, content: e.target.value })
+                                }
+                                required
+                            />
+                            <Button type="submit" variant="secondary">
+                                Add
+                            </Button>
+                        </>
+                    )}
+                    {newRec.type !== type && (
+                        <Button type="button" variant="secondary" onClick={() => setNewRec({ type: type as any, content: "" })} className="text-xs text-gray-500">
+                            + Add New
                        </Button>
-                    </>
-                )}
-                {newRec.type !== type && (
-                    <Button type="button" variant="secondary" onClick={() => setNewRec({ type, content: "" })} className="text-xs text-gray-500">
-                        + Add New
-                    </Button>
-                )}
-            </form>
+                    )}
+                </form>
+            )}
        </div>
    );

@@ -159,7 +162,8 @@ export function Recommendations({ userId }: RecommendationsProps) {
                <h3 className="text-xl font-bold">Fitness Recommendations</h3>
            </CardHeader>
            <CardContent>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {renderSection("Daily AI Plan", "ai_plan", groupedRecs.ai_plan)}
                    {renderSection("Short Term Goals", "short_term", groupedRecs.short_term)}
                    {renderSection("Medium Term Goals", "medium_term", groupedRecs.medium_term)}
                    {renderSection("Long Term Goals", "long_term", groupedRecs.long_term)}