Smart Greenhouse Dashboard - Copy this React, Tailwind Component to your project

For creating a highly professional, product focused HTML dashboard page for your "Smart Greenhouses" IoT project, let's craft a specific prompt for Purcode AI. This prompt will guide Purcode AI in developing a dashboard page that displays and manages greenhouse products (e.g., plants or crops) rather than numeric or analytics data. The focus will be on high visual appeal, user friendly functionality, and a layout that supports easy tracking of product details, statuses, and control features. Prompt for Purcode AI Using Claude 3.5 for Product Dashboard Page "Please generate a professional grade HTML layout for a product focused dashboard page within the Smart Greenhouses: IoT Controlled Greenhouse System website. This dashboard should be designed for managing greenhouse crops (plants or agricultural products), with an emphasis on displaying details, statuses, and control features for each product in an organized and visually engaging way. Below are specific sections, components, and style elements to follow. Use the best practices for clarity, responsiveness, and user experience." Structure & Content Guidance Dashboard Layout & Sections: Navigation Bar: Create a responsive, collapsible sidebar or top navigation bar with links to the home page, numerical analytics dashboard, product dashboard, settings, and logout. Main Dashboard Header: Title it as "Greenhouse Product Dashboard" and include breadcrumb navigation for user orientation. Search & Filter Controls: At the top, include a search bar and filters (e.g., by crop type, growth stage, greenhouse section) to allow users to quickly locate specific products. Product Display Cards/Grid: Grid Layout: Display products as individual cards or rows in a grid format. Each card should include an image of the crop (if available), crop name, type, and current growth stage. Product Status Indicators: Use small, color coded icons to indicate the status of each product, like "Optimal," "Attention Needed," or "In Danger." Key Details on Each Card: Show essential information like last irrigation time, current health status, soil moisture, and last harvest date. Product Detail Pop Up Modal: Interactive Modal: When a product card is clicked, trigger a modal or pop up that provides a more in depth view of that crop's specific details. Detailed Information Display: Include real time sensor data for that crop (temperature, humidity, soil moisture, etc.) and AI based recommendations, such as suggested adjustments for lighting or irrigation. Control Options: Integrate action buttons within the modal for adjusting specific settings (e.g., increase irrigation or adjust lighting). Ensure these controls are highlighted but accessible only to users with appropriate permissions. Additional Functionalities: Batch Actions for Multiple Products: Add checkboxes on each product card for batch actions (e.g., bulk adjustments or health checks). Sorting & Filtering Options: Allow users to sort crops by health status, growth stage, or crop type for easier management. Notifications/Alerts Section: Include a notification bell or alerts icon in the header to inform users of any urgent product conditions that require immediate action. Styling & UI/UX Guidelines: Color Scheme & Icons: Use a professional, soft toned color palette (e.g., greens, blues, and neutrals) that aligns with the agricultural theme. Responsive Design: Ensure the layout is mobile friendly, with adaptive grid or list views on smaller screens. Clear Typography: Choose a clean, readable font with appropriate size for easy readability across devices. Code Guidelines: HTML Structure: Organize the HTML structure semantically with clear sectioning (e.g., <header>, <nav>, <section>, <article> for product cards, etc.). CSS Styling: Keep styles in an external CSS file for modularity and apply class based styling for reusability across components. JavaScript Functionality: Use JavaScript functions for interactive elements, like modals, sorting, and filtering controls, and implement minimal, efficient code to improve loading times.