# Prompt: Replikace E-shop Business Dashboard (Aurum Commerce)

> Tento prompt slouží k replikaci interaktivního e-shop dashboardu s dark theme. Zkopíruj celý prompt do AI nástroje (např. Lovable, Bolt, Cursor) a nechej si vygenerovat kompletní aplikaci.

---

## 1. Základní informace

Vytvoř webovou aplikaci **„Aurum Commerce — Business Intelligence Dashboard“** pro majitele e-shopu.

- **Framework**: React 19 + TanStack Start (full-stack React framework s file-based routing)
- **Stylování**: Tailwind CSS v4
- **UI komponenty**: shadcn/ui (Radix UI primitives)
- **Grafy**: Recharts
- **Jazyk**: Čeština (všechny labely, popisky, formáty čísel)
- **Formát čísel**: `cs-CZ` locale (mezery jako oddělovače tisíců, desetinná čárka)

---

## 2. Design systém (Dark Theme)

Použij dark theme s následující barevnou paletou v **oklch** formátu:

```css
:root {
  --background: oklch(0.16 0.02 260);
  --foreground: oklch(0.97 0.005 260);
  --card: oklch(0.21 0.025 260);
  --card-foreground: oklch(0.97 0.005 260);
  --popover: oklch(0.21 0.025 260);
  --popover-foreground: oklch(0.97 0.005 260);
  --primary: oklch(0.7 0.18 250);          /* modrá */
  --primary-foreground: oklch(0.15 0.02 260);
  --secondary: oklch(0.27 0.03 260);
  --secondary-foreground: oklch(0.97 0.005 260);
  --muted: oklch(0.25 0.025 260);
  --muted-foreground: oklch(0.68 0.02 260);
  --accent: oklch(0.72 0.18 160);           /* zelená */
  --accent-foreground: oklch(0.15 0.02 260);
  --destructive: oklch(0.65 0.24 25);     /* červená */
  --destructive-foreground: oklch(0.98 0.005 260);
  --border: oklch(0.3 0.025 260);
  --input: oklch(0.3 0.025 260);
  --ring: oklch(0.7 0.18 250);
  --success: oklch(0.72 0.18 160);
  --warning: oklch(0.78 0.16 75);
  --chart-1: oklch(0.7 0.18 250);
  --chart-2: oklch(0.72 0.18 160);
}
```

- **Font**: Systémový sans-serif (ok, můžeš použít Inter nebo DM Sans)
- **Border radius**: `0.625rem` (10px)
- **Karty**: `bg-card border-border` na všech kartách
- **Všechny texty** používají semantické tokeny (`text-foreground`, `text-muted-foreground`, `text-primary`, `text-accent`, `text-destructive`)

---

## 3. Struktura aplikace

Aplikace má **jednu hlavní stránku (`/`)** se dvěma záložkami (Tabs):

### 3.1. Hlavička

- Pevná hlavička nahoře s `border-b border-border bg-sidebar/60 backdrop-blur`
- Logo: ikona Sparkles v modrém kolečku (`bg-primary/15 text-primary`)
- Nadpis: **„Aurum Commerce"** (text-lg font-semibold)
- Podnadpis: **„Business intelligence pro e-shop"** (text-xs text-muted-foreground)
- Vpravo: zelená tečka (`bg-accent animate-pulse`) + text **„Data v reálném čase"**

### 3.2. Záložky

Dva TabsTrigger s ikonami z lucide-react:
- **Dashboard** (LineChart ikona)
- **Modelace scénářů** (BarChart3 ikona)

---

## 4. Záložka „Dashboard"

### 4.1. Hlavní revenue karta

- Label: **„Celkové tržby"** (text-xs uppercase tracking-wider text-muted-foreground)
- Hodnota: velké číslo formátované jako CZK (např. `1 245 800 Kč`)
- Pod tím badge s procentní změnou vs. minulé období:
  - Zelený badge (`bg-accent/20 text-accent`) s ArrowUpRight pro růst
  - Červený badge (`bg-destructive/20 text-destructive`) s ArrowDownRight pro pokles
  - Vedle: **„vs. minulé období (částka Kč)"**
- Přepínač období: tři tlačítka v řadě:
  - **„Tento týden"**
  - **„Tento měsíc"** (výchozí)
  - **„Tento kvartál"**

### 4.2. KPI karty (3 v řadě)

Každá karta má nahoře ikonu v šedém kolečku (`bg-secondary p-2 rounded-lg`):

1. **Konverzní poměr** — hodnota `2,30 %` — hint: „Návštěva → objednávka" — ikona Percent
2. **Průměrná hodnota objednávky** — hodnota `1 850 Kč` — hint: „AOV" — ikona ShoppingBag
3. **Noví zákazníci** — hodnota `284` — hint: „První objednávka" — ikona Users

### 4.3. Sekundární KPI karty (3 v řadě)

4. **Vracející se zákazníci** — hodnota `34,6 %` — hint: „Podíl opakovaných nákupů" — ikona Repeat
5. **Počet vratek** — hodnota `38` — hint: „Reklamace a vrácení zboží" — ikona Undo2
6. **Čistý profit** — hodnota např. `348 700 Kč` — hint: „Po odečtení nákladů a marketingu" — ikona Wallet

### 4.4. Graf vývoje tržeb (LineChart)

- Titul: **„Vývoj tržeb"**
- Gradientová čára: `oklch(0.7 0.18 250)` → `oklch(0.72 0.18 160)` (modrá → zelená)
- Šířka čáry: `2.5`
- Body: `dot={false}` (skryté), `activeDot={{ r: 5 }}` (při hoveru)
- Tooltip formátuje čísla jako CZK
- X-osa: datum ve formátu `DD.MM`
- Y-osa: hodnoty ve formátu `Xk` (tisíce)
- **CartesianGrid** jen horizontální, `strokeDasharray="3 3"`
- **Žádný cursor fill** na tooltipu (`cursor={{ fill: "transparent" }}` nebo `cursor={false}`)

### 4.5. Top 5 produktů (BarChart — horizontal)

- Titul: **„Top 5 produktů"**
- Vertikální layout (`layout="vertical"`)
- Y-osa: názvy produktů (max. 5 produktů, fontSize 11, width 170)
- Bar: `fill="oklch(0.7 0.18 250)"`, `radius={[0, 6, 6, 0]}`
- Tooltip bez cursor pozadí

Produkty (mock data):
| Produkt | Prodeje |
|---|---|
| Bezdrátová sluchátka Aurum X3 | 412 |
| Smart hodinky Nova Pro | 356 |
| Mechanická klávesnice Klax 87 | 298 |
| USB-C dokovací stanice Hub8 | 241 |
| Ergonomická myš Glide M2 | 198 |

### 4.6. Mapa zákazníků podle krajů ČR

- Titul: **„Zákazníci podle krajů ČR"**
- Použij **SVG heatmap** místo reálné mapy — 14 obdélníků (krajů) uspořádaných jako zjednodušená mapa ČR
- Každý obdélník má:
  - Kód kraje (např. „PHA", „JHM", „MSK") — fontWeight 600, fontSize 11
  - Počet zákazníků pod ním — fontSize 9
  - Barvu podle intensity: `oklch(0.7 {0.05 + intensity*0.15} 250 / {0.15 + intensity*0.75})`
  - `rx={6}` (zaoblené rohy), stroke `var(--color-border)`
- Pod mapou: gradient legend — „Méně zákazníků" → „Více zákazníků"

Kraje s počty zákazníků (mock data):
| Kód | Kraj | Zákazníci |
|---|---|---|
| PHA | Praha | 1284 |
| STC | Středočeský | 942 |
| JHM | Jihomoravský | 781 |
| MSK | Moravskoslezský | 654 |
| ULK | Ústecký | 412 |
| PLK | Plzeňský | 387 |
| OLK | Olomoucký | 341 |
| JHC | Jihočeský | 318 |
| ZLK | Zlínský | 287 |
| KHK | Královéhradecký | 264 |
| PAK | Pardubický | 231 |
| VYS | Vysočina | 198 |
| LBK | Liberecký | 184 |
| KVK | Karlovarský | 121 |

Rozvržení obdélníků v SVG (viewBox="0 0 540 280"):
```
KVK: x=0,   y=60,  w=70,  h=60
PLK: x=70,  y=90,  w=90,  h=80
ULK: x=70,  y=0,   w=110, h=60
LBK: x=180, y=0,   w=70,  h=50
STC: x=160, y=70,  w=110, h=90
PHA: x=195, y=95,  w=40,  h=35
JHC: x=100, y=170, w=130, h=90
KHK: x=250, y=30,  w=80,  h=60
PAK: x=270, y=90,  w=80,  h=60
VYS: x=230, y=150, w=100, h=70
OLK: x=350, y=60,  w=80,  h=80
JHM: x=270, y=200, w=120, h=70
ZLK: x=390, y=140, w=80,  h=70
MSK: x=430, y=30,  w=90,  h=90
```

### 4.7. Mock data pro dashboard

Použij seedovaný pseudo-náhodný generátor (LCG): `seed = (seed * 9301 + 49297) % 233280`, pak `seed / 233280`.

Pro tržební časovou řadu:
- base = 42 000 Kč/den
- trend = i * 350
- noise = (rnd() - 0.4) * 18 000
- weekend bonus = 9 000 (sobota a neděle)
- Hodnota = max(8 000, base + trend + noise + weekend)

KPI se mění podle období (násobitel: týden 0.25, měsíc 1, kvartál 3.1).

---

## 5. Záložka „Modelace scénářů"

Interaktivní scénářový modelátor, kde uživatel posouvá slidery a sleduje dopad v reálném čase.

### 5.1. Přednastavené scénáře (tlačítka)

Tři přednastavené scénáře + Reset:
- **Konzervativní**: konverze 1.8%, AOV 1 700 Kč, traffic 38 000, reklama 95 000 Kč, opakovaní 14%
- **Realistický**: konverze 2.5%, AOV 1 900 Kč, traffic 48 000, reklama 85 000 Kč, opakovaní 20%
- **Optimistický**: konverze 3.4%, AOV 2 100 Kč, traffic 60 000, reklama 75 000 Kč, opakovaní 28%
- **Reset**: vrátí na baseline

Baseline: konverze 2.3%, AOV 1 850 Kč, traffic 45 000, reklama 85 000 Kč, opakovaní 18%

### 5.2. Vstupní parametry (slidery v kartě)

Každý slider řádek má:
- Label vlevo, aktuální hodnota vpravo (monospace, semibold)
- Pod ním Radix UI Slider (shadcn)

1. **Konverzní poměr**: 0 – 10 %, krok 0.1 %
2. **Průměrná hodnota objednávky**: 300 – 6 000 Kč, krok 50 Kč
3. **Návštěvnost webu (měsíčně)**: 5 000 – 200 000, krok 1 000
4. **Náklady na reklamu (měsíčně)**: 0 – 400 000 Kč, krok 5 000 Kč
5. **Míra opakovaných nákupů**: 0 – 80 %, krok 1 %

### 5.3. Výpočetní logika

```
orders = round(traffic * conversion / 100)
repeatOrders = round(orders * repeatRate / 100)
totalOrders = orders + repeatOrders
revenue = totalOrders * AOV
grossProfit = revenue * 0.35  // 35% marže
netProfit = grossProfit - adSpend - 60 000  // fixní náklady
ROAS = revenue / adSpend (pokud > 0)
contributionPerVisitor = (conversion/100) * (1 + repeatRate/100) * AOV * 0.35
breakevenTraffic = ceil((adSpend + 60 000) / contributionPerVisitor)
```

### 5.4. Výsledkové karty

Dvě karty vedle sebe:

**Aktuální stav** (modrý border `border-primary/40`):
- Label: „Aktuální stav" (text-primary)
- Tržby, počet objednávek
- ROAS jako `X,XX×`

**Modelovaný scénář** (zelený border `border-accent/40`, při ztrátě červený `border-destructive/50`):
- Label: „Modelovaný scénář" (text-accent, při ztrátě text-destructive)
- Tržby, počet objednávek
- ROAS — pokud < 1, tak červeně

### 5.5. Warning banner

Pokud `netProfit < 0`:
- Zobrazí se banner s AlertTriangle ikonou (`text-destructive`)
- Text: **„Modelovaný scénář znamená ztrátu"**
- Podtext: částka ztráty + doporučení („Snižte náklady na reklamu, zvyšte konverzi nebo AOV.")
- Banner: `bg-destructive/10 border-destructive/50`

### 5.6. Detailní srovnání (tabulka)

Tabulka se sloupci: **Metrika | Aktuální | Scénář**

Řádky:
1. **Odhadované tržby** (CZK)
2. **Čistý zisk** (CZK) — hint: „Po odečtení reklamy a fixních nákladů"
3. **ROAS** — hint: „Návratnost reklamy"
4. **Počet objednávek**
5. **Breakeven (návštěvy)** — hint: „Min. návštěvnost pro nulový zisk"

Pro každý řádek:
- Aktuální hodnota: `text-primary`, monospace
- Scénář hodnota: `text-accent` (nebo `text-destructive` pokud < 0)
- Procentuální rozdíl: zelený/červený text, s `+` nebo `-` prefixem

### 5.7. Vizuální srovnání (BarChart)

- Titul: **„Vizuální srovnání"** s TrendingUp ikonou
- 3 skupiny sloupců: Tržby, Hrubý zisk, Čistý zisk
- Dva bary vedle sebe: „Aktuální" (modrá `oklch(0.7 0.18 250)`) a „Scénář" (zelená `oklch(0.72 0.18 160)`, při záporné hodnotě červená `oklch(0.65 0.24 25)`)
- `radius={[6, 6, 0, 0]}`
- Tooltip formátuje CZK, cursor `false` nebo `transparent`
- Legend: dva barevné čtverečky + popisky

---

## 6. Favicon

Vygeneruj kulatý favicon (PNG, 512×512):
- Gradient pozadí: modrá → zelená
- Uprostřed bílý symbol: jednoduchý sloupcový graf (3 sloupce různé výšky)

---

## 7. SEO a meta tagy

```
Title: „E-shop Dashboard — Přehled a modelace scénářů"
Description: „Interaktivní business dashboard pro majitele e-shopu: tržby, KPI, mapa zákazníků a modelace scénářů v reálném čase."
```

---

## 8. Důležité technické detaily

- **Nedávej** do komponentů hardcoded barvy (`text-white`, `bg-black`) — vždy používej semantické tokeny
- **Všechny tooltipy** v Recharts musí mít `color: "var(--color-popover-foreground)"` v `contentStyle`, `itemStyle` a `labelStyle` — jinak nejsou čitelné na dark background
- **Bar chart cursor**: `cursor={false}` nebo `cursor={{ fill: "transparent" }}` — žádné světlé pozadí za bary
- **StatRow komponenta**: čísla ve scénáři musí být červená (`text-destructive`) když je hodnota záporná NEBO rozdíl je záporný
- **Záporná čísla**: všechny záporné částky (např. čistý zisk při ztrátě) zobraz červeně
- **Formátování CZK**: `n.toLocaleString("cs-CZ", { maximumFractionDigits: 0 }) + " Kč"`
- **Procenta**: vždy s mezerou před `%` (např. `2,3 %`)

---

## 9. Souhrn layoutu

```
┌─────────────────────────────────────────────┐
│  [Sparkles] Aurum Commerce    [●] Data v reálném čase │
├─────────────────────────────────────────────┤
│  [Dashboard] [Modelace scénářů]             │
├─────────────────────────────────────────────┤
│  Celkové tržby: 1 245 800 Kč  [+13,6 %]     │
│  [Týden] [Měsíc] [Kvartál]                  │
├─────────┬─────────┬─────────┬─────────────┤
│ Konverze│ AOV     │ Noví    │             │
│ 2,30 %  │ 1 850 Kč│ 284     │             │
├─────────┼─────────┼─────────┼─────────────┤
│ Vracející│ Vratky │ Profit  │             │
│ 34,6 %  │ 38      │ 348K Kč│             │
├─────────┴─────────┴─────────┴─────────────┤
│  Vývoj tržeb (LineChart)                    │
├──────────────────┬──────────────────────────┤
│  Top 5 produktů  │  Mapa ČR (SVG heatmap)   │
│  (BarChart)      │                          │
└──────────────────┴──────────────────────────┘
```

---

> **Tip pro studenty**: Tento prompt je navržen tak, aby fungoval v nástrojích jako Lovable, Bolt, V0 nebo Cursor. Pokud AI generuje chyby v čitelnosti tooltipů nebo bar colors, připomeň jim sekci „Důležité technické detaily".