76 lines
2.0 KiB
Markdown
76 lines
2.0 KiB
Markdown
# 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)
|
|
|