user report gtound work

2026-03-19 03:37:15 +01:00
1 parent 1be2de05fa
commit 74f0d0dbed
@@ -0,0 +1,130 @@
+"use client";
+
+import { RecommendationSummary } from "@fitai/shared";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+interface RecommendationsCardProps {
+  recommendations: RecommendationSummary;
+}
+
+export function RecommendationsCard({
+  recommendations,
+}: RecommendationsCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>AI Recommendations</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Summary Stats */}
+        <div className="grid grid-cols-3 gap-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-600">
+              {recommendations.totalAccepted}
+            </div>
+            <div className="text-xs text-gray-600">Accepted</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-yellow-600">
+              {recommendations.totalPending}
+            </div>
+            <div className="text-xs text-gray-600">Pending</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-red-600">
+              {recommendations.totalRejected}
+            </div>
+            <div className="text-xs text-gray-600">Rejected</div>
+          </div>
+        </div>
+
+        {/* Accepted Recommendations */}
+        {recommendations.accepted.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold text-green-700">
+              Accepted Recommendations
+            </h4>
+            <div className="space-y-2">
+              {recommendations.accepted.map((rec) => (
+                <div
+                  key={rec.id}
+                  className="border border-green-200 bg-green-50 rounded-lg p-3"
+                >
+                  <div className="flex justify-between items-start mb-2">
+                    <Badge variant="default" className="bg-green-600">
+                      Accepted
+                    </Badge>
+                    <span className="text-xs text-gray-500">
+                      {new Date(rec.generatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <div className="text-sm">{rec.recommendationText}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Pending Recommendations */}
+        {recommendations.pending.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold text-yellow-700">
+              Pending Recommendations
+            </h4>
+            <div className="space-y-2">
+              {recommendations.pending.map((rec) => (
+                <div
+                  key={rec.id}
+                  className="border border-yellow-200 bg-yellow-50 rounded-lg p-3"
+                >
+                  <div className="flex justify-between items-start mb-2">
+                    <Badge variant="secondary">Pending</Badge>
+                    <span className="text-xs text-gray-500">
+                      {new Date(rec.generatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <div className="text-sm">{rec.recommendationText}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Rejected Recommendations */}
+        {recommendations.rejected.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold text-red-700">
+              Rejected Recommendations
+            </h4>
+            <div className="space-y-2">
+              {recommendations.rejected.map((rec) => (
+                <div
+                  key={rec.id}
+                  className="border border-red-200 bg-red-50 rounded-lg p-3"
+                >
+                  <div className="flex justify-between items-start mb-2">
+                    <Badge variant="destructive">Rejected</Badge>
+                    <span className="text-xs text-gray-500">
+                      {new Date(rec.generatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <div className="text-sm">{rec.recommendationText}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {recommendations.totalAccepted === 0 &&
+          recommendations.totalPending === 0 &&
+          recommendations.totalRejected === 0 && (
+            <div className="text-center text-gray-500 py-8">
+              No recommendations found for this period
+            </div>
+          )}
+      </CardContent>
+    </Card>
+  );
+}