admin-panel/ADMIN_PANEL_DIAGRAMS.md

# 🎨 Admin Panel - Sistem Diyagramları

Bu dosya Admin Panel'in tüm sistem diyagramlarını içerir. Tüm diyagramlar Mermaid formatında olup VS Code'da düzenlenebilir.

## 📑 İçindekiler

1. [Genel Sistem Mimarisi](#1-genel-sistem-mimarisi)
2. [Admin Panel İş Akışı](#2-admin-panel-iş-akışı)
3. [Kimlik Doğrulama Akışı](#3-kimlik-doğrulama-akışı)
4. [Müşteri Yönetimi Akışı](#4-müşteri-yönetimi-akışı)
5. [Plan Yönetimi Akışı](#5-plan-yönetimi-akışı)
6. [Cloudflare Hesap Yönetimi](#6-cloudflare-hesap-yönetimi)
7. [Veritabanı Şeması](#7-veritabanı-şeması)
8. [API Endpoint Yapısı](#8-api-endpoint-yapısı)
9. [Audit Log Sistemi](#9-audit-log-sistemi)
10. [Deployment Mimarisi](#10-deployment-mimarisi)

---

## 1. Genel Sistem Mimarisi

Admin Panel'in genel sistem mimarisini gösterir.

```mermaid
graph TB
    subgraph "Frontend Layer"
        AdminUI[Admin UI<br/>React + Vite<br/>Port: 5173]
    end
    
    subgraph "Backend Layer"
        AdminAPI[Admin API<br/>Flask<br/>Port: 5001]
        Auth[Auth Service<br/>JWT]
        AuditService[Audit Service<br/>Logging]
    end
    
    subgraph "Database Layer"
        AdminDB[(Admin DB<br/>PostgreSQL<br/>admin_hosting_db)]
        CustomerDB[(Customer DB<br/>PostgreSQL<br/>hosting)]
    end
    
    subgraph "External Services"
        CustomerAPI[Customer API<br/>Port: 5000]
        CF[Cloudflare API]
    end
    
    AdminUI -->|HTTPS| AdminAPI
    AdminAPI --> Auth
    AdminAPI --> AuditService
    AdminAPI --> AdminDB
    AdminAPI -.->|Read Only| CustomerDB
    AdminAPI -->|Internal API| CustomerAPI
    AdminAPI -->|Validate Tokens| CF
    
    Auth --> AdminDB
    AuditService --> AdminDB
    
    style AdminUI fill:#ffebee
    style AdminAPI fill:#fff3e0
    style AdminDB fill:#e8f5e9
    style CustomerDB fill:#e1f5ff
    style CustomerAPI fill:#f3e5f5
```

---

## 2. Admin Panel İş Akışı

Admin kullanıcısının tüm işlevlerini gösteren ana akış diyagramı.

```mermaid
graph TB
    Start([Admin Giriş])
    Login[Login<br/>Username + Password]
    Auth{Kimlik<br/>Doğrulama}
    Dashboard[Dashboard<br/>İstatistikler]
    
    subgraph "Ana Modüller"
        Customers[Müşteri Yönetimi]
        Plans[Plan Yönetimi]
        CFAccounts[CF Hesap Yönetimi]
        Audit[Audit Logs]
    end
    
    subgraph "Müşteri İşlemleri"
        ListCustomers[Müşteri Listesi]
        ViewCustomer[Müşteri Detay]
        UpdatePlan[Plan Güncelle]
        ManageStatus[Durum Yönet]
    end
    
    subgraph "Plan İşlemleri"
        ListPlans[Plan Listesi]
        CreatePlan[Plan Oluştur]
        EditPlan[Plan Düzenle]
        DeletePlan[Plan Sil]
    end
    
    subgraph "CF İşlemleri"
        ListCF[CF Hesap Listesi]
        AddCF[CF Hesap Ekle]
        EditCF[CF Hesap Düzenle]
        DeleteCF[CF Hesap Sil]
        ValidateCF[Token Doğrula]
    end
    
    Start --> Login
    Login --> Auth
    Auth -->|Başarılı| Dashboard
    Auth -->|Başarısız| Login
    
    Dashboard --> Customers
    Dashboard --> Plans
    Dashboard --> CFAccounts
    Dashboard --> Audit
    
    Customers --> ListCustomers
    ListCustomers --> ViewCustomer
    ViewCustomer --> UpdatePlan
    ViewCustomer --> ManageStatus
    
    Plans --> ListPlans
    ListPlans --> CreatePlan
    ListPlans --> EditPlan
    ListPlans --> DeletePlan
    
    CFAccounts --> ListCF
    ListCF --> AddCF
    ListCF --> EditCF
    ListCF --> DeleteCF
    AddCF --> ValidateCF
    EditCF --> ValidateCF
    
    style Start fill:#ffebee
    style Dashboard fill:#fff3e0
    style Auth fill:#e1f5ff
    style Customers fill:#e8f5e9
    style Plans fill:#f3e5f5
    style CFAccounts fill:#fff9c4
```

---

## 3. Kimlik Doğrulama Akışı

Admin login ve JWT token yönetimi.

```mermaid
sequenceDiagram
    participant A as Admin User
    participant UI as Admin UI
    participant API as Admin API
    participant Auth as Auth Service
    participant DB as Admin DB
    participant Audit as Audit Log
    
    A->>UI: Username + Password Gir
    UI->>API: POST /api/auth/login
    API->>Auth: Validate Credentials
    Auth->>DB: SELECT * FROM admin_users
    DB-->>Auth: Admin User Data
    
    alt Credentials Valid
        Auth->>Auth: Verify Password Hash
        Auth->>Auth: Generate JWT Token
        Auth->>DB: UPDATE last_login
        Auth->>Audit: Log Login Action
        Audit->>DB: INSERT audit_log
        Auth-->>API: Token + Admin Data
        API-->>UI: Success + Token
        UI->>UI: Store Token (localStorage)
        UI-->>A: Redirect to Dashboard
    else Invalid Credentials
        Auth-->>API: Error: Invalid Credentials
        API-->>UI: 401 Unauthorized
        UI-->>A: Show Error Message
    end
    
    Note over UI,API: Subsequent Requests
    A->>UI: Access Protected Route
    UI->>API: Request + Authorization Header
    API->>Auth: Verify JWT Token
    Auth-->>API: Token Valid + Admin Data
    API-->>UI: Protected Resource
```

---

## 4. Müşteri Yönetimi Akışı

Admin'in müşterileri görüntüleme ve yönetme süreci.

```mermaid
sequenceDiagram
    participant A as Admin
    participant UI as Admin UI
    participant API as Admin API
    participant CustAPI as Customer API
    participant CustDB as Customer DB
    participant Audit as Audit Log

    Note over A,Audit: Müşteri Listesi Görüntüleme
    A->>UI: Müşteriler Sayfası
    UI->>API: GET /api/customers
    API->>CustAPI: GET /api/admin/customers
    CustAPI->>CustDB: SELECT customers + users
    CustDB-->>CustAPI: Customer Data
    CustAPI-->>API: Customer List
    API-->>UI: Customer List
    UI-->>A: Müşteri Tablosu

    Note over A,Audit: Müşteri Detay Görüntüleme
    A->>UI: Müşteri Seç
    UI->>API: GET /api/customers/:id
    API->>CustAPI: GET /api/admin/customers/:id
    CustAPI->>CustDB: SELECT customer details
    CustAPI->>CustDB: SELECT domains
    CustDB-->>CustAPI: Full Customer Data
    CustAPI-->>API: Customer Details
    API-->>UI: Customer Details
    UI-->>A: Detay Sayfası

    Note over A,Audit: Plan Güncelleme
    A->>UI: Plan Değiştir
    UI->>API: PUT /api/customers/:id/plan
    API->>CustAPI: PUT /api/admin/customers/:id/plan
    CustAPI->>CustDB: UPDATE customer plan
    CustDB-->>CustAPI: Success
    CustAPI-->>API: Success
    API->>Audit: Log Plan Update
    API-->>UI: Success Message
    UI-->>A: Plan Güncellendi
```

---

## 5. Plan Yönetimi Akışı

Subscription plan oluşturma, düzenleme ve silme işlemleri.

```mermaid
graph TB
    Start([Plan Yönetimi])
    List[Plan Listesi]

    subgraph "Plan Görüntüleme"
        GetPlans[GET /api/plans]
        ShowList[Plan Tablosu]
    end

    subgraph "Plan Oluşturma"
        CreateForm[Yeni Plan Formu]
        ValidateCreate{Validasyon}
        CreateAPI[POST /api/plans]
        SaveDB[(Veritabanına Kaydet)]
        LogCreate[Audit Log]
    end

    subgraph "Plan Düzenleme"
        EditForm[Plan Düzenle Formu]
        ValidateEdit{Validasyon}
        UpdateAPI[PUT /api/plans/:id]
        UpdateDB[(Veritabanı Güncelle)]
        LogUpdate[Audit Log]
    end

    subgraph "Plan Silme"
        ConfirmDelete{Onay}
        CheckUsage{Kullanımda mı?}
        DeleteAPI[DELETE /api/plans/:id]
        DeleteDB[(Veritabanından Sil)]
        LogDelete[Audit Log]
    end

    Start --> List
    List --> GetPlans
    GetPlans --> ShowList

    ShowList --> CreateForm
    CreateForm --> ValidateCreate
    ValidateCreate -->|Geçerli| CreateAPI
    ValidateCreate -->|Hatalı| CreateForm
    CreateAPI --> SaveDB
    SaveDB --> LogCreate
    LogCreate --> List

    ShowList --> EditForm
    EditForm --> ValidateEdit
    ValidateEdit -->|Geçerli| UpdateAPI
    ValidateEdit -->|Hatalı| EditForm
    UpdateAPI --> UpdateDB
    UpdateDB --> LogUpdate
    LogUpdate --> List

    ShowList --> ConfirmDelete
    ConfirmDelete -->|Evet| CheckUsage
    ConfirmDelete -->|Hayır| List
    CheckUsage -->|Kullanımda Değil| DeleteAPI
    CheckUsage -->|Kullanımda| List
    DeleteAPI --> DeleteDB
    DeleteDB --> LogDelete
    LogDelete --> List

    style Start fill:#ffebee
    style List fill:#fff3e0
    style SaveDB fill:#e8f5e9
    style UpdateDB fill:#e8f5e9
    style DeleteDB fill:#e8f5e9
```

---

## 6. Cloudflare Hesap Yönetimi

CF hesaplarının eklenmesi, doğrulanması ve yönetimi.

```mermaid
sequenceDiagram
    participant A as Admin
    participant UI as Admin UI
    participant API as Admin API
    participant DB as Admin DB
    participant CF as Cloudflare API
    participant Audit as Audit Log

    Note over A,Audit: CF Hesap Ekleme
    A->>UI: Yeni CF Hesap Formu
    A->>UI: Name, Email, API Token
    UI->>API: POST /api/cf-accounts

    API->>API: Validate Input
    API->>CF: Verify Token
    CF-->>API: Token Valid + Account Info

    API->>API: Encrypt API Token
    API->>DB: INSERT cloudflare_account
    DB-->>API: Account Created

    API->>Audit: Log CF Account Creation
    Audit->>DB: INSERT audit_log

    API-->>UI: Success + Account Data
    UI-->>A: Hesap Eklendi

    Note over A,Audit: CF Hesap Güncelleme
    A->>UI: Hesap Düzenle
    UI->>API: PUT /api/cf-accounts/:id

    alt Token Değişti
        API->>CF: Verify New Token
        CF-->>API: Token Valid
        API->>API: Encrypt New Token
    end

    API->>DB: UPDATE cloudflare_account
    API->>Audit: Log Update
    API-->>UI: Success
    UI-->>A: Hesap Güncellendi

    Note over A,Audit: CF Hesap Silme
    A->>UI: Hesap Sil
    UI->>API: DELETE /api/cf-accounts/:id

    API->>DB: Check current_domains

    alt Domains > 0
        API-->>UI: Error: Active Domains
        UI-->>A: Silinemez
    else Domains = 0
        API->>DB: DELETE cloudflare_account
        API->>Audit: Log Deletion
        API-->>UI: Success
        UI-->>A: Hesap Silindi
    end
```

---

## 7. Veritabanı Şeması

Admin Panel veritabanı yapısı (ER Diagram).

```mermaid
erDiagram
    ADMIN_USERS ||--o{ AUDIT_LOGS : creates
    ADMIN_USERS {
        int id PK
        string username UK
        string email UK
        string password_hash
        string full_name
        string role
        boolean is_active
        datetime created_at
        datetime last_login
    }

    SUBSCRIPTION_PLANS {
        int id PK
        string name UK
        string slug UK
        text description
        decimal price_monthly
        decimal price_yearly
        int max_domains
        int max_containers
        int max_storage_gb
        int max_bandwidth_gb
        json features
        boolean is_active
        boolean is_visible
        int sort_order
        datetime created_at
        datetime updated_at
    }

    CLOUDFLARE_ACCOUNTS {
        int id PK
        string name UK
        string email
        string api_token_encrypted
        int max_domains
        int current_domains
        text notes
        boolean is_active
        datetime created_at
        datetime updated_at
    }

    AUDIT_LOGS {
        int id PK
        int admin_id FK
        string action
        string resource_type
        int resource_id
        json details
        string ip_address
        datetime created_at
    }
```

---

## 8. API Endpoint Yapısı

Admin Panel'in tüm API endpoint'leri.

```mermaid
graph TB
    subgraph "Authentication Endpoints"
        AuthLogin[POST /api/auth/login<br/>Admin Login]
        AuthMe[GET /api/auth/me<br/>Current Admin]
        AuthLogout[POST /api/auth/logout<br/>Logout]
    end

    subgraph "Plans Endpoints"
        PlansList[GET /api/plans<br/>List All Plans]
        PlansCreate[POST /api/plans<br/>Create Plan]
        PlansUpdate[PUT /api/plans/:id<br/>Update Plan]
        PlansDelete[DELETE /api/plans/:id<br/>Delete Plan]
    end

    subgraph "CF Accounts Endpoints"
        CFList[GET /api/cf-accounts<br/>List CF Accounts]
        CFCreate[POST /api/cf-accounts<br/>Create CF Account]
        CFUpdate[PUT /api/cf-accounts/:id<br/>Update CF Account]
        CFDelete[DELETE /api/cf-accounts/:id<br/>Delete CF Account]
        CFStats[GET /api/cf-accounts/stats<br/>CF Statistics]
    end

    subgraph "Customers Endpoints"
        CustList[GET /api/customers<br/>List Customers]
        CustDetail[GET /api/customers/:id<br/>Customer Details]
        CustUpdatePlan[PUT /api/customers/:id/plan<br/>Update Customer Plan]
        CustStats[GET /api/customers/stats<br/>Customer Statistics]
    end

    subgraph "Audit Endpoints"
        AuditList[GET /api/audit<br/>List Audit Logs]
        AuditFilter[GET /api/audit?filter<br/>Filtered Logs]
    end

    style AuthLogin fill:#e1f5ff
    style AuthMe fill:#e1f5ff
    style AuthLogout fill:#e1f5ff

    style PlansList fill:#e8f5e9
    style PlansCreate fill:#e8f5e9
    style PlansUpdate fill:#e8f5e9
    style PlansDelete fill:#e8f5e9

    style CFList fill:#fff3e0
    style CFCreate fill:#fff3e0
    style CFUpdate fill:#fff3e0
    style CFDelete fill:#fff3e0

    style CustList fill:#f3e5f5
    style CustDetail fill:#f3e5f5
    style CustUpdatePlan fill:#f3e5f5
```

---

## 9. Audit Log Sistemi

Tüm admin işlemlerinin loglanması.

```mermaid
graph TB
    subgraph "Admin Actions"
        Login[Login]
        CreatePlan[Create Plan]
        UpdatePlan[Update Plan]
        DeletePlan[Delete Plan]
        CreateCF[Create CF Account]
        UpdateCF[Update CF Account]
        DeleteCF[Delete CF Account]
        UpdateCustomer[Update Customer]
    end

    subgraph "Audit Service"
        Capture[Action Capture]
        Validate[Validate Data]
        Enrich[Enrich with Metadata]
        Store[Store to DB]
    end

    subgraph "Audit Log Data"
        AdminID[Admin ID]
        Action[Action Type]
        Resource[Resource Type]
        ResourceID[Resource ID]
        Details[Details JSON]
        IP[IP Address]
        Timestamp[Timestamp]
    end

    subgraph "Audit Viewing"
        ViewAll[View All Logs]
        FilterByAdmin[Filter by Admin]
        FilterByAction[Filter by Action]
        FilterByDate[Filter by Date]
        Export[Export Logs]
    end

    Login --> Capture
    CreatePlan --> Capture
    UpdatePlan --> Capture
    DeletePlan --> Capture
    CreateCF --> Capture
    UpdateCF --> Capture
    DeleteCF --> Capture
    UpdateCustomer --> Capture

    Capture --> Validate
    Validate --> Enrich
    Enrich --> Store

    Store --> AdminID
    Store --> Action
    Store --> Resource
    Store --> ResourceID
    Store --> Details
    Store --> IP
    Store --> Timestamp

    AdminID --> ViewAll
    Action --> ViewAll
    Resource --> ViewAll

    ViewAll --> FilterByAdmin
    ViewAll --> FilterByAction
    ViewAll --> FilterByDate
    ViewAll --> Export

    style Capture fill:#ffebee
    style Store fill:#e8f5e9
    style ViewAll fill:#e1f5ff
```

---

## 10. Deployment Mimarisi

Admin Panel'in production deployment yapısı.

```mermaid
graph TB
    subgraph "Internet"
        Users[Admin Users]
    end

    subgraph "Nginx Reverse Proxy"
        Nginx[Nginx<br/>SSL Termination]
    end

    subgraph "Frontend Container"
        FrontendApp[React App<br/>Static Files<br/>Port: 80]
    end

    subgraph "Backend Container"
        BackendApp[Flask API<br/>Port: 5001]
        Gunicorn[Gunicorn<br/>WSGI Server]
    end

    subgraph "Database"
        AdminDB[(PostgreSQL<br/>admin_hosting_db<br/>Port: 5432)]
        CustomerDB[(PostgreSQL<br/>hosting<br/>Read-Only)]
    end

    subgraph "External Services"
        CustomerAPI[Customer API<br/>api.argeict.net]
        CloudflareAPI[Cloudflare API]
    end

    subgraph "Monitoring"
        Logs[Application Logs]
        Metrics[System Metrics]
    end

    Users -->|HTTPS| Nginx
    Nginx -->|admin.argeict.net| FrontendApp
    Nginx -->|admin-api.argeict.net| Gunicorn

    FrontendApp -->|API Calls| Gunicorn
    Gunicorn --> BackendApp

    BackendApp --> AdminDB
    BackendApp -.->|Read Only| CustomerDB
    BackendApp -->|Internal API| CustomerAPI
    BackendApp -->|Validate Tokens| CloudflareAPI

    BackendApp --> Logs
    BackendApp --> Metrics

    style Users fill:#e1f5ff
    style Nginx fill:#fff3e0
    style FrontendApp fill:#ffebee
    style BackendApp fill:#e8f5e9
    style AdminDB fill:#f3e5f5
    style CustomerDB fill:#fff9c4
```

---

## 📝 Diyagram Düzenleme Kılavuzu

### VS Code'da Düzenleme

1. **Dosyayı Açın**: `ADMIN_PANEL_DIAGRAMS.md`
2. **Preview Açın**: `Cmd+K V` (Mac) veya `Ctrl+K V` (Windows)
3. **Düzenleyin**: Sol panelde Mermaid kodunu değiştirin
4. **Görün**: Sağ panelde canlı önizleme

### Mermaid Syntax Temelleri

#### Graph/Flowchart
```mermaid
graph TB
    A[Kutu] --> B{Karar}
    B -->|Evet| C[Sonuç 1]
    B -->|Hayır| D[Sonuç 2]
```

#### Sequence Diagram
```mermaid
sequenceDiagram
    A->>B: Mesaj
    B-->>A: Yanıt
```

#### ER Diagram
```mermaid
erDiagram
    TABLE1 ||--o{ TABLE2 : relation
    TABLE1 {
        int id PK
        string name
    }
```

### Renk Paleti

```
Admin Panel: #ffebee (Açık Kırmızı)
Auth: #e1f5ff (Açık Mavi)
Database: #e8f5e9 (Açık Yeşil)
Plans: #f3e5f5 (Açık Mor)
CF Accounts: #fff3e0 (Açık Turuncu)
Customers: #f3e5f5 (Açık Mor)
```

### Düzenleme İpuçları

1. **Node Ekleme**: Yeni bir satır ekleyin
   ```
   NewNode[Yeni İşlem]
   ```

2. **Bağlantı Ekleme**: Ok ile bağlayın
   ```
   A --> NewNode
   NewNode --> B
   ```

3. **Renk Değiştirme**: Style ekleyin
   ```
   style NewNode fill:#e1f5ff
   ```

4. **Subgraph Ekleme**: Gruplama yapın
   ```
   subgraph "Grup Adı"
       Node1
       Node2
   end
   ```

---

## 🎯 Kullanım Senaryoları

### Senaryo 1: Yeni Endpoint Ekleme
1. Diyagram 8'i açın (API Endpoint Yapısı)
2. İlgili subgraph'a yeni endpoint ekleyin
3. Renk ve stil ekleyin
4. Kaydedin

### Senaryo 2: Yeni İş Akışı Ekleme
1. Diyagram 2'yi açın (Admin Panel İş Akışı)
2. Yeni subgraph oluşturun
3. İşlem adımlarını ekleyin
4. Ana akışa bağlayın

### Senaryo 3: Veritabanı Tablosu Ekleme
1. Diyagram 7'yi açın (Veritabanı Şeması)
2. Yeni tablo tanımı ekleyin
3. İlişkileri belirleyin
4. Kaydedin

---

## 📚 Referanslar

- **Mermaid Dokümantasyonu**: https://mermaid.js.org/
- **Live Editor**: https://mermaid.live/
- **Syntax Guide**: https://mermaid.js.org/intro/syntax-reference.html

---

**Son Güncelleme**: 2026-01-12
**Versiyon**: 1.0.0
**Yazar**: ARGE ICT