Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Field Agent Portal is a web application designed for field agents to manage their profiles, health records, and configurations effectively. The application aims to provide a clean and professional interface that emphasizes clarity and legibility for demonstration purposes, ensuring all relevant information is easily accessible.

## CORE FEATURES
1. **Profile Management**: A dedicated section where users can view and input their personal details, including age, with clear validation messages to guide them.
2. **Configuration Settings**: Allows agents to select a mode multiplier from a dropdown, showcasing options visually and ensuring clarity in selection.
3. **Health Records Upload**: A drag-and-drop interface for uploading medical records, featuring clear instructions and validation to ensure compliance with requirements.
4. **Action Buttons**: A footer area with actionable buttons such as 'Submit' and a disabled 'FPR Button', clearly indicating functionality and restrictions.
5. **Tooltip and Helper Text**: Subtle tooltips for various elements to provide additional context without cluttering the interface.

## 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 header with user identification, followed by distinct sections for Profile, Configuration, and Health, each in card format with a clear footer for actions. The design balances information density with readability, ensuring that all text and details are legible.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified; consider using React's built-in state management or a library like Redux if needed for complex state.

## IMPLEMENTATION STEPS
1. **Set up the React Application**: Initialize a new React project with TypeScript support.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Layout Structure**: Develop the main layout with a header, and sections for Profile, Configuration, and Health.
4. **Implement Profile Management**: Create a card component for the profile section with input fields for age and validation messages.
5. **Develop Configuration Settings**: Add a dropdown component for selecting the mode multiplier, ensuring clear visibility of options.
6. **Health Records Upload**: Design a drag-and-drop area for uploading medical records, including validation logic and helper texts.
7. **Add Action Buttons**: Implement the footer with a 'Submit' button and a disabled 'FPR Button' with appropriate tooltips.
8. **Finalize Design**: Ensure all components adhere to the design specifications, focusing on typography, spacing, and color usage.

## USER EXPERIENCE
The user experience is centered around intuitive navigation and interaction. Agents will easily access their profile details, select configurations, and upload health records. Clear validation messages and tooltips will guide them through the process, ensuring they understand the implications of their actions. The overall design will provide a seamless experience, emphasizing clarity and functionality.