Frontend architektúra

app/
├── (marketing)/                       ← public stránky (ak treba — väčšina je v website/)
│   └── pricing/page.tsx
├── (auth)/                            ← prihlásenie, callback, sign-out
│   ├── login/page.tsx
│   └── callback/route.ts
├── (dashboard)/                       ← prihlásená sekcia
│   ├── layout.tsx                     ← shared layout so sidebar/topbar
│   ├── page.tsx                       ← dashboard (prehľad kurzov, aktuálny progress)
│   ├── kurzy/
│   │   ├── page.tsx                   ← katalóg
│   │   └── [courseSlug]/
│   │       ├── page.tsx               ← detail kurzu (popis, lektor, cena, levels overview)
│   │       ├── kupit/
│   │       │   └── page.tsx
│   │       ├── ucim-sa/
│   │       │   └── page.tsx           ← prehľad postupu študenta v kurze (Levels matrix)
│   │       └── [levelSlug]/
│   │           ├── page.tsx           ← detail levelu (10 tém, level-test status)
│   │           ├── test/page.tsx      ← Level-test
│   │           └── [topicSlug]/
│   │               ├── page.tsx       ← Téma redirectuje rovno na Modul (1:1)
│   │               └── [partSlug]/
│   │                   ├── page.tsx   ← detail časti (contentBlocks render)
│   │                   └── test/page.tsx ← Part-test
│   ├── certifikaty/
│   │   ├── page.tsx                   ← zoznam získaných (final + intermediate)
│   │   └── [id]/page.tsx              ← detail certifikátu + verifikačná URL
│   ├── profil/
│   │   ├── page.tsx
│   │   └── nastavenia/page.tsx
│   └── objednavky/
│       ├── page.tsx
│       └── [id]/page.tsx
├── api/
│   ├── webhooks/
│   │   └── 24pay/route.ts
│   ├── orders/
│   │   └── [id]/route.ts
│   ├── progress/
│   │   └── route.ts
│   └── parts/
│       └── [id]/
│           └── playback-url/route.ts  ← signed Mux URL pre video bloky
├── layout.tsx                         ← root layout (fonts, theme)
├── globals.css                        ← Tailwind + design tokens import
└── not-found.tsx

app/
├── (auth)/
│   ├── login/page.tsx
│   └── callback/route.ts
├── (admin)/
│   ├── layout.tsx
│   ├── page.tsx                       ← dashboard so štatistikami
│   ├── kurzy/
│   │   ├── page.tsx
│   │   ├── novy/page.tsx
│   │   └── [id]/
│   │       ├── page.tsx               ← prehľad kurzu (matrix Tém × Úrovní)
│   │       ├── settings/page.tsx
│   │       ├── levels/
│   │       │   └── [levelId]/
│   │       │       ├── page.tsx       ← edit levelu, level-test, intermediate cert
│   │       │       └── topics/
│   │       │           └── [topicId]/
│   │       │               ├── page.tsx
│   │       │               └── parts/
│   │       │                   └── [partId]/page.tsx  ← edit časti + content blocks
│   │       ├── tests/                 ← samostatná správa testov
│   │       │   └── [testId]/page.tsx
│   │       ├── studenti/
│   │       │   ├── page.tsx           ← zoznam zapísaných
│   │       │   └── [enrollmentId]/page.tsx ← detail progressu jedného študenta
│   │       └── statistics/page.tsx    ← completion rates, test scores
│   ├── studenti/
│   │   ├── page.tsx                   ← cross-course view
│   │   └── [id]/page.tsx
│   ├── objednavky/
│   │   ├── page.tsx
│   │   └── [id]/page.tsx
│   ├── webinare/
│   │   ├── page.tsx
│   │   └── novy/page.tsx
│   ├── otazky/                        ← správa otázok a question banks
│   │   ├── page.tsx
│   │   └── [id]/page.tsx
│   ├── certifikaty/
│   │   ├── page.tsx
│   │   └── vydat/page.tsx             ← manuálne vydanie certifikátu (Fáza 1)
│   └── nastavenia/
│       └── page.tsx
└── api/
    └── ...

// Server Component (default)
// apps/app/app/(dashboard)/kurzy/[courseSlug]/page.tsx
import { findCourseBySlug } from '@clubup/db/courses';
import { CoursePurchaseButton } from '@/components/course-purchase-button';
 
export default async function CoursePage({ params }: { params: { courseSlug: string } }) {
  const course = await findCourseBySlug(params.courseSlug);
  if (!course) notFound();
 
  return (
    <article>
      <h1>{course.title}</h1>
      <p>{course.description}</p>
      {/* Klient komponent pre interaktivitu */}
      <CoursePurchaseButton courseId={course._id} priceEur={course.priceEur} />
    </article>
  );
}

// Client Component
// apps/app/components/course-purchase-button.tsx
'use client';
import { useState } from 'react';
import { initiatePayment } from '@/app/actions/payment';
 
export function CoursePurchaseButton({ courseId, priceEur }: Props) {
  const [pending, setPending] = useState(false);
 
  async function handleClick() {
    setPending(true);
    const result = await initiatePayment(courseId);
    if (result.redirectUrl) window.location.href = result.redirectUrl;
  }
 
  return (
    <button disabled={pending} onClick={handleClick}>
      {pending ? 'Pripravujem...' : `Kúpiť za ${priceEur} €`}
    </button>
  );
}

// Server Action
// apps/app/app/actions/payment.ts
'use server';
import { auth } from '@/auth';
import { createOrder } from '@clubup/db/orders';
import { create24PayPayment } from '@clubup/payments-24pay';
 
export async function initiatePayment(courseId: string) {
  const session = await auth();
  if (!session) throw new Error('Unauthorized');
 
  const order = await createOrder({
    courseId,
    studentId: session.user.sportupPersonId,
    state: 'pending',
  });
 
  const payment = await create24PayPayment({
    orderId: order._id.toString(),
    amount: order.amount,
    currency: 'EUR',
    description: `ClubUp kurz: ${order.courseTitle}`,
    returnUrl: `${process.env.NEXT_PUBLIC_APP_URL}/objednavky/${order._id}/return`,
  });
 
  return { redirectUrl: payment.redirectUrl };
}

// apps/app/components/part/part-content.tsx
import { TextBlock } from './blocks/text-block';
import { VideoBlock } from './blocks/video-block';
import { ImageBlock } from './blocks/image-block';
import { PresentationBlock } from './blocks/presentation-block';
import { PdfBlock } from './blocks/pdf-block';
import { WebinarBlock } from './blocks/webinar-block';
 
export async function PartContent({ part, enrollmentId }: Props) {
  return (
    <div className="space-y-8">
      {part.contentBlocks.map((block) => {
        switch (block.type) {
          case 'text': return <TextBlock key={block.id} block={block} />;
          case 'video': return <VideoBlock key={block.id} block={block} partId={part._id} enrollmentId={enrollmentId} />;
          case 'image': return <ImageBlock key={block.id} block={block} />;
          case 'presentation': return <PresentationBlock key={block.id} block={block} />;
          case 'pdf': return <PdfBlock key={block.id} block={block} />;
          case 'webinar': return <WebinarBlock key={block.id} block={block} />;
          default: return null;
        }
      })}
    </div>
  );
}

/* apps/app/app/globals.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300..800;1,400..700&family=JetBrains+Mono:wght@400;500&display=swap');
@import '../../../website/brand/tokens/clubup-tokens.css';

// apps/app/tailwind.config.ts
import clubup from '../../website/brand/tokens/tailwind.config.js';
 
export default {
  presets: [clubup],
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
};