Mochi Dashboard Component - Copy this Angular, Tailwind Component to your project

Create a user interface that visualizes a spaced repetition memory model, where users can track their progress in five levels of word retention. Each level represents a different stage of memory retention, with increasing time intervals between reviews to maximize long-term retention. Design Specifications Graph Layout: Implement a horizontal bar graph with five levels, each representing a day or stage of review in the spaced repetition model. Levels are numbered 1 through 5 on the x-axis, with each number directly below the corresponding bar. Each level indicates the number of words that need review. Bars increase in height from left to right, representing the progression of word retention and review frequency. Bars Styling: Each bar should have its own unique color to visually distinguish the different levels: Level 1: Light red Level 2: Yellow Level 3: Light blue Level 4: Dark blue Level 5: Dark blue with increased height (or the highest) representing the longest retention interval. Include a label at the top of each bar showing the number of words to review (e.g., "0 từ" for Level 1 to 4, and "162 từ" for Level 5). Bars should have rounded corners for a modern, soft appearance. Labels and Counts: Below each bar, add text labels indicating the review level number (1, 2, 3, 4, 5). Place the number of words ready for review above each bar. If no words are ready, show "0 từ" (0 words). Progress Message: Below the graph, include a line of text that reads, "Chuẩn bị ôn tập: 0 từ" (Words ready for review: 0 words). This message dynamically updates based on the total words available for review across all levels. Action Button: Include a large green button labeled "Học từ mới" (Learn New Words) centered below the progress message. The button should have rounded corners, a shadow effect to make it appear clickable, and a hover effect for interactivity. Functional Explanation of Spaced Repetition Model Level System (1-5): Each level represents a spaced repetition interval based on memory retention science. Level 1 requires the most frequent review, while Level 5 requires the least frequent, focusing on long-term retention. As users correctly review words, the words advance to the next level, gradually spacing out review intervals. If a word is forgotten, it can return to Level 1 to restart the process, enhancing memory through repetition. Review Process: The graph shows how many words are up for review in each level. For example, in this case, "162 từ" in Level 5 means the user has 162 words at the highest retention level. When the user clicks "Học từ mới," new words or words needing review are presented, helping reinforce learning. Design and Styling Details Color Scheme: Use soft, pastel colors for Levels 1-4 with a bold color for Level 5 to signify the culmination of the review process. Font and Spacing: Use a clean, readable font like Poppins or Arial. Ensure ample padding around elements for clarity and visual appeal. Button Interactivity: Add subtle animations on hover and click to make the interface more engaging.