Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web dashboard designed for site administrators to manage and analyze site performance. It will include functionalities such as user bans and comprehensive analytics, ensuring admins have the tools they need to maintain and optimize the site efficiently.

## CORE FEATURES
1. **User Management**: Admins can view and manage all users, including the ability to ban users directly from the dashboard.
2. **Analytics Dashboard**: Offers detailed insights into site performance metrics, including user engagement, traffic sources, and activity logs.
3. **Content Moderation**: Allows for the review and management of user-generated content, ensuring compliance with community standards.
4. **Real-Time Notifications**: Admins receive alerts for critical actions, such as user bans and flagged content.
5. **Custom Reporting**: Generate reports based on selected metrics and time frames to assess site performance and user behavior.
6. **Settings Management**: Allows admins to adjust site settings and preferences, including user permissions and analytics configurations.

## 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**: A sidebar for navigation, a main content area for displaying analytics and user management features, and a notification area for alerts and messages.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React's Context API or Redux if needed for state management across components.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript template. Install Tailwind CSS and shadcn/ui for styling.
2. **Create Folder Structure**: Organize components, pages, and styles into respective directories for maintainability.
3. **Build Navigation**: Develop a sidebar navigation component that routes to the different sections of the dashboard.
4. **Develop Core Features**:
   - Implement user management with CRUD operations for user data.
   - Create an analytics dashboard component that fetches and displays site performance metrics.
   - Set up real-time notifications using WebSocket or similar technology.
5. **Styling**: Apply Tailwind CSS classes to all components, ensuring adherence to the design specifications.
6. **Testing**: Conduct unit tests and integration tests to ensure all features work as expected.
7. **Deployment**: Prepare the application for deployment, ensuring all environment variables and configurations are set correctly.

## USER EXPERIENCE
Key user interactions will include seamless navigation through the sidebar, quick access to analytics and user management features, and a responsive design for mobile accessibility. Admins will have an intuitive experience with clear calls to action and easily digestible visual data, allowing for efficient site management.