INTERACT
Bulk Sale
Wholesale Ordering Platform

flowchart TD
    A[Open Bulk Sale App] --> B[Login Screen]
    B --> C[Enter Username + Password]
    C --> D{Valid?}
    D -->|Yes| E[Save Session to localStorage]
    D -->|No| F[Show Error Toast]
    F --> C
    E --> G[Load Product Catalog]
    G --> H[Browse or Search Products]
    H --> I[Tap Product Card]
    I --> J[View Details Modal]
    J --> K[Set Quantity]
    K --> L[Add to Cart]
    L --> H
    H --> M[Open Cart Tab]
    M --> N[Review Items + Shipping Terms]
    N --> O{Submit Method}
    O -->|Email| P[Open Email Client]
    O -->|WhatsApp| Q[Open WhatsApp]

    style A fill:#12253f,stroke:#be9a5f,color:#fff
    style G fill:#12253f,stroke:#be9a5f,color:#fff
    style P fill:#1a2520,stroke:#22c55e,color:#fff
    style Q fill:#1a2520,stroke:#22c55e,color:#fff
    style F fill:#7f1d1d,stroke:#ef4444,color:#fff
                

flowchart TD
    A[Catalog Grid - 17 Products] --> B{User Action}
    B -->|Search| C[Filter by Name, Category, HS Code]
    B -->|Category Tab| D[Filter by FMCG, Textiles, Leather, Chemicals]
    B -->|Tap Card| E[Open Detail Modal]
    C --> A
    D --> A
    E --> F[View Description + HS Code + Price]
    F --> G[Adjust Quantity with Smart Steps]
    G --> H[See Estimated Order Value]
    H --> I[Add to Cart]
    B -->|Quick Add Button| J[Add at MOQ]

    style A fill:#12253f,stroke:#be9a5f,color:#fff
    style I fill:#166534,stroke:#22c55e,color:#fff
    style J fill:#166534,stroke:#22c55e,color:#fff
                

flowchart TD
    A[Orders Tab] --> B[3 Sample Orders]
    B --> C[Order Card]
    C --> D[IBQ-2026-NNNN ID]
    C --> E[Status Badge]
    C --> F[5-Step Progress Bar]
    C --> G[Items + Total + Terms]

    H[Profile Tab] --> I[User Avatar + Name]
    H --> J[Quick Contact Actions]
    J --> K[Email Sales Team]
    J --> L[Call +92 300 2020179]
    J --> M[WhatsApp Chat]
    J --> N[Visit Website]
    H --> O[Sign Out - Clears Session + Cart]

    style A fill:#12253f,stroke:#be9a5f,color:#fff
    style H fill:#12253f,stroke:#be9a5f,color:#fff
    style O fill:#7f1d1d,stroke:#ef4444,color:#fff
                

flowchart TD
    V1[v1.0 Current] --> V11[v1.1 Dynamic Catalog]
    V11 --> V12[v1.2 Server-Side Auth]
    V12 --> V13[v1.3 Real Order Tracking]
    V13 --> V2[v2.0 Full E-Commerce]
    V11 --> GS[Google Sheets Sync]
    V12 --> JWT[JWT + User Management]
    V13 --> API[Logistics API Integration]
    V2 --> PAY[Payment Gateway]
    V2 --> MULTI[Multi-Currency]
    V2 --> INV[Real-Time Inventory]

    style V1 fill:#12253f,stroke:#be9a5f,color:#fff
    style V2 fill:#166534,stroke:#22c55e,color:#fff
    style GS fill:#1a3355,stroke:#3b82f6,color:#fff
    style JWT fill:#1a3355,stroke:#3b82f6,color:#fff
    style API fill:#1a3355,stroke:#3b82f6,color:#fff