Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web-based Customer Health Scorecard dashboard designed for Customer Success Managers. Its primary purpose is to provide a quick and intuitive overview of account health metrics, enabling managers to identify at-risk renewals and take appropriate actions promptly.

## CORE FEATURES
1. **Dashboard Overview**: A summary view displaying key health indicators for all accounts, including health scores, renewal status, and recent activity highlights.
2. **Detailed Account View**: In-depth insights into individual accounts, including detailed health metrics, historical data, and engagement scores.
3. **Alerts and Notifications**: Automated alerts for accounts that are at risk of churn, enabling proactive engagement strategies.
4. **Actionable Insights**: Recommendations and next steps for Customer Success Managers based on account health assessments.
5. **Reporting Tools**: Generate reports on account health trends over time to assist in strategic planning and decision-making.
6. **User Management**: Admin functionalities to manage user roles and permissions within the dashboard.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with ample white space, ensuring a clean presentation of information. The focus is on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds to maintain clarity and reduce eye strain.
- **Layout**: A grid layout for the dashboard overview, featuring cards for each account health score with responsive design adjustments for different screen sizes. The detailed account view should utilize a tabbed interface for easy navigation.
- **Typography**: Use of a sans-serif font like 'Inter' for a modern feel, with clear hierarchies (e.g., larger sizes for headings and smaller sizes for body text).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first CSS styling, ensuring a responsive and adaptable layout.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Redux Toolkit for effective state management across the dashboard.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Dashboard Structure**: Develop the main dashboard layout with a grid system to display account health cards.
3. **Implement Core Features**:
   - Build the dashboard overview component to fetch and display account health data.
   - Create detailed account view components with tabs for metrics and engagement data.
   - Set up alert systems using hooks for notifications on at-risk accounts.
   - Develop reporting tools that pull data from the dashboard for analysis.
4. **Integrate User Management**: Implement user authentication and role management features for different levels of access.
5. **Testing and Optimization**: Conduct thorough testing for responsiveness, accessibility, and usability. Optimize performance and fix any identified issues.
6. **Deploy Application**: Prepare the application for deployment on a cloud hosting platform, ensuring continuous integration and delivery practices are in place.

## USER EXPERIENCE
The user experience centers on simplicity and efficiency. Customer Success Managers will navigate through a clean interface with intuitive controls, easily accessing account health metrics at a glance. Alerts will prompt timely actions, and detailed views will be just a click away. The application will be fully responsive, providing a seamless experience across all devices, whether on desktop or mobile.