@fayz-ai/plugin-courses 0.2.2 → 0.2.4

package/src/pages/CourseEditorPage.tsx

@@ -1,20 +1,26 @@
 import * as React from 'react'
-import { Button, Input, toast } from '@fayz-ai/ui'
+import { Button, Input, Badge, toast } from '@fayz-ai/ui'
 import { useTranslation } from '@fayz-ai/core'
 import {
   getCoursesProvider,
   type Course, type Module, type Lesson, type CourseStatus,
+  type Offer, type OfferKind,
 } from '@fayz-ai/courses'
 import { navigateTo } from '../nav'
+import { formatMoney } from '../lib/format'
 
 const STATUSES: CourseStatus[] = ['draft', 'published', 'archived']
 
+const TABS = ['details', 'curriculum', 'offers', 'members', 'settings', 'checkout', 'links'] as const
+type Tab = (typeof TABS)[number]
+
 export function CourseEditorPage({ id }: { id?: string }) {
   const t = useTranslation()
-  const [tab, setTab] = React.useState<'details' | 'curriculum'>('details')
+  const [tab, setTab] = React.useState<Tab>('details')
   const [course, setCourse] = React.useState<Course | null>(null)
   const [modules, setModules] = React.useState<Module[]>([])
   const [lessons, setLessons] = React.useState<Lesson[]>([])
+  const [offers, setOffers] = React.useState<Offer[]>([])
 
   const reload = React.useCallback(async () => {
     if (!id) return
@@ -22,9 +28,14 @@ export function CourseEditorPage({ id }: { id?: string }) {
     const c = await provider.getCourse(id)
     setCourse(c)
     if (c) {
-      const [m, l] = await Promise.all([provider.listModules(c.id), provider.listLessons(c.id)])
+      const [m, l, o] = await Promise.all([
+        provider.listModules(c.id),
+        provider.listLessons(c.id),
+        provider.listOffers(c.id),
+      ])
       setModules(m)
       setLessons(l)
+      setOffers(o)
     }
   }, [id])
 
@@ -35,8 +46,7 @@ export function CourseEditorPage({ id }: { id?: string }) {
   }
 
   async function saveDetails() {
-    const provider = getCoursesProvider()
-    await provider.updateCourse(course!.id, {
+    await getCoursesProvider().updateCourse(course!.id, {
       title: course!.title,
       subtitle: course!.subtitle ?? undefined,
       description: course!.description ?? undefined,
@@ -52,10 +62,7 @@ export function CourseEditorPage({ id }: { id?: string }) {
 
   // --- module / lesson mutations (persist immediately, then reload) ---------
   async function addModule() {
-    await getCoursesProvider().createModule({
-      courseId: course!.id,
-      title: t('courses.editor.untitledModule') || 'New module',
-    })
+    await getCoursesProvider().createModule({ courseId: course!.id, title: t('courses.editor.untitledModule') || 'New module' })
     await reload()
   }
   async function renameModule(moduleId: string, title: string) {
@@ -87,6 +94,32 @@ export function CourseEditorPage({ id }: { id?: string }) {
     await reload()
   }
 
+  // --- offer mutations ------------------------------------------------------
+  async function addOffer() {
+    await getCoursesProvider().createOffer({
+      courseId: course!.id,
+      name: t('courses.offers.newName') || 'New offer',
+      price: course!.price,
+      kind: 'one_time',
+    })
+    await reload()
+  }
+  async function patchOffer(offerId: string, patch: Partial<Offer>) {
+    await getCoursesProvider().updateOffer(offerId, {
+      name: patch.name,
+      price: patch.price,
+      kind: patch.kind,
+      recurringInterval: patch.recurringInterval,
+      isOrderBump: patch.isOrderBump,
+      isDefault: patch.isDefault,
+    })
+    await reload()
+  }
+  async function deleteOffer(offerId: string) {
+    await getCoursesProvider().deleteOffer(offerId)
+    await reload()
+  }
+
   return (
     <div className="mx-auto max-w-4xl p-6 md:p-8">
       <button onClick={() => navigateTo('/courses')} className="mb-4 text-sm text-muted-foreground hover:text-foreground">
@@ -95,16 +128,16 @@ export function CourseEditorPage({ id }: { id?: string }) {
 
       <h1 className="mb-1 text-2xl font-bold text-foreground">{course.title}</h1>
 
-      <div className="mb-6 mt-4 flex gap-2 border-b border-border">
-        {(['details', 'curriculum'] as const).map((tk) => (
+      <div className="mb-6 mt-4 flex gap-1 overflow-x-auto border-b border-border">
+        {TABS.map((tk) => (
           <button
             key={tk}
             onClick={() => setTab(tk)}
-            className={`-mb-px border-b-2 px-3 py-2 text-sm font-medium ${
-              tab === tk ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground'
+            className={`-mb-px whitespace-nowrap border-b-2 px-3 py-2 text-sm font-medium ${
+              tab === tk ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'
             }`}
           >
-            {tk === 'details' ? (t('courses.editor.details') || 'Details') : (t('courses.editor.curriculum') || 'Curriculum')}
+            {t(`courses.editor.tab.${tk}`) || tk}
           </button>
         ))}
       </div>
@@ -126,11 +159,7 @@ export function CourseEditorPage({ id }: { id?: string }) {
           </Field>
           <div className="flex gap-4">
             <Field label={t('courses.editor.fieldPrice') || 'Price'}>
-              <Input
-                type="number"
-                value={String(course.price)}
-                onChange={(e) => patchCourse({ price: Number(e.target.value) || 0 })}
-              />
+              <Input type="number" value={String(course.price)} onChange={(e) => patchCourse({ price: Number(e.target.value) || 0 })} />
             </Field>
             <Field label={t('courses.editor.fieldStatus') || 'Status'}>
               <select
@@ -166,22 +195,9 @@ export function CourseEditorPage({ id }: { id?: string }) {
               <div className="space-y-2">
                 {lessons.filter((l) => l.moduleId === mod.id).map((lesson) => (
                   <div key={lesson.id} className="grid grid-cols-1 gap-2 rounded-md border border-border p-3 md:grid-cols-[1fr_1fr_90px_auto]">
-                    <Input
-                      defaultValue={lesson.title}
-                      placeholder={t('courses.editor.lessonTitle') || 'Lesson title'}
-                      onBlur={(e) => patchLesson(lesson.id, { title: e.target.value })}
-                    />
-                    <Input
-                      defaultValue={lesson.videoUrl}
-                      placeholder={t('courses.editor.lessonVideo') || 'Video URL (embed)'}
-                      onBlur={(e) => patchLesson(lesson.id, { videoUrl: e.target.value })}
-                    />
-                    <Input
-                      type="number"
-                      defaultValue={String(Math.round(lesson.durationSec / 60))}
-                      onBlur={(e) => patchLesson(lesson.id, { durationSec: (Number(e.target.value) || 0) * 60 })}
-                      aria-label={t('courses.editor.lessonDuration') || 'Duration (min)'}
-                    />
+                    <Input defaultValue={lesson.title} placeholder={t('courses.editor.lessonTitle') || 'Lesson title'} onBlur={(e) => patchLesson(lesson.id, { title: e.target.value })} />
+                    <Input defaultValue={lesson.videoUrl} placeholder={t('courses.editor.lessonVideo') || 'Video URL (embed)'} onBlur={(e) => patchLesson(lesson.id, { videoUrl: e.target.value })} />
+                    <Input type="number" defaultValue={String(Math.round(lesson.durationSec / 60))} onBlur={(e) => patchLesson(lesson.id, { durationSec: (Number(e.target.value) || 0) * 60 })} aria-label={t('courses.editor.lessonDuration') || 'Duration (min)'} />
                     <Button variant="ghost" size="sm" onClick={() => deleteLesson(lesson.id)}>
                       {t('courses.editor.deleteLesson') || 'Remove'}
                     </Button>
@@ -196,6 +212,88 @@ export function CourseEditorPage({ id }: { id?: string }) {
           <Button onClick={addModule}>{t('courses.editor.addModule') || 'Add module'}</Button>
         </div>
       )}
+
+      {tab === 'offers' && (
+        <div className="space-y-3">
+          <p className="text-sm text-muted-foreground">
+            {t('courses.offers.help') || 'Price points a customer can buy. Mark one default; order-bumps show on other checkouts.'}
+          </p>
+          {offers.map((offer) => (
+            <div key={offer.id} className="grid grid-cols-1 gap-2 rounded-xl border border-border bg-card p-3 md:grid-cols-[1fr_120px_130px_auto]">
+              <Input defaultValue={offer.name} onBlur={(e) => patchOffer(offer.id, { name: e.target.value })} aria-label={t('courses.offers.name') || 'Offer name'} />
+              <Input type="number" defaultValue={String(offer.price)} onBlur={(e) => patchOffer(offer.id, { price: Number(e.target.value) || 0 })} aria-label={t('courses.offers.price') || 'Price'} />
+              <select
+                className="h-10 rounded-md border border-input bg-background px-2 text-sm"
+                value={offer.kind}
+                onChange={(e) => patchOffer(offer.id, { kind: e.target.value as OfferKind, recurringInterval: e.target.value === 'subscription' ? (offer.recurringInterval ?? 'month') : null })}
+              >
+                <option value="one_time">{t('courses.offers.oneTime') || 'One-time'}</option>
+                <option value="subscription">{t('courses.offers.subscription') || 'Subscription'}</option>
+              </select>
+              <div className="flex items-center gap-2">
+                {offer.isDefault && <Badge variant="secondary">{t('courses.offers.default') || 'Default'}</Badge>}
+                {offer.isOrderBump && <Badge variant="outline">{t('courses.offers.bump') || 'Bump'}</Badge>}
+                <Button variant="ghost" size="sm" onClick={() => deleteOffer(offer.id)}>{t('courses.offers.remove') || 'Remove'}</Button>
+              </div>
+            </div>
+          ))}
+          <Button onClick={addOffer}>+ {t('courses.offers.add') || 'Add offer'}</Button>
+        </div>
+      )}
+
+      {tab === 'members' && (
+        <div className="space-y-3 text-sm">
+          <p className="text-muted-foreground">
+            {t('courses.editor.membersHelp') || 'Buyers of this course are added to its members area automatically. Access groups per offer:'}
+          </p>
+          <div className="rounded-xl border border-border bg-card divide-y divide-border">
+            {offers.map((offer) => (
+              <div key={offer.id} className="flex items-center justify-between px-4 py-3">
+                <span className="font-medium text-foreground">{offer.name}</span>
+                <span className="text-muted-foreground">{formatMoney(offer.price, offer.currency)}</span>
+                <Badge variant="secondary">{t('courses.editor.defaultGroup') || 'Default group'}</Badge>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {tab === 'settings' && (
+        <div className="max-w-xl space-y-4 text-sm">
+          <p className="text-muted-foreground">{t('courses.editor.settingsHelp') || 'Payment methods offered at checkout (Stripe).'}</p>
+          {[
+            ['card', t('courses.editor.payCard') || 'Credit card (up to 12x)'],
+            ['pix', t('courses.editor.payPix') || 'Pix'],
+            ['boleto', t('courses.editor.payBoleto') || 'Boleto'],
+          ].map(([k, label]) => (
+            <label key={k} className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
+              <input type="checkbox" defaultChecked className="h-4 w-4" />
+              <span className="text-foreground">{label}</span>
+            </label>
+          ))}
+          <p className="text-xs text-muted-foreground">{t('courses.editor.settingsNote') || 'Method availability depends on Stripe in your region; wired in Stage 3.'}</p>
+        </div>
+      )}
+
+      {tab === 'checkout' && (
+        <div className="rounded-xl border border-dashed border-border p-10 text-center text-sm text-muted-foreground">
+          {t('courses.editor.checkoutSoon') || 'Custom checkout builder comes in a later milestone. A default checkout is generated per offer.'}
+        </div>
+      )}
+
+      {tab === 'links' && (
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">{t('courses.editor.linksHelp') || 'Shareable checkout links, one per offer.'}</p>
+          <div className="rounded-xl border border-border bg-card divide-y divide-border">
+            {offers.map((offer) => (
+              <div key={offer.id} className="flex flex-col gap-1 px-4 py-3 md:flex-row md:items-center md:justify-between">
+                <span className="font-medium text-foreground">{offer.name}</span>
+                <code className="rounded bg-muted px-2 py-1 text-xs text-muted-foreground">/checkout/{course.slug}?offer={offer.id}</code>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   )
 }

package/src/pages/FinancialPage.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import { Badge, Button, toast } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { getCoursesProvider, type Payout, type FinancialSummary, type CreatorAccount } from '@fayz-ai/courses'
+import { PageContainer, StatCard, StatGrid, SimpleTable, type SimpleColumn } from '../components/CommerceUI'
+import { formatMoney, formatDate, formatPercent } from '../lib/format'
+
+export function FinancialPage() {
+  const t = useTranslation()
+  const [summary, setSummary] = React.useState<FinancialSummary | null>(null)
+  const [payouts, setPayouts] = React.useState<Payout[] | null>(null)
+  const [account, setAccount] = React.useState<CreatorAccount | null>(null)
+
+  React.useEffect(() => {
+    const p = getCoursesProvider()
+    void p.getFinancialSummary().then(setSummary)
+    void p.listPayouts().then(setPayouts)
+    void p.getCreatorAccount().then(setAccount)
+  }, [])
+
+  const currency = summary?.currency ?? 'BRL'
+  const connected = !!account?.stripeAccountId && account.chargesEnabled
+
+  function connectStripe() {
+    // Wired to the real Stripe Connect onboarding edge function in Stage 3.
+    toast.info(t('courses.financial.connectSoon') || 'Stripe Connect onboarding wires up in Stage 3.')
+  }
+
+  const columns: SimpleColumn<Payout>[] = [
+    { key: 'date', header: t('courses.financial.date') || 'Date', render: (p) => <span className="text-muted-foreground">{formatDate(p.createdAt)}</span> },
+    { key: 'amount', header: t('courses.financial.amount') || 'Amount', align: 'right', render: (p) => <span className="font-medium text-foreground">{formatMoney(p.amount, p.currency)}</span> },
+    { key: 'status', header: t('courses.financial.status') || 'Status', align: 'right', render: (p) => (
+      <Badge variant={p.status === 'paid' ? 'success' : p.status === 'pending' ? 'secondary' : 'destructive'}>
+        {t(`courses.payoutStatus.${p.status}`) || p.status}
+      </Badge>
+    ) },
+  ]
+
+  return (
+    <PageContainer
+      title={t('courses.financial.title') || 'Financial settings'}
+      subtitle={t('courses.financial.subtitle') || 'Balance, payouts and your Stripe connection.'}
+      actions={
+        <Button variant={connected ? 'outline' : 'default'} onClick={connectStripe}>
+          {connected ? (t('courses.financial.connected') || 'Stripe connected') : (t('courses.financial.connect') || 'Connect Stripe')}
+        </Button>
+      }
+    >
+      {!connected && (
+        <div className="mb-6 rounded-xl border border-amber-500/40 bg-amber-500/10 p-4 text-sm text-foreground">
+          {t('courses.financial.notConnected') || 'Connect your Stripe account to receive payouts. The platform fee is applied automatically on each sale.'}
+          {account && (
+            <span className="ml-1 text-muted-foreground">
+              ({t('courses.financial.platformFee') || 'Platform fee'}: {(account.platformFeeBps / 100).toFixed(2)}%)
+            </span>
+          )}
+        </div>
+      )}
+
+      <StatGrid>
+        <StatCard label={t('courses.financial.available') || 'Available balance'} value={formatMoney(summary?.availableBalance ?? 0, currency)} />
+        <StatCard label={t('courses.financial.pending') || 'Pending balance'} value={formatMoney(summary?.pendingBalance ?? 0, currency)} />
+        <StatCard label={t('courses.financial.revenue') || 'Total revenue'} value={formatMoney(summary?.totalRevenue ?? 0, currency)} />
+        <StatCard label={t('courses.financial.feeCollected') || 'Platform fees'} value={formatMoney(summary?.platformFeeTotal ?? 0, currency)} hint={summary ? formatPercent(summary.refundRate, 1) + ' ' + (t('courses.financial.refundRate') || 'refund rate') : undefined} />
+      </StatGrid>
+
+      <h2 className="mb-3 text-sm font-semibold text-foreground">{t('courses.financial.payouts') || 'Payouts'}</h2>
+      <SimpleTable
+        columns={columns}
+        rows={payouts ?? []}
+        empty={t('courses.financial.noPayouts') || 'No payouts yet.'}
+      />
+    </PageContainer>
+  )
+}
+FinancialPage.displayName = 'FinancialPage'

package/src/pages/MembersAreaPage.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Badge } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { getCoursesProvider, type Order, type Course } from '@fayz-ai/courses'
+import { PageContainer, SimpleTable, type SimpleColumn } from '../components/CommerceUI'
+
+interface Row {
+  courseId: string
+  title: string
+  status: Course['status']
+  students: number
+}
+
+export function MembersAreaPage() {
+  const t = useTranslation()
+  const [rows, setRows] = React.useState<Row[] | null>(null)
+
+  React.useEffect(() => {
+    const p = getCoursesProvider()
+    void Promise.all([p.listCourses(), p.listOrders({ financialStatus: 'paid' })]).then(([courses, orders]) => {
+      setRows(buildMembersAreas(courses, orders))
+    })
+  }, [])
+
+  const columns: SimpleColumn<Row>[] = [
+    { key: 'title', header: t('courses.membersArea.name') || 'Members area', render: (r) => <span className="font-medium text-foreground">{r.title}</span> },
+    { key: 'status', header: t('courses.membersArea.status') || 'Status', render: (r) => (
+      <Badge variant={r.status === 'published' ? 'success' : r.status === 'archived' ? 'outline' : 'secondary'}>
+        {t(`courses.status.${r.status}`) || r.status}
+      </Badge>
+    ) },
+    { key: 'students', header: t('courses.membersArea.students') || 'Students', align: 'right', render: (r) => <span className="text-foreground">{r.students}</span> },
+  ]
+
+  return (
+    <PageContainer title={t('courses.membersArea.title') || 'Members area'} subtitle={t('courses.membersArea.subtitle') || 'One area per course; students land here after purchase.'}>
+      <SimpleTable
+        columns={columns}
+        rows={rows ?? []}
+        empty={t('courses.membersArea.empty') || 'No members areas yet.'}
+      />
+    </PageContainer>
+  )
+}
+MembersAreaPage.displayName = 'MembersAreaPage'
+
+function buildMembersAreas(courses: Course[], orders: Order[]): Row[] {
+  const students = new Map<string, Set<string>>()
+  for (const o of orders) {
+    const set = students.get(o.courseId) ?? new Set<string>()
+    if (o.customerId) set.add(o.customerId)
+    students.set(o.courseId, set)
+  }
+  return courses.map((c) => ({
+    courseId: c.id,
+    title: c.title,
+    status: c.status,
+    students: students.get(c.id)?.size ?? 0,
+  }))
+}

package/src/pages/ReportsPage.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { useTranslation } from '@fayz-ai/core'
+import { getCoursesProvider, type Order, type Course } from '@fayz-ai/courses'
+import { PageContainer, SimpleTable, type SimpleColumn } from '../components/CommerceUI'
+import { formatMoney } from '../lib/format'
+
+interface Row {
+  courseId: string
+  title: string
+  sales: number
+  revenue: number
+  currency: string
+}
+
+export function ReportsPage() {
+  const t = useTranslation()
+  const [rows, setRows] = React.useState<Row[] | null>(null)
+
+  React.useEffect(() => {
+    const p = getCoursesProvider()
+    void Promise.all([p.listCourses(), p.listOrders({ financialStatus: 'paid' })]).then(([courses, orders]) => {
+      setRows(buildRevenueByCourse(courses, orders))
+    })
+  }, [])
+
+  const columns: SimpleColumn<Row>[] = [
+    { key: 'title', header: t('courses.reports.course') || 'Course', render: (r) => <span className="font-medium text-foreground">{r.title}</span> },
+    { key: 'sales', header: t('courses.reports.sales') || 'Sales', align: 'right', render: (r) => <span>{r.sales}</span> },
+    { key: 'revenue', header: t('courses.reports.revenue') || 'Revenue', align: 'right', render: (r) => <span className="font-medium text-foreground">{formatMoney(r.revenue, r.currency)}</span> },
+  ]
+
+  return (
+    <PageContainer title={t('courses.reports.title') || 'Reports'} subtitle={t('courses.reports.subtitle') || 'Revenue by course.'}>
+      <h2 className="mb-3 text-sm font-semibold text-foreground">{t('courses.reports.byCourse') || 'Revenue by course'}</h2>
+      <SimpleTable
+        columns={columns}
+        rows={rows ?? []}
+        empty={t('courses.reports.empty') || 'No revenue yet.'}
+      />
+    </PageContainer>
+  )
+}
+ReportsPage.displayName = 'ReportsPage'
+
+function buildRevenueByCourse(courses: Course[], orders: Order[]): Row[] {
+  const byCourse = new Map<string, { sales: number; revenue: number; currency: string }>()
+  for (const o of orders) {
+    const agg = byCourse.get(o.courseId) ?? { sales: 0, revenue: 0, currency: o.currency }
+    agg.sales += 1
+    agg.revenue = Math.round((agg.revenue + o.total) * 100) / 100
+    byCourse.set(o.courseId, agg)
+  }
+  return courses
+    .map((c) => {
+      const agg = byCourse.get(c.id)
+      return { courseId: c.id, title: c.title, sales: agg?.sales ?? 0, revenue: agg?.revenue ?? 0, currency: agg?.currency ?? c.currency }
+    })
+    .sort((a, b) => b.revenue - a.revenue)
+}

package/src/pages/SalesPage.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { Badge } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { getCoursesProvider, type Order, type FinancialStatus } from '@fayz-ai/courses'
+import { PageContainer, StatCard, StatGrid, SimpleTable, type SimpleColumn } from '../components/CommerceUI'
+import { formatMoney, formatDate } from '../lib/format'
+
+function statusVariant(s: FinancialStatus): 'success' | 'secondary' | 'destructive' | 'outline' {
+  if (s === 'paid') return 'success'
+  if (s === 'pending') return 'secondary'
+  if (s === 'refunded' || s === 'chargeback') return 'destructive'
+  return 'outline'
+}
+
+export function SalesPage() {
+  const t = useTranslation()
+  const [orders, setOrders] = React.useState<Order[] | null>(null)
+
+  React.useEffect(() => {
+    void getCoursesProvider().listOrders().then(setOrders)
+  }, [])
+
+  const paid = (orders ?? []).filter((o) => o.financialStatus === 'paid')
+  const revenue = paid.reduce((s, o) => s + o.total, 0)
+  const currency = orders?.[0]?.currency ?? 'BRL'
+
+  const columns: SimpleColumn<Order>[] = [
+    { key: 'date', header: t('courses.sales.date') || 'Date', render: (o) => <span className="text-muted-foreground">{formatDate(o.createdAt)}</span> },
+    { key: 'customer', header: t('courses.sales.customer') || 'Customer', render: (o) => (
+      <div>
+        <div className="font-medium text-foreground">{o.customerName ?? '—'}</div>
+        <div className="text-xs text-muted-foreground">{o.customerEmail}</div>
+      </div>
+    ) },
+    { key: 'method', header: t('courses.sales.method') || 'Method', render: (o) => <span className="capitalize">{o.paymentMethod ?? '—'}</span> },
+    { key: 'status', header: t('courses.sales.status') || 'Status', render: (o) => (
+      <Badge variant={statusVariant(o.financialStatus)}>{t(`courses.financialStatus.${o.financialStatus}`) || o.financialStatus}</Badge>
+    ) },
+    { key: 'fee', header: t('courses.sales.fee') || 'Platform fee', align: 'right', render: (o) => <span className="text-muted-foreground">{formatMoney(o.platformFee, o.currency)}</span> },
+    { key: 'total', header: t('courses.sales.amount') || 'Amount', align: 'right', render: (o) => <span className="font-medium text-foreground">{formatMoney(o.total, o.currency)}</span> },
+  ]
+
+  return (
+    <PageContainer title={t('courses.sales.title') || 'Sales'} subtitle={t('courses.sales.subtitle') || 'Every transaction across your courses.'}>
+      <StatGrid>
+        <StatCard label={t('courses.sales.count') || 'Sales'} value={String(paid.length)} />
+        <StatCard label={t('courses.sales.revenue') || 'Revenue'} value={formatMoney(revenue, currency)} />
+      </StatGrid>
+      <SimpleTable
+        columns={columns}
+        rows={orders ?? []}
+        empty={t('courses.sales.empty') || 'No sales yet.'}
+      />
+    </PageContainer>
+  )
+}
+SalesPage.displayName = 'SalesPage'

package/src/pages/SubscriptionsPage.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { Badge } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { getCoursesProvider, type Subscription, type SubscriptionStatus } from '@fayz-ai/courses'
+import { PageContainer, StatCard, StatGrid, SimpleTable, type SimpleColumn } from '../components/CommerceUI'
+import { formatMoney, formatDate } from '../lib/format'
+
+function statusVariant(s: SubscriptionStatus): 'success' | 'secondary' | 'destructive' {
+  if (s === 'active') return 'success'
+  if (s === 'past_due') return 'secondary'
+  return 'destructive'
+}
+
+export function SubscriptionsPage() {
+  const t = useTranslation()
+  const [subs, setSubs] = React.useState<Subscription[] | null>(null)
+
+  React.useEffect(() => {
+    void getCoursesProvider().listSubscriptions().then(setSubs)
+  }, [])
+
+  const active = (subs ?? []).filter((s) => s.status === 'active')
+  const mrr = active.reduce((sum, s) => sum + (s.interval === 'year' ? s.netValue / 12 : s.netValue), 0)
+  const currency = subs?.[0]?.currency ?? 'BRL'
+
+  const columns: SimpleColumn<Subscription>[] = [
+    { key: 'start', header: t('courses.subs.start') || 'Start date', render: (s) => <span className="text-muted-foreground">{formatDate(s.startedAt)}</span> },
+    { key: 'customer', header: t('courses.subs.customer') || 'Customer', render: (s) => (
+      <div>
+        <div className="font-medium text-foreground">{s.customerName ?? '—'}</div>
+        <div className="text-xs text-muted-foreground">{s.customerEmail}</div>
+      </div>
+    ) },
+    { key: 'status', header: t('courses.subs.status') || 'Status', render: (s) => (
+      <Badge variant={statusVariant(s.status)}>{t(`courses.subStatus.${s.status}`) || s.status}</Badge>
+    ) },
+    { key: 'value', header: t('courses.subs.value') || 'Net value', align: 'right', render: (s) => (
+      <span className="font-medium text-foreground">{formatMoney(s.netValue, s.currency)}<span className="text-xs text-muted-foreground"> / {t(`courses.interval.${s.interval}`) || s.interval}</span></span>
+    ) },
+  ]
+
+  return (
+    <PageContainer title={t('courses.subs.title') || 'Subscriptions'} subtitle={t('courses.subs.subtitle') || 'Recurring plans and MRR.'}>
+      <StatGrid>
+        <StatCard label={t('courses.subs.active') || 'Active subscriptions'} value={String(active.length)} />
+        <StatCard label={t('courses.subs.mrr') || 'Monthly recurring revenue'} value={formatMoney(mrr, currency)} />
+      </StatGrid>
+      <SimpleTable
+        columns={columns}
+        rows={subs ?? []}
+        empty={t('courses.subs.empty') || 'No subscriptions yet.'}
+      />
+    </PageContainer>
+  )
+}
+SubscriptionsPage.displayName = 'SubscriptionsPage'

package/src/settings/CoursesSettings.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { useTranslation } from '@fayz-ai/core'
+import { PluginSettingsPanel, SettingsGroup, SelectRow, ToggleRow } from '@fayz-ai/saas'
+
+// The course plugin's Settings tab. Reuses the saas settings shell
+// (PluginSettingsPanel + SettingsGroup/SelectRow/ToggleRow) instead of
+// hand-rolling a settings layout — same chrome as every other plugin. Stripe
+// Connect lives in the "Integrations" tab (a connector), not here.
+
+function CoursesGeneralSettings() {
+  const t = useTranslation()
+  const [currency, setCurrency] = React.useState('BRL')
+  const [methods, setMethods] = React.useState({ card: true, pix: true, boleto: true })
+
+  return (
+    <div className="space-y-6">
+      <SettingsGroup
+        title={t('courses.settings.payments') || 'Payments'}
+        description={t('courses.settings.paymentsHelp') || 'Connect Stripe in the Integrations tab; the platform fee applies automatically.'}
+      >
+        <SelectRow
+          label={t('courses.settings.currency') || 'Default currency'}
+          value={currency}
+          onChange={setCurrency}
+          options={[
+            { value: 'BRL', label: 'BRL (R$)' },
+            { value: 'USD', label: 'USD ($)' },
+            { value: 'EUR', label: 'EUR (€)' },
+          ]}
+        />
+      </SettingsGroup>
+
+      <SettingsGroup title={t('courses.settings.methods') || 'Payment methods'}>
+        <ToggleRow label={t('courses.editor.payCard') || 'Credit card'} checked={methods.card} onChange={(v) => setMethods((m) => ({ ...m, card: v }))} />
+        <ToggleRow label={t('courses.editor.payPix') || 'Pix'} checked={methods.pix} onChange={(v) => setMethods((m) => ({ ...m, pix: v }))} />
+        <ToggleRow label={t('courses.editor.payBoleto') || 'Boleto'} checked={methods.boleto} onChange={(v) => setMethods((m) => ({ ...m, boleto: v }))} />
+      </SettingsGroup>
+    </div>
+  )
+}
+CoursesGeneralSettings.displayName = 'CoursesGeneralSettings'
+
+export function CoursesSettingsTab() {
+  const t = useTranslation()
+  return (
+    <PluginSettingsPanel
+      title={t('courses.settings.title') || 'Course settings'}
+      subtitle={t('courses.settings.subtitle') || 'Payments, currency and checkout methods'}
+      generalSettings={<CoursesGeneralSettings />}
+      hostPluginId="courses"
+      routeBase="/settings/courses"
+    />
+  )
+}
+CoursesSettingsTab.displayName = 'CoursesSettingsTab'