graph TB
    subgraph "User Layer - Mobile PWA"
        A[Hawker's Phone<br/>iOS/Android Browser]
        B[Voice Recording<br/>MediaRecorder API]
    end

    subgraph "Frontend Application"
        C[React PWA<br/>Mobile-First UI]
        D[Voice Capture<br/>Audio Processing]
        E[Real-time Dashboard<br/>Sales Analytics]
        F[Offline Support<br/>Service Worker]
    end

    subgraph "AI Processing Engine"
        G[Gemini 2.0 Flash<br/>Multimodal AI]
        H[Voice-to-Text<br/>Bahasa Malaysia Support]
        I[Intent Recognition<br/>Sales Data Extraction]
        J[Amount Calculation<br/>Multi-currency]
    end

    subgraph "Data Layer"
        K[(IndexedDB<br/>Local Storage)]
        L[(Cloud Sync<br/>Optional Backup)]
    end

    subgraph "Features"
        M[Daily Analytics]
        N[Receipt Generation]
        O[Tax Reports]
    end

    A --> B
    B --> D
    D --> C
    C --> G
    G --> H
    H --> I
    I --> J
    J --> E
    E --> M
    E --> N
    E --> O
    E --> K
    K --> L
    F --> K

    style G fill:#8E75B2,stroke:#fff,stroke-width:3px,color:#fff
    style H fill:#8E75B2,stroke:#fff,stroke-width:3px,color:#fff
    style I fill:#8E75B2,stroke:#fff,stroke-width:3px,color:#fff
    style J fill:#8E75B2,stroke:#fff,stroke-width:3px,color:#fff

graph LR
    subgraph "Input"
        A1[Voice Recording<br/>~5 seconds]
    end

    subgraph "Preprocessing"
        B1[Audio Encoding<br/>Base64]
        B2[Format Check<br/>WAV/WebM]
    end

    subgraph "Gemini AI Processing"
        C1[Speech-to-Text<br/>Multi-language]
        C2[Intent Classification<br/>Sale/Expense/Query]
        C3[Entity Extraction<br/>Item, Amount, Qty]
        C4[Amount Normalization<br/>RM5 → 5.00]
    end

    subgraph "Validation"
        D1[Schema Validation<br/>Required Fields]
        D2[Amount Range Check<br/>0.50 - 999,999]
        D3[Duplicate Detection<br/>Last 30 seconds]
    end

    subgraph "Output"
        E1[Structured Transaction<br/>JSON]
    end

    A1 --> B1
    B1 --> B2
    B2 --> C1
    C1 --> C2
    C2 --> C3
    C3 --> C4
    C4 --> D1
    D1 --> D2
    D2 --> D3
    D3 --> E1

    style C1 fill:#4285F4,stroke:#fff,stroke-width:2px,color:#fff
    style C2 fill:#4285F4,stroke:#fff,stroke-width:2px,color:#fff
    style C3 fill:#4285F4,stroke:#fff,stroke-width:2px,color:#fff
    style C4 fill:#4285F4,stroke:#fff,stroke-width:2px,color:#fff

sequenceDiagram
    participant H as Hawker
    participant UI as PWA Interface
    participant AI as Gemini Voice AI
    participant DB as Local Storage

    H->>UI: Opens SuaraKira PWA
    UI-->>H: Shows dashboard (today's sales)

    Note over H: Customer orders Nasi Lemak

    H->>UI: Press & hold voice button
    UI->>UI: Start recording
    H->>UI: "Nasi lemak lima ringgit"
    H->>UI: Release button

    UI->>AI: Send audio + context

    Note over AI: Processing (1-2s)<br/>• Speech-to-text<br/>• Extract item & amount<br/>• Validate data

    AI-->>UI: {item: "Nasi Lemak", amount: 5.00}
    UI->>DB: Save transaction
    DB-->>UI: Confirmed
    UI-->>H: Show ✓ + updated total

    Note over H: Continues serving customers

    H->>UI: Check daily report
    UI->>DB: Fetch today's data
    DB-->>UI: All transactions
    UI-->>H: Analytics dashboard

stateDiagram-v2
    [*] --> Dashboard: App Loaded
    Dashboard --> Recording: Hold Button
    Recording --> Processing: Release Button
    Processing --> Success: Valid Transaction
    Processing --> Error: Invalid/Unclear

    Success --> Dashboard: Auto-dismiss (3s)
    Error --> Dashboard: Show error message

    Dashboard --> Analytics: Tap Analytics Tab
    Analytics --> Dashboard: Tap Dashboard Tab

    Dashboard --> Settings: Tap Settings
    Settings --> Dashboard: Back

    Dashboard --> [*]: Exit App