Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for the Airport Authority of India, providing a dashboard that monitors the operational status of receivers across 25 stations. The application will send notifications and alerts when any receiver goes down, ensuring real-time communication and efficient management of airport operations.

## CORE FEATURES
1. **Dashboard Overview**: A centralized dashboard displaying the status of all 25 stations, highlighting operational receivers and those that are down.
2. **Real-time Notifications**: Alerts sent to designated personnel via email or SMS whenever a receiver goes down, with details about the affected station.
3. **Status History**: A log feature that tracks the operational history of each station, allowing users to view past alerts and statuses.
4. **User Management**: Authentication and role-based access control to ensure that only authorized personnel can access sensitive operational data and settings.
5. **Settings Configuration**: An admin interface to configure notification preferences, manage users, and set up station parameters.
6. **Responsive Design**: A mobile-friendly layout ensuring accessibility on various devices for on-the-go monitoring.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space to enhance readability, focusing on typography to convey information effectively.
- **Color Mode**: Light theme with dark text on light backgrounds to maintain clarity and reduce eye strain.
- **Layout**: A grid-based layout with a prominent dashboard overview section at the top, followed by individual station status cards below. Include a sidebar for navigation to user settings and history logs.
- **Typography**: Use sans-serif fonts like 'Roboto' or 'Open Sans' for a modern feel. Maintain a hierarchy with larger headings for the dashboard title and subheadings for each station status.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design adjustments and responsiveness.
- **UI Components**: Utilize shadcn/ui for consistent and accessible UI components for buttons, forms, and alerts.
- **State Management**: Implement Zustand or React Context API for state management across components, especially for real-time updates.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install dependencies (React, Tailwind CSS, Zustand).
2. **Create the Dashboard Layout**: Design the main dashboard component using a grid layout, integrating Tailwind CSS classes for responsiveness.
3. **Implement User Authentication**: Set up user authentication with role-based access, utilizing libraries such as Firebase or Auth0 if necessary.
4. **Build Notification System**: Develop a backend service (Node.js or similar) that monitors the status of receivers and triggers notifications when a receiver goes down.
5. **Integrate Real-time Updates**: Use WebSocket or polling methods to fetch real-time status updates from the backend and reflect them on the dashboard.
6. **Test and Deploy**: Conduct thorough testing to ensure functionality and responsiveness, then deploy the application using platforms like Vercel or Netlify.

## USER EXPERIENCE
The user experience is centered around intuitive navigation and real-time interactivity. Users can easily monitor the status of each receiver from the dashboard, receive immediate alerts for any issues, and access historical data to analyze performance trends. The minimalist design enhances usability, allowing users to focus on critical information without distractions. The responsive design ensures that users can access the dashboard from desktops, tablets, and mobile devices seamlessly.