Ziya Teknik: Google Sheets kayıtlarını okuyan finansal dashboard

Not: Bu sayfadaki ekran görüntüleri ve canlı demo tamamen temsili verilerle çalışıyor. İsimler, işlemler, tutarlar ve kurlar bir kurgu veri üreticisinden geliyor; gerçek işletme verisi değil, gerçek verinin dönüştürülmüş hali de değil. Demoda Google Sheets bağlantısı kapalı.

Bağlam

Ziya Teknik, Mersin’de batarya yenileme yapan bir aile atölyesi. Sitesini ve reklamlarını ayrıca anlattım (web sitesi, Paid Ads); bu sayfa işin arka ofis tarafıyla ilgili.

Atölyenin kayıtları zaten Google Sheets’te tutuluyordu: bir sekmede satışlar, birinde müşterinin bıraktığı ürünler ve teslim tarihleri, birinde dükkan giderleri. Veri vardı ama soru sormak zordu. “Bu ay geçen aydan iyi mi?”, “Hangi ürün grubu daha çok kazandırıyor?”, “Kaç iş bir haftadır bekliyor?” gibi soruların her biri ayrı bir filtre, ayrı bir formül demekti.

Ne yaptım

Tabloları değiştirmeden okuyan bir dashboard kurdum. Veri girişi alıştıkları gibi Sheets’te kalıyor; dashboard sadece okuyup analiz ediyor.

1. Sheets bağlantısı

Küçük bir Node.js sunucusu Google Sheets API ile üç sekmeyi okuyor, satırları ortak bir veri modeline çeviriyor ve tarayıcıya tek bir JSON olarak veriyor. Canlı modda 60 saniyede bir yenileniyor. Eksik ya da hatalı satırlar sessizce düşmüyor; ekranın üstünde uyarı olarak görünüyor. Tablo adresi ve anahtarlar sunucuda kalıyor, tarayıcıya hiç gelmiyor.

2. Sorulara göre kurulan ekranlar

• Genel bakış: Ciro, brüt kâr, dükkan gideri ve gider sonrası sonuç; her biri önceki dönemle karşılaştırmalı.
• Satışlar: Günlük ciro ve kâr grafiği, ödeme yöntemlerine göre dağılım, aranabilir satış tablosu.
• Müşteriler: Müşteri başına ciro ve kâr, ortalama teslim süresi, bekleyen işler panosu.
• Dükkan giderleri: Ürün maliyetinden ayrı tutulan küçük harcamalar.
• İşletme analizi: Ciro değişiminin iş sayısından mı yoksa ortalama tutardan mı geldiğini ayıran bir kırılım, ürünlerin kâr sıralaması, günlere göre iş yoğunluğu takvimi ve aylık hedefler.

Her grafikten kayda inilebiliyor: bir güne, ürün grubuna ya da ödeme yöntemine tıklayınca o işlemlerin listesi açılıyor. Dönem raporu CSV olarak indirilebiliyor.

3. TL ve dolar

Enflasyonlu bir dönemde yalnızca TL’ye bakmak büyümeyi olduğundan iyi gösterebiliyor. O yüzden her satış kendi tarihindeki kurla dolara çevriliyor ve bütün ekran tek tıkla dolara geçiyor.

4. Tasarım

Arayüz beyaz zemin üstünde lacivert ve turuncuyla çalışıyor. Grafik kütüphanesi kullanmadım: çizgi, halka ve pasta grafikleri, ısı takvimi ve tarih seçici elle yazılmış SVG ve JavaScript. Mobilde menü alta iniyor, tablolar yatay kayıyor.

Bu demo

Portfolyodaki sürüm ayrı bir kopya. Node.js sunucusunun veri uç noktasını tarayıcıda çalışan bir kurgu veri üreticisiyle değiştirdim; Sheets bağlantısı, tablo adresi ve anahtarlar bu kopyada yok. Tasarım, grafikler, filtreler, hedefler ve iş panosu orijinaliyle aynı. Hedefler ve iş durumları yalnızca sizin tarayıcınızda saklanıyor.