Dashboard - Copy this React, Tailwind Component to your project
Design a Progress Report Page for a fitness website where users can track their health, fitness, and nutrition progress. This page should present data clearly and in an engaging way, with a modern, user-friendly layout in white and #0066ee colors. The page should include the following sections: Page Layout Header Section: Title: "Your Progress Report". Subtitle: "Track your journey, review achievements, and stay motivated!". Navigation links to Track Meals and Workout Plans. Overview Section: A high-level summary of fitness goals, nutritional goals, and workout adherence (e.g., Calories Consumed vs. Goal, Progress toward Goal Weight, Workouts Completed vs. Planned). Progress Bar showing overall progress toward fitness goals (e.g., Lose 10 kg in 3 months, Increase muscle mass by 5%). Detailed Progress Data: Calories and Nutrition Progress: Display daily/weekly/monthly summaries of calories consumed vs. calories burned, and breakdown of macros (proteins, carbs, fats). Bar chart showing nutrition over time (e.g., a graph of daily calories or protein intake). Weight and Body Metrics: Track user weight, body fat percentage, muscle mass, etc. Graph showing weight trends over time. Workout Progress: Track the total number of workouts completed, calories burned, and strength gains (e.g., increasing lifting capacity, reps). Monthly workout summary with graphs (e.g., total sets, reps, and time spent working out). Goal Milestones: Display achievements and badges earned for milestones (e.g., 5 kg lost, 30 days of consistent workouts). AI Suggestions: AI-powered suggestions for adjustments in nutrition or workout plans based on current progress (e.g., Increase protein intake or Add more cardio for weight loss). Export or Share Option: Option to export progress data as a PDF report or share it via email or social media. Footer Section: Link to Goal Settings to update or adjust fitness goals. Link to Dashboard to view other stats or update daily entries. Responsive Design: Ensure the page is fully responsive with smooth interactive elements, charts, and graphs that adapt to both mobile and desktop views.
