Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a full SaaS dashboard designed for enterprise-level users, focusing on finance, analytics, and CRM functionalities. The application will provide advanced data visualization and management tools, enabling users to gain actionable insights through real-time updates and complex filtering options.

## CORE FEATURES
- **Advanced Data Tables**: Flexible tables that allow users to manage and analyze large datasets efficiently with features like sorting, pagination, and inline editing.
- **Complex Filters**: Multiple filtering options to help users narrow down data according to various parameters and criteria for precise analytics.
- **Charts and Analytics**: Integration of interactive charts and graphs to visualize data trends and performance metrics in a user-friendly manner.
- **Role-Based UI**: Customizable user interfaces based on different user roles, ensuring relevant features and data access according to user permissions.
- **Real-Time Updates**: Automatic data refresh capabilities that keep users informed with the latest information without needing to reload the page.
- **Notifications**: Alerts and notifications system to inform users of important updates and changes in data or system status.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Focus on clean, simple design with abundant white space to enhance readability and usability. 
- **Color Mode**: Light theme with dark text on light backgrounds to ensure clarity and reduce eye strain.
- **Layout**: A structured layout that organizes data into easily navigable sections, including a sidebar for navigation and a main content area for data display. The dashboard should have a grid system to accommodate different data visualizations.
- **Typography**: Utilize a modern sans-serif font for headings (e.g., 'Roboto' or 'Montserrat') and a clean serif font for body text to enhance readability and create visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for scalable, type-safe code.
- **Styling**: Tailwind CSS for rapid styling, ensuring a responsive and modern design.
- **UI Components**: Use shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Utilize Zustand or Redux for managing application state effectively, depending on complexity.

## IMPLEMENTATION STEPS
1. Set up a new React application using Create React App with TypeScript.
2. Install Tailwind CSS and configure it according to project needs.
3. Set up Zustand or Redux for state management.
4. Create the main layout structure including navigation, sidebar, and content area.
5. Implement advanced data tables using TanStack Table for data management.
6. Integrate chart libraries (e.g., Chart.js or Recharts) for data visualization.
7. Build out the complex filters component to allow users to filter displayed data.
8. Implement role-based UI features and ensure user authentication flows are in place.
9. Set up WebSockets for real-time updates and notifications.
10. Test the application across various devices to ensure full responsiveness and usability.

## USER EXPERIENCE
The user experience focuses on intuitive navigation and seamless interactions. Users will easily switch between different sections of the dashboard using the sidebar, access data tables, apply filters, and view analytics at a glance. Notifications will provide timely updates without disrupting the workflow, and role-based UI will ensure a tailored experience for each user type. The overall design will prioritize clarity and accessibility, making it easy for users to derive insights and manage their operations effectively.