# Architecture Diagrams

All diagrams use a dark theme with white text. View the full source and rendered diagrams in [docs/diagrams/README.md](../diagrams/README.md).

## System Architecture

```{mermaid}
%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#1e3a5f', 'primaryTextColor': '#ffffff', 'primaryBorderColor': '#3a7bd5', 'lineColor': '#5b9bd5', 'secondaryColor': '#2d5016', 'tertiaryColor': '#4a1942', 'background': '#1a1a2e', 'mainBkg': '#1a1a2e', 'nodeBorder': '#3a7bd5', 'clusterBkg': '#16213e', 'titleColor': '#ffffff', 'edgeLabelBackground': '#16213e'}}}%%
graph TB
    subgraph Client["Client Layer"]
        Browser["Browser / Frontend"]
        Mobile["Mobile App"]
    end
    subgraph Django["Django Application"]
        Views["DRF ViewSets"]
        Services["Service Layer"]
        Models["Django Models"]
        Signals["Django Signals"]
        Admin["Unfold Admin"]
    end
    subgraph Background["Background Processing"]
        CeleryWorker["Celery Worker"]
        CeleryBeat["Celery Beat"]
        Redis["Redis"]
    end
    subgraph External["External Services"]
        MidtransAPI["Midtrans Core API"]
        MidtransWebhook["Midtrans Webhooks"]
    end
    subgraph Storage["Data Layer"]
        PostgreSQL["PostgreSQL / SQLite"]
    end
    Browser --> Views
    Mobile --> Views
    Views --> Services
    Services --> Models
    Services --> MidtransAPI
    Models --> Signals
    Models --> PostgreSQL
    MidtransWebhook --> Views
    CeleryBeat --> Redis
    Redis --> CeleryWorker
    CeleryWorker --> Services
    Admin --> Models
```

## Subscription Lifecycle

```{mermaid}
%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#1e3a5f', 'primaryTextColor': '#ffffff', 'primaryBorderColor': '#3a7bd5', 'lineColor': '#5b9bd5', 'secondaryColor': '#2d5016', 'tertiaryColor': '#4a1942', 'background': '#1a1a2e'}}}%%
stateDiagram-v2
    [*] --> pending: User subscribes
    pending --> trialing: Plan has trial
    pending --> active: Payment success
    trialing --> active: Trial ends + Payment
    trialing --> expired: Trial ends + No payment
    active --> past_due: Payment failed
    active --> paused: User pauses
    active --> cancelled: User cancels (immediate)
    active --> active: Renewed (payment success)
    past_due --> active: Retry payment success
    past_due --> expired: Grace period ended
    past_due --> cancelled: User cancels
    paused --> active: User resumes
    paused --> cancelled: User cancels
    cancelled --> [*]
    expired --> [*]
```

## Database Entity Relationship

```{mermaid}
%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#1e3a5f', 'primaryTextColor': '#ffffff', 'lineColor': '#5b9bd5', 'background': '#1a1a2e'}}}%%
erDiagram
    User ||--o{ Subscription : has
    User ||--o{ Payment : makes
    User ||--o{ Invoice : receives
    User ||--|| Wallet : owns
    Plan ||--o{ Subscription : defines
    Subscription ||--o{ Payment : generates
    Subscription ||--o{ Invoice : triggers
    Payment ||--o| Invoice : linked_to
    Wallet ||--o{ WalletTransaction : records
    Wallet ||--o{ TopUp : receives
    Invoice ||--o{ InvoiceItem : contains
```

For the complete set of 11 diagrams including payment flows, webhook processing, Celery task scheduling, and the example app page flow, see [docs/diagrams/README.md](../diagrams/README.md).