Student Analytics Dashboard - Copy this React, Tailwind Component to your project
Context: 1. We have a REST endpoint GET /api/v1/users/<external_user_id>/study_metrics?organization_name=YOUR_ORG_NAME that returns the following JSON structure (example): { "days_since_last_activity": 2, "activity_streak": 5, "weekly_question_attempts": 20, "weekly_correct_answers": 15, "weekly_incorrect_answers": 5, "weekly_video_views": 4, "current_level_completion": 60.0, "progress_delta": 5.0, "average_daily_study_time": 35.0 } • days_since_last_activity: number of days since the student last had any activity. • activity_streak: how many consecutive days the student has been active. • weekly_question_attempts: total question attempts in the last 7 days. • weekly_correct_answers / weekly_incorrect_answers: breakdown of attempts. • weekly_video_views: how many videos were viewed in the last 7 days. • current_level_completion: current completion percentage for the user’s level. • progress_delta: difference in completion percentage over the last two weeks. • average_daily_study_time: approximate daily study time (in minutes). 2. The goal is to create a Student Analytics Dashboard that an Admin can view to see all these metrics at a glance for a particular user (the “Student”). 3. We also want a layout that can be easily adapted to show multiple users. But for now, focus on one user at a time. Requirements: • Use React (or your chosen modern front end framework) to build a responsive dashboard. • Call the /study_metrics endpoint to retrieve the data for a given external_user_id and organization_name. • Display the metrics in a user friendly manner: • Key performance indicators (KPIs) with big numbers or progress bars (for days_since_last_activity, activity_streak, weekly_question_attempts, etc.). • Charts or graphs for trends (e.g., bar chart for weekly question attempts or line chart for average_daily_study_time over time). • A progress ring or bar for current_level_completion. • A color coded indicator for progress_delta (positive = green arrow up, negative = red arrow down). • Provide a clean, modern UI. You can use Material UI, Tailwind, or any design system you prefer. • Include error handling and loading states: • Show a spinner while the metrics data is being fetched. • If there is an error, display an error message or toast. Specific Implementation Details: • Show each metric in a card or tile with a descriptive label. • For a quick summary section (like a top level row of cards): • Days Since Last Activity • Activity Streak • Weekly Question Attempts (with correct vs. incorrect as subtext) • Weekly Video Views • Next, show Completion using a progress bar/ring: • Current Level Completion (include the numeric percentage). • Progress Delta (could be small text below showing “+5% from last period” or “ 2% from last period”). • Show a small chart or summary for average_daily_study_time (could be a line chart if you choose to expand it over time). • Provide a Refresh button to re fetch data from the endpoint. • (Optionally) allow the admin to select different time ranges (e.g., 7 days, 14 days, 30 days) to see how metrics change (if your API supports that). Deliverables: • A React code snippet or repository structure that: 1. Has a main Dashboard component with: • Fetch logic from /study_metrics. • A layout with metric cards/charts. 2. Reusable UI components for charts or KPI blocks. 3. Mobile responsive design. Note: • If you have any ideas for advanced features (like sorting, filtering, or toggling between different data visuals), feel free to include them, but the main goal is a clear and intuitive display of these student metrics.
