zentral/docs/development/devlog/2025-12-03_ui_restructuring.md

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.