Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Impersonate Form is a web application designed to facilitate user impersonation across a hierarchical structure consisting of Customer Accounts, Workspaces, and Tenants. Users can seamlessly switch between different levels of access, allowing for efficient management and oversight within the system.

## CORE FEATURES
1. **User Impersonation from Customer Account**: Users logged into a Customer Account can impersonate either Workspace or Tenant users, providing an overview and control of all associated entities.
   
2. **User Impersonation from Workspace**: Users logged into a Workspace can impersonate Tenant users if they exist, streamlining the process of managing tenant-level operations.
   
3. **Dynamic Tab Functionality**: The UI features two distinct tabs: one for impersonating from the Customer Account to Workspaces or Tenants, and another for impersonating from a Workspace to Tenant users, enhancing user navigation and experience.
   
4. **Tenant Management Visibility**: Workspaces can exist without tenants, and the application dynamically adjusts the impersonation options based on the availability of tenants under a Workspace.
   
5. **User Role Management**: Different roles and permissions can be established, governing what actions can be performed during impersonation, ensuring security and proper access control.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design characterized by clean lines, ample white space, and a focus on functionality. Emphasize clarity and ease of use.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and reduce eye strain.
- **Layout**: The application features a simple two-tab layout at the top, with each tab containing relevant impersonation functionality. The main interface consists of a user list that updates dynamically based on the selected tab.
- **Typography**: Use a sans-serif font like 'Inter' for body text and headings to ensure readability, with a clear hierarchy (e.g., larger, bolder fonts for headings and slightly smaller fonts for descriptions).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and type-safe application.
- **Styling**: Tailwind CSS for rapid UI development and maintaining a consistent design.
- **UI Components**: Utilize shadcn/ui for pre-designed components that align with the minimalist aesthetic.
- **State Management**: Consider using React Context or Zustand for managing the application's state effectively.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and any necessary state management libraries.
3. **Create the Layout**: Develop the main application layout with a two-tab navigation component at the top.
4. **Implement User Impersonation Logic**: Create functions to handle impersonation based on the logged-in user's account type (Customer Account vs. Workspace).
5. **Dynamic User List**: Develop components that display users based on the selected tab, ensuring the list updates according to the impersonation level.
6. **Integrate Routing**: If necessary, integrate routing using React Router to allow for more complex navigation scenarios.
7. **Test Functionality**: Conduct thorough testing to ensure impersonation works as expected and that the application remains responsive across devices.

## USER EXPERIENCE
The user journey begins in the Customer Account, where they can easily navigate to the impersonation tabs. Selecting the first tab allows users to view and impersonate Workspaces or Tenants, while the second tab provides a streamlined process for Workspace users to switch to Tenant users. The minimalist design ensures that users can focus on their tasks without distractions, while the responsive layout adapts seamlessly to various screen sizes, enhancing usability on both desktop and mobile devices.