Dashboard Layout - Copy this React, Tailwind Component to your project
English: I am working on an SAP-like inventory management system using Next.js and TailwindCSS for the frontend. I need a main dashboard with a collapsible sidebar that includes shortcuts to the following pages: "Stock Control" (to log inventory entries and exits), "Movement History" (an interactive table showing columns like ID, Product, Type, Quantity, Date, User, and Comment, with a search bar and options to edit records), "Settings" (to manage categories, locations, and batches using modal forms), and "Reports" (charts and statistics like the top 5 most sold products and category distribution). On the main dashboard, I want interactive charts (bar, line, and pie) displaying key inventory statistics, such as monthly entries/exits and daily movements. The color palette should feature light blue tones for the sidebar and white for buttons and text, with a soft gray background for the main content. The design must be fully responsive, with the sidebar automatically collapsed on smaller screens and tables/charts horizontally scrollable on mobile. Key technologies include Next.js, TailwindCSS, and Chart.js for the charts.
