Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to manage sales orders and purchase orders, featuring a clean and intuitive interface inspired by the Fiori design language. It allows users to log in, select sales orders or purchase orders, and efficiently relate items between the two, enhancing operational efficiency and streamlining the order management process.

## CORE FEATURES
1. **User Authentication**: A login screen where users can securely sign in using their email and password.
2. **Order Selection**: A main dashboard for users to select either sales orders or purchase orders for further processing.
3. **Sales Order Details**: A detailed view of selected sales orders, displaying order number, item details, quantities, and statuses.
4. **Relate Items**: Functionality for users to relate items from sales orders to purchase orders, ensuring seamless order management.
5. **Purchase Order Display**: A panel showcasing relevant purchase orders based on user selection, enabling easy access to necessary data.
6. **Confirmation of Relationships**: A confirmation button that finalizes the relationship between sale items and purchase orders, updating quantities accordingly.

## 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 layout consists of a top navigation bar for navigation options and a main area divided into sections for selecting orders and displaying details. The upper section presents sales order details, while the lower section lists relevant purchase orders based on the selection.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create Authentication Module**: Develop the login screen with form validation and user authentication logic.
3. **Build Main Dashboard**: Implement the main selection screen where users choose between sales orders and purchase orders.
4. **Develop Sales Order Details View**: Create a detailed view for sales orders that displays relevant information and allows for item selection.
5. **Implement Purchase Order Display**: Develop the section that shows purchase orders corresponding to selected sales orders.
6. **Add Relate Items Functionality**: Implement the item relating feature, including selection and confirmation logic to update quantities.
7. **Ensure Responsiveness**: Make sure the application is responsive and provides a smooth user experience across devices.

## USER EXPERIENCE
Users will first encounter a clean login screen where they enter their credentials. Upon successful login, they will navigate to the main dashboard, allowing them to choose between sales orders and purchase orders seamlessly. After selecting a sales order, they will see detailed information and can easily relate items to purchase orders. The design emphasizes clarity and simplicity, ensuring that users can manage their orders efficiently without unnecessary complexity.