Una página web responsive que es el inbox dentro de un crm de agentes inmobiliarios.
Generated Prompt
## APPLICATION OVERVIEW This application is a responsive web app designed for real estate agents to manage their incoming contacts through a centralized inbox within a CRM. It allows agents to efficiently receive and organize inquiries from their advertisements via chat and calls, enabling them to respond promptly and manage leads effectively. ## CORE FEATURES 1. **Contact Information Display**: Automatically identifies and displays the name and phone number of the user contacting the agent, along with the advertisement they are responding to, the date and time of the contact, and the responsible agent. 2. **Filtering System**: Offers multiple filters for managing contacts, including options for categorized views such as by status (managed/unmanaged), by specific advertisement, or by type (chats/calls). 3. **Search Functionality**: Provides a search bar to quickly locate contacts by name, phone number, or advertisement, enhancing usability and efficiency. 4. **Mass Actions**: Enables agents to perform bulk actions on selected items, such as marking multiple contacts as managed or deleting them, streamlining the management process. 5. **Overlay Interaction**: When an agent clicks on a chat or call item, it opens an overlay sidebar from the right side of the screen, allowing easy access to the conversation without navigating away from the inbox. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design should emphasize cleanliness and simplicity with ample white space, focusing on essential elements for ease of use. - **Color Mode**: Light theme featuring dark text on light backgrounds to ensure readability and a fresh appearance. - **Layout**: A two-column layout with a sidebar for filters and search on the left and the main inbox area on the right. The overlay sidebar for chat/call details slides in from the right. - **Typography**: Use a clean sans-serif font like 'Roboto' for body text and a slightly bolder version for headings to establish hierarchy. Text should be easy to read, with appropriate spacing. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for robust type checking and component management. - **Styling**: Tailwind CSS for utility-first styling, enabling rapid design iteration with a focus on responsive layouts. - **UI Components**: Utilize shadcn/ui for pre-built UI components that align with the minimalist aesthetic. - **State Management**: Implement Zustand or React Context for managing global state, if necessary, to handle contact data and filter states efficiently. ## IMPLEMENTATION STEPS 1. **Initial Setup**: Create a new React project with TypeScript and install necessary dependencies (Tailwind CSS, Zustand/shadcn/ui). 2. **Create Core Components**: Develop the main layout structure, including the sidebar for filters and the inbox area. Use Tailwind CSS for styling. 3. **Implement Contact Display**: Build a component to display the contact information with proper data-binding from state management. 4. **Add Filtering & Search**: Integrate the filtering and search functionalities. Ensure they update the displayed contacts dynamically based on user input. 5. **Overlay Functionality**: Implement the overlay sidebar for displaying chat/call details. Ensure it is responsive and provides a smooth user experience. 6. **Mass Actions Logic**: Develop the logic for selecting multiple contacts and executing bulk actions. Ensure feedback is provided to the user after actions are taken. 7. **Testing & Optimization**: Conduct thorough testing across devices and browsers to ensure responsiveness and usability. Optimize performance as necessary. ## USER EXPERIENCE Users will have a streamlined interaction with the inbox interface, where they can easily see incoming contacts organized by various filters. The search functionality allows quick access to specific inquiries. The overlay sidebar enables users to engage in conversations without losing context of their inbox, ensuring a smooth workflow. The minimalist design ensures that users can focus on the essential tasks of managing their contacts effectively.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
