Drawer Width - Copy this React, Mui Component to your project

Generate a web based application that gathers and tracks winning products from e commerce platforms. The application should automatically scrape product data, such as SKU, price, shipping cost, best selling price, ad performance (on platforms like Meta and TikTok), and competitors' pricing. Backend: Backend Language: Python (Django or Flask) to handle data scraping, storage, and processing. Data Scraping: Use BeautifulSoup or Scrapy to extract product data from e commerce platforms like CJ Dropshipping, and store this data in a PostgreSQL or MySQL database. Time Filters: Allow users to filter by time range (daily, weekly, monthly) and product categories. Frontend: Frontend Framework: Use React.js for a smooth and interactive user experience. Dashboard Design: Display key product information such as SKU, pricing, shipping cost, best selling price, ad platforms (Meta/TikTok), and competitor pricing in a table format. Each row can be clickable for a detailed view. Provide filters and search functionality for users to sort products based on category, time, and price. UI/UX Design: Color Scheme: Primary Color: Deep blue (#1E3A8A) for the header and navigation bar. Secondary Color: Light teal (#22D3EE) for buttons, highlights, and links. Background Color: A clean, white background (#F9FAFB) for a professional look. Text Color: Dark grey (#374151) for text to maintain readability. Layout: Sidebar Navigation: A collapsible sidebar that includes options like 'Home,' 'Product List,' 'Reports,' 'Settings,' and 'Help'. Top Navigation Bar: Show filters for time range (daily, weekly, monthly), category filters, and export options (CSV, PDF). Product Dashboard: A grid or table with each product's key data points: SKU, price, shipping, and performance. Animations: Use smooth transitions and hover effects on buttons and links. For data updates or loading, use spinners or subtle animations to indicate that the system is fetching new information. When opening detailed product views, use slide in animations from the right to make the experience engaging. Graphs and Charts: Use a library like Chart.js to display historical performance data for each product, such as pricing trends, competitor analysis, and ad performance (Meta vs. TikTok). Additional Features: Dark Mode: Include a toggle for users to switch between light and dark modes. In dark mode, use the following color scheme: Background Color: Dark grey (#111827). Text Color: Light grey (#D1D5DB). Primary Color: Light teal (#22D3EE). Highlight Color: Orange (#FB923C) for actionable buttons and important information. Responsive Design: Ensure the app is mobile friendly, with fluid layouts that adjust to both mobile and tablet views. Example Flow: Home Page: Show a dashboard with a summary of product performance, including top 5 products and quick stats (average price, best sellers, etc.). Product Page: Allow users to click on individual products to view a detailed report including pricing history, competitor data, and ad platform performance. Reports Page: Enable users to generate reports on winning products, including customizable fields (e.g., time duration, category, competitors). Settings Page: Provide options for managing user preferences, such as notifications, account details, and export options.