# Teachfluence Web — Reference Analysis & Capture Methodology

This document is the teardown of the **existing** Teachfluence web app and the rationale/method behind this faithful design-file capture. It travels with the canvases.

---

## 1. What the app is

`pi-education-web` is a Next.js (App Router) + Relay + shadcn/Radix application serving four distinct surfaces from one codebase, multi-tenant by `[organizationSlug]`:

- **Org-admin console** (`/[org]/admin/*`) — the operator app: catalog, sales/orders, students/CRM, marketing, forms, coaching, CMS/site-builder, settings. **Light theme, fixed chrome.** This is the primary subject of the capture.
- **Student learn app** (`/[org]/(student)/(learn)/*`) — derslerim, course player, digital products, events, 1:1 coaching, certificates. Rendered in the **org's brand theme**.
- **Public storefront** (`/[org]/(student)/(website)/*`) — the org's marketing website + commerce (cart, checkout, orders, gift, forms). **Page-builder output**, org-themed.
- **Marketing site** (`/(pi)/*`) — teachfluence.com itself: login/signup, pricing, features, account.

The app is mature and shipped (not a prototype) — so "capture the existing design" means reproducing real, polished screens with real data shapes.

## 2. Design language (extracted verbatim from the codebase)

- **Tokens (shadcn HSL, from `app/globals.css`):** `--primary 240 84% 42%` (indigo) · `--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%` · `--border/--input 214.3 31.8% 91.4%` · `--secondary 240 4.8% 95.9%` · status `--success 142 76% 36%` / `--warning 17 88% 40%` / `--destructive 0 84% 60%` / `--info 221 83% 53%`, each with `-deep` (WCAG-AA text-on-tint) and `-solid` (text-on-saturated) variants. `--radius: 0.5rem` (8px). These are copied verbatim into `_kit.css` §1.
- **System rules:** **Inter** only (next/font, display + body). Radius 8px (sm 6 / card 12 / pill full). **Border-first**: 1px hairline (`--border`), shadow reserved for overlays/menus/toasts. Spacing rhythm 32 (page) / 20–22 (card) / 12–14 (row). Admin is **light-only** in production (a `.dark` token set exists but the admin ThemeProvider isn't wired — only student-learn + public-certificate opt into `next-themes`).
- **Chrome:** collapsible left rail (`--pi-admin-sidebar-width` 3.5rem → 12rem → 16rem) + 64px topbar (`--pi-admin-navbar-height`). Accordion nav groups, RBAC-gated.
- **Components (`TeachfluenceUI` = shadcn/Radix):** Button (default/secondary/outline/destructive/ghost/link), Badge + StatusBadge (tone success/warning/destructive/info/neutral), Card, DataTable (+ toolbar, faceted filters, date-range, header actions menu, infinite scroll), Tabs/PageTabs, Select, Dialog/Sheet/Popover/DropdownMenu, Input/Textarea/InputOTP, Switch/Checkbox/RadioGroup, Avatar, Progress/CircularProgress, Skeleton, Toast, Recharts charts. `_kit.css` mirrors these as `.tf-*` classes.

## 3. Notable structural findings (drive the capture)

- **No standalone admin dashboard.** `/admin` redirects to `/admin/courses`. The analytics "overview" (KPI cards + revenue/product/promotion charts) lives **inside the Orders page**, toggled by an eye icon (persisted in localStorage), and coexists with an onboarding checklist ("Görevler", pre-first-sale) and a Payouts ("Ödemeler") tab (PI_PAYTR + OWNER/ADMIN only).
- **`/admin/courses` is a hash-tabbed catalog hub** (#courses/#meetings/#digital-products/#live-events/#bundles), fronted by a "Takvim Etkinlikleri" calendar. The rail's Ürünler sub-links deep-link into it.
- **DigitalProduct / LiveEvent / CourseAcademicTerm are distinct product types** (distinct list sections and detail pages), not aliases.
- **Orders table = unified transactions** (order line items + subscription payments) with a commission breakdown (Satış Fiyatı → Ödenen → Ödeme Sağlayıcı Komisyonu / Teachfluence Komisyonu → Net Fiyat).
- **Student app + storefront are org-themed** (Flu Akademi = dark) with their own nav/footer + a public light/dark toggle. The storefront is **generated by the page-builder** (hero, product cards, events, testimonials, coach cards, FAQ) — captured as a block library + standard commerce flows, since the marketing copy itself is per-org content.

## 4. Capture methodology (why it's faithful, not eyeballed)

1. **Token layer copied verbatim** from `globals.css` → `_kit.css` §1. The design file *is* the app's token contract.
2. **298-surface inventory** extracted from the real components + next-intl messages by a parallel multi-agent pass (`_ref/surfaces.json`) — exact TR titles, columns, tabs, filters, states, data sources, RBAC gates.
3. **Live read-only capture** of the deployed `flu` org (screenshots + page text) for visual ground truth; recreations checked against them.
4. **Kit-grounded authoring**: every screen composes `.tf-*` classes (no ad-hoc colors), reusing the validated shell + exemplar bands. Real Turkish labels; fictional PII.

## 5. What this is / isn't

- **Is:** a faithful, editable capture of the current UI as a design foundation — one canvas per functional area, primary screens + their real states (loading/empty/error/permission) + key modals.
- **Isn't:** a redesign, a pixel-diff regression suite, or a per-org content clone. Sample data mirrors shapes; brand/marketing copy is representative.
- **Coverage gradient (per the "Everything" scope, primary ask = admin):** admin console (00–08) at highest fidelity (light shell); student learn + standard commerce flows (09–10) in org-dark theme; storefront block library + marketing site (10–11) at representative depth.