rust_imgapi/docs/ADMIN_PANEL_PLAN.md

Admin Panel Baslangic Plani

Bu plan AGENTS.md, ADMIN_PANEL_PROMPT.md ve RULES.md uyumunda hazirlandi.

1) Onerilen Klasor Yapisi

• admin-panel/src/api
• admin-panel/src/components
• admin-panel/src/pages
• admin-panel/src/stores
• admin-panel/src/types
• admin-panel/src/utils

2) Teknoloji Onerisi

• React + TypeScript + Vite
• React Router (route guard)
• TanStack Query (server state)
• Zustand (auth/UI state)

3) Ekran Akislari

• GET /login -> basarili login -> /dashboard
• GET /dashboard -> ozet kartlar + son image bilgisi
• GET /images -> liste + detay linki
• GET /images/:id -> variant stream preview
• GET /health -> backend durum gostergesi
• GET /settings -> altyapi/TODO

4) Auth ve API Client Mimarisi

• Merkezi apiRequest fonksiyonu ile tum cagrilar
• Authorization: Bearer <access_token> otomatik ekleme
• 401 durumunda tekil refresh (deduplicate)
• Refresh basarisizsa logout + login sayfasina yonlendirme
• Backend'in global JSON error formatinin normalize edilmesi

5) Component Listesi

• AppShell
• ProtectedRoute
• QueryState
• sayfa bazli form ve tablo bilesenleri

6) State Management Yaklasimi

• stores/auth-store.ts: user + token + hydrate + clear
• server state: React Query ile cache/refetch

7) Route Guard Yaklasimi

• Public: /login
• Private: /dashboard, /images, /images/:id, /health, /settings
• Token yoksa /login redirect

8) UI/UX Prensipleri

• Sidebar + topbar layout
• Loading / empty / error state ayrimi
• Basit responsive duzen

9) Guvenlik Onlemleri

• Tokenlar central store + storage ile yonetilir
• 401/403 ayrimi API error code ile gorunur
• Hassas veriler UI'da loglanmaz

10) Gelistirme Roadmap

1. MVP auth + dashboard + images list/detay (tamamlandi)
2. Pagination/filter/sort + detay metadata (arama/format filtresi + client pagination tamamlandi)
3. Role-based guard + kullanici yonetimi (/users)
4. UI sertlestirme (skeleton, toast, empty state varyasyonlari)
5. Testler (auth flow, route guard, api error handling)