Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application that serves as an admin panel for managing a system of scratch cards. The application will enable administrators to edit websites, activate or deactivate deposit and withdrawal features, and manage user balances securely. The main purpose is to provide a comprehensive and secure management tool for overseeing user transactions and site functionalities.

## CORE FEATURES
1. **User Management**: Admins can add or remove funds from users' accounts, track user activity, and manage user roles and permissions.
2. **Site Configuration**: Tools for editing website content and layout, allowing admins to customize the site dynamically.
3. **Transaction Control**: Enable or disable deposit and withdrawal functionalities for users, with real-time updates reflecting status changes.
4. **Security Features**: Implement robust security measures, including protection against SQL injections and other vulnerabilities, ensuring data integrity and safety.
5. **Audit Logs**: Maintain logs of admin actions and user transactions to provide transparency and accountability.
6. **User Notifications**: Notify users about changes in their account status or site features via email or in-app alerts.

## 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 application will feature a sidebar for navigation, a main content area for displaying current settings and controls, and a responsive design to ensure usability across devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Query for managing server state and synchronization

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary libraries (Tailwind CSS, shadcn/ui).
2. **Create the Layout**: Design the main layout with a sidebar for navigation and a content area that adapts based on selected features.
3. **Implement User Management**: Develop features for adding/removing funds to users, ensuring all actions are logged.
4. **Site Configuration Module**: Build the site configuration interface with editable components that reflect on the live site.
5. **Transaction Control Features**: Create toggles for enabling/disabling deposits and withdrawals, including necessary backend calls.
6. **Security Implementations**: Integrate security measures such as input validation, parameterized queries, and secure authentication.
7. **Testing and Debugging**: Conduct thorough testing to identify and fix any vulnerabilities or bugs.
8. **Deploy the Application**: Prepare for deployment, ensuring all environment variables and production settings are properly configured.

## USER EXPERIENCE
Users will interact with the admin panel through a clean and intuitive interface. Admins can navigate easily using the sidebar, access different modules, and perform actions with minimal clicks. The application will provide immediate feedback on actions taken (e.g., successful addition of funds or updates to site settings) and ensure a seamless experience with clear notifications and a responsive design that works well on various devices.