Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a clinical simulator designed to provide an interactive learning experience for students. Users can select real clinical cases from a Supabase database, simulate patient scenarios, and practice decision-making based on patient data and vital signs.

## CORE FEATURES
1. **Patient Profile Display**: Upon selecting a case, the application retrieves and displays patient information including name, age, weight, medical history, and anamnesis.
2. **Vital Signs Monitoring**: Initially shows vital signs (heart rate, systolic/diastolic blood pressure, respiratory rate, oxygen saturation, temperature, Glasgow scale) based on the first state of the simulation.
3. **Action Input Box**: A text box where students can input the action they wish to perform, which is then validated against the expected action necessary to advance the simulation.
4. **Time Management**: A countdown timer that tracks the time limit for the student's response. If the timer reaches zero, the simulation automatically transitions to a critical state.
5. **State Advancement Logic**: The application implements logic to progress through various states based on correct actions or timeouts, enhancing the learning experience.
6. **Real-Time Feedback**: Students receive immediate feedback on their actions, helping them learn from mistakes and improve their clinical decision-making skills.

## 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 includes a header for navigation, a central display area for patient information and vital signs, an input area for actions, and a footer for additional resources or links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React's built-in state management or Context API for managing simulation states.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Integrate Supabase**: Connect to the Supabase database to fetch clinical cases and patient data.
3. **Create Patient Profile Component**: Develop a component that fetches and displays patient details upon case selection.
4. **Vital Signs Component**: Implement a component to display vital signs based on the selected case's initial state.
5. **Input Box for Actions**: Add a text input component where users can type their actions, along with logic to validate input against expected actions.
6. **Timer Implementation**: Create a countdown timer that triggers transitions based on time limits and user actions.
7. **State Transition Logic**: Implement the logic to handle transitions between different states based on user actions or timer expiration.
8. **User Feedback Mechanism**: Add visual feedback for correct or incorrect actions taken by the user.
9. **Testing and Refinement**: Conduct thorough testing to ensure all features work as expected and refine the user interface based on feedback.

## USER EXPERIENCE
The application provides an intuitive interface where users can easily select clinical cases and interact with the simulation. Users will first view a patient profile, then monitor vital signs, input their proposed actions, and receive real-time feedback. The countdown timer adds urgency to the scenario, encouraging timely decision-making. Overall, the design focuses on clarity, usability, and enhancing the educational experience through interactive clinical simulations.