Tasarım Sistemi

Panelin görünümü Claude Design’da hazırlanan Modernist tasarım sisteminden gelir: düz ve mimari bir dil, baştan sona Archivo fontu, #f3f2f2 zemin üzerinde tek bir accent rengi (#ec3013), sıfır köşe yuvarlaklığı, ana bölümler arasında 2px, bölüm içinde 1px çizgiler ve sola yaslı etiketler. Düzeni çizgiler ve hizalama kurar; gölgeli kartlar kullanılmaz.

Kaynak: tasarım paketi

admin-panel-dashboard-design/, dışa aktarılmış Claude Design projesidir ve görsel spesifikasyonun tek doğruluk kaynağıdır. Bu klasör bir prototiptir, proje kaynağı değildir:

Kendi support.js çalışma zamanını taşır (<sc-if> / <sc-for> / {{ }} şablon dili; ReactDOM.render kullanır ve module’e atama yapar).
ESLint bu klasörün tamamını yok sayar (eslint.config.mjs). Oradaki uyarılar gerçek ama bizim düzeltebileceğimiz şeyler değil; bırakılsalar kendi kodumuzdaki regresyonları gömerlerdi.
app/ altındaki hiçbir dosya bu klasörden import yapmaz.

Bir ekranın boşluğu, metni veya türetilmiş bir etiketi konusunda tereddüt varsa tahmin etmek yerine project/Adisyon Yönetim Paneli.dc.html dosyasını okuyun. Özellikle Türkçe etiketlerin çoğu satır içinde yazılı değildir; dosyanın <script type="text/x-dc"> bloğunda hesaplanır.

`app/globals.css`

Tasarım sisteminin styles.css dosyasının Tailwind v4’e aktarılmış halidir ve iki bölümden oluşur.

1. `@theme`: token’lar

Renkler (her rol için 100–900 arası OKLCH rampası), fontlar, köşe yarıçapı ve gölge seviyeleri burada tanımlanır. @theme içinde oldukları için Tailwind bunlardan utility sınıfları üretir: bg-accent-100, text-neutral-700, border-accent Tailwind’in varsayılan paletini değil, gerçek paleti kullanır.

--space-* ve --color-divider bilerek @theme yerine :root içindedir. Bunları bileşen katmanı kullanır, ve --space-1..8 Tailwind’in --spacing ölçeği değildir. @theme’e taşınsalar yanıltıcı ikinci bir boşluk sistemi üretirlerdi.

Kural: Bileşende sabit hex rengi yazmayın; gerekiyorsa globals.css’e token ekleyin.

2. Bileşen katmanı

Kaynak stil dosyasından birebir kopyalanan sınıflar:

Sınıf	Kullanım
`.btn` + `.btn-primary` / `.btn-secondary` / `.btn-ghost` / `.btn-block` / `.btn-icon`	Düğmeler
`.input`, `.field`, `.radio`	Metin, sayı, saat ve `select` alanları; alan sarmalayıcı; radio
`.table`	Veri tabloları
`.tag` + `.tag-accent` / `.tag-accent-2` / `.tag-neutral` / `.tag-outline`	Durum etiketleri, rozetler
`.seg` + `.seg-opt`	Segmentli seçim (ör. Masa bazlı / Hızlı satış)
`.card` + `.card-kicker` / `.card-title` / `.card-meta` / `.card-body`	Kart
`.dialog-backdrop`, `.dialog`, `.dialog-title`, `.dialog-body`, `.dialog-actions`	Diyaloglar
`.hr`, `.text-muted`, `.grayscale`	Yatay çizgi ve yardımcılar
`.elev-sm` / `.elev-md` / `.elev-lg`	Gölge seviyeleri (panelde yalnızca diyaloglar `.elev-lg` kullanır)

Kural: Bileşen görünümü için bu sınıfları, yerleşim (grid, flex, boşluk) için Tailwind utility’lerini kullanın.

Sınıfları Tailwind ile yeniden yazmak yerine aynen taşımak bilinçli bir karardı. Tasarım sisteminin kendi rehberi bu sınıflarla çalışmayı söylüyor, prototip işaretlemesi zaten bunları kullanıyor ve sınıflar temaya bağlı etkileşim durumlarını taşıyor: accent rampasından hover/active tonları, 2px :focus-visible accent halkası, devre dışı durumda %45 opaklık. Yeniden yazımda bunları kaybetmek kolay olurdu.

Bilinçli sapma: segmentli seçim

Prototip segmentli seçimi gizli radio input’lar üzerinde :has(input:checked) ile çalıştırıyor. Burada .seg-opt bir <button>’dır ve seçili durumu aria-pressed ile belirlenir. Bu kontroller form değeri göndermiyor, client state’i değiştiriyor. Ekran okuyucunun ihtiyaç duyduğu da ARIA durumu.

Ortak parçalar: `_components/primitives.tsx`

Ekranlar arasında tekrar eden tasarım kalıpları. Hepsi Server Component’tir.

Bileşen	Ne işe yarar
`StatCell`	KPI hücresi: 11px büyük harf etiket, büyük rakam, isteğe bağlı not. `size="clamp"` dashboard ölçeği, `size="fixed"` 32px senkron ölçeği
`StatRow`	Hücreleri eşit sütunlara saran ve 2px çizgiyle kapanan satır (`min` ile en küçük sütun genişliği)
`AlertStrip`	Accent tonlu zemin, 4px accent kenar, koyu rampa metni ile uyarı şeridi
`FilterBar`	Tablo üstündeki filtre satırı
`SectionHead`	17px sola yaslı bölüm başlığı, isteğe bağlı sağ taraf notu
`CountLabel`	Filtrelerin yanındaki sayı etiketi (“18 malzeme”)
`StatusTag`	Durum etiketi. Palet tek renkli olduğundan “kötü” durumlar accent tonunu taşır

StatusTag’in accent’e boyadığı durumlar sabit bir listedir: Kritik, Tükendi, Hata, Zaman aşımı, offline, beklemede, Başarısız, Kuyrukta, Pasif. Yeni bir olumsuz durum metni eklerseniz bu listeye de ekleyin; aksi halde nötr renkte görünür.

Tipografi ve metin

Archivo next/font/google ile yüklenir: ağırlıklar 400, 600, 700, 800; alt kümeler latin ve latin-ext (İ ı ş ğ ç ö ü için gerekli). Başlıklar 800, gövde metni 400.
<html lang="tr">. Arama ve filtrelerde toLocaleLowerCase("tr") kullanılır; aksi halde “İ” ve “I” yanlış eşleşir.
Tutarlar money() ile tr-TR biçiminde ve ₺ sonekiyle yazılır (1.480,00 ₺).
Arayüz metni Türkçe ve doğal cümle düzenindedir.