```mermaid
flowchart TD

%% ================================
%%        INICIO DEL FLUJO
%% ================================
subgraph "App Initialization"
    A[Vendor logs in or opens the app] --> B[Layout.jsx loads profile using base44 auth me and applies ProtectedRoute]
    B --> C[VendorDashboard.jsx summarizes listEvents and listStaff and updates layout via auth updateMe]
end

%% ================================
%%        MAIN MENU
%% ================================
C --> M{Main Menu}

M --> OM[Orders]
M --> WF[Workforce]
M --> TM[Team and Hubs]
M --> FN[Finance]
M --> SC[Scheduling]
M --> CM[Communication and CRM]
M --> AN[Analytics and Auditing]
M --> TB[Task Board]
M --> FW[Financial Widgets]

%% ================================
%%       ORDER MANAGEMENT
%% ================================
subgraph "Order Management"
    OM --> O1[VendorOrders.jsx filters vendor events and uses ConflictDetection]
    O1 --> O2{Are there orders?}
    O2 -- Yes --> O3[EventDetail.jsx shows order details]
    O3 --> O4[SmartAssignModal and SmartAssignmentEngine fill shifts and call updateEvent]
    O1 --> O5[CreateInvoiceModal builds invoice roles from Event list and creates Invoice]
end

%% ================================
%%     WORKFORCE MANAGEMENT
%% ================================
subgraph "Workforce Management"
    WF --> W1[StaffDirectory.jsx lists staff using Staff list]
    W1 --> W2[AddStaff.jsx and EditStaff.jsx create or update Staff]
    W1 --> W3[StaffOnboarding.jsx consolidates data and creates Staff]
    W1 --> W4[StaffAvailability.jsx tries to use WorkerAvailability list]
    W4 --> WX[Missing entity: WorkerAvailability not present in DataConnect schema]
end

%% ================================
%%     TEAM AND HUB MANAGEMENT
%% ================================
subgraph "Team and Hub Management"
    TM --> T1[Teams.jsx manages internal team]
    T1 --> T2[Invite Managers dialog]
    T1 --> T3[Create or view hubs dialog]
    T1 --> T4[Manage favorite or blocked staff]
end

%% ================================
%%       FINANCE MANAGEMENT
%% ================================
subgraph "Finance Management"
    FN --> F1[VendorRates.jsx and VendorRateCard read and create VendorRate]
    FN --> F2[SmartVendorOnboarding.jsx creates Vendor and VendorRate via base44 entities]
    F2 --> F3[Vendor connector exposes list, get, filter, create, update and delete operations]
end

%% ================================
%%      SCHEDULING AND CALENDAR
%% ================================
subgraph "Scheduling"
    SC --> S1[Schedule.jsx shows weekly shift calendar using listEvents]
end

%% ================================
%%      COMMUNICATION AND CRM
%% ================================
subgraph "Communication and CRM"
    CM --> C1[Messages.jsx and MessageInput.jsx use Conversation and Message for list create and update]
    CM --> C2[Business.jsx manages leads and clients using Business, Event and Invoice]
end

%% ================================
%%     ANALYTICS AND AUDITING
%% ================================
subgraph "Analytics and Auditing"
    AN --> A1[Reports.jsx combines listEvents, listStaff and listInvoice]
    AN --> A2[VendorPerformance.jsx shows performance metrics]
    AN --> A3[ActivityLog.jsx filters ActivityLog for the user]
    AN --> A4[VendorCompliance.jsx lists and captures Certification per staff member]
end

%% ================================
%%        TASK BOARD
%% ================================
subgraph "Task Board"
    TB --> TSK[TaskBoard.jsx tries to use Task entity]
    TSK --> TX[Missing entity: Task not present in schema]
end

%% ================================
%%     FINANCIAL WIDGETS (MOCK)
%% ================================
subgraph "Financial Widgets"
    FW --> FW1[VendorInvoices.jsx uses mock data without real GraphQL]
    FW --> FW2[VendorPerformance.jsx uses mock metrics without real GraphQL]
end

%% ================================
%%       OPTIONAL STYLING
%% ================================
style A fill:#f4f4f5,stroke:#333,stroke-width:2px
style C fill:#e0f2fe,stroke:#0284c7,stroke-width:2px
style O1 fill:#f0fdf4,stroke:#16a34a,stroke-width:1px
style W1 fill:#fefce8,stroke:#ca8a04,stroke-width:1px
style T1 fill:#f5f3ff,stroke:#7c3aed,stroke-width:1px
style F1 fill:#fdf2f8,stroke:#db2777,stroke-width:1px
style WX fill:#fee2e2,stroke:#b91c1c,stroke-width:2px
style TX fill:#fee2e2,stroke:#b91c1c,stroke-width:2px
style FW1 fill:#fce7f3,stroke:#be185d,stroke-width:1px
style FW2 fill:#fce7f3,stroke:#be185d,stroke-width:1px