Responsive Box - Copy this React, Mui Component to your project
Prompt to Create a Report and Statistics App: Main Components: Sidebar Navigation: Include icons and text for "Reports," "Library," "People," "Activities," "Support," and "Settings." Use a vertical layout with icons aligned to the left and text to the right. Reports Header: Display "Reports" as the title and add filters for "Timeframe," "People," and "Topic." Use dropdown menus for the filters and position them horizontally. Summary Statistics Section: Create cards that show "Active Users," "Questions Answered," "Av. Session Length," "Starting Knowledge," "Current Knowledge," and "Knowledge Gain." Map each card from a data object and use line charts to visualize changes over time. Activity Chart: Render a bar chart showing monthly user activity. Use conditional rendering to switch between monthly and weekly views. Detailed Contents: Weakest and Strongest Topics: Create two sections to show "Weakest Topics" and "Strongest Topics." Use progress bars to indicate the percentage correct. Map each progress bar from topic data. User and Group Leaderboard: Render tables to show the ranking of users and groups based on points and percentage correct. Use a table component with highlighted rows for the top position and dynamically update the data as performance changes. Actions and Interactions: Download Button: Add a download button in the upper right corner that exports the currently viewed data in CSV or PDF format. Avatars and Icons: Include avatars for users and icons for topics, aligned to the left. Add hover effects such as rounded borders and light shadows to highlight interactive elements. Design and Performance Considerations: Use conditional rendering for components that load based on applied filter data to improve performance. Use object mapping for repeating components, such as topics and statistics, to avoid redundant code. Keep styles consistent with a simple color palette and clear contrasts for accessibility. Prompt for Developers: Create a dashboard application based on the components described above. Make sure to use conditional rendering to improve performance and object mapping for repeating components. Utilize charts and tables for data visualization, and add interactions through hover effects and action buttons.
