Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for Web Application

## APPLICATION OVERVIEW
This web application will be a fully interactive dashboard that allows users to analyze performance metrics through dynamic filters. Users will be able to filter data by Period, Client, Client Group, Executive View, and General Manager. The application will feature two main graphs: ICM vs. Target and Monthly ICM, with smooth animations enhancing the user experience.

## CORE FEATURES
1. **Dynamic Filtering**: Users can apply multiple filters simultaneously (Period, Client, Client Group, Executive View, General Manager) to customize the displayed data.
2. **Graphical Representation**: Two main graphs will display ICM vs. Target and Monthly ICM, providing visual insights into the data.
3. **Smooth Animations**: All transitions and data updates will feature fluid animations for a seamless experience.
4. **Responsive Design**: The application will be fully responsive, ensuring usability on various devices and screen sizes.
5. **User-Friendly Interface**: A clean and intuitive layout that enhances data comprehension and user interaction.

## 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 with navigation, a sidebar for filter options, and a central area for displaying the graphs. The filters will be easily accessible, and the graphs will be prominently displayed for quick insights.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux (if necessary for handling complex state).

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript template.
2. **Install necessary dependencies**: Tailwind CSS, Redux (if using state management), and shadcn/ui components.
3. **Create the main layout structure**: Implement a header, sidebar for filters, and main content area for graphs using Tailwind CSS for styling.
4. **Develop the dynamic filtering functionality**: Create components for filter inputs that update the graphs based on user selections.
5. **Implement the graph components**: Utilize a library like Chart.js or D3.js to create the ICM vs. Target and Monthly ICM graphs.
6. **Add animations**: Use CSS transitions and animations to enhance the user experience during data updates and interactions.
7. **Ensure responsive design**: Test and adjust the layout to be mobile-friendly and visually appealing on all devices.
8. **Conduct user testing**: Gather feedback to refine the interface and interactions before the final launch.

## USER EXPERIENCE
Users will interact with the dashboard by selecting filters to customize their view of the data. The graphs will update in real-time with smooth animations, allowing users to easily compare ICM against Targets and view monthly trends. The layout will guide users naturally to explore the data, ensuring that key insights are easily accessible and understandable.