# Teachfluence Admin — Mobile Console Designs (v2)

High-fidelity mobile design canvases for the org-admin app, to hand to the mobile team. Turkish, iOS-primary, Light + Dark. Built on a shared design kit that mirrors the `TeachfluenceUI` component library.

> Scope decisions (locked with product): **Full console rework · Native-first actions · Support as one in-app tab · iOS-primary, broad coverage.** See `ANALYSIS.md` for the reference teardown and rationale.

## How to open

The canvases render with the Claude-Design runtime (`support.js`) + a vendored React (`react.js`), fully offline. A `file://` open is blocked by some browsers, so serve the folder:

```bash
cd designs/teachfluence-admin-v2
python3 -m http.server 8080
# then open http://127.0.0.1:8080/00-foundations.dc.html  (etc.)
```

Each `*.dc.html` is also a native Claude-Design canvas (`<x-dc>` + `_kit.css`), so it can be imported into Claude Design for editing.

## Files

| File | Contents |
|---|---|
| `00-foundations.dc.html` | Tokens · component kit · navigation shell · login (OTP) |
| `01-home-sales.dc.html` | Ana Sayfa (unified overview) · Satışlar (analytics · orders · subscribers) |
| `02-community.dc.html` | Topluluk: dashboard · spaces & roster · feed · moderation · events · **event→live-event conversion (YENİ)** · gamification · settings |
| `03-students-sessions-support-settings.dc.html` | Öğrenciler · Seanslar · Destek console · Bildirimler · Ayarlar · Push/Widget |
| `_kit.css` | Design tokens (light/dark) + component class vocabulary — the single styling source |
| `_sprite.html` | Icon set (lucide-style) referenced via `<use href="#ic-…">` |
| `_exemplars.dc.html` | Two reference-quality screens (Home + Community Moderation) used to set the bar |
| `_assemble.mjs` | Stitches `bands/*.html` fragments into the four canvases (`node _assemble.mjs`) |
| `bands/` | Per-band source fragments (one `dc-band` each) |

## Information architecture

Bottom tab bar: **Ana Sayfa · Satışlar · Topluluk · Destek · Daha Fazla**. Top app bar carries the org switcher + a **bell** (→ Bildirimler) + account avatar. **Daha Fazla** is a designed hub → Öğrenciler · Seanslar · Bildirimler · Katalog · Üyeler & Roller · Ayarlar · Organizasyon değiştir · Çıkış. Detail = pushed stack; pickers/confirms = bottom sheets.

*Note:* Support is a bottom tab per the scope decision; Students & Sessions live one level down (surfaced on Home) and are trivially promotable to a tab if preferred.

## Final review — outcome (all items shipped)

A two-pass review (consistency + gaps) drove a full fix + build pass. Applied: correctness/consistency fixes, the **grading** regression, **catalog** & **payouts**, sub-navigation, contact-360 links — then the interaction backlog below (previously deferred, now **all designed**):

- **List power-ops** — a shared "Sırala" (sort) sheet + long-press **multi-select** (contextual app bar + row checkboxes + bulk-action bar) on Students (tag/email/export), Moderation (approve/reject), Support (assign), Notifications (mark-read); sort on Orders.
- **Support triage** — swipe-reveal Ata/Çöz/Ertele + long-press quick actions on inbox rows.
- **Coaching availability editor** — weekly recurring hours + block-add sheet + date-specific overrides ("bugünü kapat"), IN_HOUSE-only.
- **Form responses** — Formlar list → Yanıtlar list → response detail (grade if gradable, open contact); routes the "Yeni form yanıtı" notification.
- **Subscriber dunning** — "Ödeme hatırlatması gönder" + "Tahsilatı tekrar dene" + retry-status on PAST_DUE rows.
- **Fuller state matrix** — offline/loading/permission states across Roster, Feed, Moderation, Home, Sessions, Subscribers + support-composer sending/failed/queued states.

## Backend deltas (design implies these — flag for backend team; not blocking the design)

> **Full engineering plan:** [`docs/admin-mobile-app/backend-deltas-plan.md`](../../docs/admin-mobile-app/backend-deltas-plan.md) — every delta verified against the codebase (EXISTS / PARTIAL / MISSING) and specced with schema, GraphQL surface, service/resolver, migrations, conventions, and regression guards.

Quick list (see the plan doc for detail):

Most screens map to existing resolvers (`revenue`, `student-analytics`, `community-stats`, notifications, support/CRM). These need building:

- **Filtered orders connection** — a status/date/product-filtered `orders` list for the Sales "Siparişler" screen (today only `Organization.transactions` / `orderLineItems` exist).
- **Refund-from-mobile mutation** — the order detail's "İade talebi oluştur" (today refunds are web-only).
- **Needs-grading aggregate** — a `pendingGradingCount` / queue across assignments + forms + exams for Home's "Aksiyon gerekli" (today discovery is notification-driven).
- **Unified "Aksiyon gerekli" aggregate** — grading + open community reports + pending posts + unassigned support (or compose client-side from existing counts).
- **Notification-settings recipient member-picker** — persist per-event recipients (today defaults to org owners).
- **Native session reschedule/cancel** — IN_HOUSE local mutations (reference flagged these unbuilt); Calendly stays web-managed.
- **Localized push copy.** *(Optional: per-space community engagement time-series — `communityStats` is org-wide point-in-time.)*

## Screen index

126 device frames across 25 bands. Every primary screen ships Light + Dark; states noted.

> 🆕 **What's new (for the mobile team):** band **`02.6a` — Etkinlikler · Canlı etkinliğe dönüştür** is the D5 Live Event ↔ Community Event bridge (backend live in PR #442). Every new frame carries a violet **YENİ** badge on its caption, and its `dc-note` (violet left-rule) names the exact new mutation/field: `convertCommunityEventToLiveEvent`, `unlinkCommunityEventFromLiveEvent`, `CommunityEvent.liveEvent`, `LiveEvent.communityEvent`. Scan for the violet **YENİ** marker to find everything added in this pass.

**`00-foundations.dc.html`**
- **Belirteçler** — color tokens (light/dark pairs), type scale, system rules + on-device pairing.
- **Bileşen kiti** — buttons, fields, OTP, pills, SLA chips, controls, StatCard, ListRow, avatars, toasts, skeleton (full light + dark catalog).
- **Navigasyon** — tab bars, app-bar variants, "Daha Fazla" hub, org-switcher sheet.
- **Giriş** — e-posta ile giriş (Google **veya** OTP), **organizasyon slug'ı yok**; kod doğrulama; giriş sonrası **organizasyon seçimi** (üye olunan orglar, rol + okunmamış); field states, error, re-auth.

**`01-home-sales.dc.html`**
- **Ana Sayfa** — unified overview (hero net gelir, KPI grid, trend, "Aksiyon gerekli", son etkinlik) + empty + Eğitmen permission-gate.
- **Notlandırma** — grading queue (assignment/quiz/form/exam) + submission-scoring detail (score input + quick chips + feedback + prev/next) + per-question stepper + empty. *(Restored regression from the reference app; reached from Home + notifications + the More hub.)*
- **Satışlar · Analitik** — sub-nav (Analitik·Siparişler·Aboneler) + overview cards, trend, period comparison, product performance, subscription tiers.
- **Satışlar · Siparişler** — orders list + filters + states, order detail (→ open contact profile), refund-request sheet.
- **Satışlar · Aboneler** — subscribers list (at-risk/PAST_DUE), subscriber detail (payments, → open contact).
- **Katalog** — read-mostly product catalog grouped by type (Kurs · Dijital ürün · Canlı etkinlik · Paket · Abonelik, DP/LE/CAT distinct) + product detail (publish/unlist toggles, performance, grant/gift, web-handoff for authoring).
- **Ödemeler (Hakediş)** — payout hero (next payout) + history + payout detail with deduction breakdown (read-only; config/withdraw on web).

**`02-community.dc.html`**
- **Pano** — `communityStats` grid, action-needed, weekly digest + disabled + permission states.
- **Alanlar** — spaces list (grouped, gated), space detail (gating dead-end warning, tabs), empty.
- **Roster** — members (role/status/notif level), member-actions sheet, ban+purge confirm.
- **Akış** — feed, post detail (reactions/comments, pinned/locked/announcement), create-announcement sheet.
- **Moderasyon** — reports queue, pending-posts queue, resolve sheet, bans list, resolved-empty.
- **Etkinlikler** — events list, detail (RSVP/capacity), create sheet, cancel confirm.
- **Etkinlikler · Canlı etkinliğe dönüştür** — 🆕 **YENİ (D5 bridge, band `02.6a`)** — convert-entry on event detail, convert bottom sheet (pricing · capacity · auto-publish-recording · storefront-listing), linked "Satışta · Canlı etkinlik" detail (RSVP→purchase, meetingUrl hidden, unlink), catalog reverse-link, and the convert guard-rail states. All frames flagged with a violet **YENİ** badge.
- **Oyunlaştırma** — leaderboard (podium + level tags), badges catalog, award-badge + adjust-points sheets.
- **Ayarlar** — enable, moderation mode, per-action toggles, gamification + level names, digest, blocked keywords.

**`03-students-sessions-support-settings.dc.html`**
- **Öğrenciler** — overview stats, roster (search/tags/LTV), states.
- **Öğrenci · Kişi-360** — full CRM contact profile (7 tabs): Genel bakış · **Zaman tüneli** (15-lane `crmTimeline`, incl. pre-registration/email-matched history + a "Kayıt oldu" milestone) · Kayıt & satın alma · Destek · E-posta (engagement) · Notlar & görevler · Özel alanlar (values; definitions in Settings). Plus a **Lead/Kayıtsız** state (`authProvider=PENDING`), edit/note/task/merge sheets, and the org-wide field-definitions manager. Native actions: edit identity/tags/values, email, support, notes/tasks/owner, enroll/grant/refund/ban/merge.
- **Seanslar** — list (tabs/grouped/channels), IN_HOUSE detail (dual-timezone, join, reschedule/cancel), Calendly handoff, sheets, states.
- **Koçluk Müsaitliği** — weekly recurring hours per day (blocks + day toggles), block-add sheet, date-specific overrides (IN_HOUSE only).
- **Destek · Gelen Kutusu** — inbox (SLA chips, channel, assignee), filter sheet, loading/empty/offline.
- **Destek · Konuşma** — thread (in/out/system/internal-note), SLA banner, composer, assign/snooze/resolve+CSAT sheets.
- **Destek · Ayarlar** — general/channels, working hours, assignment & SLA, canned responses, usage & quotas.
- **Bildirimler** — typed inbox (incl. community reports/pending posts), deep-link chevrons, multi-select bulk mark-read, notification settings + recipient member-picker.
- **Formlar & Yanıtlar** — form list → responses list (filter/score) → response detail (grade if gradable, open contact); reached from the More hub + the "Yeni form yanıtı" notification.
- **Ayarlar** — org card + switcher, account, push, theme, members & roles (invite + role-edit sheets), and **student custom-field definitions** (type/visibility/reorder — the values live on the contact-360 page).
- **Push & Widget** — lock-screen notification stack + home-screen widgets (light/dark).