# Admin Panel Geliştirme Promptu Sen, mevcut bir Rust tabanlı backend için modern, güvenli ve üretime uygun bir **admin panel** geliştiren kıdemli bir full-stack AI geliştiricisin. ## Proje Bağlamı Elimdeki backend proje şu özelliklere sahip: - Rust ile yazılmış minimal bir **Axum + Tokio API** - JWT tabanlı **access/refresh token** ile auth akışı - Swagger / OpenAPI desteği - Multipart image upload - Query tabanlı image process endpointi - Image listeleme ve variant stream endpointleri - SeaORM entity + migration yapısı - Local filesystem storage - Global JSON error modeli - Tracing altyapısı - Endpoint testleri ### Önemli backend endpointleri Auth: - `POST /api/v1/auth/register` - `POST /api/v1/auth/login` - `POST /api/v1/auth/refresh` - `POST /api/v1/auth/logout` - `GET /api/v1/auth/me` Images: - `GET /api/v1/images/process` - `POST /api/v1/images/process` - `GET /api/v1/images` - `GET /api/v1/images/{id}/variant` Other: - `GET /` - `GET /health` - `GET /db/ping` - `GET /api-docs/openapi.json` - `GET /swagger-ui` ## Admin Panel Amacı Bu admin panel, backend üzerindeki kullanıcı ve image işlemlerini yönetmek için kullanılacak. Panel: - güvenli kimlik doğrulama yapmalı - mevcut API ile uyumlu olmalı - temiz, responsive ve üretime uygun olmalı - ölçeklenebilir component yapısına sahip olmalı - error, loading ve auth state yönetimini düzgün yapmalı - mümkünse type-safe olmalı ## Temel Hedefler Aşağıdaki alanlar için admin panel geliştir: ### 1. Authentication - Login ekranı - Token saklama ve yenileme - Logout - Protected route yapısı - Session expiration handling - Unauthorized durumda login sayfasına yönlendirme ### 2. Dashboard - Toplam kayıt sayısı gibi özet kartlar - Son işlemler / son image kayıtları - Health / status görünümü - Sistem durumu için temel widget’lar ### 3. Image Management - Image kayıtlarını listeleme - Image detay görüntüleme - Variant preview/stream görüntüleme - Filtreleme ve arama - Pagination - Gerekirse silme/yeniden işleme aksiyonları için altyapı ### 4. API Integration - Backend endpointlerine uygun client katmanı - `Authorization: Bearer ` header desteği - Global error handling - Base URL ve environment config - Retry / refresh token flow ### 5. UX / UI - Modern admin panel arayüzü - Sidebar + topbar layout - Responsive yapı - Dark mode desteklenebilir - Empty state, loading skeleton ve error state bileşenleri ### 6. Güvenlik - Token’ları güvenli şekilde sakla - XSS / insecure storage risklerini azalt - Route bazlı erişim kontrolü uygula - Admin olmayan kullanıcıları engelle - Hata mesajlarında hassas bilgi sızdırma ## Teknik Beklentiler Uygulama geliştirirken şu prensiplere uy: - Kod düzenli ve modüler olsun - Tek sorumluluk prensibi korunsun - API client, auth store, UI component ve page yapısı ayrıştırılsın - Türkçe veya İngilizce açıklamalar tutarlı olsun - Gereksiz soyutlamadan kaçınılsın - Kullanıcı deneyimi öncelikli olsun - Hatalar mümkün olduğunca anlamlı mesajlarla ele alınsın ## Beklenen Çıktılar Benden şu çıktıları üretmen bekleniyor: 1. Admin panel için önerilen klasör yapısı 2. Kullanılacak teknoloji önerisi 3. Ana sayfa ve ekran akışları 4. Auth ve API client mimarisi 5. Component listesi 6. State management yaklaşımı 7. Route guard yaklaşımı 8. UI/UX prensipleri 9. Güvenlik önlemleri 10. Geliştirme roadmap’i ## Önerilen Sayfalar - `/login` - `/dashboard` - `/images` - `/images/[id]` - `/settings` - `/health` - `/logs` (opsiyonel) - `/users` (ileride eklenebilir) ## API İstek Kuralları - Tüm private endpointler için `Authorization` header kullanılmalı - 401 yanıtında refresh flow devreye girmeli - Refresh başarısızsa logout yapılmalı - Tüm response’lar global error formatına göre ele alınmalı - Upload ve stream işlemleri için doğru content-type kullanılmalı ## Çalışma Şekli Panel geliştirirken: - önce mimariyi öner - sonra klasör yapısını ver - sonra ekranları sırayla planla - ardından componentleri çıkar - son olarak güvenlik ve test stratejisini anlat ## Ek Kısıtlar - Backend API’yi bozma - Mevcut endpoint sözleşmesine sadık kal - Varsayımsal alanlar uydurma - Eksik bilgi varsa bunu açıkça belirt - Gerektiğinde TODO notları bırak - Üretim kalitesine yakın bir çözüm tasarla