Yönetim paneli

Tek geliştiricisi olarak sıfırdan yazdığım operasyon paneli. Ekip müşteri hesaplarını, sözleşmeleri, faturaları, desteği ve faturalamayı tek yerden yönetiyor, destek için müşteri çalışma alanlarını açıyor ve AI doküman asistanına iç dokümanlarla ilgili soru soruyor.

  • ~80commit, tek geliştirici
  • ~28 binsatır TS/TSX
  • ~30ekran, lazy load
  • 1.000+eski kayıt taşındı
  • Nis–Eki2026

Uydurma müşterilerle panel

Bir müşteri satırını açın, demonun içinde Ctrl K'ya basın, AI doküman asistanına bir soru sorun.

console.example · sentetik veriEtkileşimli demo
Etkileşimli panel için JavaScript gerekiyor. KPI grafikli bir dashboard, detay çekmeceli sıralanabilir müşteri tablosu, destek grafikleri, komut paleti ve kaynak gösteren AI doküman asistanı sohbeti içeriyor.
Bu sayfa için vanilla JavaScript ile yeniden kuruldu. Canlı uygulama React 19, TypeScript, Vite 6, Tailwind 4, Radix UI ve TanStack Table ile yazıldı.

Canlı arayüz, demoya uygun bir branch'te

91 saniye: günün saatine göre değişen giriş ekranı, genel bakış, talepler, fiyatlandırma, canlı kart önizlemesi ve ayarlar. Sahte veri, gerçek API yok.

Sahte veri katmanı ve temizlenmiş isimlerle çalışan bir demo branch'inde kaydedildi; ilk olarak Mayıs 2026'da LinkedIn'de paylaşıldı.

Sorun

Müşteri temsilcileri, finans ve destek ekibi bir müşteriyi tek yerde görmek istiyordu: sözleşme, faturalar, kişiler, notlar, açık talepler.

Müşteri kayıtları eski bir arka ofiste duruyordu. Bir sorunu tekrarlamak için müşterinin kendi pazarlama panelini açmak şifre istemek demekti. Destek ekibi talep hacmini güne, temsilciye veya müşteriye göre göremiyordu; tekrar eden iç soruların cevapları Word dosyalarına dağılmıştı.

Rolüm

Frontend'in tamamını, AI doküman asistanının retrieval servisini ve binden fazla eski müşteri kaydını yeni CRM tablolarına taşıyan scriptleri tasarlayıp yazdım. Ekranların ihtiyaç duyduğu endpointler için backend ekibiyle çalıştım; ekranın müşteri başına bir istek atacağı yerde toplu bir alan istedim.

  • Dashboard, CRM (müşteri, kişi, fatura, sözleşme, not), destek analitiği, faturalama, hata raporları
  • Müşteri çalışma alanlarına destek erişimi; eksik oturumda açılmayı reddeden koruma
  • AI doküman asistanı: yükleme, parçalama, vektör arama, kaynak gösteren, parça parça iletilen cevaplar, model seçici
  • Komut paleti, TR/EN, açık ve koyu tema, role göre açılan modüller

Bir istek nasıl ilerliyor

  1. Tek sayfa uygulamaEkran başına lazy route, URL ile açılabilen sayfalar ve chunk hata sınırı.
  2. API istemcisiHer yolu en uzun önek eşleşmesiyle iki backend'den birine yönlendirir; tipli hatalar, host başına token, tipli modellere adaptörler.
  3. Liste cache'i60 saniyelik cache; aynı anda giden çağrılar tek isteği paylaşır.
  4. Backend servisleriMevcut servisler ve SQL tabloları, ekranların ihtiyacı olan endpointlerle genişletildi.
  1. YüklemeWord dosyaları metne çevrilir, 150 örtüşmeli 800 tokenlık parçalara bölünür.
  2. GetirmeEmbedding ve parça deposunda kosinüs top-k.
  3. CevapNumaralı kaynaklarla akan cevap, değiştirilebilir model sağlayıcıları; eşleşme yoksa cevap vermez.

Mor ton: benim yazdığım kısımlar. Gerisi önceden vardı.

Zor olan neydi, ne yaptım

Çok istek yerine tek istek

Müşteri detay sayfası her sekme değişiminde tüm listeleri yeniden indiriyordu. 60 saniye TTL'li küçük bir liste cache'i artık devam eden istekleri paylaşıyor; aynı anda gelen çağrılar tek bir ağ turuyla çözülüyor. Yenile butonları cache'i temizliyor.

Backend'den doğru şekli istemek

"Son yorum" sütunu müşteri başına bir istek, yani yaklaşık 1.460 çağrı demekti. Bunun yerine liste endpointine tek bir toplu alan eklenmesini istedim.

Türkçe harflerden bağımsız arama

Müşteri adlarında ı, İ, ş, ğ, ü, ö, ç ile düz Latin yazımlar karışık. Arama iki tarafı da katlıyor; isik yazınca Işık bulunuyor.

Veri kaybetmeden kaydetmek

Bazı eski kayıtlarda yeni listelerin tanımadığı açılır menü değerleri vardı. Formlar bilinmeyen değerleri kayıtta sessizce silmek yerine koruyor ve ekranda ham enum ID'leri göstermiyor.

Suçlamadan önce kanıt

Kullanıcılar yanlış tenant'a düştüğünde ilk şüpheli CRM taşımasıydı. Etkilenen tabloları, triggerları ve zaman çizelgesini SQL ile çıkarıp sebebin bu olmadığını gösterdim; düzeltme doğru yere yöneldi.

Türkçeye göre ayarlanmış retrieval

AI doküman asistanı yalnızca getirilen pasajlardan cevap veriyor, numaralı kaynak gösteriyor ve ilgili bir şey çıkmazsa cevap vermiyor; ekip her cevabı dokümanla karşılaştırabiliyor.

İlk haftanın kararları

Komut paleti ve Azaltılmış / Tam Hareket anahtarı en sonda eklenmedi, ilk hafta planlandı. Klavyeyle gezinme ve kullanıcının kontrol ettiği animasyon, render mimarisini, store yapısını ve bileşen API'lerini baştan şekillendirdi.

Çözmeye değer bir problemin mi var?Birlikte çözelim

Konuşmaya başla

Full-stack ve uygulamalı AI rollerine açığım, uzaktan veya hibrit.

Rolü, ekibi ve problemi anlat.