Proje: Okul.com.tr CRM · Hub: Okul.com.tr CRM — Conventions

CRM Düzenle/Oluştur Sayfa Pattern

Sayfa Yapısı

DashboardLayout
└── Form (react-hook-form)
    ├── Sticky Header (Başlık + Geri butonu)
    ├── Card 1: Temel Bilgiler (Type ikonu, mavi/primary)
    ├── Card 2: Ayarlar (Settings ikonu, mavi/mor)
    ├── Card 3: İstatistikler (BarChart3 ikonu, yeşil)
    ├── Card N: ... (domain'e özgü bölümler)
    └── Sticky Footer: Action Bar (İptal + Kaydet)

URL Yapısı

• Liste: /entity
• Detail: /entity/:id
• Edit: /entity/edit/:id
• Create: /entity/create

İkon Renk Kodu (Card Headers)

İkon	Renk Sınıfı	Kullanım
Type	text-blue-500	Temel bilgiler
Settings	text-violet-500	Konfigürasyon
BarChart3	text-green-500	İstatistikler
ShieldCheck	text-amber-500	Güvenlik/Durum
FileText	text-muted-foreground	Metin içerik
DollarSign	text-emerald-500	Ücretler
Phone	text-cyan-500	İletişim

Okullar Create Sayfası Ek Form Alanları

Create (yeni oluşturma) sayfası edit’ten daha kapsamlı olabilir — örneğin okul create’de:

• location_level_1/2/3 — zorunlu konum seçimi (LocationSelector bileşeni)
• address, map_latitude, map_longitude
• useFieldArray — dinamik liste (iletişim bilgileri gibi)

useFieldArray

Dinamik liste alanları için (örn: birden fazla telefon numarası):

const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: "contacts"
});

isDirty Tracking

form.formState.isDirty — form değiştirildi mi? Kaydet butonu disabled/enabled kontrolü ve Cancel confirm dialog’u için.

Status Farkı (Create vs Edit)

Okullar create: status: z.boolean() Okullar edit: status: z.coerce.number().min(1) — numeric status (1-4 arası)

Bu tutarsızlık dikkat gerektirir.

HTML Entity Decode

Edit sayfasına yüklerken API’den gelen HTML entity’li metinler decode edilir:

const decodeHtmlEntities = (text) => { ... }  // textarea trick

Related

• form-pattern — React Hook Form + Zod detayları
• servis-katmani — FormValues tipleri