Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a portal for QM Logics, featuring both an admin side and an employee side. The application will facilitate seamless management and interaction between administrators and employees, allowing for efficient workflow and information sharing.

## CORE FEATURES
1. **User Authentication**: Secure login and registration process for both administrators and employees to ensure data protection and personalized access.
2. **Admin Dashboard**: A comprehensive interface for administrators to manage users, view analytics, and oversee operations with ease.
3. **Employee Management**: Functionality for admins to add, edit, and remove employees, along with tracking their performance and activities.
4. **Task Management**: Employees can create, update, and track tasks assigned to them, enhancing productivity and accountability.
5. **Reporting Tools**: Generate reports on performance metrics, task completion, and user engagement to provide insights for decision-making.
6. **Notifications System**: A messaging feature to keep employees informed about important updates, tasks, and deadlines.

## 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 sidebar for navigation, a header for notifications, and a main content area for displaying relevant information and functionalities.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (for managing application state across components)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install required dependencies including Tailwind CSS and Redux.
2. **Design Layout**: Create a responsive layout with a sidebar and header using Tailwind CSS classes, ensuring proper spacing and alignment.
3. **Implement Authentication**: Develop user authentication using JWT tokens for secure login and registration functionality.
4. **Build Admin Dashboard**: Create the admin dashboard component, integrating features such as user management and reporting tools.
5. **Develop Employee Interface**: Design the employee side where users can manage tasks and view notifications.
6. **Set Up State Management**: Integrate Redux to manage application state, ensuring data flows smoothly between components.
7. **Testing and Debugging**: Conduct thorough testing of all functionalities, ensuring that the application is robust and user-friendly.
8. **Deploy Application**: Deploy the application using a suitable platform (e.g., Vercel or Netlify) for public access.

## USER EXPERIENCE
Users will have a straightforward experience navigating between the admin and employee sides of the application. Administrators will have quick access to user management and reporting tools through the dashboard, while employees can easily manage their tasks and receive notifications. The clean and minimalist design will enhance usability, ensuring that users can focus on their tasks without unnecessary distractions. The responsive design will ensure that the application is accessible on various devices, providing a seamless experience across platforms.