System Architecture

flowchart TB
        PRD["System Architecture"]
    
    subgraph Frontend
        orders_page_TypeScriptReact["orders_page_TypeScriptReact (3)"]
        view_order_page_TypeScriptReact["view_order_page_TypeScriptReact (4)"]
        create_order_page_TypeScriptReact["create_order_page_TypeScriptReact (5)"]
        order_components_TypeScriptReact["order_components_TypeScriptReact (6)"]
    end
    
    subgraph Backend
        order_api_Python["order_api_Python (1)"]
        order_models_Python["order_models_Python (2)"]
        database_config_Python["database_config_Python (7)"]
    end
    
    PRD --> Frontend
    PRD --> Backend

    order_api_Python -->|uses| order_models_Python
    orders_page_TypeScriptReact -->|uses| order_api_Python
    orders_page_TypeScriptReact -->|uses| order_components_TypeScriptReact
    view_order_page_TypeScriptReact -->|uses| order_api_Python
    create_order_page_TypeScriptReact -->|uses| order_api_Python
    create_order_page_TypeScriptReact -->|uses| order_components_TypeScriptReact
    
    classDef frontend fill:#FFF3E0,stroke:#F57C00,stroke-width:2px
    classDef backend fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
    classDef shared fill:#E8F5E9,stroke:#388E3C,stroke-width:2px
    classDef system fill:#E0E0E0,stroke:#616161,stroke-width:3px
    
    class orders_page_TypeScriptReact,view_order_page_TypeScriptReact,create_order_page_TypeScriptReact,order_components_TypeScriptReact frontend
    class order_api_Python,order_models_Python,database_config_Python backend
    class PRD system