From 3fba97bf227d97b3a45c5b33387ac5da3a418684 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 19:32:11 +0000
Subject: [PATCH] Add src/components/workout/WorkoutMetricsDisplay.tsx

---
 .../workout/WorkoutMetricsDisplay.tsx         | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/workout/WorkoutMetricsDisplay.tsx

diff --git a/src/components/workout/WorkoutMetricsDisplay.tsx b/src/components/workout/WorkoutMetricsDisplay.tsx
new file mode 100644
index 0000000..3cfcda8
--- /dev/null
+++ b/src/components/workout/WorkoutMetricsDisplay.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { useWorkoutData } from '@/hooks/useWorkoutData';
+import { UserMetrics } from '@/lib/storage/workoutStorage';
+
+interface WorkoutMetricsDisplayProps {
+  className?: string;
+  showRefresh?: boolean;
+  onRefresh?: () => void;
+}
+
+export const WorkoutMetricsDisplay: React.FC<WorkoutMetricsDisplayProps> = ({
+  className = '',
+  showRefresh = true,
+  onRefresh
+}) => {
+  const { metrics, refreshMetrics, isLoading } = useWorkoutData();
+
+  const handleRefresh = () => {
+    refreshMetrics();
+    onRefresh?.();
+  };
+
+  if (isLoading || !metrics) {
+    return <div className={className}>Loading metrics...</div>;
+  }
+
+  const formatMetric = (value: number, unit: string) => {
+    return `${value.toLocaleString()}${unit}`;
+  };
+
+  return (
+    <div className={`workout-metrics ${className}`}>
+      <div className="metrics-grid">
+        <div className="metric-card">
+          <h3>Total Steps</h3>
+          <p>{formatMetric(metrics.totalSteps, ' steps')}</p>
+        </div>
+        <div className="metric-card">
+          <h3>Total Distance</h3>
+          <p>{formatMetric(metrics.totalDistance, ' km')}</p>
+        </div>
+        <div className="metric-card">
+          <h3>Total Calories</h3>
+          <p>{formatMetric(metrics.totalCalories, ' kcal')}</p>
+        </div>
+        <div className="metric-card">
+          <h3>Total Volume</h3>
+          <p>{formatMetric(metrics.totalVolume, ' kg')}</p>
+        </div>
+        <div className="metric-card">
+          <h3>Workout Streak</h3>
+          <p>{metrics.workoutStreak} days</p>
+        </div>
+        {metrics.lastWorkoutDate && (
+          <div className="metric-card">
+            <h3>Last Workout</h3>
+            <p>{new Date(metrics.lastWorkoutDate).toLocaleDateString()}</p>
+          </div>
+        )}
+      </div>
+
+      {Object.keys(metrics.personalRecords).length > 0 && (
+        <div className="personal-records">
+          <h3>Personal Records</h3>
+          <ul>
+            {Object.entries(metrics.personalRecords).map(([exercise, weight]) => (
+              <li key={exercise}>
+                <span>{exercise}</span>
+                <span>{weight} kg</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {showRefresh && (
+        <button onClick={handleRefresh} className="refresh-button">
+          Refresh Metrics
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default WorkoutMetricsDisplay;