@fayz-ai/plugin-courses 0.9.0 → 0.10.0

package/src/pages/CourseEditorPage.tsx

@@ -1,1122 +0,0 @@
-import * as React from 'react'
-import {
-  Button, Input, Badge, toast, Skeleton,
-  Tabs, TabsList, TabsTrigger, TabsContent,
-  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
-  SegmentedControl, type SegmentedOption,
-  Checkbox, ConfirmDialog, useSaveBar,
-} from '@fayz-ai/ui'
-import { useTranslation, getSupabaseClientOptional } from '@fayz-ai/core'
-import {
-  getCoursesProvider,
-  type Course, type Module, type Lesson, type CourseStatus,
-  type Offer, type OfferKind, type RecurringInterval, type Order,
-} from '@fayz-ai/courses'
-
-/** Derived from the Course model (the package doesn't re-export the union name). */
-type CourseDeliveryType = Course['deliveryType']
-import {
-  ArrowLeft, Plus, Trash2, Check, ImagePlus, UploadCloud,
-  Layers, Tag, Users, ShoppingCart, Loader2, Clock,
-  GripVertical, ChevronDown, Video, FileText, PlayCircle, Lock, Info,
-} from 'lucide-react'
-import {
-  DndContext, closestCenter, PointerSensor, KeyboardSensor,
-  useSensor, useSensors, type DragEndEvent,
-} from '@dnd-kit/core'
-import {
-  SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy,
-  useSortable, arrayMove,
-} from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { navigateTo } from '../nav'
-import { formatMoney } from '../lib/format'
-import { EmptyState, SectionCard, InfoNote } from '../components/CommerceUI'
-
-/** Local alias for the translate function used across the tree builder below. */
-type TFn = (key: string) => string
-
-/** A distinct enrolled student for this course, derived from its paid orders. */
-interface CourseStudent {
-  key: string
-  name: string
-  email: string | null
-  since: string | null
-}
-
-/** Dedupe paid orders into one row per buyer (latest purchase kept). */
-function buildCourseStudents(orders: Order[]): CourseStudent[] {
-  const byKey = new Map<string, CourseStudent>()
-  for (const o of orders) {
-    const key = o.customerId ?? o.customerEmail ?? o.id
-    const existing = byKey.get(key)
-    if (!existing || (o.createdAt && existing.since && o.createdAt > existing.since)) {
-      byKey.set(key, {
-        key,
-        name: o.customerName ?? o.customerEmail ?? '—',
-        email: o.customerEmail ?? null,
-        since: o.createdAt ?? null,
-      })
-    }
-  }
-  return [...byKey.values()].sort((a, b) => (b.since ?? '').localeCompare(a.since ?? ''))
-}
-
-const STATUSES: CourseStatus[] = ['draft', 'published', 'archived']
-const DELIVERY_TYPES: CourseDeliveryType[] = ['online', 'in_person', 'hybrid']
-
-const TABS = ['details', 'curriculum', 'offers', 'members'] as const
-type Tab = (typeof TABS)[number]
-
-const TAB_ICON: Record<Tab, React.ElementType> = {
-  details: Tag,
-  curriculum: Layers,
-  offers: ShoppingCart,
-  members: Users,
-}
-
-/** The editable subset of a course — used to detect unsaved changes on the Geral tab. */
-function editSnapshot(c: Course): string {
-  return JSON.stringify({
-    title: c.title, subtitle: c.subtitle, description: c.description,
-    price: c.price, status: c.status, deliveryType: c.deliveryType, thumbnailUrl: c.thumbnailUrl,
-  })
-}
-
-export function CourseEditorPage({ id }: { id?: string }) {
-  const t = useTranslation()
-  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 [students, setStudents] = React.useState<CourseStudent[]>([])
-  const [loading, setLoading] = React.useState(true)
-
-  // Geral tab: explicit-save model with dirty tracking.
-  const [savedSnap, setSavedSnap] = React.useState('')
-  const [saving, setSaving] = React.useState(false)
-  const [uploading, setUploading] = React.useState(false)
-  const fileRef = React.useRef<HTMLInputElement>(null)
-
-  // Delete confirmation for the curriculum tab.
-  const [pendingDelete, setPendingDelete] = React.useState<
-    { kind: 'module' | 'lesson'; id: string } | null
-  >(null)
-  // Id of a just-created module/lesson whose title input should grab focus.
-  const [autoFocusId, setAutoFocusId] = React.useState<string | null>(null)
-
-  const reload = React.useCallback(async () => {
-    if (!id) return
-    const provider = getCoursesProvider()
-    const c = await provider.getCourse(id)
-    setCourse(c)
-    if (c) {
-      setSavedSnap(editSnapshot(c))
-      const [m, l, o, paidOrders] = await Promise.all([
-        provider.listModules(c.id),
-        provider.listLessons(c.id),
-        provider.listOffers(c.id),
-        provider.listOrders({ courseId: c.id, financialStatus: 'paid' }),
-      ])
-      setModules(m)
-      setLessons(l)
-      setOffers(o)
-      setStudents(buildCourseStudents(paidOrders))
-    }
-    setLoading(false)
-  }, [id])
-
-  React.useEffect(() => { void reload() }, [reload])
-
-  const dirty = !!course && editSnapshot(course) !== savedSnap
-
-  // Persist the Geral tab through the app's generic floating unsaved-changes bar
-  // (the same SaveBar the rest of the CRUD uses) instead of an inline button.
-  useSaveBar({
-    dirty,
-    saving,
-    onSave: () => { void saveDetails() },
-    onDiscard: () => { void reload() },
-    saveLabel: t('courses.editor.save') || 'Salvar',
-  })
-
-  if (loading || !course) return <EditorSkeleton />
-
-  function patchCourse(patch: Partial<Course>) {
-    setCourse((c) => (c ? { ...c, ...patch } : c))
-  }
-
-  async function saveDetails() {
-    if (!course) return
-    setSaving(true)
-    try {
-      await getCoursesProvider().updateCourse(course.id, {
-        title: course.title,
-        subtitle: course.subtitle ?? undefined,
-        description: course.description ?? undefined,
-        thumbnailUrl: course.thumbnailUrl ?? undefined,
-        price: course.price,
-        status: course.status,
-        deliveryType: course.deliveryType,
-      })
-      setSavedSnap(editSnapshot(course))
-      toast.success(t('courses.editor.saved') || 'Course saved')
-    } catch {
-      toast.error(t('courses.editor.saveFailed') || 'Could not save the course')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  async function onPickThumbnail(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0]
-    if (!file || !course) return
-    const supabase = getSupabaseClientOptional() as {
-      storage?: {
-        from: (b: string) => {
-          upload: (p: string, f: File, o?: unknown) => Promise<{ error: unknown }>
-          getPublicUrl: (p: string) => { data: { publicUrl: string } }
-        }
-      }
-    } | null
-    if (!supabase?.storage) {
-      toast.error(t('courses.editor.uploadUnavailable') || 'Upload unavailable — paste an image URL instead.')
-      if (fileRef.current) fileRef.current.value = ''
-      return
-    }
-    setUploading(true)
-    try {
-      const ext = file.name.split('.').pop() || 'jpg'
-      const path = `${course.id}/cover-${Date.now()}.${ext}`
-      const bucket = supabase.storage.from('course-media')
-      const { error } = await bucket.upload(path, file, { upsert: true, contentType: file.type })
-      if (error) throw error
-      const { data } = bucket.getPublicUrl(path)
-      patchCourse({ thumbnailUrl: data.publicUrl })
-      toast.success(t('courses.editor.thumbnailUploaded') || 'Image uploaded — remember to save.')
-    } catch {
-      toast.error(t('courses.editor.uploadFailed') || 'Could not upload the image')
-    } finally {
-      setUploading(false)
-      if (fileRef.current) fileRef.current.value = ''
-    }
-  }
-
-  // --- module / lesson mutations (persist immediately, then reload) ---------
-  async function addModule() {
-    const mod = await getCoursesProvider().createModule({ courseId: course!.id, title: t('courses.editor.untitledModule') || 'New module' })
-    toast.success(t('courses.editor.moduleAdded') || 'Module added')
-    await reload()
-    setAutoFocusId(mod.id)
-  }
-  async function renameModule(moduleId: string, title: string) {
-    await getCoursesProvider().updateModule(moduleId, { title })
-  }
-  async function addLesson(moduleId: string) {
-    // Optimistic: drop the row at the END of the module's list immediately,
-    // then persist in the background (swap the temp id for the real one, keeping
-    // any edits made meanwhile). No full reload → no flash.
-    const tempId = `tmp-${crypto.randomUUID()}`
-    const nextOrder = lessons
-      .filter((l) => l.moduleId === moduleId)
-      .reduce((max, l) => Math.max(max, l.sortOrder), -1) + 1
-    const optimistic: Lesson = {
-      id: tempId,
-      courseId: course!.id,
-      moduleId,
-      title: t('courses.editor.untitledLesson') || 'New lesson',
-      description: null,
-      videoUrl: '',
-      durationSec: 0,
-      sortOrder: nextOrder,
-    }
-    setLessons((ls) => [...ls, optimistic])
-    setAutoFocusId(tempId)
-    try {
-      const real = await getCoursesProvider().createLesson({
-        courseId: course!.id,
-        moduleId,
-        title: optimistic.title,
-        videoUrl: '',
-      })
-      setLessons((ls) => ls.map((l) => (l.id === tempId ? { ...l, id: real.id } : l)))
-      setAutoFocusId((cur) => (cur === tempId ? real.id : cur))
-    } catch {
-      setLessons((ls) => ls.filter((l) => l.id !== tempId))
-      toast.error(t('courses.editor.saveFailed') || 'Could not add the lesson')
-    }
-  }
-  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,
-    })
-  }
-
-  // Persist a new module order (optimistic — reload re-sorts by sort_order).
-  async function reorderModules(orderedIds: string[]) {
-    const prev = modules
-    setModules(orderedIds.map((mid, i) => ({ ...prev.find((m) => m.id === mid)!, sortOrder: i })))
-    try {
-      await Promise.all(orderedIds.map((mid, i) => getCoursesProvider().updateModule(mid, { sortOrder: i })))
-    } catch {
-      toast.error(t('courses.editor.reorderFailed') || 'Could not reorder')
-    } finally {
-      await reload()
-    }
-  }
-  // Persist a new lesson order within one module.
-  async function reorderLessons(moduleId: string, orderedIds: string[]) {
-    const prev = lessons
-    const others = prev.filter((l) => l.moduleId !== moduleId)
-    const reordered = orderedIds.map((lid, i) => ({ ...prev.find((l) => l.id === lid)!, sortOrder: i }))
-    setLessons([...others, ...reordered])
-    try {
-      await Promise.all(orderedIds.map((lid, i) => getCoursesProvider().updateLesson(lid, { sortOrder: i })))
-    } catch {
-      toast.error(t('courses.editor.reorderFailed') || 'Could not reorder')
-    } finally {
-      await reload()
-    }
-  }
-
-  async function confirmDelete() {
-    if (!pendingDelete) return
-    const provider = getCoursesProvider()
-    if (pendingDelete.kind === 'module') await provider.deleteModule(pendingDelete.id)
-    else await provider.deleteLesson(pendingDelete.id)
-    toast.success(t('courses.editor.deleted') || 'Removed')
-    setPendingDelete(null)
-    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',
-    })
-    toast.success(t('courses.offers.added') || 'Offer added')
-    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)
-    toast.success(t('courses.offers.removed') || 'Offer removed')
-    await reload()
-  }
-
-  const deliveryOptions: SegmentedOption<CourseDeliveryType>[] = DELIVERY_TYPES.map((d) => ({
-    value: d,
-    label: t(`courses.editor.delivery.${d}`) || d,
-  }))
-
-  return (
-    <div className="mx-auto max-w-4xl p-6 md:p-8">
-      <button
-        onClick={() => navigateTo('/courses')}
-        className="mb-4 inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
-      >
-        <ArrowLeft className="h-4 w-4" /> {t('courses.editor.back') || 'Back to courses'}
-      </button>
-
-      <div className="mb-6 flex flex-wrap items-center gap-x-3 gap-y-2">
-        <h1 className="text-2xl font-bold text-foreground">{course.title || (t('courses.editor.untitledCourse') || 'Untitled course')}</h1>
-        <Badge variant={course.status === 'published' ? 'success' : course.status === 'archived' ? 'secondary' : 'outline'}>
-          {t(`courses.status.${course.status}`) || course.status}
-        </Badge>
-        <Badge variant="outline">{t(`courses.editor.delivery.${course.deliveryType}`) || course.deliveryType}</Badge>
-      </div>
-
-      <Tabs value={tab} onValueChange={(v) => setTab(v as Tab)}>
-        <div className="-mx-1 mb-6 overflow-x-auto px-1 pb-1">
-          <TabsList className="h-auto flex-nowrap">
-            {TABS.map((tk) => {
-              const Icon = TAB_ICON[tk]
-              return (
-                <TabsTrigger key={tk} value={tk} className="gap-1.5 whitespace-nowrap py-1.5">
-                  <Icon className="h-3.5 w-3.5" />
-                  {t(`courses.editor.tab.${tk}`) || tk}
-                </TabsTrigger>
-              )
-            })}
-          </TabsList>
-        </div>
-
-        {/* ---- Geral ---------------------------------------------------- */}
-        <TabsContent value="details" className="space-y-5">
-          <SectionCard title={t('courses.editor.sectionBasics') || 'Basics'}>
-            <div className="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
-                  value={course.description ?? ''}
-                  onChange={(e) => patchCourse({ description: e.target.value })}
-                  placeholder={t('courses.editor.descriptionPlaceholder') || 'What will students learn?'}
-                />
-              </Field>
-              <Field label={t('courses.editor.fieldDelivery') || 'Format'} hint={t('courses.editor.deliveryHint') || 'How this course is delivered.'}>
-                <SegmentedControl
-                  size="md"
-                  options={deliveryOptions}
-                  value={course.deliveryType}
-                  onChange={(v) => patchCourse({ deliveryType: v })}
-                  aria-label={t('courses.editor.fieldDelivery') || 'Format'}
-                />
-              </Field>
-            </div>
-          </SectionCard>
-
-          <SectionCard title={t('courses.editor.sectionThumbnail') || 'Cover image'} description={t('courses.editor.thumbnailHint') || 'Shown on the storefront and in listings. 1280×720 recommended.'}>
-            <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
-              <div className="aspect-video w-full shrink-0 overflow-hidden rounded-lg border border-border bg-muted sm:w-56">
-                {course.thumbnailUrl ? (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img src={course.thumbnailUrl} alt="" className="h-full w-full object-cover" />
-                ) : (
-                  <div className="flex h-full w-full flex-col items-center justify-center gap-1 text-muted-foreground">
-                    <ImagePlus className="h-6 w-6" />
-                    <span className="text-xs">{t('courses.editor.thumbnailEmpty') || 'No image'}</span>
-                  </div>
-                )}
-              </div>
-              <div className="flex-1 space-y-3">
-                <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={onPickThumbnail} />
-                <Button variant="outline" size="sm" disabled={uploading} onClick={() => fileRef.current?.click()}>
-                  {uploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <UploadCloud className="h-4 w-4" />}
-                  {uploading ? (t('courses.editor.uploading') || 'Uploading…') : (t('courses.editor.thumbnailUpload') || 'Upload image')}
-                </Button>
-                <Field label={t('courses.editor.thumbnailUrl') || 'Or paste an image URL'}>
-                  <Input
-                    value={course.thumbnailUrl ?? ''}
-                    placeholder="https://…"
-                    onChange={(e) => patchCourse({ thumbnailUrl: e.target.value || null })}
-                  />
-                </Field>
-              </div>
-            </div>
-          </SectionCard>
-
-          <SectionCard title={t('courses.editor.sectionPricing') || 'Pricing & status'}>
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <Field label={t('courses.editor.fieldPrice') || 'Price'} hint={course.currency}>
-                <Input
-                  type="number"
-                  min={0}
-                  step="0.01"
-                  inputMode="decimal"
-                  value={String(course.price)}
-                  onChange={(e) => patchCourse({ price: Number(e.target.value) || 0 })}
-                />
-              </Field>
-              <Field label={t('courses.editor.fieldStatus') || 'Status'}>
-                <Select value={course.status} onValueChange={(v) => patchCourse({ status: v as CourseStatus })}>
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {STATUSES.map((s) => (
-                      <SelectItem key={s} value={s}>{t(`courses.status.${s}`) || s}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </Field>
-            </div>
-          </SectionCard>
-        </TabsContent>
-
-        {/* ---- Conteúdo ------------------------------------------------- */}
-        <TabsContent value="curriculum" className="space-y-4">
-          <CurriculumBuilder
-            t={t}
-            modules={modules}
-            lessons={lessons}
-            autoFocusId={autoFocusId}
-            onAutoFocused={() => setAutoFocusId(null)}
-            onAddModule={addModule}
-            onRenameModule={renameModule}
-            onAddLesson={addLesson}
-            onPatchLesson={patchLesson}
-            onRequestDelete={(kind, delId) => setPendingDelete({ kind, id: delId })}
-            onReorderModules={reorderModules}
-            onReorderLessons={reorderLessons}
-          />
-        </TabsContent>
-
-        {/* ---- Ofertas -------------------------------------------------- */}
-        <TabsContent value="offers" className="space-y-4">
-          <InfoNote icon={<Info className="h-4 w-4" />}>
-            {t('courses.offers.help') || 'Price points for this course. Sales run through orders and the Financeiro module.'}
-          </InfoNote>
-          {offers.length === 0 ? (
-            <EmptyState
-              icon={<Tag className="h-5 w-5" />}
-              title={t('courses.offers.empty') || 'No offers yet'}
-              description={t('courses.offers.emptyHint') || 'Create an offer to sell this course.'}
-              action={<Button onClick={addOffer}><Plus className="h-4 w-4" />{t('courses.offers.firstOffer') || 'Create first offer'}</Button>}
-            />
-          ) : (
-            <>
-              {offers.map((offer) => (
-                <div key={offer.id} className="rounded-xl border border-border bg-card p-4 shadow-sm md:p-5">
-                  <div className="mb-4 flex items-start justify-between gap-3">
-                    <Badge variant="outline" className="gap-1">
-                      {offer.kind === 'subscription'
-                        ? (t('courses.offers.subscription') || 'Subscription')
-                        : (t('courses.offers.oneTime') || 'One-time')}
-                    </Badge>
-                    <button
-                      onClick={() => deleteOffer(offer.id)}
-                      className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-destructive/10 hover:text-destructive"
-                      aria-label={t('courses.offers.remove') || 'Remove'}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </button>
-                  </div>
-
-                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_140px_160px]">
-                    <Field label={t('courses.offers.name') || 'Offer name'}>
-                      <Input defaultValue={offer.name} onBlur={(e) => patchOffer(offer.id, { name: e.target.value })} />
-                    </Field>
-                    <Field label={t('courses.offers.price') || 'Price'} hint={offer.currency}>
-                      <Input type="number" min={0} step="0.01" inputMode="decimal" defaultValue={String(offer.price)} onBlur={(e) => patchOffer(offer.id, { price: Number(e.target.value) || 0 })} />
-                    </Field>
-                    <Field label={t('courses.offers.kind') || 'Type'}>
-                      <Select
-                        value={offer.kind}
-                        onValueChange={(v) => patchOffer(offer.id, { kind: v as OfferKind, recurringInterval: v === 'subscription' ? (offer.recurringInterval ?? 'month') : null })}
-                      >
-                        <SelectTrigger><SelectValue /></SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="one_time">{t('courses.offers.oneTime') || 'One-time'}</SelectItem>
-                          <SelectItem value="subscription">{t('courses.offers.subscription') || 'Subscription'}</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </Field>
-                  </div>
-
-                  {offer.kind === 'subscription' && (
-                    <div className="mt-3 max-w-[200px]">
-                      <Field label={t('courses.offers.interval') || 'Billing interval'}>
-                        <Select
-                          value={offer.recurringInterval ?? 'month'}
-                          onValueChange={(v) => patchOffer(offer.id, { recurringInterval: v as RecurringInterval })}
-                        >
-                          <SelectTrigger><SelectValue /></SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="month">{t('courses.interval.month') || 'month'}</SelectItem>
-                            <SelectItem value="year">{t('courses.interval.year') || 'year'}</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </Field>
-                    </div>
-                  )}
-
-                  {/* Storefront-only flags — de-emphasized: they persist but only take
-                      effect once the public checkout ships (deferred / bridge scope). */}
-                  <div className="mt-4 rounded-lg border border-dashed border-border bg-muted/30 p-3">
-                    <p className="mb-2.5 flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <Clock className="h-3.5 w-3.5" />
-                      {t('courses.offers.checkoutFlagsNote') || 'Apply once the public checkout ships (coming soon).'}
-                    </p>
-                    <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
-                      <label className="flex cursor-pointer items-center gap-2 text-sm text-muted-foreground">
-                        <Checkbox checked={offer.isDefault} onChange={(v) => patchOffer(offer.id, { isDefault: v })} />
-                        {t('courses.offers.default') || 'Default'}
-                      </label>
-                      <label className="flex cursor-pointer items-center gap-2 text-sm text-muted-foreground">
-                        <Checkbox checked={offer.isOrderBump} onChange={(v) => patchOffer(offer.id, { isOrderBump: v })} />
-                        {t('courses.offers.bump') || 'Order bump'}
-                      </label>
-                    </div>
-                  </div>
-                </div>
-              ))}
-              <Button variant="outline" onClick={addOffer} className="w-full border-dashed">
-                <Plus className="h-4 w-4" />{t('courses.offers.add') || 'Add offer'}
-              </Button>
-            </>
-          )}
-        </TabsContent>
-
-        {/* ---- Área de membros ----------------------------------------- */}
-        <TabsContent value="members" className="space-y-4">
-          <InfoNote icon={<Users className="h-4 w-4" />}>
-            {t('courses.editor.membersHelp') || 'Buyers are enrolled automatically through orders and get access to all of this course’s content.'}
-          </InfoNote>
-
-          {/* Enrolled students for THIS course (the actual "área de membros"). */}
-          <div className="space-y-2">
-            <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              {(t('courses.editor.enrolledStudents') || 'Enrolled students')} ({students.length})
-            </p>
-            {students.length === 0 ? (
-              <EmptyState
-                icon={<Users className="h-5 w-5" />}
-                title={t('courses.editor.membersEmpty') || 'No students yet'}
-                description={t('courses.editor.membersEmptyHint') || 'Buyers are enrolled here automatically after a paid order.'}
-              />
-            ) : (
-              <div className="divide-y divide-border overflow-hidden rounded-xl border border-border bg-card">
-                {students.map((s) => (
-                  <div key={s.key} className="flex items-center gap-3 px-4 py-3">
-                    <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold uppercase text-muted-foreground" aria-hidden>
-                      {(s.name || s.email || '?').charAt(0)}
-                    </span>
-                    <span className="flex min-w-0 flex-1 flex-col">
-                      <span className="truncate font-medium text-foreground">{s.name}</span>
-                      {s.email && <span className="truncate text-xs text-muted-foreground">{s.email}</span>}
-                    </span>
-                    {s.since && (
-                      <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
-                        {new Date(s.since).toLocaleDateString()}
-                      </span>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Which offers grant access — kept as secondary context. */}
-          {offers.length > 0 && (
-            <div className="space-y-2">
-              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                {t('courses.editor.accessUnlockedBy') || 'Access is unlocked by'}
-              </p>
-              <div className="divide-y divide-border overflow-hidden rounded-xl border border-border bg-card">
-                {offers.map((offer) => (
-                  <div key={offer.id} className="flex items-center gap-3 px-4 py-3">
-                    <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground" aria-hidden>
-                      <Lock className="h-4 w-4" />
-                    </span>
-                    <span className="min-w-0 flex-1 truncate font-medium text-foreground">{offer.name}</span>
-                    <span className="shrink-0 text-sm tabular-nums text-muted-foreground">{formatMoney(offer.price, offer.currency)}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </TabsContent>
-      </Tabs>
-
-      <ConfirmDialog
-        open={pendingDelete !== null}
-        variant="destructive"
-        title={pendingDelete?.kind === 'module'
-          ? (t('courses.editor.deleteModuleConfirm') || 'Delete this module?')
-          : (t('courses.editor.deleteLessonConfirm') || 'Remove this lesson?')}
-        description={pendingDelete?.kind === 'module'
-          ? (t('courses.editor.deleteModuleConfirmBody') || 'Its lessons will be removed too. This cannot be undone.')
-          : (t('courses.editor.deleteLessonConfirmBody') || 'This cannot be undone.')}
-        confirmLabel={t('courses.editor.confirmDelete') || 'Delete'}
-        cancelLabel={t('courses.editor.cancel') || 'Cancel'}
-        onConfirm={confirmDelete}
-        onCancel={() => setPendingDelete(null)}
-      />
-    </div>
-  )
-}
-CourseEditorPage.displayName = 'CourseEditorPage'
-
-// ===========================================================================
-// Curriculum tree builder (module → lesson), Kiwify/Hotmart style.
-// ===========================================================================
-
-interface CurriculumBuilderProps {
-  t: TFn
-  modules: Module[]
-  lessons: Lesson[]
-  autoFocusId: string | null
-  onAutoFocused: () => void
-  onAddModule: () => void
-  onRenameModule: (moduleId: string, title: string) => void
-  onAddLesson: (moduleId: string) => void
-  onPatchLesson: (lessonId: string, patch: Partial<Lesson>) => void
-  onRequestDelete: (kind: 'module' | 'lesson', id: string) => void
-  onReorderModules: (orderedIds: string[]) => void
-  onReorderLessons: (moduleId: string, orderedIds: string[]) => void
-}
-
-/** Human-friendly total duration, e.g. "8 min" or "1 h 20 min". */
-function formatDuration(sec: number, t: TFn): string {
-  const min = Math.max(0, Math.round(sec / 60))
-  const mLabel = t('courses.editor.minShort') || 'min'
-  if (min < 60) return `${min} ${mLabel}`
-  const h = Math.floor(min / 60)
-  const rem = min % 60
-  const hLabel = t('courses.editor.hourShort') || 'h'
-  return rem ? `${h} ${hLabel} ${rem} ${mLabel}` : `${h} ${hLabel}`
-}
-
-function CurriculumBuilder({
-  t, modules, lessons, autoFocusId, onAutoFocused,
-  onAddModule, onRenameModule, onAddLesson, onPatchLesson,
-  onRequestDelete, onReorderModules, onReorderLessons,
-}: CurriculumBuilderProps) {
-  // Track only the *collapsed* modules so freshly-created ones default to open.
-  const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set())
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  )
-
-  function toggleModule(id: string) {
-    setCollapsed((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }
-
-  function handleModuleDragEnd(e: DragEndEvent) {
-    const { active, over } = e
-    if (!over || active.id === over.id) return
-    const ids = modules.map((m) => m.id)
-    const from = ids.indexOf(String(active.id))
-    const to = ids.indexOf(String(over.id))
-    if (from < 0 || to < 0) return
-    onReorderModules(arrayMove(ids, from, to))
-  }
-
-  if (modules.length === 0) {
-    return (
-      <div className="space-y-4">
-        <AutosaveHint t={t} />
-        <EmptyState
-          icon={<Layers className="h-5 w-5" />}
-          title={t('courses.editor.modulesEmpty') || 'No modules yet'}
-          description={t('courses.editor.modulesEmptyHint') || 'Create a module to start organizing your lessons.'}
-          action={<Button onClick={onAddModule}><Plus className="h-4 w-4" />{t('courses.editor.firstModule') || 'Create first module'}</Button>}
-        />
-      </div>
-    )
-  }
-
-  const totalLessons = lessons.length
-
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <AutosaveHint t={t} />
-        <span className="text-xs text-muted-foreground tabular-nums">
-          {modules.length} {modules.length === 1 ? (t('courses.editor.moduleLabel') || 'module') : (t('courses.editor.moduleLabelPlural') || 'modules')}
-          {' · '}
-          {totalLessons} {totalLessons === 1 ? (t('courses.editor.lessonUnitOne') || 'lesson') : (t('courses.editor.lessonUnitOther') || 'lessons')}
-        </span>
-      </div>
-
-      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleModuleDragEnd}>
-        <SortableContext items={modules.map((m) => m.id)} strategy={verticalListSortingStrategy}>
-          <div className="space-y-3">
-            {modules.map((mod, i) => (
-              <SortableModuleCard
-                key={mod.id}
-                t={t}
-                index={i}
-                mod={mod}
-                lessons={lessons.filter((l) => l.moduleId === mod.id)}
-                expanded={!collapsed.has(mod.id)}
-                onToggle={() => toggleModule(mod.id)}
-                autoFocusId={autoFocusId}
-                onAutoFocused={onAutoFocused}
-                onRenameModule={onRenameModule}
-                onAddLesson={onAddLesson}
-                onPatchLesson={onPatchLesson}
-                onRequestDelete={onRequestDelete}
-                onReorderLessons={onReorderLessons}
-              />
-            ))}
-          </div>
-        </SortableContext>
-      </DndContext>
-
-      <Button variant="outline" onClick={onAddModule} className="w-full border-dashed">
-        <Plus className="h-4 w-4" />{t('courses.editor.newModule') || 'New module'}
-      </Button>
-    </div>
-  )
-}
-
-interface SortableModuleCardProps {
-  t: TFn
-  index: number
-  mod: Module
-  lessons: Lesson[]
-  expanded: boolean
-  onToggle: () => void
-  autoFocusId: string | null
-  onAutoFocused: () => void
-  onRenameModule: (moduleId: string, title: string) => void
-  onAddLesson: (moduleId: string) => void
-  onPatchLesson: (lessonId: string, patch: Partial<Lesson>) => void
-  onRequestDelete: (kind: 'module' | 'lesson', id: string) => void
-  onReorderLessons: (moduleId: string, orderedIds: string[]) => void
-}
-
-function SortableModuleCard({
-  t, index, mod, lessons, expanded, onToggle, autoFocusId, onAutoFocused,
-  onRenameModule, onAddLesson, onPatchLesson, onRequestDelete, onReorderLessons,
-}: SortableModuleCardProps) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: mod.id })
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  )
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.6 : 1,
-    zIndex: isDragging ? 20 : undefined,
-  }
-
-  const count = lessons.length
-  const totalSec = lessons.reduce((s, l) => s + (l.durationSec || 0), 0)
-
-  function handleLessonDragEnd(e: DragEndEvent) {
-    const { active, over } = e
-    if (!over || active.id === over.id) return
-    const ids = lessons.map((l) => l.id)
-    const from = ids.indexOf(String(active.id))
-    const to = ids.indexOf(String(over.id))
-    if (from < 0 || to < 0) return
-    onReorderLessons(mod.id, arrayMove(ids, from, to))
-  }
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className="overflow-hidden rounded-xl border border-border bg-card shadow-sm"
-    >
-      {/* Module header */}
-      <div className="flex items-center gap-1.5 px-2 py-2 sm:gap-2 sm:px-3">
-        <button
-          {...attributes}
-          {...listeners}
-          className="hidden h-8 w-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/40 transition-colors hover:text-muted-foreground active:cursor-grabbing sm:flex"
-          aria-label={t('courses.editor.dragToReorder') || 'Drag to reorder'}
-        >
-          <GripVertical className="h-4 w-4" />
-        </button>
-
-        <button
-          onClick={onToggle}
-          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-          aria-label={expanded ? (t('courses.editor.collapse') || 'Collapse') : (t('courses.editor.expand') || 'Expand')}
-          aria-expanded={expanded}
-        >
-          <ChevronDown className={'h-4 w-4 transition-transform ' + (expanded ? '' : '-rotate-90')} />
-        </button>
-
-        <span className="hidden shrink-0 items-center rounded-md bg-muted px-2 py-1 text-xs font-semibold tabular-nums text-muted-foreground sm:inline-flex">
-          {String(index + 1).padStart(2, '0')}
-        </span>
-
-        <TitleField
-          value={mod.title}
-          autoFocus={autoFocusId === mod.id}
-          onAutoFocused={onAutoFocused}
-          onCommit={(v) => onRenameModule(mod.id, v)}
-          placeholder={t('courses.editor.moduleTitle') || 'Module title'}
-          ariaLabel={t('courses.editor.moduleTitle') || 'Module title'}
-          className="text-sm font-semibold"
-        />
-
-        <span className="hidden shrink-0 text-xs text-muted-foreground tabular-nums md:inline">
-          {count > 0
-            ? `${count} ${count === 1 ? (t('courses.editor.lessonUnitOne') || 'lesson') : (t('courses.editor.lessonUnitOther') || 'lessons')} · ${formatDuration(totalSec, t)}`
-            : (t('courses.editor.noLessons') || 'No lessons')}
-        </span>
-
-        <button
-          onClick={() => onRequestDelete('module', mod.id)}
-          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-destructive/10 hover:text-destructive"
-          aria-label={t('courses.editor.deleteModule') || 'Delete module'}
-        >
-          <Trash2 className="h-4 w-4" />
-        </button>
-      </div>
-
-      {/* Module body */}
-      {expanded && (
-        <div className="border-t border-border/60 bg-muted/20 p-2 sm:p-3">
-          {count === 0 ? (
-            <button
-              onClick={() => onAddLesson(mod.id)}
-              className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-border px-3 py-4 text-sm text-muted-foreground transition-colors hover:border-primary/40 hover:bg-card hover:text-foreground"
-            >
-              <Plus className="h-4 w-4" /> {t('courses.editor.firstLesson') || 'Add the first lesson'}
-            </button>
-          ) : (
-            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleLessonDragEnd}>
-              <SortableContext items={lessons.map((l) => l.id)} strategy={verticalListSortingStrategy}>
-                <div className="space-y-1.5">
-                  {lessons.map((lesson) => (
-                    <SortableLessonRow
-                      key={lesson.id}
-                      t={t}
-                      lesson={lesson}
-                      autoFocusId={autoFocusId}
-                      onAutoFocused={onAutoFocused}
-                      onPatchLesson={onPatchLesson}
-                      onRequestDelete={onRequestDelete}
-                    />
-                  ))}
-                </div>
-              </SortableContext>
-            </DndContext>
-          )}
-
-          {count > 0 && (
-            <button
-              onClick={() => onAddLesson(mod.id)}
-              className="mt-2 flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-primary transition-colors hover:bg-primary/10"
-            >
-              <Plus className="h-4 w-4" /> {t('courses.editor.newLesson') || 'New lesson'}
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-interface SortableLessonRowProps {
-  t: TFn
-  lesson: Lesson
-  autoFocusId: string | null
-  onAutoFocused: () => void
-  onPatchLesson: (lessonId: string, patch: Partial<Lesson>) => void
-  onRequestDelete: (kind: 'module' | 'lesson', id: string) => void
-}
-
-function SortableLessonRow({ t, lesson, autoFocusId, onAutoFocused, onPatchLesson, onRequestDelete }: SortableLessonRowProps) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: lesson.id })
-  const [open, setOpen] = React.useState(false)
-  // Local mirrors so the type icon + duration chip refresh on blur without a reload.
-  const [videoUrl, setVideoUrl] = React.useState(lesson.videoUrl)
-  const [durationSec, setDurationSec] = React.useState(lesson.durationSec)
-  React.useEffect(() => { setVideoUrl(lesson.videoUrl) }, [lesson.videoUrl])
-  React.useEffect(() => { setDurationSec(lesson.durationSec) }, [lesson.durationSec])
-
-  const hasVideo = videoUrl.trim().length > 0
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.6 : 1,
-    zIndex: isDragging ? 10 : undefined,
-  }
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={
-        'group rounded-lg border bg-card transition-colors ' +
-        (open ? 'border-border' : 'border-transparent hover:border-border')
-      }
-    >
-      <div className="flex items-center gap-1.5 px-1.5 py-1.5 sm:gap-2 sm:px-2">
-        <button
-          {...attributes}
-          {...listeners}
-          className="hidden h-8 w-5 shrink-0 cursor-grab touch-none items-center justify-center text-muted-foreground/40 transition-colors hover:text-muted-foreground active:cursor-grabbing sm:flex"
-          aria-label={t('courses.editor.dragToReorder') || 'Drag to reorder'}
-        >
-          <GripVertical className="h-4 w-4" />
-        </button>
-
-        <span
-          className={
-            'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ' +
-            (hasVideo ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground')
-          }
-          aria-hidden
-        >
-          {hasVideo ? <Video className="h-4 w-4" /> : <FileText className="h-4 w-4" />}
-        </span>
-
-        <TitleField
-          value={lesson.title}
-          autoFocus={autoFocusId === lesson.id}
-          onAutoFocused={onAutoFocused}
-          onCommit={(v) => onPatchLesson(lesson.id, { title: v })}
-          placeholder={t('courses.editor.lessonTitle') || 'Lesson title'}
-          ariaLabel={t('courses.editor.lessonTitle') || 'Lesson title'}
-          className="text-sm"
-        />
-
-        <span className="hidden shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs tabular-nums text-muted-foreground sm:inline-flex">
-          <Clock className="h-3 w-3" />
-          {Math.round(durationSec / 60)}
-          {' '}
-          {t('courses.editor.minShort') || 'min'}
-        </span>
-
-        <button
-          onClick={() => setOpen((v) => !v)}
-          className={
-            'inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-1 text-xs font-medium transition-colors ' +
-            (hasVideo
-              ? 'border-border text-muted-foreground hover:text-foreground'
-              : 'border-dashed border-border text-muted-foreground hover:border-primary/40 hover:text-foreground') +
-            ' opacity-100 sm:opacity-0 sm:group-hover:opacity-100 ' + (open ? 'sm:opacity-100' : '')
-          }
-          aria-label={t('courses.editor.editLesson') || 'Edit lesson'}
-          aria-expanded={open}
-        >
-          <PlayCircle className="h-3.5 w-3.5" />
-          <span className="hidden sm:inline">
-            {hasVideo ? (t('courses.editor.videoSet') || 'Video') : (t('courses.editor.addVideo') || 'Add video')}
-          </span>
-        </button>
-
-        <button
-          onClick={() => onRequestDelete('lesson', lesson.id)}
-          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-destructive/10 hover:text-destructive sm:opacity-0 sm:group-hover:opacity-100"
-          aria-label={t('courses.editor.deleteLesson') || 'Remove lesson'}
-        >
-          <Trash2 className="h-4 w-4" />
-        </button>
-      </div>
-
-      {open && (
-        <div className="space-y-3 border-t border-border/60 px-3 py-3 sm:pl-11">
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-muted-foreground">
-              {t('courses.editor.videoUrlLabel') || 'Video URL'}
-            </label>
-            <Input
-              defaultValue={lesson.videoUrl}
-              placeholder={t('courses.editor.videoUrlPlaceholder') || 'Paste the video link (YouTube, Vimeo…)'}
-              onBlur={(e) => { setVideoUrl(e.target.value); onPatchLesson(lesson.id, { videoUrl: e.target.value }) }}
-              aria-label={t('courses.editor.videoUrlLabel') || 'Video URL'}
-            />
-          </div>
-          <div className="max-w-[160px] space-y-1.5">
-            <label className="text-xs font-medium text-muted-foreground">
-              {t('courses.editor.lessonDuration') || 'Duration (min)'}
-            </label>
-            <Input
-              type="number"
-              min={0}
-              inputMode="numeric"
-              defaultValue={String(Math.round(lesson.durationSec / 60))}
-              onBlur={(e) => { const s = (Number(e.target.value) || 0) * 60; setDurationSec(s); onPatchLesson(lesson.id, { durationSec: s }) }}
-              aria-label={t('courses.editor.lessonDuration') || 'Duration (min)'}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-/**
- * Borderless, text-like inline title input. Uncontrolled (defaultValue + onBlur
- * autosave) so it plays nicely with the reload-after-mutation flow, and focuses
- * itself when it is the freshly-created item.
- */
-function TitleField({ value, autoFocus, onAutoFocused, onCommit, placeholder, ariaLabel, className }: {
-  value: string
-  autoFocus?: boolean
-  onAutoFocused?: () => void
-  onCommit: (v: string) => void
-  placeholder?: string
-  ariaLabel?: string
-  className?: string
-}) {
-  const ref = React.useRef<HTMLInputElement>(null)
-  React.useEffect(() => {
-    if (autoFocus && ref.current) {
-      ref.current.focus()
-      ref.current.select()
-      onAutoFocused?.()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoFocus])
-  return (
-    <input
-      ref={ref}
-      defaultValue={value}
-      placeholder={placeholder}
-      aria-label={ariaLabel}
-      onBlur={(e) => onCommit(e.target.value)}
-      onKeyDown={(e) => { if (e.key === 'Enter') e.currentTarget.blur() }}
-      className={
-        'min-w-0 flex-1 rounded-md bg-transparent px-2 py-1.5 text-foreground outline-none transition-colors placeholder:text-muted-foreground/60 hover:bg-muted/60 focus:bg-background focus:ring-2 focus:ring-ring ' +
-        (className ?? '')
-      }
-    />
-  )
-}
-
-function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
-  return (
-    <div className="space-y-1.5">
-      <div className="flex items-baseline justify-between gap-2">
-        <label className="text-sm font-medium text-foreground">{label}</label>
-        {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
-      </div>
-      {children}
-    </div>
-  )
-}
-
-function Textarea(props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
-  const { className, ...rest } = props
-  return (
-    <textarea
-      className={
-        'flex min-h-[96px] w-full rounded-input border border-input bg-card px-2 py-1.5 text-sm text-foreground shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ' +
-        (className ?? '')
-      }
-      {...rest}
-    />
-  )
-}
-
-function AutosaveHint({ t }: { t: (k: string) => string }) {
-  return (
-    <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
-      <Check className="h-3.5 w-3.5 text-success" />
-      {t('courses.editor.autosaved') || 'Changes are saved automatically.'}
-    </p>
-  )
-}
-
-function EditorSkeleton() {
-  return (
-    <div className="mx-auto max-w-4xl p-6 md:p-8">
-      <Skeleton className="mb-4 h-4 w-28" />
-      <Skeleton className="mb-6 h-8 w-64" />
-      <Skeleton className="mb-6 h-10 w-full" />
-      <div className="space-y-4">
-        <Skeleton className="h-40 w-full rounded-xl" />
-        <Skeleton className="h-40 w-full rounded-xl" />
-      </div>
-    </div>
-  )
-}