Lovable Prompt Creator - AI Prompt Generator

# AQUA-ID – Intelligent Wastewater Classification & Treatment Routing System

## APPLICATION OVERVIEW
AQUA-ID is a web application designed to provide a comprehensive dashboard for monitoring and managing wastewater systems in densely populated areas, universities, and municipal drainage networks. This IoT + Physics-Guided Machine Learning application classifies wastewater in real-time, detects blockages, and recommends treatment routes, ensuring efficient wastewater management.

## CORE FEATURES
1. **Real-Time Monitoring**: Display real-time data from various sensors (pH, EC, turbidity, temperature, flow rate) with current values, normal ranges, and mini trend graphs.
2. **Wastewater Classification**: A dedicated panel showing the current classification (Greywater, Blackwater, or Unknown) with confidence percentages and decision-making prompts.
3. **Treatment Routing Visualization**: A visual representation of the treatment routing process, illustrating the decision-making flow from sensors to treatment actions.
4. **Alert Center**: An alert panel to inform users of high blockage alerts, sensor failures, and other critical notifications with timestamped entries for easy tracking.
5. **Map View**: A geographic map showing multiple AQUA-ID monitoring nodes for enhanced situational awareness related to wastewater management.
6. **Analytics Page**: Historical graphs for sensor data, classification distribution, and blockage events, allowing users to filter and analyze performance over time.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The main layout structure will include a top header for navigation, a KPI overview section, real-time monitoring panels, and a sidebar for additional features like alerts and analytics.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use Context API or Redux as needed for managing global application state.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install required dependencies (React Router, Tailwind CSS, shadcn/ui).
2. **Create Components**: Design and implement components for the dashboard, including header, KPI cards, monitoring panels, alert center, and analytics page.
3. **Implement State Management**: Establish a global state management solution to handle data updates from sensors and user interactions.
4. **Connect to API**: Set up a mock API to simulate sensor data input and ensure that the frontend can receive and display this data in real-time.
5. **Design Layout**: Utilize Tailwind CSS to create a responsive layout that maintains clarity and visual appeal across devices.
6. **Testing and Debugging**: Conduct testing to ensure that all features work as intended, focusing on user experience and responsiveness.

## USER EXPERIENCE
Users will interact with a clean, intuitive dashboard that provides immediate access to critical wastewater information. Real-time updates will ensure they can monitor conditions effectively, while visual elements like trend graphs and alert notifications will enhance situational awareness. The application will also support user-driven exploration of historical data, allowing for better decision-making and resource allocation.

---

By following this structured prompt, the development of the AQUA-ID web application can proceed smoothly, ensuring that all key functionalities and design specifications are met.