Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Failure Heatmap application is a web app designed to help engineers track and manage work orders efficiently. It allows engineers to manually input machine types, current locations, and line details, while providing a PIN-based authentication system for secure access. The app will feature a heatmap visualization to indicate failure hotspots, enhancing decision-making and operational efficiency.

## CORE FEATURES
1. **Manual Data Entry**: Engineers can manually enter machine types, current locations, and line details, ensuring accurate data for each work order.
2. **PIN Authentication**: Each engineer receives a unique PIN to start and complete work orders, streamlining access and enhancing security.
3. **Heatmap Visualization**: A dynamic heatmap that displays failure rates across different machines and locations, helping identify areas needing attention.
4. **Email Notifications**: Automated email alerts are sent to all engineers when specific conditions are met or actions are required.
5. **Work Order Tracking**: Detailed tracking of each work order by engineer, allowing for better accountability and performance monitoring.

## 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 will feature a header with navigation, a central dashboard for data entry and visualization, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (for managing application state, if needed)

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components for styling and UI elements.
3. **Create Components**: Build reusable components for data entry forms, heatmap visualizations, and work order tracking.
4. **Implement PIN Authentication**: Create a simple authentication mechanism where users can input their PIN to access the app functionalities.
5. **Develop Heatmap Visualization**: Integrate a charting library to display the heatmap based on the failure data entered by engineers.
6. **Set Up Email Notifications**: Implement backend logic (using Node.js or similar) to send email notifications to engineers based on specific triggers.
7. **Test Application**: Conduct thorough testing for usability, functionality, and responsiveness across devices.
8. **Deploy Application**: Deploy the application using a cloud service like Vercel or Netlify for public access.

## USER EXPERIENCE
Users will start by entering their unique PIN to access the application. They will then navigate to the data entry section to input machine types and locations. The heatmap will visually represent failure data, allowing users to quickly identify critical issues. Engineers will receive email notifications for updates or actions required, enhancing communication and operational efficiency. The overall experience will be intuitive, with a focus on simplicity and clarity in user interactions.