user report gtound work

2026-03-19 03:37:15 +01:00
1 parent 1be2de05fa
commit 74f0d0dbed
@@ -0,0 +1,110 @@
+"use client";
+
+import { WeeklyCheckInStats } from "@fitai/shared";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+
+interface WeeklyCheckInsCardProps {
+  weeklyCheckIns: WeeklyCheckInStats[];
+}
+
+export function WeeklyCheckInsCard({
+  weeklyCheckIns,
+}: WeeklyCheckInsCardProps) {
+  const totalCheckIns = weeklyCheckIns.reduce(
+    (sum, week) => sum + week.totalCheckIns,
+    0,
+  );
+  const totalTimeMinutes = weeklyCheckIns.reduce(
+    (sum, week) => sum + week.totalTimeMinutes,
+    0,
+  );
+  const avgTimeMinutes =
+    totalCheckIns > 0 ? Math.round(totalTimeMinutes / totalCheckIns) : 0;
+
+  const chartData = weeklyCheckIns.map((week) => ({
+    week: week.weekStart,
+    checkIns: week.totalCheckIns,
+    timeMinutes: week.totalTimeMinutes,
+  }));
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Weekly Check-ins</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-3 gap-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-blue-600">
+              {totalCheckIns}
+            </div>
+            <div className="text-xs text-gray-600">Total Check-ins</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-600">
+              {Math.floor(totalTimeMinutes / 60)}h {totalTimeMinutes % 60}m
+            </div>
+            <div className="text-xs text-gray-600">Total Time</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-purple-600">
+              {avgTimeMinutes}m
+            </div>
+            <div className="text-xs text-gray-600">Avg Duration</div>
+          </div>
+        </div>
+
+        {chartData.length > 0 ? (
+          <div className="h-64">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="week" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Bar dataKey="checkIns" fill="#3c82e6" name="Check-ins" />
+                <Bar dataKey="timeMinutes" fill="#10b981" name="Minutes" />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        ) : (
+          <div className="h-64 flex items-center justify-center text-gray-500">
+            No check-in data available
+          </div>
+        )}
+
+        {weeklyCheckIns.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold">Weekly Breakdown</h4>
+            <div className="space-y-1">
+              {weeklyCheckIns.slice(-4).map((week) => (
+                <div
+                  key={week.weekStart}
+                  className="flex justify-between items-center text-sm"
+                >
+                  <span className="text-gray-600">
+                    {week.weekStart} - {week.weekEnd}
+                  </span>
+                  <span className="font-medium">
+                    {week.totalCheckIns} check-ins • {week.totalTimeMinutes} min
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}