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
2. Admin Panel İş Akışı
3. Kimlik Doğrulama Akışı
4. Müşteri Yönetimi Akışı
5. Plan Yönetimi Akışı
6. Cloudflare Hesap Yönetimi
7. Veritabanı Şeması
8. API Endpoint Yapısı
9. Audit Log Sistemi
10. Deployment Mimarisi

---

1. Genel Sistem Mimarisi

Admin Panel'in genel sistem mimarisini gösterir.

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ı.

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.

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.

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.

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.

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).

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.

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ı.

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ı.

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

graph TB
    A[Kutu] --> B{Karar}
    B -->|Evet| C[Sonuç 1]
    B -->|Hayır| D[Sonuç 2]

Sequence Diagram

sequenceDiagram
    A->>B: Mesaj
    B-->>A: Yanıt

ER Diagram

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