@fayz-ai/plugin-courses 0.2.0

package/src/locales/en.ts

@@ -0,0 +1,33 @@
+export const en: Record<string, string> = {
+  'courses.nav': 'Courses',
+  'courses.title': 'Courses',
+  'courses.new': 'New course',
+  'courses.empty': 'No courses yet. Create your first one.',
+  'courses.count': '{count} courses',
+  'courses.students': 'students',
+  'courses.lessons': 'lessons',
+  'courses.status.draft': 'Draft',
+  'courses.status.published': 'Published',
+  'courses.status.archived': 'Archived',
+  'courses.editor.back': 'Back to courses',
+  'courses.editor.details': 'Details',
+  'courses.editor.curriculum': 'Curriculum',
+  'courses.editor.fieldTitle': 'Title',
+  'courses.editor.fieldSubtitle': 'Subtitle',
+  'courses.editor.fieldDescription': 'Description',
+  'courses.editor.fieldPrice': 'Price',
+  'courses.editor.fieldStatus': 'Status',
+  'courses.editor.save': 'Save',
+  'courses.editor.saved': 'Course saved',
+  'courses.editor.addModule': 'Add module',
+  'courses.editor.moduleTitle': 'Module title',
+  'courses.editor.addLesson': 'Add lesson',
+  'courses.editor.lessonTitle': 'Lesson title',
+  'courses.editor.lessonVideo': 'Video URL (embed)',
+  'courses.editor.lessonDuration': 'Duration (min)',
+  'courses.editor.deleteModule': 'Delete module',
+  'courses.editor.deleteLesson': 'Remove',
+  'courses.editor.untitledCourse': 'Untitled course',
+  'courses.editor.untitledModule': 'New module',
+  'courses.editor.untitledLesson': 'New lesson',
+}

package/src/locales/index.ts

@@ -0,0 +1,7 @@
+import { en } from './en'
+import { ptBR } from './pt-BR'
+
+export const coursesLocales: Record<string, Record<string, string>> = {
+  en,
+  'pt-BR': ptBR,
+}

package/src/locales/pt-BR.ts

@@ -0,0 +1,33 @@
+export const ptBR: Record<string, string> = {
+  'courses.nav': 'Cursos',
+  'courses.title': 'Cursos',
+  'courses.new': 'Novo curso',
+  'courses.empty': 'Nenhum curso ainda. Crie o primeiro.',
+  'courses.count': '{count} cursos',
+  'courses.students': 'alunos',
+  'courses.lessons': 'aulas',
+  'courses.status.draft': 'Rascunho',
+  'courses.status.published': 'Publicado',
+  'courses.status.archived': 'Arquivado',
+  'courses.editor.back': 'Voltar aos cursos',
+  'courses.editor.details': 'Detalhes',
+  'courses.editor.curriculum': 'Conteúdo',
+  'courses.editor.fieldTitle': 'Título',
+  'courses.editor.fieldSubtitle': 'Subtítulo',
+  'courses.editor.fieldDescription': 'Descrição',
+  'courses.editor.fieldPrice': 'Preço',
+  'courses.editor.fieldStatus': 'Status',
+  'courses.editor.save': 'Salvar',
+  'courses.editor.saved': 'Curso salvo',
+  'courses.editor.addModule': 'Adicionar módulo',
+  'courses.editor.moduleTitle': 'Título do módulo',
+  'courses.editor.addLesson': 'Adicionar aula',
+  'courses.editor.lessonTitle': 'Título da aula',
+  'courses.editor.lessonVideo': 'URL do vídeo (embed)',
+  'courses.editor.lessonDuration': 'Duração (min)',
+  'courses.editor.deleteModule': 'Excluir módulo',
+  'courses.editor.deleteLesson': 'Remover',
+  'courses.editor.untitledCourse': 'Curso sem título',
+  'courses.editor.untitledModule': 'Novo módulo',
+  'courses.editor.untitledLesson': 'Nova aula',
+}

package/src/nav.ts

@@ -0,0 +1,9 @@
+import { hashRouterAdapter } from '@fayz-ai/core'
+
+// Shared hash-router adapter — the same singleton the admin shell drives, so
+// navigateTo here updates the shell's active route.
+const adapter = hashRouterAdapter()
+
+export function navigateTo(to: string): void {
+  adapter.navigate(to)
+}

package/src/pages/CourseEditorPage.tsx

@@ -0,0 +1,211 @@
+import * as React from 'react'
+import { Button, Input, toast } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import {
+  getCoursesProvider,
+  type Course, type Module, type Lesson, type CourseStatus,
+} from '@fayz-ai/courses'
+import { navigateTo } from '../nav'
+
+const STATUSES: CourseStatus[] = ['draft', 'published', 'archived']
+
+export function CourseEditorPage({ id }: { id?: string }) {
+  const t = useTranslation()
+  const [tab, setTab] = React.useState<'details' | 'curriculum'>('details')
+  const [course, setCourse] = React.useState<Course | null>(null)
+  const [modules, setModules] = React.useState<Module[]>([])
+  const [lessons, setLessons] = React.useState<Lesson[]>([])
+
+  const reload = React.useCallback(async () => {
+    if (!id) return
+    const provider = getCoursesProvider()
+    const c = await provider.getCourse(id)
+    setCourse(c)
+    if (c) {
+      const [m, l] = await Promise.all([provider.listModules(c.id), provider.listLessons(c.id)])
+      setModules(m)
+      setLessons(l)
+    }
+  }, [id])
+
+  React.useEffect(() => { void reload() }, [reload])
+
+  if (!course) {
+    return <div className="p-8 text-muted-foreground">…</div>
+  }
+
+  async function saveDetails() {
+    const provider = getCoursesProvider()
+    await provider.updateCourse(course!.id, {
+      title: course!.title,
+      subtitle: course!.subtitle ?? undefined,
+      description: course!.description ?? undefined,
+      price: course!.price,
+      status: course!.status,
+    })
+    toast.success(t('courses.editor.saved') || 'Course saved')
+  }
+
+  function patchCourse(patch: Partial<Course>) {
+    setCourse((c) => (c ? { ...c, ...patch } : c))
+  }
+
+  // --- module / lesson mutations (persist immediately, then reload) ---------
+  async function addModule() {
+    await getCoursesProvider().createModule({
+      courseId: course!.id,
+      title: t('courses.editor.untitledModule') || 'New module',
+    })
+    await reload()
+  }
+  async function renameModule(moduleId: string, title: string) {
+    await getCoursesProvider().updateModule(moduleId, { title })
+  }
+  async function deleteModule(moduleId: string) {
+    await getCoursesProvider().deleteModule(moduleId)
+    await reload()
+  }
+  async function addLesson(moduleId: string) {
+    await getCoursesProvider().createLesson({
+      courseId: course!.id,
+      moduleId,
+      title: t('courses.editor.untitledLesson') || 'New lesson',
+      videoUrl: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+    })
+    await reload()
+  }
+  async function patchLesson(lessonId: string, patch: Partial<Lesson>) {
+    await getCoursesProvider().updateLesson(lessonId, {
+      title: patch.title,
+      videoUrl: patch.videoUrl,
+      durationSec: patch.durationSec,
+      description: patch.description ?? undefined,
+    })
+  }
+  async function deleteLesson(lessonId: string) {
+    await getCoursesProvider().deleteLesson(lessonId)
+    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">
+        ← {t('courses.editor.back') || 'Back to courses'}
+      </button>
+
+      <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) => (
+          <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'
+            }`}
+          >
+            {tk === 'details' ? (t('courses.editor.details') || 'Details') : (t('courses.editor.curriculum') || 'Curriculum')}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'details' && (
+        <div className="max-w-xl space-y-4">
+          <Field label={t('courses.editor.fieldTitle') || 'Title'}>
+            <Input value={course.title} onChange={(e) => patchCourse({ title: e.target.value })} />
+          </Field>
+          <Field label={t('courses.editor.fieldSubtitle') || 'Subtitle'}>
+            <Input value={course.subtitle ?? ''} onChange={(e) => patchCourse({ subtitle: e.target.value })} />
+          </Field>
+          <Field label={t('courses.editor.fieldDescription') || 'Description'}>
+            <textarea
+              className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+              value={course.description ?? ''}
+              onChange={(e) => patchCourse({ description: e.target.value })}
+            />
+          </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 })}
+              />
+            </Field>
+            <Field label={t('courses.editor.fieldStatus') || 'Status'}>
+              <select
+                className="h-10 rounded-md border border-input bg-background px-3 text-sm"
+                value={course.status}
+                onChange={(e) => patchCourse({ status: e.target.value as CourseStatus })}
+              >
+                {STATUSES.map((s) => (
+                  <option key={s} value={s}>{t(`courses.status.${s}`) || s}</option>
+                ))}
+              </select>
+            </Field>
+          </div>
+          <Button onClick={saveDetails}>{t('courses.editor.save') || 'Save'}</Button>
+        </div>
+      )}
+
+      {tab === 'curriculum' && (
+        <div className="space-y-6">
+          {modules.map((mod) => (
+            <div key={mod.id} className="rounded-xl border border-border bg-card p-4">
+              <div className="mb-3 flex items-center gap-2">
+                <Input
+                  className="font-medium"
+                  defaultValue={mod.title}
+                  onBlur={(e) => renameModule(mod.id, e.target.value)}
+                  aria-label={t('courses.editor.moduleTitle') || 'Module title'}
+                />
+                <Button variant="ghost" size="sm" onClick={() => deleteModule(mod.id)}>
+                  {t('courses.editor.deleteModule') || 'Delete module'}
+                </Button>
+              </div>
+              <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)'}
+                    />
+                    <Button variant="ghost" size="sm" onClick={() => deleteLesson(lesson.id)}>
+                      {t('courses.editor.deleteLesson') || 'Remove'}
+                    </Button>
+                  </div>
+                ))}
+                <Button variant="outline" size="sm" onClick={() => addLesson(mod.id)}>
+                  + {t('courses.editor.addLesson') || 'Add lesson'}
+                </Button>
+              </div>
+            </div>
+          ))}
+          <Button onClick={addModule}>{t('courses.editor.addModule') || 'Add module'}</Button>
+        </div>
+      )}
+    </div>
+  )
+}
+CourseEditorPage.displayName = 'CourseEditorPage'
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1.5">
+      <label className="text-sm font-medium text-foreground">{label}</label>
+      {children}
+    </div>
+  )
+}

package/src/pages/CoursesListPage.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react'
+import { Button, Badge, PageHeaderActions, useModuleLayout } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { getCoursesProvider, type Course } from '@fayz-ai/courses'
+import { navigateTo } from '../nav'
+
+function statusVariant(status: Course['status']): 'success' | 'secondary' | 'outline' {
+  if (status === 'published') return 'success'
+  if (status === 'archived') return 'outline'
+  return 'secondary'
+}
+
+export function CoursesListPage() {
+  const t = useTranslation()
+  // When the app shell owns the page header (sidebar/GHL-style layouts), don't
+  // render our own title — and project the action button into the top bar.
+  const shellOwnsHeader = useModuleLayout() === 'tabs'
+  const [courses, setCourses] = React.useState<Course[] | null>(null)
+  const [creating, setCreating] = React.useState(false)
+
+  const load = React.useCallback(async () => {
+    setCourses(await getCoursesProvider().listCourses())
+  }, [])
+
+  React.useEffect(() => {
+    void load()
+  }, [load])
+
+  async function onCreate() {
+    setCreating(true)
+    try {
+      const course = await getCoursesProvider().createCourse({
+        title: t('courses.editor.untitledCourse') || 'Untitled course',
+        status: 'draft',
+      })
+      navigateTo(`/courses/${course.id}`)
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl p-6 md:p-8">
+      {shellOwnsHeader ? (
+        <PageHeaderActions>
+          <Button onClick={onCreate} disabled={creating}>
+            {t('courses.new') || 'New course'}
+          </Button>
+        </PageHeaderActions>
+      ) : (
+        <div className="mb-6 flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-foreground">{t('courses.title') || 'Courses'}</h1>
+            {courses && (
+              <p className="mt-1 text-sm text-muted-foreground">
+                {(t('courses.count') || '{count} courses').replace('{count}', String(courses.length))}
+              </p>
+            )}
+          </div>
+          <Button onClick={onCreate} disabled={creating}>
+            {t('courses.new') || 'New course'}
+          </Button>
+        </div>
+      )}
+
+      {courses && courses.length === 0 && (
+        <div className="rounded-xl border border-dashed border-border p-12 text-center text-muted-foreground">
+          {t('courses.empty') || 'No courses yet. Create your first one.'}
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {courses?.map((course) => (
+          <button
+            key={course.id}
+            onClick={() => navigateTo(`/courses/${course.id}`)}
+            className="group overflow-hidden rounded-xl border border-border bg-card text-left transition hover:border-primary hover:shadow-md"
+          >
+            <div className="aspect-video w-full overflow-hidden bg-muted">
+              {course.thumbnailUrl && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={course.thumbnailUrl} alt="" className="h-full w-full object-cover" />
+              )}
+            </div>
+            <div className="space-y-2 p-4">
+              <div className="flex items-start justify-between gap-2">
+                <h3 className="font-semibold text-foreground line-clamp-2">{course.title}</h3>
+                <Badge variant={statusVariant(course.status)}>
+                  {t(`courses.status.${course.status}`) || course.status}
+                </Badge>
+              </div>
+              {course.subtitle && (
+                <p className="text-sm text-muted-foreground line-clamp-2">{course.subtitle}</p>
+              )}
+              <p className="text-sm font-medium text-foreground">
+                {course.price > 0 ? `${course.currency} ${course.price.toFixed(2)}` : '—'}
+              </p>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+CoursesListPage.displayName = 'CoursesListPage'