[5.4 Web App] Dashboard and Basic Stats

[fIyingPhoenix]

Milestone: Milestone 5: Infrastructure & Tools
Category: 5.4 Web App
Task: Implement the dashboard UI in the Blazor web app to display basic stats such as calories, macros, meals, and weight tracking data.

---

Description

This task involves creating a dashboard UI that provides users with an overview of their meal and weight tracking data. The dashboard should present important statistics such as total calories consumed, macronutrient breakdown, recent meals logged, and current weight.

The dashboard will display key metrics and provide users with a quick summary of their progress towards their goals. It will also include basic charts for visualization.

---

Subtasks:

• Design dashboard layout:
  • Define the sections and elements to include on the dashboard (e.g., calorie count, macro breakdown, weight trend, recent meals)
  • Implement a clean, user-friendly design for displaying stats
• Create meal stats section:
  • Display daily, weekly, and monthly total calories consumed
  • Show a breakdown of macronutrients (carbs, fats, protein) for the current day/week/month
• Weight tracking stats:
  • Display user’s current weight, change over time, and weight goal progress
  • Visualize weight history on a graph (line chart or trend)
• Recent meals section:
  • Show a list of recently logged meals, including meal name and calorie count
  • Allow the user to click on a meal to view details or make changes
• Integrate charts:
  • Implement pie or bar charts to display macronutrient breakdown
  • Include a line chart for weight trend over time
  • Ensure charts are interactive and display helpful tooltips with more details
• Fetch data from backend API:
  • Implement the logic to fetch meal stats and weight tracking data from the backend API
  • Ensure data is updated in real-time or periodically (e.g., every few minutes)
• Testing dashboard UI:
  • Test dashboard layout and responsiveness on different screen sizes
  • Ensure stats update correctly with new meal/weight data
  • Verify that charts render correctly with accurate data
• Documentation:
  • Document how the dashboard works and how users can interpret their stats
  • Include details about chart interactivity and any filters applied to the data (e.g., daily/weekly/monthly views)

---

Technical Considerations:

• Use Blazor components to structure the dashboard UI
• Use a charting library compatible with Blazor (e.g., ChartJS or Blazorise) for graph rendering
• Ensure the dashboard is responsive and mobile-friendly
• Implement a caching mechanism to reduce the number of API calls for frequently accessed data
• Provide loading indicators while data is being fetched from the backend

---

Acceptance Criteria:

• Dashboard displays total calories, macro breakdown, and weight tracking data
• Charts are rendered for macronutrients and weight trend
• Recent meals are displayed with calorie counts
• Dashboard fetches updated data from the backend API in real-time
• Dashboard is responsive and works well on both desktop and mobile devices
• All functionality is tested, and the user can interpret their stats easily