54 lines
2.0 KiB
Markdown
54 lines
2.0 KiB
Markdown
# 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.
|