# UI Restructuring Plan

## Objective
Restructure the graphical interface according to the guidelines:
- 2-level sidebar (Apps -> Functions).
- Top search bar.
- Tabbed interface for the main viewport.
- Responsive design.

## Components to Create/Update

### 1. TabContext (`src/frontend/src/contexts/TabContext.tsx`)
- **State**:
  - `tabs`: Array of `{ id: string, path: string, label: string, icon?: ReactNode }`.
  - `activeTabPath`: string.
- **Actions**:
  - `openTab(tab)`: Adds tab if not exists, sets as active.
  - `closeTab(path)`: Removes tab. If active, switches to neighbor.
  - `setActiveTab(path)`: Updates active tab.
- **Persistence**: Save `tabs` and `activeTabPath` to `localStorage`.

### 2. TabsBar (`src/frontend/src/components/TabsBar.tsx`)
- Renders the list of open tabs using MUI `Tabs` or a custom horizontal list.
- Handles click (navigate) and close actions.
- Mobile: Show as a popup or scrollable bar.

### 3. Sidebar (`src/frontend/src/components/Sidebar.tsx`)
- Refactor existing Drawer content.
- Implement nested lists (Accordion style) for Modules.
- Structure:
  - **Core**: Dashboard, Calendar, Events, Clients, Location, Articles, Resources.
  - **Warehouse**: Dashboard, Articles, Locations, Movements, Stock, Inventory.
  - **Purchases**: Suppliers, Orders.
  - **Sales**: Orders.
  - **Production**: Dashboard, Orders, BOM, Work Centers, Cycles, MRP.
  - **Admin**: Modules, Auto Codes, Custom Fields.

### 4. SearchBar (`src/frontend/src/components/SearchBar.tsx`)
- Input field in AppBar.
- Filters available menu items.
- On selection, opens the corresponding tab.

### 5. Layout (`src/frontend/src/components/Layout.tsx`)
- Integrate `Sidebar`, `SearchBar`, and `TabsBar`.
- Ensure responsive behavior.

## Execution Steps
1. Create `TabContext`.
2. Create `TabsBar`.
3. Refactor `Layout` to include `TabsBar` and use `TabContext`.
4. Create `Sidebar` with nested structure.
5. Create `SearchBar` and integrate into `Layout`.
6. Verify functionality.