Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to manage navigation zones and their associated ports, allowing users to list, create, and edit these entities efficiently. It utilizes a clean and minimalist interface, focusing on a straightforward user experience while adhering to existing design principles.

## CORE FEATURES
1. **List Zones and Ports**: Users can view a dropdown of navigation zones that includes associated ports, making it easy to select and manage them.
2. **Create New Zone**: Users can create a new navigation zone through a simple modal interface, with error handling for duplicate names.
3. **Edit Zone**: Users can modify existing navigation zones, including adding or removing associated ports.
4. **List Ports**: A feature that allows users to view ports based on specific filters, enhancing navigation and management of ports.
5. **Create New Port**: Users can add new ports with error handling for duplicate entries to ensure data integrity.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will feature a clean and simple aesthetic with ample white space and a minimal color palette, ensuring user focus on functionality.
- **Color Mode**: Light theme with dark text on light backgrounds, promoting readability and a modern look.
- **Layout**: The main layout will consist of a sidebar for navigation zones and a content area displaying details of selected zones and ports. Modals will be used for creating and editing zones and ports without disrupting the main workflow.
- **Typography**: Use a modern sans-serif font for clear readability, with varying weights to establish a hierarchy between titles, subtitles, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainability.
- **Styling**: Tailwind CSS for utility-first styling, allowing rapid design adjustments without leaving the HTML structure.
- **UI Components**: Incorporate shadcn/ui for consistent and accessible UI components.
- **State Management**: Utilize React Context or a state management library like Zustand for global state management of user data and API interactions.

## IMPLEMENTATION STEPS
1. **Setup Project**: Create a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Define URL Parameters**: Implement logic to read URL parameters using `URLSearchParams` and set up the global `ApiService` to manage baseURL, token, userId, and email.
3. **Create API Service**: Build a global `ApiService` that handles all API requests with appropriate headers and error handling.
4. **Implement Core Features**: 
   - Create components for listing zones and ports, including dropdowns and modals.
   - Implement functions to handle creating, editing, and listing zones and ports using the defined API endpoints.
5. **Error Handling**: Ensure controlled error handling for missing parameters and duplicate entries.
6. **Testing**: Conduct thorough testing for each feature to ensure functionality and a smooth user experience.

## USER EXPERIENCE
Users will interact with a minimalist interface that allows for quick navigation between zones and ports. Dropdowns will facilitate zone selection, while modals will provide an intuitive way to create or edit zones and ports. The application will refresh lists automatically after any changes, maintaining a dynamic user experience without requiring page reloads. Overall, the focus will be on simplicity and efficiency, allowing users to manage zones and ports seamlessly.