user report gtound work

2026-03-19 03:37:15 +01:00
1 parent 1be2de05fa
commit 74f0d0dbed
@@ -0,0 +1,121 @@
+"use client";
+
+import { NutritionSummary } from "@fitai/shared";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Legend,
+  Tooltip,
+} from "recharts";
+
+interface NutritionSummaryCardProps {
+  nutrition: {
+    dailySummaries: NutritionSummary[];
+    averageDailyCalories: number;
+    totalDays: number;
+    daysMetGoal: number;
+  };
+}
+
+export function NutritionSummaryCard({ nutrition }: NutritionSummaryCardProps) {
+  const goalMetPercentage =
+    nutrition.totalDays > 0
+      ? Math.round((nutrition.daysMetGoal / nutrition.totalDays) * 100)
+      : 0;
+
+  const chartData = [
+    { name: "Days Met Goal", value: nutrition.daysMetGoal, color: "#10b981" },
+    {
+      name: "Days Over/Under",
+      value: nutrition.totalDays - nutrition.daysMetGoal,
+      color: "#f59e0b",
+    },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Nutrition Summary</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Summary Stats */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-blue-600">
+              {nutrition.averageDailyCalories.toLocaleString()}
+            </div>
+            <div className="text-xs text-gray-600">Avg Daily Calories</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-600">
+              {nutrition.totalDays}
+            </div>
+            <div className="text-xs text-gray-600">Days Tracked</div>
+          </div>
+        </div>
+
+        {/* Goal Achievement */}
+        <div className="text-center">
+          <div className="text-3xl font-bold text-purple-600">
+            {goalMetPercentage}%
+          </div>
+          <div className="text-xs text-gray-600">
+            Days Met Calorie Goal (±10%)
+          </div>
+        </div>
+
+        {/* Chart */}
+        {nutrition.totalDays > 0 && (
+          <div className="h-48">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={chartData}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={40}
+                  outerRadius={70}
+                  paddingAngle={5}
+                  dataKey="value"
+                >
+                  {chartData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip />
+                <Legend />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+
+        {/* Recent Days */}
+        {nutrition.dailySummaries.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold">Recent Days</h4>
+            <div className="max-h-32 overflow-y-auto space-y-1">
+              {nutrition.dailySummaries
+                .slice(-5)
+                .reverse()
+                .map((day) => (
+                  <div
+                    key={day.date}
+                    className="flex justify-between items-center text-sm"
+                  >
+                    <span className="text-gray-600">{day.date}</span>
+                    <span className="font-medium">
+                      {day.totalCalories.toLocaleString()} /{" "}
+                      {day.calorieGoal.toLocaleString()} cal
+                    </span>
+                  </div>
+                ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}