FRONTEND LAYER

flowchart TD
    %% ============================================
    %% FRONTEND LAYER - React/TypeScript
    %% ============================================
    START("fa:fa-play Start: User")
    UI("fa:fa-desktop React UI<br/>pi-box-calculator/")
    COMPONENTS("fa:fa-shapes Components<br/>src/components/")
    REDUX("fa:fa-cogs Redux Store<br/>src/app/configurationSlice.ts")
    
    %% Modułowe komponenty
    TERMINALS("fa:fa-plug Terminale<br/>564 modele")
    GLANDS("fa:fa-circle-dot Dławiki<br/>Rozmiar, materiał")
    BUTTONS("fa:fa-toggle-on Przyciski<br/>Pojedyncze/Podwójne")
    LAMPS("fa:fa-lightbulb Lampki<br/>5 kolorów")
    ENCLOSURES("fa:fa-box Obudowy<br/>Dobór optymalnej")
    SWITCHES("fa:fa-sliders Przełączniki<br/>ON/OFF")
    VOLTMETERS("fa:fa-gauge Woltomierze<br/>5 zakresów")
    AMMETERS("fa:fa-arrows-rotate Amperomierze<br/>Pomiar bezpośredni/CT")
    ADDITIONAL("fa:fa-plus-circle Dodatkowe<br/>Akcesoria")
    
    %% ============================================
    %% API COMMUNICATION LAYER
    %% ============================================
    API_REST("fa:fa-network-wired REST API<br/>calculator/api/")
    API_OPTIONS("GET /api/modular-configuration/options/")
    API_CREATE("POST /api/modular-configuration/create/")
    
    %% ============================================
    %% BACKEND LAYER - Django DDD
    %% ============================================
    DJANGO("fa:fa-server Django Backend<br/>calculator/")
    API_VIEWS("fa:fa-code API Views<br/>modular_configuration_views.py")
    DOMAIN_SERVICES("fa:fa-sitemap Domain Services<br/>domain/services/")
    REPOSITORIES("fa:fa-database Repository Pattern<br/>infrastructure/repositories/")
    MODELS("fa:fa-table Django Models<br/>models.py")
    
    %% Serwisy biznesowe
    ORDER_SERVICE("fa:fa-calculator Order Service<br/>order_service.py")
    MODULAR_SERVICE("fa:fa-puzzle-piece Modular Config Service<br/>modular_configuration_service.py")
    DIMENSIONS("fa:fa-cube Component Dimensions<br/>Wymiary, kolizje, siatka")
    
    %% ============================================
    %% DATA LAYER
    %% ============================================
    DATABASE("fa:fa-database PostgreSQL<br/>Products, Orders, Configurations")
    
    %% Modele danych
    MODEL_ORDER("Order<br/>JSON structure")
    MODEL_ENCLOSURE("Enclosure<br/>Wymiary, certyfikaty")
    MODEL_TERMINAL("Terminal<br/>Przekrój, kolor, napięcie")
    MODEL_GLAND("Gland<br/>Parametry techniczne")
    MODEL_CONFIG("ModularConfiguration<br/>JSONField specifications")
    
    %% ============================================
    %% ORDER MANAGEMENT
    %% ============================================
    ORDER_MGMT("fa:fa-shopping-cart Order Management")
    PRICE_CALC("fa:fa-euro-sign Obliczanie cen<br/>Decimal precision")
    XML_GEN("fa:fa-file-code XML Generation<br/>Towary i usługi")
    ORDER_SUMMARY("fa:fa-chart-line Order Summary<br/>Top 20, statystyki")
    ORDER_DETAILS("fa:fa-list Order Details<br/>Akordeony, pełna zawartość")
    
    %% ============================================
    %% CONNECTIONS - User Flow
    %% ============================================
    START --> UI
    UI --> COMPONENTS
    COMPONENTS --> REDUX
    
    %% Redux do komponentów modułowych
    REDUX --> TERMINALS
    REDUX --> GLANDS
    REDUX --> BUTTONS
    REDUX --> LAMPS
    REDUX --> ENCLOSURES
    REDUX --> SWITCHES
    REDUX --> VOLTMETERS
    REDUX --> AMMETERS
    REDUX --> ADDITIONAL
    
    %% Komponenty do API
    TERMINALS --> API_REST
    GLANDS --> API_REST
    BUTTONS --> API_REST
    LAMPS --> API_REST
    ENCLOSURES --> API_REST
    SWITCHES --> API_REST
    VOLTMETERS --> API_REST
    AMMETERS --> API_REST
    ADDITIONAL --> API_REST
    
    %% API endpoints
    API_REST --> API_OPTIONS
    API_REST --> API_CREATE
    
    %% API do Django
    API_OPTIONS --> DJANGO
    API_CREATE --> DJANGO
    DJANGO --> API_VIEWS
    API_VIEWS --> DOMAIN_SERVICES
    
    %% Domain Services do Repository
    DOMAIN_SERVICES --> REPOSITORIES
    REPOSITORIES --> MODELS
    
    %% Serwisy biznesowe
    DOMAIN_SERVICES --> ORDER_SERVICE
    DOMAIN_SERVICES --> MODULAR_SERVICE
    DOMAIN_SERVICES --> DIMENSIONS
    
    %% Modele do bazy danych
    MODELS --> MODEL_ORDER
    MODELS --> MODEL_ENCLOSURE
    MODELS --> MODEL_TERMINAL
    MODELS --> MODEL_GLAND
    MODELS --> MODEL_CONFIG
    
    MODEL_ORDER --> DATABASE
    MODEL_ENCLOSURE --> DATABASE
    MODEL_TERMINAL --> DATABASE
    MODEL_GLAND --> DATABASE
    MODEL_CONFIG --> DATABASE
    
    %% Repository do bazy
    REPOSITORIES --> DATABASE
    
    %% Zarządzanie zamówieniami
    ORDER_SERVICE --> ORDER_MGMT
    ORDER_MGMT --> PRICE_CALC
    ORDER_MGMT --> XML_GEN
    ORDER_MGMT --> ORDER_SUMMARY
    ORDER_MGMT --> ORDER_DETAILS
    
    %% Powrót do UI (dla widoków Django)
    ORDER_SUMMARY -.-> UI
    ORDER_DETAILS -.-> UI
    
    %% ============================================
    %% STYLING
    %% ============================================
    style START color:#FFFFFF, fill:#2196F3, stroke:#2196F3
    style UI color:#FFFFFF, fill:#4CAF50, stroke:#4CAF50
    style REDUX color:#FFFFFF, fill:#FF9800, stroke:#FF9800
    style API_REST color:#FFFFFF, fill:#9C27B0, stroke:#9C27B0
    style DJANGO color:#FFFFFF, fill:#F44336, stroke:#F44336
    style DOMAIN_SERVICES color:#FFFFFF, fill:#00BCD4, stroke:#00BCD4
    style DATABASE color:#FFFFFF, fill:#607D8B, stroke:#607D8B
    style ORDER_MGMT color:#FFFFFF, fill:#795548, stroke:#795548
    style XML_GEN color:#FFFFFF, fill:#E91E63, stroke:#E91E63
    style PRICE_CALC color:#FFFFFF, fill:#FF5722, stroke:#FF5722