Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to manage and display real-time user data from Traccar, specifically focused on the management of chips. The main purpose is to enhance user experience by providing seamless access to user information without the need for a complex menu structure, promoting efficiency and simplicity in chip management.

## CORE FEATURES
1. **Real-Time User List**: Fetch and display a live list of users from Traccar, allowing for immediate access to user data.
2. **Chip Management**: Add, edit, or remove chips associated with users, all in a streamlined, user-friendly interface.
3. **Notifications**: Alert users to any updates or changes in the system, ensuring that they stay informed about critical information.
4. **User Profiles**: View detailed profiles for each user, including chip status and activity history.
5. **Search Functionality**: Quickly search for users or chips using a simple search bar, enhancing navigation within the application.
6. **Responsive Design**: Ensure the application is fully functional across various devices, maintaining usability on mobile and desktop.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will be clean and simple, featuring plenty of white space to enhance readability and focus on content. 
- **Color Mode**: Light theme with dark text on light backgrounds to ensure clarity and comfort during use.
- **Layout**: The main layout will consist of a header for navigation, a sidebar for quick access to different functionalities, and a central area for displaying user lists and chip management tools.
- **Typography**: Use modern sans-serif fonts for clarity and legibility, with a clear hierarchy to differentiate headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and type-safe application.
- **Styling**: Tailwind CSS to allow for rapid styling and consistent design.
- **UI Components**: Utilize shadcn/ui for pre-built components that adhere to the minimalist design aesthetic.
- **State Management**: Use React Context or Zustand for managing application state effectively across components.

## IMPLEMENTATION STEPS
1. **Set up the React project** with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui components.
2. **Design the application layout**, creating a header, sidebar, and main content area using Tailwind CSS for styling.
3. **Implement user authentication** if necessary, ensuring secure access to user data.
4. **Integrate the Traccar API** to fetch real-time user data, setting up appropriate hooks to handle data fetching.
5. **Build out the chip management functionality**, including forms for adding and editing chips and displaying user profiles.
6. **Add search functionality**, implementing a search bar that filters users based on input.
7. **Implement notifications** to alert users of any changes or updates in the application.
8. **Test the application across different devices** to ensure responsiveness and a smooth user experience.

## USER EXPERIENCE
Users will interact with a straightforward interface where they can easily navigate through the sidebar to access user lists and chip management features. The real-time data updates will provide immediate feedback, allowing users to stay informed about their chip statuses. The search functionality will facilitate quick access to information, while the minimalist design will ensure that users can focus on their tasks without distractions. The implementation of notifications will enhance engagement and keep users aware of important changes in the system.