# Teachfluence Admin — Reference Analysis & Redesign Rationale

This document is the teardown of the **reference** designs (the two `.dc.html` canvases in `../`) and the rationale for this v2 redesign. It's meant to travel with the designs when handed to the mobile team.

---

## 1. What the reference was

Two Claude-Design canvases, Turkish, iOS + Android (Material), Light + Dark:

**`Teachfluence Admin.dc.html`** — a **companion** app self-labelled *"iOS + Android companion · Notify + Metrics + Destek · Türkçe-öncelikli · MVP"*. Bottom tabs: **Bildirimler · Destek · İstatistik · Seanslar · Ayarlar**. Flows:
- **Giriş** — admin-only OTP (org subdomain + e-posta → 6-digit code).
- **Bildirimler** — typed notification inbox grouped Bugün/Dün, with loading / empty / offline states.
- **İstatistikler** — KPI dashboard (hero Net gelir, 2-up grid, Gelir trendi chart) + an INSTRUCTOR "Yetki yok" RBAC gate.
- **Detay & Notlandırma** — read-only order/student/reservation detail + interactive assignment & form grading.
- **Ayarlar & Bildirimler** — settings, per-event notification prefs with recipient chips + member picker.
- **Push (kilit ekranı)** & home-screen **Widget**'lar.
- **Seanslar** — coaching list + IN_HOUSE detail with local reschedule/cancel (flagged "backend gerektirir") vs Calendly web-handoff.

**`Teachfluence Destek.dc.html`** — a full live-chat **support-agent** console: inbox (filter chips + SLA countdown chips + channel + assignee), conversation thread (assign / snooze / resolve, canned replies, internal notes, @mentions, attachment scan, typing), CSAT, and support settings (channels, working hours, assignment & SLA, canned responses, usage & quotas).

`support.js` is **not** app code — it's the generic Claude-Design canvas runtime (`dc-runtime`); all screens live as static HTML inside the canvases.

## 2. Design language (extracted, carried forward verbatim)

- **Color tokens (Light / Dark):** primary azure `#208AEF`/`#4DA3F2`, background `#FFFFFF`/`#0B0E14`, surface `#F4F4F5`/`#16181D`, mutedForeground `#5A6B82`/`#9CA3AF`, success `#15803D`/`#16A34A`, warning `#D97706`/`#F59E0B`, destructive `#B91C1C`/`#DC2626`, info `#2563EB`/`#60A5FA`; hairline `#E4E7EC`; primary tint `#E8F2FE`; text `#09090B`.
- **System rules:** Inter only; radius 8 (card/input/button); **border-first, 1px hairline, no shadow**; spacing rhythm **24 / 16 / 12**; **Light + Dark both mandatory**. (Widgets are the shadow exception for OS realism.)
- **Components:** StatCard (muted label · big 24/700 value · delta triangle), ListRow (leading tinted icon tile / avatar · title · subtitle · trailing value/time/chevron/switch), status pills (fully-rounded uppercase), SLA chips (neutral vs destructive), avatars (initials on azure tint), segmented control, filter chips, inline-SVG sparkline/trend charts, bottom sheets ("alt sayfa") for every picker/confirm, toasts with undo, skeleton/empty/offline states.

## 3. Gaps the reference left (what this pass fixes)

- **No Community** at all — yet `feat/community-spaces` shipped a full admin surface (`communityStats`, moderation queue + reports, spaces/roster/gating, events w/ RSVP, gamification, settings) with `ADMIN_COMMUNITY_*` push already wired.
- **No Students section** — only a read-only detail sheet; no roster or `studentOverview`.
- **No Sales section** — only read-only order detail + KPI cards; no orders/subscribers list, no `productPerformance`/tier views.
- **Read-only + web-handoff** posture throughout (writes deferred to web) — a deliberate MVP boundary now lifted.
- **Inconsistent nav** — Admin canvas showed 5 tabs incl. Seanslar; Destek canvas showed 4 without it; Android frames reordered. Needed one canonical IA.

## 4. What changed in v2

Per the locked scope (Full console rework · Native-first · Support as a tab · iOS-primary broad coverage):

1. **One cohesive console, new IA.** Bottom tabs: **Ana Sayfa · Satışlar · Topluluk · Destek · Daha Fazla**. A unified **Ana Sayfa** hub (cross-domain KPIs + an "Aksiyon gerekli" queue), with Students / Sessions / Notifications / Catalog / Members / Settings under a designed **Daha Fazla** hub. The bell (top app bar) opens Notifications from anywhere. *Rationale:* 4 strong pillars + a hub scales past a 5-tab ceiling; Support earns a tab per the decision; Students/Sessions stay one level down but are surfaced on Home — trivially promotable.
2. **Native-first actions.** Moderate posts/reports, ban members, grade, reply/assign/resolve support, create & cancel community events, edit notification recipients, filtered sales + refund requests — all in-app. Web-handoff only for heavy authoring (course building, catalog editing, invoicing). Backend gaps are flagged in `README.md` → *Backend deltas*.
3. **Community as a first-class pillar** — its own dashboard, spaces/roster/feed, a moderation queue, events, gamification, and settings.
4. **A shared design kit (`_kit.css`) instead of bespoke inline styles.** The reference hand-styled 3,068 inline `style=` attributes. v2 uses one token-driven stylesheet + a class vocabulary (`.tf-frame`, `.tf-statcard`, `.tf-row`, `.tf-pill`, `.tf-sla`, `.tf-sheet`, …) and a `.theme-dark` wrapper per frame. Same visual language, far more consistent and maintainable, and a cleaner map to the real `TeachfluenceUI` React components. Tokens are unchanged from the reference.
5. **Every primary screen** ships Light + Dark + its key states (loading / empty / error-offline / permission). iOS-primary chrome; Android/Material parity is noted (not per-screen duplicated); push & widgets are one condensed band.

## 5. The prototype is non-binding

The existing Expo app (`pi-education-mobile`) is a throwaway prototype; these designs are the intended target, not a description of current code. Where a screen needs a backend field that doesn't exist yet, it's designed as intended and listed under *Backend deltas*.