🎨 Üyelik Sistemi UI/UX Plan

📅 Tarih: 2025-11-23 | 🎯 Tenant: Muzibu / İxtif | 📊 Versiyon: 1.0
8
Yeni Sayfa
4
Güncelleme
2
Kaldırılacak
14
Toplam İş

🆕 Yeni Oluşturulacak Sayfalar

Frontend - Kullanıcı Paneli

1. 2FA Code Input Sayfası OLUŞTUR
Giriş sonrası 2 faktörlü doğrulama kodu girişi için sayfa
  • 6 haneli kod input (auto-focus, auto-tab)
  • Geri sayım timer (5 dakika)
  • Kod yeniden gönder butonu
  • SMS/Email seçimi
  • "Bu cihazı hatırla" checkbox
Livewire Alpine.js Tailwind
2. Profil Düzenleme Sayfası OLUŞTUR
Kullanıcının kişisel bilgilerini güncelleyeceği tam profil sayfası
  • Avatar yükleme (mevcut component kullanılacak)
  • Ad, soyad, email, telefon
  • Şifre değiştirme bölümü
  • 2FA açma/kapama
  • Bildirim tercihleri
  • Hesap silme (soft delete)
Livewire Tailwind MediaManagement
3. Cihaz Yönetimi Sayfası OLUŞTUR
Kullanıcının aktif oturumlarını ve cihazlarını yönettiği sayfa
  • Aktif cihaz listesi (browser, OS, IP, konum)
  • Son giriş tarihi
  • Mevcut cihaz vurgusu
  • Tekil cihaz çıkış yap
  • Tüm cihazlardan çıkış
  • Giriş geçmişi (activity_log)
Livewire DeviceService Sessions
4. Abonelik Yönetimi (User Panel) OLUŞTUR
Kullanıcının kendi aboneliğini görüntüleyip yönettiği sayfa
  • Mevcut plan bilgisi
  • Dönem başlangıç/bitiş
  • Plan yükseltme/düşürme
  • Abonelik iptal (grace period)
  • Kupon uygulama
  • Otomatik yenileme aç/kapa
Livewire SubscriptionService PayTR

Frontend - Public Sayfalar

5. Fiyatlandırma Sayfası (Pricing) OLUŞTUR
Ziyaretçilere sunulan plan karşılaştırma ve satış sayfası
  • Plan kartları (aylık/yıllık toggle)
  • Öne çıkan plan vurgusu
  • Özellik karşılaştırma tablosu
  • Üstü çizili fiyat gösterimi
  • CTA butonları
  • SSS accordion
Blade Alpine.js Tailwind
6. Checkout/Ödeme Sayfası OLUŞTUR
Plan seçimi sonrası ödeme işlemi sayfası
  • Seçilen plan özeti
  • Kupon kodu girişi
  • Fatura bilgileri formu
  • PayTR iframe entegrasyonu
  • Ödeme sonuç sayfası
Livewire PayTR CouponService
7. Ödeme Geçmişi Sayfası OLUŞTUR
Kullanıcının geçmiş ödemelerini ve faturalarını göreceği sayfa
  • Ödeme listesi (tarih, tutar, durum)
  • Fatura detay modal
  • PDF fatura indirme
  • Filtreleme (tarih, durum)
Livewire PDF

Admin Panel

8. Kullanıcı Abonelik Detay (Admin) OLUŞTUR
Admin panelde kullanıcı abonelik detayı ve yönetimi
  • Kullanıcı abonelik geçmişi
  • Manuel abonelik oluşturma
  • Süre uzatma/kısaltma
  • Ödeme geçmişi
  • Kupon kullanımları
Livewire Tabler

🔄 Güncellenecek Sayfalar

1. Email Verification Sayfası GÜNCELLE
Mevcut sayfa Bootstrap stilinde, modern Tailwind tasarıma geçirilecek
  • Tailwind CSS'e geçiş
  • Animasyon ekleme
  • Dark/Light mode desteği
  • Yeniden gönder butonu iyileştirmesi
2. Header User Dropdown GÜNCELLE
Abonelik bilgisi ve yeni menü linkleri eklenecek
  • Abonelik durumu badge
  • Cihazlarım linki
  • Ödeme geçmişi linki
  • Plan yükselt CTA
3. Login Sayfası GÜNCELLE
2FA desteği ve "Bu cihazı hatırla" özelliği eklenecek
  • 2FA yönlendirme mantığı
  • Remember device checkbox
  • Failed attempts uyarısı
4. Register Sayfası GÜNCELLE
Kurumsal kod girişi ve telefon alanı eklenecek
  • Kurumsal davet kodu input
  • Telefon numarası (2FA için)
  • Kullanım şartları checkbox

🗑️ Kaldırılacak/Değiştirilecek

1. Eski Bootstrap Auth Stilleri KALDIR
Email verification sayfasındaki eski Bootstrap class'ları temizlenecek
2. Duplicate Profil Componentleri KALDIR
UserManagement'taki dağınık profil componentleri tek yerde toplanacak

🎨 Tasarım Tutarlılığı

Frontend Standartları:
  • Tailwind CSS + Alpine.js
  • Dark/Light mode toggle (tüm sayfalarda)
  • Animasyonlar: Fade-in, slide, scale
  • Form validation: Real-time Alpine.js
  • Loading states: Skeleton + spinner
Tenant-Aware Geliştirme:
  • Muzibu: Ücretli üyelik aktif, kurumsal aktif
  • İxtif: Ücretli üyelik kapalı, kurumsal kapalı
  • Tüm sayfalar setting() helper ile kontrol edilmeli
  • Pricing sayfası: auth_subscription_paid_enabled kontrolü

📋 Öncelik Sıralaması

Yüksek Öncelik (Hemen):

  • 2FA Code Input Sayfası
  • Profil Düzenleme
  • Cihaz Yönetimi
  • Login/Register güncellemeleri

Orta Öncelik:

  • Fiyatlandırma Sayfası
  • Abonelik Yönetimi (User)
  • Checkout Sayfası

Düşük Öncelik:

  • Ödeme Geçmişi
  • Admin Abonelik Detay
  • Email Verification güncelleme