Add comprehensive Admin Panel diagrams with 10 editable Mermaid diagrams
This commit is contained in:
oguz ozturk
parent
eb66152ab0
commit
8e6322bd9b
|
|
@ -0,0 +1,760 @@
|
|||
# 🎨 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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -98,6 +98,7 @@ Tables:
|
|||
- 📊 **[README_WORKFLOW.md](./README_WORKFLOW.md)** - Hızlı başlangıç ve genel bakış
|
||||
- 📖 **[WORKFLOW_DOCUMENTATION.md](./WORKFLOW_DOCUMENTATION.md)** - Detaylı teknik dokümantasyon ve API referansı
|
||||
- 🎨 **[WORKFLOW_DIAGRAMS.md](./WORKFLOW_DIAGRAMS.md)** - Görsel diyagramlar ve sistem şemaları
|
||||
- 🎯 **[ADMIN_PANEL_DIAGRAMS.md](./ADMIN_PANEL_DIAGRAMS.md)** - Admin Panel özel diyagramları (10 adet, düzenlenebilir)
|
||||
- 🚀 **[DEPLOYMENT.md](./DEPLOYMENT.md)** - Deployment kılavuzu
|
||||
|
||||
## 📝 License
|
||||
|
|
|
|||
Loading…
Reference in New Issue