Progress Dashboard - Copy this React, Tailwind Component to your project
Header Section At the top of the interface, there's a banner congratulating the user for breaking their personal streak in skill development. On the right side of the header, there are progress related elements, including: A flame icon with the number "0" indicating streak count or engagement level. A progress bar labeled "Level 2," showing 0/2 skills completed. User Profile Section Displays the username (sang08092004) and the profile picture, which appears as an avatar of a cat with glasses. Below the username, there’s an @handle, which matches the username. A badge count or progress score labeled "625" is displayed, possibly indicating points earned. A set of circular icons in various colors represent achievements or skill progress (currently inactive or uncolored). Navigation Sidebar A vertical sidebar with three main menu options: Progress: The currently active section. Profile: Likely links to the user's profile information. Teacher: May provide access to teacher related functionalities or interactions. Main Content Section Title: "Progress" (translated as "Tiến trình"), accompanied by a "Learn More" link for additional information. A notification below the title states that updating activity progress may take up to 10 minutes. Filters Three dropdown menus for filtering activity data: Time Range: Currently set to "Last 7 Days" (7 Ngày Qua). Content Scope: Set to "All Content" (Toàn bộ nội dung). Activity Type: Set to "All Activities" (Tất cả các hoạt động). Activity Overview A table summarizing activity data with the following columns: Activity Name: Displays the task "Counting with Small Numbers" (Đếm với các số nhỏ) linked to a specific content item ("Grade 1 Math in Vietnam"). Date: Shows the date and time the activity was performed (November 17, 2024, at 5:00 PM). Skill Level: Marked as "Mastered" (Thành thạo), indicating proficiency. Change Indicator: An upward arrow suggesting improvement. Correct/Total Questions: The user answered 7 out of 7 questions correctly. Time Spent: Indicates the activity took 1 minute.
