Arayüz rehberi

Bu sayfa Cere Insight 2.0 web kabuğunu ekran ekran açıklar: menü grupları, hangi rotaya giderler, kimler ne görür. Uygulama Next.js App Router ile çalışır; giriş rotaları (/login, /register, /forgot-password) ana kabuktan hariç tutulur — böylece kimlik ekranları sade kalır.

Oturum ve kabuk

• Oturum açıkken içerik AppLayout içinde render edilir: sol sidebar, üst navbar, ortada sayfa gövdesi.
• Oturum yokken middleware isteği /login’e yönlendirir (istisna: public auth rotaları).
• Oturum çerezi adı: access_token — middleware yalnızca çerezi okuyabilir; tarayıcı depolamasının geri kalanı istemci tarafındadır.

Bkz. Kimlik doğrulama.

Sol sidebar — gruplar

Sidebar öğeleri src/components/sidebar.tsx içindeki sırayı takip eder:

Ana bölüm

Öğe	Rota	Not
Ana sayfa (Dashboard)	/	Org özet metrikleri

Özellikler

Öğe	Rota
Projeler	/projects
Bilgi tabanları	/knowledge-bases
Analitik ajanlar	/analytic-agents
Orkestrasyon	/orchestration

Raporlar (genişleyen menü)

Üst tıklama /reports/overview’a gider; altında iki grup vardır:

Ajan raporları (t.nav.reportsGroupAgents):

• Genel bakış → /reports/overview
• Konuşmalar → /reports/conversations
• Ajanlar → /reports/agents
• Etiketler → /reports/labels
• Gelen kutuları → /reports/inboxes
• Takımlar → /reports/teams
• Proje → /reports/bot

Kullanıcı raporları:

• Kişi / iletişim raporları → /reports/users (detay: /reports/users/[contactId])

Alt menü dar ekranda hâlâ hiyerarşiktir; mobilde drawer içinden kaydırılabilir.

Organizasyon ve faturalama

Öğe	Rota
Organizasyon	/organizations
Abonelik	/subscription

Süper yönetici ek menü

Yalnızca user.role === SUPERADMIN ise görünür:

Öğe	Rota
Mesajlaşma ortamı instanceları	/chat-platform-instances

Sidebar davranışları

• Daraltılmış mod: Yalnızca ikonlar; öğe üzerine gelince title özniteliği ipucu verir.
• Alt köşe düğmesi: Genişlet / daralt (ChevronLeft / ChevronRight).
• Aktif rota: Mevcut path ile tam eşleşme veya (raporlar altında) prefix eşleşmesi ile vurgulanır.

Üst navbar

Tipik öğeler (ürün sürümüne göre küçük farklar olabilir):

• Organizasyon seçici — birden fazla üyelikte açılır menü; başarılı seçimde API switch çağrısı ve React Query önbellek invalidasyonu.
• Profil — /profile, çıkış.
• Dil — Türkçe / İngilizce; LanguageProvider ve çeviri dosyaları (src/lib/i18n).
• Tema — next-themes ile açık / koyu / sistem.

Google ile giriş kullanıyorsanız GoogleOAuthProvider tüm ağaçta sarılmıştır; Giriş ekranındaki düğme bu sağlayıcıya bağlıdır.

Sağlayıcılar ve veri yükleme

• TanStack Query (QueryClientProvider) — sunucu durumu; varsayılan staleTime ~1 dk, odakta yenileme kapalı olabilir.
• Toaster — sonner ile bildirimler (ör. org değiştirildi).

Profil ve yetkiler

• /profile çoğu kullanıcı için kişisel bilgi ve dil tercihi içerir.
• Org üyeliği rolleri ve davet yönetimi için /organizations sayfasını kullanın.

Responsive ve erişilebilirlik

• Dar genişlikte sidebar genelde mobil drawer / hamburger ile açılır (layout bileşeninize bağlıdır).
• Tahta (React Flow) zoom/pan kullanır; dokunmatikte jest ile kaydırma çakışmalarına dikkat edin.
• Önemli düğmeler için aria-label (örn. org seçici) kullanımına uyulmuştur; kendi ekran görüntülerinizde odak halkasını kesmeyin.

Klavye ve verimlilik (genel)

• Modallar ve formlar shadcn/ui bileşenleri üzerindedir; Escape ile kapanan diyaloglar beklenir.
• Tahta üzerinde çoklu seçim / kopyalama varsa sürüm notlarına bakın.

Sık sorulanlar

Menüde “mesajlaşma ortamı” yok: Hesabınız SUPERADMIN değildir — normaldir.

Rapor altı gri: Üst Raporlar satırına tıklayıp menüyü genişletin; ok ikonu durumu gösterir.

Dil değişmiyor: Profil veya yerel state backend ile senkronize olmayabilir; sayfa yenileyin veya profilde dil alanını kontrol edin.

Sonraki adımlar

• Dashboard — ana sayfa kartları
• Proje yönetimi — proje detay ve tahta
• Kavramlar ve mimari — rota ↔ modül eşlemesi