Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed for a gynecological clinic, focused on providing a responsive and mobile-first frontend for real-time medical service pricing calculations. The application aims to automate the pricing process, allowing gynecologists to set hourly rates, track consultation times, and generate detailed billing reports.

## CORE FEATURES
1. **Real-Time Pricing Calculation**: Users can input their hourly rates and the procedures performed, automatically calculating the total charge based on time and materials.
2. **Consultation Timer**: A built-in timer allows medical professionals to track the duration of consultations accurately.
3. **Detailed Billing Reports**: Users can generate and export detailed reports of their earnings, filtered by specific time periods.
4. **Responsive Design**: The application is built to function seamlessly on various devices, ensuring accessibility and usability across smartphones, tablets, and desktops.
5. **User Authentication**: Secure login functionality allows users to access their personalized settings and data.

## 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 consist of a header, a sidebar for navigation on larger screens, and a main content area that adjusts based on the screen size (using responsive design principles).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui for accessible and responsive components
- **State Management**: React's context API for managing global state (if necessary)

## IMPLEMENTATION STEPS
1. **Project Setup**:
   - Initialize a new React project with TypeScript using Vite: 
     ```bash
     npm create vite@latest calculadora-precificacao -- --template react-ts
     cd calculadora-precificacao
     npm install
     ```
   - Install required dependencies including Tailwind CSS:
     ```bash
     npm install tailwindcss postcss autoprefixer
     npx tailwindcss init -p
     ```

2. **Configure Tailwind CSS**:
   - Update `tailwind.config.js` to include necessary paths and custom colors.

3. **Create Responsive Layout**:
   - Develop a mobile-first responsive layout with Tailwind CSS, ensuring that components stack vertically on smaller screens and align horizontally on larger screens.

4. **Implement Core Features**:
   - Build components for the pricing calculator, consultation timer, and report generation.
   - Use state management to handle dynamic data updates.

5. **User Authentication**:
   - Set up user authentication mechanisms for secure login and data protection.

6. **Testing and Optimization**:
   - Test the application on various devices and screen sizes to ensure responsiveness and usability.
   - Optimize performance using code splitting and lazy loading as necessary.

7. **Deployment**:
   - Deploy the application using platforms like Vercel for easy continuous deployment.

## USER EXPERIENCE
Key user interactions include:
- **Setting Up Pricing**: Users can easily input their hourly rates and procedural costs, triggering automatic calculations.
- **Tracking Consultations**: The timer functionality allows users to start, pause, and stop timers for accurate billing.
- **Generating Reports**: Users can filter their billing reports by date and export them for administrative purposes.
- **Navigating the Application**: Using a responsive sidebar that adjusts based on screen size ensures users can easily navigate through features on any device.

This minimalist application is designed to enhance the efficiency and effectiveness of medical service pricing, ensuring a seamless user experience across all platforms.