Response Details (ID: 170 - UIGEN-X-32B-0727)

Text Before HTML:

We are creating a modal window for a business application that allows users to edit complex data structures (hierarchical organizational charts) with drag-and-drop functionality.

Requirements:
1. The modal should be visually appealing and professional, suitable for a business application.
2. It should have a clean, modern design with a dark theme similar to the provided template's aesthetic.
3. The modal should include:
   - A header with a title and a close button.
   - A main content area that displays the organizational chart as a hierarchical structure (tree or nodes).
   - The ability to drag and drop nodes to restructure the hierarchy.
   - Each node should be editable (double-click to edit text).
   - Buttons to add, delete, and reorder nodes.
4. We'll use Tailwind CSS for styling and vanilla JavaScript for interactivity.

Approach:
- We'll create a modal that is fixed to the center of the screen.
- The modal will have a semi-transparent backdrop.
- The organizational chart will be represented as a tree of divs with absolute positioning (or using CSS grid/flex) to create the hierarchy.
- We'll use JavaScript to handle drag-and-drop events and update the structure accordingly.
- For simplicity, we'll use a JSON structure to represent the data and update the DOM accordingly.

Note: We are not using any external libraries for drag-and-drop to keep it vanilla.

Let's design the modal with the following structure:

Modal:
  - Backdrop (fixed, full screen, semi-transparent)
  - Modal container (fixed, centered, max-width, max-height, overflow auto)
    - Header (with title and close button)
    - Body (with the organizational chart and controls)
    - Footer (with action buttons)

Organizational Chart:
  - We'll use a recursive structure to render the tree.
  - Each node will be a div that can be dragged.
  - We'll use a grid or flex to arrange the nodes and their children.

We'll define a data structure for the organization:

Example:
const data = {
  id: 1,
  name: "CEO",
  children: [
    {
      id: 2,
      name: "Manager 1",
      children: [
        { id: 3, name: "Employee 1" },
        { id: 4, name: "Employee 2" }
      ]
    },
    {
      id: 5,
      name: "Manager 2",
      children: [
        { id: 6, name: "Employee 3" }
      ]
    }
  ]
};

We'll create functions to:
  - Render the tree from the data.
  - Handle drag events (start, over, drop) to move nodes.
  - Handle double-click to edit a node.
  - Add and delete nodes.

We'll use Tailwind classes for styling, and we'll define some custom styles for the nodes and connections.

Let's code accordingly.


# Organizational Chart Editor Modal

I'll create a sophisticated modal window for editing hierarchical organizational charts with drag-and-drop functionality using Tailwind CSS and vanilla JavaScript.

Generated HTML Page:

Text After HTML:

## Key Features of the Organizational Chart Editor

1. **Modern Dark Theme Design**:
   - Professional dark UI with indigo accents
   - Clean, card-based layout with subtle shadows
   - Responsive design that works on all screen sizes

2. **Interactive Organizational Chart**:
   - Drag-and-drop nodes to restructure the hierarchy
   - Visual connections between nodes
   - Different node types (executive, manager, employee, founder)

3. **Node Management**:
   - Add new nodes with different types
   - Delete selected nodes
   - Rename existing nodes
   - Context menu for node operations

4. **Connection Management**:
   - Add connections between nodes
   - Visual representation of relationships

5. **Zoom Controls**:
   - Zoom in/out for better visibility
   - Reset zoom to default view

6. **Data Management**:
   - Save changes to the organizational structure
   - Export functionality (simulated)

7. **User Experience**:
   - Context menu for node operations
   - Visual feedback for selected nodes
   - Smooth animations and transitions

The modal provides a professional interface for managing complex hierarchical data structures with an intuitive drag-and-drop interface. The design follows modern UI principles with a focus on usability and visual appeal.