StockIQ: AI Destekli Stok & Satış Yönetim Paneli Arayüzü
Projeyi Canlı Görüntüle
Büyütmek İçin Tıkla
Proje Hakkında
StockIQ, işletmelerin stok ve satış verilerini anlık olarak takip edebileceği, yapay zeka destekli bir yönetim panelidir. Bu projede, backend tarafında üretilen karmaşık verilerin son kullanıcıya anlaşılır, şık ve hızlı bir şekilde sunulması hedeflenmiştir. Mevcut veri yapısı, Glassmorphism tasarım diliyle modern bir arayüze dönüştürülmüştür.
🚀 Hedefimiz Neydi?
Birçok SaaS projesinde olduğu gibi, güçlü bir backend yapısı mevcuttu ancak kullanıcıyı karşılayan yüz (frontend) eksikti. Hedefimiz:
Karmaşık veri tablolarını mobilde bile okunabilir hale getirmek.
"Şube Seçimi" gibi dinamik işlemleri sayfa yenilenmeden (SPA hissiyle) gerçekleştirmek.
Yöneticilerin kritik kararları hızlı alabilmesi için dikkat çekici AI uyarı alanları tasarlamak.
🛠️ Neler Yaptık? (Frontend Çözümleri)
1. Component Bazlı Mimari (Laravel Blade Partials): Kod tekrarını önlemek ve yönetilebilirliği artırmak için Header, KPI Cards, Overview gibi alanları modüler parçalara (partials) böldük. Bu sayede backend geliştiricileri için entegrasyonu kolay, temiz bir kod yapısı oluşturduk.
2. Tailwind CSS ile Modern Görünüm: Standart Bootstrap kalıplarının dışına çıkarak, Tailwind CSS'in esnek yapısını kullandık.
Glassmorphism: Arka plan bulanıklıkları (backdrop-blur) ve yarı saydam katmanlarla derinlik hissi yaratıldı.
Gradients & Shadows: Önemli verileri öne çıkarmak için neon efektli gölgelendirmeler ve renk geçişleri uygulandı.
3. Alpine.js ile Hafif Etkileşim: React veya Vue gibi ağır kütüphaneler yerine, projenin hızını düşürmeden interaktiflik katmak için Alpine.js tercih edildi.
Dinamik Şube Yönetimi: Navbar üzerindeki dropdown menü ve veri filtreleme işlemleri anlık olarak (client-side) yönetildi.
Mobil Menü (Hamburger Menu): Masaüstü menüsü mobilde otomatik olarak gizlenip, dokunmatik dostu bir açılır menüye dönüştürüldü.
4. Responsive (Mobil Uyumlu) Tablolar: Masaüstündeki geniş veri tabloları, mobilde tasarımın bozulmasına neden olur. Bunu önlemek için "Horizontal Scroll" (Yatay Kaydırma) mantığı kurgulandı. Böylece kullanıcılar telefondan girdiklerinde verileri sıkışık değil, parmaklarıyla kaydırarak rahatça inceleyebilir hale geldi.
✨ Öne Çıkan Özellikler
AI Öneri Banner'ı: Kritik stok durumlarını bildiren, görsel hiyerarşisi yüksek uyarı alanı.
Performans Kartları: Satış, Hedef ve Memnuniyet oranlarını gösteren renk kodlu progress barlar.
Karanlık Mod (Dark Mode): Göz yormayan, profesyonel bir dashboard deneyimi.
🚀 Hedefimiz Neydi?
Birçok SaaS projesinde olduğu gibi, güçlü bir backend yapısı mevcuttu ancak kullanıcıyı karşılayan yüz (frontend) eksikti. Hedefimiz:
Karmaşık veri tablolarını mobilde bile okunabilir hale getirmek.
"Şube Seçimi" gibi dinamik işlemleri sayfa yenilenmeden (SPA hissiyle) gerçekleştirmek.
Yöneticilerin kritik kararları hızlı alabilmesi için dikkat çekici AI uyarı alanları tasarlamak.
🛠️ Neler Yaptık? (Frontend Çözümleri)
1. Component Bazlı Mimari (Laravel Blade Partials): Kod tekrarını önlemek ve yönetilebilirliği artırmak için Header, KPI Cards, Overview gibi alanları modüler parçalara (partials) böldük. Bu sayede backend geliştiricileri için entegrasyonu kolay, temiz bir kod yapısı oluşturduk.
2. Tailwind CSS ile Modern Görünüm: Standart Bootstrap kalıplarının dışına çıkarak, Tailwind CSS'in esnek yapısını kullandık.
Glassmorphism: Arka plan bulanıklıkları (backdrop-blur) ve yarı saydam katmanlarla derinlik hissi yaratıldı.
Gradients & Shadows: Önemli verileri öne çıkarmak için neon efektli gölgelendirmeler ve renk geçişleri uygulandı.
3. Alpine.js ile Hafif Etkileşim: React veya Vue gibi ağır kütüphaneler yerine, projenin hızını düşürmeden interaktiflik katmak için Alpine.js tercih edildi.
Dinamik Şube Yönetimi: Navbar üzerindeki dropdown menü ve veri filtreleme işlemleri anlık olarak (client-side) yönetildi.
Mobil Menü (Hamburger Menu): Masaüstü menüsü mobilde otomatik olarak gizlenip, dokunmatik dostu bir açılır menüye dönüştürüldü.
4. Responsive (Mobil Uyumlu) Tablolar: Masaüstündeki geniş veri tabloları, mobilde tasarımın bozulmasına neden olur. Bunu önlemek için "Horizontal Scroll" (Yatay Kaydırma) mantığı kurgulandı. Böylece kullanıcılar telefondan girdiklerinde verileri sıkışık değil, parmaklarıyla kaydırarak rahatça inceleyebilir hale geldi.
✨ Öne Çıkan Özellikler
AI Öneri Banner'ı: Kritik stok durumlarını bildiren, görsel hiyerarşisi yüksek uyarı alanı.
Performans Kartları: Satış, Hedef ve Memnuniyet oranlarını gösteren renk kodlu progress barlar.
Karanlık Mod (Dark Mode): Göz yormayan, profesyonel bir dashboard deneyimi.
Ekran Görüntüleri
