Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
NAG-IMS is a web application designed to manage user roles, vendors, and purchases with an emphasis on a clean, minimalist user experience. The application supports multiple user roles (admin, manager, staff) and features a robust authentication flow alongside role-based access to various functionalities.

## CORE FEATURES
1. **User Authentication**: Secure login with email and password, including Google sign-in. Validation for required fields and session management are implemented to enhance security.
2. **Role-Based Dashboard**: A customized home dashboard that adapts to the user's role, showcasing relevant sections such as Users, Vendors, and Purchases.
3. **User Management**: Admin functionality to add, edit, and delete users, including granular control over user roles and activation status.
4. **Vendor Management**: Create, edit, and manage vendors with a ledger for tracking transactions, including options for soft deletion and detailed views.
5. **Purchase Tracking**: Admin and manager access to record and manage purchases, including bill image uploads and extraction of data from images for easy entry.
6. **Responsive Design**: The application maintains usability across devices, adapting layouts for mobile and tablet views to ensure an optimal user experience.

## 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 includes a top navigation bar for easy access to profile and logout options, a side panel for role-specific features, and a central content area that dynamically updates based on user interactions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux (if more complex state management is needed)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React app with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui).
2. **Configure Routing**: Set up routing for different app sections (login, home, users, vendors, purchases).
3. **Implement Authentication**: Develop authentication components for login, sign up, and session management, ensuring proper redirects based on user state.
4. **Design the Dashboard**: Build the home dashboard layout with role-based tiles, integrating responsive design principles.
5. **Create User Management Features**: Implement CRUD operations for user management, ensuring role-based access control.
6. **Develop Vendor and Purchase Management**: Create forms and functionalities for managing vendors and purchases, including image upload capabilities.
7. **Handle State Management**: Use context or Redux to manage application state across components for users, vendors, and purchases.
8. **Test and Optimize**: Conduct usability testing to ensure a smooth user experience across devices and refine based on feedback.

## USER EXPERIENCE
Key user interactions include signing in via email or Google, navigating through a role-specific dashboard, managing user or vendor details, and executing purchases. The application provides inline error messages for form validations and uses toast notifications for confirmation messages. Users can easily switch between modules while retaining their search and filter settings, ensuring a seamless experience.
```