Kuaför ve güzellik salonları için tasarlanmış modern, web tabanlı adisyon & POS ve randevu yönetimi uygulaması.
- 💳 Adisyon & POS – Hizmet, ürün ve indirimleri tek ekrandan yönet
- 📅 Randevu Yönetimi – Gün/hafta/ay bazında takvim görünümü ile randevularını organize et
- 📊 Gelir / Gider & Raporlar – Kasa, gelir-gider ve performans raporlarını takip et
- 👥 Müşteri & Personel Yönetimi – Müşterilerini ve çalışanlarını tek panelden yönet
- 📱 PWA (Progressive Web App) – Mobil cihazlarda uygulama gibi kurulabilen, offline destekli front-end
Bu repo şu an frontend (Vue 3 + Vite) tarafını içeriyor. Back-end entegrasyonu için API endpoint’leri kolayca eklenebilir.
- Özellikler
- Teknoloji Yığını
- Ekran Görüntüleri
- Kurulum
- Geliştirme Komutları
- Proje Mimarisi
- Rotalar & Sayfalar
- PWA Desteği
- Kod Kalitesi
- Gelecek Geliştirmeler
- Lisans
- ⚡ SPA mimarisi – Vue 3 + Vue Router ile tek sayfa uygulama
- 🔐 Basit auth guard –
/adminaltındaki sayfalar içinPiniatabanlı auth kontrolü - 🔄 Dinamik sayfa başlıkları – Route meta bilgisine göre
document.titlegüncellemesi :contentReference[oaicite:0]{index=0} - 🌙 Koyu tema odaklı tasarım – Grena POS için özel renk paleti (
#0b1220arka plan,#c79a00vurgu tonu) :contentReference[oaicite:1]{index=1}
-
Ana Sayfa (
/)- Ürünü tanıtan hero alanı
- Modül kartları (Adisyon & POS, Randevu, Raporlama vb.)
- Call-to-Action butonları (Hemen başla, Canlı demo vb.)
-
Giriş (
/login)- Salon sahipleri / personel için login ekranı
- Gelecekte API ile bağlanacak auth form
-
Adisyon & POS (
/pos)- Salon içi satışların ve hizmetlerin yönetimi için temel POS ekranı
- Kuaför odaklı kullanım senaryoları: hizmet, ürün, indirim, ödeme yöntemleri
-
Raporlama (
/reports)- Gelir/gider ve performans raporları için özet ekran
- Tarih filtreleme altyapısına uygun tasarım
-
Randevu (
/appointments)- Gün / hafta / ay gibi farklı görünüm senaryolarına uygun layout
- Kuaför randevu planlamasına göre kurgulanmış yapı
Router config’e göre aşağıdaki alt modüller bulunur: :contentReference[oaicite:2]{index=2}
/admin→ Admin Dashboard/admin/customers→ Müşteri yönetimi/admin/appointments→ Randevu yönetimi/admin/expenses→ Gider yönetimi/admin/incomes→ Gelir yönetimi/admin/staff→ Personel yönetimi
Bu sayfaların hepsi meta.requiresAuth = true ile korunur ve router guard useAuth() store’u üzerinden kontrol eder. :contentReference[oaicite:3]{index=3}
Frontend
- Vue 3 (Composition API)
- TypeScript
- Vite 7 – Hızlı geliştirme ve build :contentReference[oaicite:4]{index=4}
- Vue Router 4 – Sayfa yönlendirme :contentReference[oaicite:5]{index=5}
- Pinia – State management (auth vb.) :contentReference[oaicite:6]{index=6}
- Bootstrap 5 + Bootstrap Icons – UI iskeleti ve ikonlar :contentReference[oaicite:7]{index=7}
- @vueuse/core & @vueuse/motion / @motionone/vue – küçük etkileşimler ve animasyon altyapısı :contentReference[oaicite:8]{index=8}
- Axios – API entegrasyonları için hazır :contentReference[oaicite:9]{index=9}
Tooling
- Vite Plugin PWA – PWA manifest & service worker :contentReference[oaicite:10]{index=10}
- ESLint + Vue/TS config – Kod kalitesi
- Prettier – Kod formatlama
- Vue TSC – Type-check (build öncesi)
Kısa açıklama: Ürünün öne çıkan faydalarını anlattığın hero, CTA butonları ve modül kartları.
Kısa açıklama: Hizmet ve ürün satışı, ödeme alma ekranı.
Kısa açıklama: Gün / hafta / ay görünüm senaryolarına uygun randevu ekranı.
Kısa açıklama: Yönetici giriş ekraın.
Kısa açıklama: Personel giriş ekraın.
Kısa açıklama: Müşteri, randevu, gelir-gider ve personel modüllerine giriş ekranı.
Kısa açıklama: Müşteri, randevu, gelir-gider ve personel modüllerine giriş ekranı içerisinde seçilebilir ve özelleştirilebilir widget.