Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for managing navigation zones and ports, allowing users to list, create, and edit zones efficiently. The application will utilize a clean, minimalist interface to ensure a smooth user experience while maintaining the existing design aesthetic.

## CORE FEATURES
1. **List Navigation Zones**: Users can view a dropdown of navigation zones, including associated ports, with options for filtering and searching.
2. **Create Zone**: A modal allows users to create a new navigation zone by entering a name and selecting associated ports, with error handling for duplicate names.
3. **Edit Zone**: Users can modify existing zones, including their names and associated ports, with appropriate error messaging for invalid inputs.
4. **List Ports**: A feature to list available ports, with options to filter by status and zone association.
5. **Create Port**: Users can add new ports through a modal, ensuring that duplicate names prompt error messages.
6. **Refresh List**: The application automatically refreshes the zone and port lists after any create or edit actions to reflect the latest data.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space to enhance readability and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and legibility.
- **Layout**: The main layout will feature a top navigation bar with dropdowns for zone selection, a central area for displaying the lists, and modal pop-ups for creating or editing zones and ports.
- **Typography**: Use sans-serif fonts such as "Roboto" or "Arial" for clarity, with a clear hierarchy: larger headings for section titles, medium for subheadings, and regular for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type safety and scalability.
- **Styling**: Tailwind CSS to ensure a responsive and adaptive layout while maintaining the minimalist aesthetic.
- **UI Components**: Use shadcn/ui components for standardizing UI elements and ensuring consistency across the application.
- **State Management**: Utilize React's built-in state management for simplicity, or consider using Zustand or Recoil if more advanced state management is necessary.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Global API Service**: Implement an ApiService that handles API calls with baseURL, token, userId, and email, ensuring headers are set correctly.
3. **Develop Core Features**:
   - Implement the functionality for listing zones and ports, including dropdowns and search capabilities.
   - Create modals for zone and port creation, ensuring error handling for duplicates.
   - Implement editing functionality for zones, allowing users to update names and associated ports.
4. **Establish Routing**: If necessary, set up routing to manage different views or states within the application.
5. **Test Functionality**: Conduct thorough testing of all features, ensuring error handling works as specified and that the UI remains responsive.

## USER EXPERIENCE
Users will navigate the application via a top navigation bar, selecting zones from a dropdown. They can easily create or edit zones and ports through intuitive modal dialogs. Upon performing any actions, such as creating or editing, the application will refresh the lists to provide immediate feedback on changes. The minimalist design will ensure that users can focus on the tasks at hand without unnecessary distractions, while the light color scheme will provide a comfortable viewing experience.