flowchart TD
%% ============================
%% CLIENT-READY STYLED DIAGRAM
%% ============================
%% === Nodes with Icons ===
U[🧑💻 User]
F[💻 Axion Frontend]
A[🔐 Auth0]
D[(🗄️ Axion Database)]
S3[(☁️ Document Storage)]
SCH[⚙️ Axion<br>Scheduler / Worker]
T[📦 TruID API]
CB[🔁 Axion Endpoint]
%% === Flows ===
U -->|Login| F
F -->|Authenticate via| A
F -->|Save transaction details| D
F -->|Upload documents| S3
F -->|Schedule upload to TruID| SCH
S3 -->|Retrieve documents| SCH
SCH -->|Send documents| T
T -->|Callback with status| CB
CB -->|Update status| D
CB -->|If complete → Get results| T
T -->|Return results| CB
CB -->|Save results| D
%% === Styling ===
classDef client fill:#e8f5e9,stroke:#2e7d32,stroke-width:1px,color:#000;
classDef frontend fill:#e3f2fd,stroke:#1565c0,stroke-width:1px,color:#000;
classDef backend fill:#fff3e0,stroke:#ef6c00,stroke-width:1px,color:#000;
classDef storage fill:#f3e5f5,stroke:#6a1b9a,stroke-width:1px,color:#000;
classDef external fill:#ffebee,stroke:#c62828,stroke-width:1px,color:#000;
%% === Assign classes ===
class U client;
class F,A,CB,SCH backend;
class D,S3 storage;
class T external;