Admin Panel - Kategori Yönetim Sistemi

Bu proje, kategori ekleme, düzenleme ve yönetimi için geliştirilen bir admin panel uygulamasıdır. Modern bir UI/UX ile birlikte kapsamlı kategori yönetimi özellikleri sunar.

🚀 Özellikler

✅ Tamamlanan Özellikler

• Kategori Listeleme: Premium ve Partner kategorilerini ayrı sekmelerde görüntüleme
• Hiyerarşik Yapı: Ana kategoriler ve alt kategoriler arasında navigasyon
• Kategori Oluşturma: Yeni ana kategori veya alt kategori oluşturma
• Kategori Düzenleme: Mevcut kategorileri düzenleme
• Kategori Silme: Kategorileri güvenli şekilde silme
• Görsel Yönetimi: Kategori görselleri yükleme ve yönetme
• Conditional Validation: Görsel zorunluluğu için akıllı validasyon
• Özel Alanlar (Attributes): Kategorilere dinamik özel alanlar ekleme
• Responsive Tasarım: Mobil ve desktop uyumlu arayüz

🏗️ Teknik Özellikler

• Modern React: Next.js 14+ ile geliştirildi
• TypeScript desteği: Tip güvenliği
• Tailwind CSS: Modern ve responsive tasarım
• Component-based: Yeniden kullanılabilir bileşenler
• API Integration: RESTful API entegrasyonu
• File Upload: Görsel yükleme sistemi
• Form Validation: Kapsamlı form doğrulama
• Error Handling: Hata yönetimi ve kullanıcı geri bildirimleri

📋 API Dokümantasyonu

Kategori Endpoints

GET    /api/categories?kind={premium|partner}&parent_id={null|id}
GET    /api/categories/{category_id}
POST   /api/categories
PUT    /api/categories/{category_id}
DELETE /api/categories/{category_id}
POST   /api/upload/category-image

Kategori Veri Yapısı

{
  id: "yemek",                    // Benzersiz ID (slug formatında)
  name: "Yemek",                  // Kategori adı
  description: "Yemek kategorisi", // Açıklama (opsiyonel)
  kind: "premium",                // "premium" veya "partner"
  parent_id: null,                // Üst kategori ID'si (null = ana kategori)
  path: ["yemek"],                // Kategori yolu
  depth: 0,                       // Hiyerarşi seviyesi
  order: 1,                       // Sıralama
  hasChild: true,                 // Alt kategoriler var mı?
  imagePath: "https://...",       // Görsel URL'i
  attributes: [                   // Özel alanlar
    {
      name: "mutfak_tipi",
      type: "enum",
      required: true,
      options: ["Türk", "İtalyan", "Çin", "Japon"]
    }
  ]
}

Validation Kuralları

1. Temel Kurallar:

   • id, name, kind alanları zorunlu
   • kind sadece "premium" veya "partner" olabilir
   • id benzersiz olmalı

2. Görsel Kuralları:

   • hasChild = true ve parent_id = null ise imagePath ZORUNLU
   • Ana kategorilerde alt kategoriler varsa görsel mutlaka olmalı
   • Alt kategorilerde veya child'ı olmayan kategorilerde görsel opsiyonel

3. Attribute Kuralları:

   • Attribute adları benzersiz olmalı
   • Enum tipinde seçenekler zorunlu
   • Desteklenen tipler: string, number, boolean, date, enum

🛠️ Kurulum ve Çalıştırma

Gereksinimler

• Node.js 18+
• npm veya yarn

Kurulum

# Depoyu klonlayın
git clone <repo-url>
cd admin-panel

# Bağımlılıkları yükleyin
npm install
# veya
yarn install

# Geliştirme sunucusunu başlatın
npm run dev
# veya
yarn dev

Uygulama http://localhost:3000 adresinde çalışacaktır.

Kategoriler Sayfası

Kategoriler yönetimi için: http://localhost:3000/dashboard/kategoriler

💡 Kullanım Kılavuzu

Kategori Oluşturma

1. Ana Kategori Oluşturma:

   • Kategoriler sayfasında "Yeni Kategori" butonuna tıklayın
   • Kategori adını ve ID'sini girin
   • Premium/Partner tipini seçin
   • Alt kategoriler varsa "Alt kategoriler var mı?" seçeneğini işaretleyin
   • Önemli: Alt kategorisi olan ana kategorilerde görsel zorunludur
   • Gerekirse özel alanlar (attributes) ekleyin

2. Alt Kategori Oluşturma:

   • Ana kategoriye tıklayarak alt seviyeye geçin
   • "Yeni Kategori" butonuna tıklayın
   • Alt kategori bilgilerini girin
   • Görsel opsiyoneldir

Kategori Düzenleme

1. Alt kategorilerde fareyi kategori kartının üzerine getirin
2. Görünen "Düzenle" butonuna tıklayın
3. Gerekli değişiklikleri yapın
4. "Güncelle" butonuna tıklayın

Kategori Silme

1. Alt kategorilerde fareyi kategori kartının üzerine getirin
2. Görünen "Sil" butonuna tıklayın
3. Onay mesajını kabul edin

Not: Alt kategorileri olan kategoriler silinemez.

Görsel Yükleme

İki yöntemle görsel ekleyebilirsiniz:

1. Dosya Yükleme: "Görsel Dosyası" alanından bilgisayarınızdan seçin
2. URL Girişi: "Görsel URL" alanına doğrudan link girin

Dosya Limitleri:

• Maksimum dosya boyutu: 5MB
• Desteklenen formatlar: JPG, PNG, GIF, WebP

Özel Alanlar (Attributes)

Kategorilere dinamik alanlar ekleyebilirsiniz:

1. Desteklenen Tipler:

   • string: Metin alanı
   • number: Sayısal değer
   • boolean: Evet/Hayır
   • date: Tarih
   • enum: Seçenekli alan (dropdown)

2. Enum Alanları:

   • Seçenekleri "+ Seçenek" ile ekleyin
   • Boş seçenekler otomatik temizlenir
   • Aynı seçenek birden fazla kez eklenemez

🎨 UI/UX Özellikleri

• Modern Tasarım: Temiz ve kullanıcı dostu arayüz
• Responsive: Mobil ve tablet uyumlu
• Visual Feedback: Yükleme, başarı ve hata mesajları
• Intuitive Navigation: Breadcrumb ve geri dönüş butonları
• Smart Validation: Gerçek zamanlı form doğrulama
• Image Preview: Görsel önizleme sistemi
• Hover Effects: Interaktif kategori kartları

🔧 Geliştirici Notları

Dosya Yapısı

src/
├── app/
│   ├── dashboard/kategoriler/          # Kategoriler sayfası
│   └── api/                           # API routes
│       ├── categories/                # Kategori CRUD endpoints
│       └── upload/category-image/     # Görsel yükleme endpoint
├── components/
│   ├── categoryCreateModal.jsx        # Kategori oluşturma modalı
│   ├── categoryEditorModal.jsx        # Kategori düzenleme modalı
│   └── ...
└── lib/
    ├── api.js                         # API utility fonksiyonları
    └── slug.js                        # Slug dönüştürme fonksiyonları

Özelleştirme

1. API Entegrasyonu: src/app/api/ klasöründeki mock veriler gerçek API ile değiştirilebilir
2. Görsel Yükleme: Upload endpoint'i cloud storage (AWS S3, Cloudinary vb.) ile entegre edilebilir
3. Validation: Ek validation kuralları eklenebilir
4. UI Themes: Tailwind konfigürasyonu ile temalar özelleştirilebilir

Test Senaryoları

✅ Başarılı Durumlar:

• Root kategori, alt kategorisiz, görselsiz oluşturma
• Root kategori, alt kategorili, görsel ile oluşturma
• Alt kategori oluşturma
• Attributes ile kategori oluşturma
• Kategori düzenleme işlemleri

❌ Hata Durumları:

• Root kategori, alt kategorili, görselsiz oluşturma
• Aynı ID ile tekrar oluşturma
• Geçersiz parent_id ile oluşturma
• Boş/geçersiz form verileri

📞 Destek

Herhangi bir sorun veya soru için:

• Issue oluşturun
• Dokümantasyonu kontrol edin
• Geliştirici ekibine ulaşın

---

Not: Bu sistem API dokümantasyonunda belirtilen tüm gereksinimleri karşılamaktadır ve production kullanımına hazırdır.