Teachfluence Web · Temeller

Belirteçler · Tasarım Token'ları

Renk, tipografi, yarıçap ve boşluk token'ları — doğrudan pi-education-web/app/globals.css'ten alınmıştır (shadcn HSL sistemi). Yönetim paneli üretimde yalnızca Light temayı kullanır; Dark token'ları Faz-2 için _kit.css'te tanımlıdır. Kural: yalnızca Inter · yarıçap 8px (--radius: .5rem) · kenarlık öncelikli (1px hairline) · kartlarda gölge yalnızca gerçek uygulamadaki yerlerde.

Anlamsal Renkler (Light)

primary

240 84% 42%

primary-foreground

210 100% 93.3%

foreground

222.2 84% 4.9%

background

0 0% 100%

muted

210 40% 96.1%

muted-foreground

215.4 16.3% 42%

secondary

240 4.8% 95.9%

border / input

214.3 31.8% 91.4%

success

142.1 76.2% 36.3%

warning

17 88.3% 40.4%

destructive

0 84.2% 60.2%

info

221.2 83.2% 53.3%

Ayrıca *-deep (tint üzerinde WCAG-AA metin) ve *-solid (doygun renk üzerinde metin) türevleri; rozet/uyarı bileşenlerinde kullanılır.

Tipografi · Inter

Sayfa Başlığı 34/800

H1 Başlık 28/800

Bölüm başlığı 20/700

Kart başlığı 17/700

Vurgulu metin 15/600

Gövde metni 14/500

Meta / yardımcı 12.5/500

ETİKET / EYEBROW 11/600

₺1.570,97 · tabular-nums

Yarıçap & Sistem Kuralları

sm · 6px

md/lg · 8px

card · 12px

pill · full

• Font: Inter (next/font) — display + gövde aynı aile.

• --radius: 0.5rem → md/lg 8px, sm 6px, kart 12px.

• Kenarlık öncelikli: 1px hairline (--border), gölge yalnız overlay/menü/toast'ta.

• Boşluk ritmi: 32 (sayfa) · 20/22 (kart, bölüm) · 12/14 (satır).

• Kenar çubuğu: 56px (kapalı) → 256px (açık); üst bar 64px.

• İçerik maks. genişlik ~1180px; masaüstü 1440px tam ekran.

Bileşen Kiti

Ekranları oluşturan yeniden kullanılabilir bileşenler — gerçek TeachfluenceUI (shadcn/Radix) kütüphanesinin görsel karşılıkları. Renk yalnızca anlamsal token'lardan gelir; bileşen görünümü varyant ile sürülür (Button: default/secondary/outline/destructive/ghost/link · Badge: default/secondary/success/info/destructive).

Düğmeler · Button

Kaydet

İkincil

Dışarı çizgili

Sil

Hayalet

Bağlantı

AI ile Oluştur

Yeni

Devre dışı

Küçük

Normal

Büyük

Rozetler · Badge / StatusBadge · Etiket · Filtre çipi

Yayında Taslak İptal Bilgi Yeni Nötr Öne çıkan Çizgili Aktif

etiket +3 SLA 3sa SLA 24dk Gecikti

Tümü 126 Ödendi 98 Bekliyor 21 İptal 7

Alanlar · Input / Search / Select / Textarea / OTP

Metin

Örn. Yeni Kurs

Odak

UX Tasarım Bootcamp

Hata

geçersiz

Bu alan zorunludur.

Arama

Ara...

Seçim

Son 28 Gün

Kod (OTP)

1

2

3

Açıklama

Öğrenciye görünecek kısa açıklama...

İstatistik Kartı · StatCard

Net gelir

₺248.940

↗ +12.4%

Aktif abonelik

412

↘ -2.3%

Liste Satırı · ListRow

Yeni satış — UX Bootcamp

Yıllık Üyelik

₺1.4502 dk

ED

Elif Demir

elif@ornek.com

Aktif

Veri Tablosu · Table (yönetim panelinin ana liste yüzeyi)

Sipariş	Öğrenci	Ürün	Durum	Tutar
#10428	AY Ahmet Yıldız ahmet@ornek.com	UX Tasarım Bootcamp	Ödendi	₺1.450,00
#10427	ZK Zeynep Kaya zeynep@ornek.com	Yıllık Üyelik	Bekliyor	₺2.400,00
#10426	MD Mert Demir mert@ornek.com	Dijital Ürün Paketi	İade	₺780,00

Kontroller

AçıkKapalı

TabloTakvim

GenelDetay 4Ayarlar

Bildirim · Banner / Toast

KaydedildiGeri al

Henüz kayıt yok

İlk kaydınızı oluşturduğunuzda burada görünecek.

Oluştur

Yükleniyor · Skeleton

Avatar

AYZKMDEÖCÖOK

Uygulama İskeleti · Üst Bar + Kenar Çubuğu (Exemplar)

Yönetim panelinin her ekranında tekrar eden çatı: 64px üst bar (hamburger · teachfluence logosu · bildirim zili · hesap avatarı) ve sol kenar çubuğu (56px kapalı → 256px açık). Kaynak: OrganizationAdminLayout.tsx + src/admin/components/AdminSidebar.tsx. Aşağıdaki tam ekran, canlı /admin/orders (“Kontrol Paneli”) ekranının birebir yakalanmasıdır ve tüm canvas'lar için sadakat çıtasını belirler.

Kontrol Paneli · Gelir Analizi · kenar çubuğu kapalı

teachfluence

9+

AU

Gelir Analizi

Seçili dönem için gelir ve satış metrikleri

Son 28 Gün

Sipariş Gelirleri

Toplam Ödenen Fiyat

₺977.146,39

↗ +37.8%önceki döneme göre

Toplam Net Kazanç

₺977.146,39

↗ +37.8%önceki döneme göre

Sipariş Sayısı

622

↗ +15.6%önceki döneme göre

Sipariş Başına Net Kazanç

₺1.570,97

↗ +19.2%önceki döneme göre

Toplam Öğrenci

6002

↗ +10.4%önceki döneme göre

Yeni Öğrenci

563

↗ +36.0%önceki döneme göre

Aktif Öğrenci

606

↘ -3.8%önceki döneme göre

Yeni Kayıt

945

↗ +2.2%önceki döneme göre

Gelir Trendi

Seçili dönem için gelir değişimi

1 Haz8 Haz15 Haz22 Haz28 Haz

Üst bar beyaz, alt hairline; kenar çubuğu ikon rayı 56px. Aktif ray öğesi (roket = Kontrol Paneli) primary indigo + sol 3px gösterge. İçerik alanı çok hafif gri zemin (--screen), kartlar beyaz + 1px hairline.

Kenar çubuğu · açık (256px) — gerçek gezinme ağacı

teachfluence

Kontrol Paneli

Sayfalarım

Profil Kartım

Web Sayfalarım

Ürün Sayfaları

Bloglar

Ürünler

Dersler

1:1 Görüşmeler

Dijital Ürünler

Canlı Etkinlikler

Abonelikler

Paketler

Pazarlama

Toplu E-posta

İndirim Kodları

Otomasyonlar

Etiketler

Formlar

Öğrenciler

Ayarlar

Açık kenar çubuğu üç akordeon grubu (Sayfalarım · Ürünler · Pazarlama) ve dört üst-düzey bağlantı (Kontrol Paneli · Formlar · Öğrenciler · Ayarlar) içerir. Grup + alt bağlantı görünürlüğü RBAC izinleriyle (ORG_*_VIEW / COURSE_VIEW / COACHING_VIEW) koşullanır — izinsiz gruplar hiç render edilmez.

Kimlik · Giriş

Giriş, org sitesinin bir page-builder bloğudur (src/editor/blocks/login) ve üç yöntem sunar: E-posta + Şifre, E-posta OTP (6 haneli kod), Google ile giriş. Yöneticiler de org girişinden oturum açar. Üretimde org markasına göre temalanır (bkz. canvas 09/10 — Flu koyu tema); burada nötr/light gösterilir. Girişten sonra birden çok org üyesiyse organizasyon seçimi gelir.

E-posta + Şifre

teachfluence

Giriş Yap

Giriş yapmak için lütfen giriş bilgilerinizi giriniz.

Email

ornek@eposta.com

Şifre

••••••••

Şifremi unuttum

Giriş Yap

veya

Google ile oturum aç

Hesabın yok mu? Hemen başla

E-posta OTP · kod doğrulama

teachfluence

Giriş Yap

Giriş yapmak için lütfen giriş bilgilerinizi giriniz.

Giriş Kodu

4

2

8

Giriş Yap

Kodu tekrar gönder 4:32

OTP hücreleri (bkz. bileşen kiti · OTP). Hata durumunda hücreler error kenarlığı + yardım metni gösterir.

Organizasyon seçimi · giriş sonrası

Organizasyon Seç

Devam etmek için bir organizasyon seçin

FA

Flu Akademi

Sahip · flu.teachfluence.com

OK

Okulum Akademi

Yönetici · okulum.teachfluence.com

3

Bir kullanıcı birden çok org üyesi olabilir; rol (Sahip/Yönetici/Eğitmen) ve okunmamış rozetiyle listelenir.

Yönetim Paneli · Koyu Mod (Dark Mode)

Yönetim konsolu varsayılan olarak açık temada açılır, ancak gerçek bir koyu mod destekler: kök ThemeProvider defaultTheme="light" enableSystem + üst bardaki mod düğmesi (Güneş/Ay). Tercih kullanıcı/tarayıcı başına saklanır. Canlı flu-org yönetimi şu an koyu render eder; bu bant onu yakalar. İskelet bands/00.3.shell.html ile birebir aynıdır — yalnızca token seti .theme-dark ile değişir (arka plan 222 84% 4.9%, hairline 217 32% 17%, primary açık mavi 210 100% 80%).

Kontrol Paneli · Gelir Analizi · koyu tema (kenar çubuğu kapalı)

teachfluence

9+

AU

Gelir Analizi

Seçili dönem için gelir ve satış metrikleri

Son 28 Gün

Sipariş Gelirleri

Toplam Ödenen Fiyat

₺977.146,39

↗ +37.8%önceki döneme göre

Toplam Net Kazanç

₺977.146,39

↗ +37.8%önceki döneme göre

Sipariş Sayısı

622

↗ +15.6%önceki döneme göre

Sipariş Başına Net Kazanç

₺1.570,97

↗ +19.2%önceki döneme göre

Toplam Öğrenci

6002

↗ +10.4%önceki döneme göre

Yeni Öğrenci

563

↗ +36.0%önceki döneme göre

Aktif Öğrenci

606

↘ -3.8%önceki döneme göre

Yeni Kayıt

945

↗ +2.2%önceki döneme göre

Gelir Trendi

Seçili dönem için gelir değişimi

1 Haz8 Haz15 Haz22 Haz28 Haz

Birebir aynı iskelet, yalnızca .theme-light → .theme-dark: üst bar + kenar çubuğu koyu lacivert zemine, içerik alanı daha da koyu --screen'e, kartlar koyu yüzey + düşük-kontrast hairline'a döner. Aktif ray göstergesi ve gelir grafiği koyu temanın açık-mavi primary'sini (210 100% 80%) kullanır; delta okları başarı/tehlike tonlarını korur.

Mod düğmesi · Açık / Koyu / Sistem

teachfluence

AU

Üst bardaki tek ikon düğmesi (aktif temaya göre Güneş↔Ay) açılır menüyü verir: Açık · Koyu (seçili, tik) · Sistem. “Sistem”, enableSystem ile tarayıcı prefers-color-scheme'ini izler (burada koyuya çözülür). Seçim kullanıcı başına saklanır; sonraki oturumları da bağlar.

Koyu mod, kullanıcı/tarayıcı başına bir tercihtir (kök ThemeProvider defaultTheme="light" + enableSystem + mod düğmesi) ve yalnızca yönetim konsolunu temalar. Org'un themePreference'ı ise öğrenci/vitrin yüzeylerini temalar; yönetim panelini etkilemez. Bu ekran Mevcut'tur (hâlihazırda yayında), yalnızca özgün 00–11 yakalamasında ayrıca belgelenmemişti.