fix: odstranění matoucích chybových hlášek z dialogu Správa obchodů

Wolt hlásí stav podniku, ne rozvozu — status zůstane na "ready" i celou dobu,
co kurýr objednávku veze. Vyzvednutí proto poznáme podle pickup_eta: dokud je
v budoucnosti, jídlo ještě čeká v podniku, po vyzvednutí se ustálí na skutečném
čase. Dřív se stav odvozoval jen z příznaků kurýra, takže objednávka zůstala
viset na kroku "Vyzvedávání", i když už byla na cestě.

Kurýr má nově tři odvozené stavy: assigned (ještě nevyzvedl), delivering (veze
ji k nám) a delivering_other (veze ji, ale nejdřív doručuje cizí objednávku —
Wolt objednávky spojuje a kurýr se pak na mapě vzdaluje). Oba stavy delivering*
znamenají krok "Na cestě", tooltip u nich vysvětlí objížďku.

.gitea/workflows/ci.yaml

@@ -0,0 +1,261 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - "**"
+  pull_request:
+
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+
+  # ─── 1. Generate OpenAPI types ────────────────────────────────────────────
+
+  generate-types:
+    name: Generate TypeScript types
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - run: corepack enable
+
+      - run: cd types && yarn install --frozen-lockfile && yarn openapi-ts
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: types-gen
+          path: types/gen
+
+  # ─── 2a. Server unit tests ────────────────────────────────────────────────
+
+  server-test:
+    name: Server unit tests
+    runs-on: ubuntu-latest
+    needs: generate-types
+    env:
+      NODE_ENV: test
+      JWT_SECRET: test-secret-min-32-chars-aaaaaaa!
+      MOCK_DATA: "true"
+      STORAGE: json
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - run: corepack enable
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: types-gen
+          path: types/gen
+
+      - run: cd server && yarn install --frozen-lockfile && yarn test
+
+  # ─── 2b. Build server ─────────────────────────────────────────────────────
+
+  server-build:
+    name: Build server
+    runs-on: ubuntu-latest
+    needs: generate-types
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - run: corepack enable
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: types-gen
+          path: types/gen
+
+      - run: cd types && yarn install --frozen-lockfile
+
+      - run: cd server && yarn install --frozen-lockfile && yarn build
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: server-dist
+          path: server/dist
+
+  # ─── 2c. Build client ─────────────────────────────────────────────────────
+
+  client-build:
+    name: Build client
+    runs-on: ubuntu-latest
+    needs: generate-types
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - run: corepack enable
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: types-gen
+          path: types/gen
+
+      - run: cd types && yarn install --frozen-lockfile
+
+      - run: cd client && yarn install --frozen-lockfile && yarn build
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: client-dist
+          path: client/dist
+
+  # ─── 3. Playwright E2E tests ──────────────────────────────────────────────
+
+  e2e:
+    name: Playwright E2E tests
+    runs-on: ubuntu-latest
+    needs: [ server-build, client-build ]
+    container: mcr.microsoft.com/playwright:v1.59.1-jammy
+    services:
+      redis:
+        image: redis/redis-stack-server:7.4.0-v1
+        env:
+          REDIS_ARGS: "--save '' --loglevel warning"
+    env:
+      CI: "true"
+      NODE_ENV: test
+      JWT_SECRET: test-secret-min-32-chars-aaaaaaa!
+      MOCK_DATA: "true"
+      STORAGE: redis
+      REDIS_HOST: redis
+      REDIS_PORT: "6379"
+      HTTP_REMOTE_USER_ENABLED: "true"
+      HTTP_REMOTE_USER_HEADER_NAME: remote-user
+      HTTP_REMOTE_TRUSTED_IPS: "127.0.0.1,::1,::ffff:127.0.0.1"
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: server-dist
+          path: server/dist
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: client-dist
+          path: client/dist
+
+      - name: Install server dependencies
+        run: cd server && yarn install --frozen-lockfile
+
+      - name: Copy client build into server/public
+        run: cp -r client/dist server/public
+
+      - name: Install e2e dependencies and browsers
+        run: cd e2e && yarn install --frozen-lockfile && yarn playwright install firefox
+          --with-deps
+
+      - name: Run Playwright tests
+        run: cd e2e && yarn test
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: playwright-report
+          path: |
+            e2e/playwright-report
+            e2e/test-results
+
+  # ─── 4. Build and push Docker image (master only) ─────────────────────────
+
+  docker-build:
+    name: Build and push Docker image
+    runs-on: ubuntu-latest
+    needs: [ server-build, client-build, server-test, e2e ]
+    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - run: corepack enable
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: server-dist
+          path: server/dist
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: client-dist
+          path: client/dist
+
+      - name: Install server production dependencies
+        run: cd server && yarn install --frozen-lockfile --production
+
+      - uses: docker/setup-buildx-action@v3
+
+      - uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.REPO_URL }}
+          username: ${{ secrets.REPO_USERNAME }}
+          password: ${{ secrets.REPO_PASSWORD }}
+
+      - uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: Dockerfile
+          target: runner-prebuilt
+          platforms: linux/amd64
+          push: true
+          tags: ${{ secrets.REPO_URL }}/${{ secrets.REPO_NAME }}:latest
+
+  # ─── 5. Notifications ────────────────────────
+
+  notify:
+    name: Notify
+    runs-on: ubuntu-latest
+    needs: [ server-build, client-build, server-test, e2e, docker-build ]
+    if: always() && github.event_name == 'push'
+    steps:
+      - name: Send webhook
+        env:
+          DISCORD_WEBHOOK_ID: ${{ secrets.DISCORD_WEBHOOK_ID }}
+          DISCORD_WEBHOOK_TOKEN: ${{ secrets.DISCORD_WEBHOOK_TOKEN }}
+          NTFY_URL: ${{ secrets.NTFY_URL }}
+          BUILD_RESULT: ${{ needs.docker-build.result }}
+          RUN_NUMBER: ${{ github.run_number }}
+          RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{
+            github.run_id }}
+          COMMIT_MESSAGE: ${{ github.event.head_commit.message }}
+          COMMIT_AUTHOR: ${{ github.event.head_commit.author.name }}
+        run: |
+          if [ "$BUILD_RESULT" = "success" ]; then
+            MSG="✅ Sestavení #${RUN_NUMBER} proběhlo úspěšně."
+            NTFY_TAGS="white_check_mark"
+          else
+            MSG="❌ Sestavení #${RUN_NUMBER} selhalo."
+            NTFY_TAGS="x"
+          fi
+          FULL_MSG="$(printf '%s\n\nPipeline: %s\nPoslední commit: %sAutor: %s' \
+            "$MSG" "$RUN_URL" "$COMMIT_MESSAGE" "$COMMIT_AUTHOR")"
+          curl -s -X POST \
+            "https://discord.com/api/webhooks/${DISCORD_WEBHOOK_ID}/${DISCORD_WEBHOOK_TOKEN}" \
+            -H "Content-Type: application/json" \
+            --data "$(jq -n --arg content "$FULL_MSG" '{content: $content}')"
+          curl -s -X POST "${NTFY_URL}" \
+            -H "Title: Luncher CI #${RUN_NUMBER}" \
+            -H "Tags: ${NTFY_TAGS}" \
+            -H "Click: ${RUN_URL}" \
+            -d "${FULL_MSG}"

.gitignore

@@ -1,2 +1,10 @@
 node_modules
 types/gen
+**.DS_Store
+.mcp.json
+.claude/settings.local.json
+server/public/
+.claude/*.lock
+.claude/worktrees
+.playwright-mcp
+.idea/

.vscode/launch.json

@@ -0,0 +1,32 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Server (ts-node, debug)",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}/server",
+      "runtimeArgs": ["-r", "ts-node/register"],
+      "program": "${workspaceFolder}/server/src/index.ts",
+      "env": { "NODE_ENV": "development" },
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**"],
+      "preLaunchTask": "types: openapi-ts"
+    },
+    {
+      "name": "Client (vite + Edge)",
+      "type": "msedge",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/client",
+      "preLaunchTask": "client: vite"
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Dev: server + client",
+      "configurations": ["Server (ts-node, debug)", "Client (vite + Edge)"],
+      "stopAll": true
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,67 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "types: openapi-ts",
+      "type": "shell",
+      "command": "yarn openapi-ts",
+      "options": {
+        "cwd": "${workspaceFolder}/types"
+      },
+      "presentation": {
+        "reveal": "silent",
+        "panel": "dedicated"
+      },
+      "problemMatcher": []
+    },
+    {
+      "label": "server: startReload",
+      "type": "shell",
+      "command": "yarn startReload",
+      "options": {
+        "cwd": "${workspaceFolder}/server",
+        "env": {
+          "NODE_ENV": "development"
+        }
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "always",
+        "panel": "dedicated",
+        "group": "dev"
+      },
+      "problemMatcher": []
+    },
+    {
+      "label": "client: vite",
+      "type": "shell",
+      "command": "yarn start",
+      "options": {
+        "cwd": "${workspaceFolder}/client"
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "always",
+        "panel": "dedicated",
+        "group": "dev"
+      },
+      "problemMatcher": []
+    },
+    {
+      "label": "dev: server+client",
+      "dependsOn": [
+        "server: startReload",
+        "client: vite"
+      ]
+    },
+    {
+      "label": "dev: all",
+      "dependsOrder": "sequence",
+      "dependsOn": [
+        "types: openapi-ts",
+        "dev: server+client"
+      ],
+      "problemMatcher": []
+    }
+  ]
+}

.woodpecker/workflow.yaml

@@ -1,64 +0,0 @@
-variables:
-  - &node_image "node:22-alpine"
-  - &branch "master"
-
-when:
-  - event: push
-    branch: *branch
-
-steps:
-  - name: Generate TypeScript types
-    image: *node_image
-    commands:
-      - cd types
-      - yarn install --frozen-lockfile
-      - yarn openapi-ts
-  - name: Install server dependencies
-    image: *node_image
-    commands:
-      - cd server
-      - yarn install --frozen-lockfile
-    depends_on: [Generate TypeScript types]
-  - name: Install client dependencies
-    image: *node_image
-    commands:
-      - cd client
-      - yarn install --frozen-lockfile
-    depends_on: [Generate TypeScript types]
-  - name: Build server
-    depends_on: [Install server dependencies]
-    image: *node_image
-    commands:
-      - cd server
-      - yarn build
-  - name: Build client
-    depends_on: [Install client dependencies]
-    image: *node_image
-    commands:
-      - cd client
-      - yarn build
-  - name: Build Docker image
-    depends_on: [Build server, Build client]
-    image: woodpeckerci/plugin-docker-buildx
-    settings:
-      dockerfile: Dockerfile-Woodpecker
-      platforms: linux/amd64
-      registry:
-        from_secret: REPO_URL
-      username:
-        from_secret: REPO_USERNAME
-      password:
-        from_secret: REPO_PASSWORD
-      repo:
-        from_secret: REPO_NAME
-  - name: Discord notification - build
-    image: appleboy/drone-discord
-    depends_on: [Build Docker image]
-    when:
-      - status: [success, failure]
-    settings:
-      webhook_id:
-        from_secret: DISCORD_WEBHOOK_ID
-      webhook_token:
-        from_secret: DISCORD_WEBHOOK_TOKEN
-      message: "{{#success build.status}}✅ Sestavení {{build.number}} proběhlo úspěšně.{{else}}❌ Sestavení {{build.number}} selhalo.{{/success}}\n\nPipeline: {{build.link}}\nPoslední commit: {{commit.message}}Autor: {{commit.author}}"

CLAUDE.md

@@ -0,0 +1,146 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Luncher is a lunch management app for teams — daily restaurant menus, food ordering, pizza day events, and payment QR codes. Czech-language UI. Full-stack TypeScript monorepo.
+
+## Monorepo Structure
+
+```
+types/    → Shared OpenAPI-generated TypeScript types (source of truth: types/api.yml)
+server/   → Express 5 backend (Node.js 22, ts-node)
+client/   → React 19 frontend (Vite 7, React Bootstrap)
+e2e/      → Playwright E2E tests (separate package)
+```
+
+Each of the four directories has its own `package.json`. Package manager: **Yarn Classic**.
+
+Deployment files at repo root: `Dockerfile` (multi-stage, dva runner targety: výchozí `runner` pro lokální build, `runner-prebuilt` pro CI s předem sestavenými artefakty), `compose.yml`, `compose-traefik.yml`.
+
+## Development Commands
+
+### Initial setup
+```bash
+cd types && yarn install && yarn openapi-ts   # Generate API types first
+cd ../server && yarn install
+cd ../client && yarn install
+cd ../e2e && yarn install
+```
+
+### Running dev environment
+```bash
+# All-in-one (tmux):
+./run_dev.sh
+
+# Or manually in separate terminals:
+cd server && NODE_ENV=development yarn startReload   # Port 3001, nodemon watch
+cd client && yarn start                               # Port 3000, proxies /api → 3001
+```
+
+### Building
+```bash
+cd types && yarn openapi-ts      # Regenerate types from api.yml
+cd server && yarn build          # tsc → server/dist
+cd client && yarn build          # tsc --noEmit + vite build → client/dist
+```
+
+### Tests
+```bash
+# Server unit tests (Jest)
+cd server && yarn test                  # All tests in server/src/tests/
+cd server && yarn test dates            # Run one file by name
+cd server && yarn test -t "name"        # Run by test name pattern
+
+# E2E (Playwright) — requires prebuilt server
+cd server && yarn build
+cd e2e && yarn test                     # chromium + firefox, baseURL 127.0.0.1:3001
+cd e2e && yarn test:ui                  # interactive UI mode
+cd e2e && yarn report                   # open last HTML report
+```
+
+Jest setup (`server/src/tests/setupEnv.ts`) forces `STORAGE=memory`, deletes `MOCK_DATA`, and sets a fixed `JWT_SECRET`. Playwright auto-starts the prebuilt server and authenticates via the `remote-user: e2e-user` trusted-header path; locally uses `STORAGE=json` + `MOCK_DATA=true`, CI uses `STORAGE=redis`.
+
+### CI pipeline
+Gitea Actions — `.gitea/workflows/ci.yaml` (no `.github/` equivalent):
+
+1. `generate-types` — runs `yarn openapi-ts`, uploads artifact
+2. `server-test` — Jest
+3. `server-build` + `client-build` — parallel tsc/vite builds
+4. `e2e` — Playwright in `mcr.microsoft.com/playwright:v1.59.1-jammy` with a Redis service container; only Firefox installed in CI
+5. `docker-build` — master branch only, uses `Dockerfile` with `--target runner-prebuilt` (skládá image z artefaktů `server-build` + `client-build`)
+6. `notify` — Discord + ntfy webhooks
+
+### Formatting
+Prettier is installed in `client/` (devDependency only, no script or config) — invoke via `yarn prettier <path>` with defaults.
+
+## Architecture
+
+### API Types (types/)
+- OpenAPI 3.0 spec in `types/api.yml` — all API endpoints and DTOs defined here
+- `api.yml` is a thin aggregator — actual endpoint specs live in `types/paths/<domain>/*.yml`, shared schemas in `types/schemas/_index.yml`
+- `yarn openapi-ts` generates `types/gen/` (client.gen.ts, sdk.gen.ts, types.gen.ts)
+- Both server and client import from these generated types
+- **When changing API contracts: update api.yml first, then regenerate**
+
+### Server (server/src/)
+- **Entry:** `index.ts` — Express app + Socket.io setup
+- **Routes:** `routes/` — 9 modular Express route handlers (food, pizzaDay, voting, notifications, qr, stats, easterEgg, dev, changelog)
+- **Services:** domain logic files at root level (`service.ts`, `pizza.ts`, `restaurants.ts`, `chefie.ts`, `voting.ts`, `stats.ts`, `qr.ts`, `notifikace.ts`)
+- **Helpers:** `mock.ts` (fake menu data for `MOCK_DATA=true`), `pushReminder.ts` (push notification reminders), `utils.ts` (shared utilities)
+- **Auth:** `auth.ts` — JWT + optional trusted-header authentication
+- **Storage:** `storage/index.ts` factory selects implementation; backends: `json.ts` (file-based, dev), `redis.ts` (production), `memory.ts` (tests). Data keyed by date (YYYY-MM-DD).
+- **Restaurant scrapers:** Cheerio-based HTML parsing for daily menus from multiple restaurants
+- **Pizza Chefie integration:** `chefie.ts` scrapes pizzachefie.cz for Pizza day menus and salads (only active when a Pizza day is open)
+- **WebSocket:** `websocket.ts` — Socket.io for real-time client updates
+- **Mock mode:** `MOCK_DATA=true` env var returns fake menus (useful for weekend/holiday dev)
+- **Config:** `.env.development` / `.env.production` (see `.env.template` for all options)
+
+### Client (client/src/)
+- **Entry:** `index.tsx` → `App.tsx` → `AppRoutes.tsx`; `Login.tsx` is the auth screen; `FallingLeaves.tsx` is a seasonal visual effect
+- **Pages:** `pages/` (StatsPage)
+- **Components:** `components/` (Header, Footer, Loader, PizzaOrderList, PizzaOrderRow, and modals in `components/modals/`)
+- **Context providers:** `context/` — `auth.tsx`, `settings.tsx`, `socket.js`, `eggs.tsx` (note: `socket.js` is the only non-TSX context file)
+- **Hooks:** `hooks/` (`usePushReminder.ts`)
+- **Utils:** `utils/` (`parsePrice.ts`)
+- **Styling:** Bootstrap 5 + React Bootstrap + custom SCSS files (co-located with components)
+- **API calls:** use OpenAPI-generated SDK from `types/gen/`
+- **Routing:** React Router DOM v7
+
+### Data Flow
+1. Client calls API via generated SDK → Express routes
+2. Server scrapes restaurant websites or returns cached data
+3. Storage: Redis (production) or JSON file (development)
+4. Socket.io broadcasts changes to all connected clients
+
+## Environment
+
+- **Server env files:** `server/.env.development`, `server/.env.production` (see `server/.env.template`)
+- Key vars: `JWT_SECRET`, `STORAGE` (json/redis/memory), `MOCK_DATA`, `REDIS_HOST`, `REDIS_PORT`
+- **Docker:** multi-stage Dockerfile, `compose.yml` for app + Redis. Timezone: Europe/Prague.
+
+## Conventions
+
+- Czech naming for domain variables and UI strings; English for infrastructure code
+- TypeScript strict mode in both client and server
+- Server module resolution: Node16; Client: ESNext/bundler
+- `TODO.md` tracks open bugs and roadmap items — worth scanning before starting non-trivial work
+
+## Changelog (user-facing "What's new")
+
+When you add or change a user-visible feature, you MUST also record it in `server/changelogs/` so users see it via the in-app changelog (served by `server/src/routes/changelogRoutes.ts`, sorted newest-first with a `?since=` filter).
+
+Steps:
+
+1. Create or open the file for today's date: `server/changelogs/YYYY-MM-DD.json` (use today's date; one file per day).
+2. The file content is a **JSON array of Czech strings**, one short user-facing sentence per change. Example:
+   ```json
+   [
+     "Proklik na nabídku podniku ze stránky objednávek",
+     "Možnost přidat URL pro sledování stavu doručení pro Bolt Food"
+   ]
+   ```
+3. If a file for today already exists, append your entry to its array instead of creating a new file.
+4. Write entries in Czech, phrased for end users (describe the benefit, not the implementation). Skip purely internal/refactor changes that users won't notice.
+5. The route caches files in memory at read time, so a server restart is needed to pick up new/changed changelogs in a running dev instance.

Dockerfile

@@ -1,6 +1,6 @@
 ARG NODE_VERSION="node:22-alpine"
 
-# Builder
+# ─── Builder ──────────────────────────────────────────────────────────────────
 FROM ${NODE_VERSION} AS builder
 
 WORKDIR /build
@@ -62,8 +62,9 @@ RUN yarn build
 WORKDIR /build/client
 RUN yarn build
 
-# Runner
-FROM ${NODE_VERSION}
+# ─── Runner base ──────────────────────────────────────────────────────────────
+# Společný základ pro oba runner targety – nastaví prostředí a metadata běhu.
+FROM ${NODE_VERSION} AS runner-base
 
 RUN apk add --no-cache tzdata
 ENV TZ=Europe/Prague \
@@ -72,6 +73,17 @@ ENV TZ=Europe/Prague \
 
 WORKDIR /app
 
+# Export /data/db.json do složky /data
+VOLUME ["/data"]
+
+EXPOSE 3001
+
+CMD [ "node", "./server/src/index.js" ]
+
+# ─── Runner (default) ─────────────────────────────────────────────────────────
+# Použití: docker build .  (lokální sestavení – vše se buildí uvnitř image)
+FROM runner-base AS runner
+
 # Vykopírování sestaveného serveru
 COPY --from=builder /build/server/node_modules ./server/node_modules
 COPY --from=builder /build/server/dist ./
@@ -82,12 +94,28 @@ COPY --from=builder /build/client/dist ./public
 # Zkopírování produkčních .env serveru
 COPY /server/.env.production ./server
 
+# Zkopírování changelogů (seznamu novinek)
+COPY /server/changelogs ./server/changelogs
+
 # Zkopírování konfigurace easter eggů
-RUN if [ -f /server/.easter-eggs.json ]; then cp /server/.easter-eggs.json ./server/; fi
+RUN if [ -f ./server/.easter-eggs.json ]; then cp ./server/.easter-eggs.json ./server/; fi
 
-# Export /data/db.json do složky /data
-VOLUME ["/data"]
+# ─── Runner (prebuilt) ────────────────────────────────────────────────────────
+# Použití: docker build --target runner-prebuilt .
+# Očekává předem sestavené artefakty v build kontextu (server/dist,
+# client/dist, server/node_modules) – využívá Gitea Actions, kde se
+# server i klient buildí v separátních jobech a sem se jen kopírují.
+FROM runner-base AS runner-prebuilt
 
-EXPOSE 3000
+# Vykopírování sestaveného serveru
+COPY ./server/node_modules ./server/node_modules
+COPY ./server/dist ./
 
-CMD [ "node", "./server/src/index.js" ]
+# Vykopírování sestaveného klienta
+COPY ./client/dist ./public
+
+# Zkopírování changelogů (seznamu novinek)
+COPY ./server/changelogs ./server/changelogs
+
+# Zkopírování konfigurace easter eggů
+RUN if [ -f ./server/.easter-eggs.json ]; then cp ./server/.easter-eggs.json ./server/; fi

Dockerfile-Woodpecker

@@ -1,26 +0,0 @@
-ARG NODE_VERSION="node:22-alpine"
-
-FROM ${NODE_VERSION}
-
-RUN apk add --no-cache tzdata
-ENV TZ=Europe/Prague \
-    LC_ALL=cs_CZ.UTF-8 \
-    NODE_ENV=production
-
-WORKDIR /app
-
-# Vykopírování sestaveného serveru
-COPY ./server/node_modules ./server/node_modules
-COPY ./server/dist ./
-# TODO tohle není dobře, má to být součástí serveru
-# COPY ./server/resources ./resources
-
-# Vykopírování sestaveného klienta
-COPY ./client/dist ./public
-
-# Zkopírování konfigurace easter eggů
-RUN if [ -f ./server/.easter-eggs.json ]; then cp ./server/.easter-eggs.json ./server/; fi
-
-EXPOSE 3000
-
-CMD [ "node", "./server/src/index.js" ]

TODO.md

@@ -1,4 +1,9 @@
 # TODO
+
+## HA / multi-replica follow-ups
+- [ ] `foodRoutes.ts` per-pod rate limiter (`rateLimits` map) — s více replikami může uživatel překročit limit ~N× rychleji; přesunout do Redis (např. `INCR` + `EXPIRE`)
+- [ ] `easterEggRoutes.ts` — náhodně generované URL easter eggů jsou per-pod; URL funguje pouze na podu, který ji vygeneroval; zvážit deterministické seedy nebo sdílení přes Redis
+- [ ] `service.ts` — komplexní víceúrovňové funkce (`addChoice`, `removeChoiceIfPresent`) provádějí více po sobě jdoucích zápisů do stejného Redis klíče; pro plnou atomicitu je potřeba per-klíčový distribuovaný zámek (Redlock nebo `SET NX EX`) nebo sloučení logiky do jednoho `updateData` volání
 - [ ] HTTP_REMOTE_TRUSTED_IPS se nikde nevalidují, hlavičky jsou přijímány odkudkoli
 - [ ] V případě zapnutí přihlašování přes trusted headers nefunguje standardní přihlášení (nevrátí žádnou odpověď)
   - [ ] Nemělo by se jít dostat na přihlašovací formulář (měla by tam být nanejvýš hláška nebo přesměrování) 

client/index.html

@@ -10,6 +10,26 @@
   <link rel="apple-touch-icon" href="/logo192.png" />
   <link rel="manifest" href="/manifest.json" />
   <title>Luncher</title>
+  <script>
+    (function() {
+      try {
+        var saved = localStorage.getItem('theme_preference');
+        var theme;
+        if (saved === 'dark') {
+          theme = 'dark';
+        } else if (saved === 'light') {
+          theme = 'light';
+        } else {
+          // 'system' nebo neuloženo - použij systémové nastavení
+          theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        document.documentElement.setAttribute('data-bs-theme', theme);
+      } catch (e) {
+        // Fallback pokud localStorage není dostupný
+        document.documentElement.setAttribute('data-bs-theme', 'light');
+      }
+    })();
+  </script>
 </head>
 
 <body>

client/package.json

@@ -10,6 +10,7 @@
     "@fortawesome/free-regular-svg-icons": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.0",
+    "@sentry/react": "^10.65.0",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
@@ -18,12 +19,14 @@
     "bootstrap": "^5.3.8",
     "react": "^19.2.0",
     "react-bootstrap": "^2.10.10",
+    "react-datepicker": "^9.1.0",
     "react-dom": "^19.2.0",
     "react-jwt": "^1.3.0",
     "react-modal": "^3.16.3",
     "react-router": "^7.9.5",
     "react-router-dom": "^7.9.5",
     "react-select-search": "^4.1.6",
+    "react-snow-overlay": "^1.0.14",
     "react-snowfall": "^2.3.0",
     "react-toastify": "^11.0.5",
     "recharts": "^3.4.1",

client/public/bat.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <!-- Netopýr (čelem doprava; JS natáčí dle směru letu) -->
+  <g fill="#2B2733" stroke="#15121A" stroke-width="1.5" stroke-linejoin="round">
+    <!-- křídla -->
+    <path d="M50,52 C34,30 18,30 6,40 C16,42 18,52 14,62 C24,54 34,52 44,58 Z"/>
+    <path d="M50,52 C66,30 82,30 94,40 C84,42 82,52 86,62 C76,54 66,52 56,58 Z"/>
+    <!-- tělo -->
+    <ellipse cx="50" cy="56" rx="9" ry="13"/>
+    <!-- uši -->
+    <path d="M44,44 L40,32 L48,42 Z"/>
+    <path d="M56,44 L60,32 L52,42 Z"/>
+  </g>
+  <!-- oči -->
+  <g fill="#F5C518">
+    <circle cx="46" cy="50" r="1.8"/>
+    <circle cx="54" cy="50" r="1.8"/>
+  </g>
+</svg>

client/public/bee.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <!-- Vosa letící doprava (JS překlápí podle směru) -->
+  <!-- křídla -->
+  <g fill="#DDEEFF" stroke="#9BB6CC" stroke-width="1" opacity="0.85">
+    <ellipse cx="46" cy="30" rx="14" ry="8" transform="rotate(-18 46 30)"/>
+    <ellipse cx="58" cy="32" rx="11" ry="6" transform="rotate(-8 58 32)"/>
+  </g>
+  <!-- žihadlo -->
+  <path fill="#3A2E00" d="M18,50 L6,50 L18,46 Z"/>
+  <!-- tělo -->
+  <g stroke="#3A2E00" stroke-width="1.4" stroke-linejoin="round">
+    <ellipse cx="46" cy="50" rx="30" ry="16" fill="#F5C518"/>
+    <!-- pruhy -->
+    <path fill="#2B2200" stroke="none" d="M34,36 q6,14 0,28 q-8,-2 -10,-14 q2,-12 10,-14 z"/>
+    <path fill="#2B2200" stroke="none" d="M50,35 q6,15 0,30 q-8,-3 -8,-15 q0,-12 8,-15 z"/>
+    <!-- hlava -->
+    <circle cx="72" cy="50" r="10" fill="#2B2200"/>
+  </g>
+  <!-- oko a tykadla -->
+  <circle fill="#FFFFFF" cx="75" cy="47" r="2.4"/>
+  <circle fill="#20313F" cx="75.6" cy="47" r="1.2"/>
+  <g stroke="#2B2200" stroke-width="1.2" fill="none" stroke-linecap="round">
+    <path d="M78,42 C84,36 88,36 90,38"/>
+    <path d="M80,44 C86,40 90,41 92,43"/>
+  </g>
+</svg>

client/public/bird.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <!-- Pták letící doprava (JS překlápí podle směru) -->
+  <g stroke="#3A4A5A" stroke-width="1.5" stroke-linejoin="round">
+    <!-- ocas -->
+    <path fill="#5C6B7A" d="M18,52 L4,44 L6,56 L2,64 L18,60 Z"/>
+    <!-- tělo -->
+    <path fill="#6E7F90" d="M16,58 C24,44 44,40 64,46 C74,49 82,54 84,56 C78,62 66,66 52,66 C36,66 22,64 16,58 Z"/>
+    <!-- křídlo (nahoru) -->
+    <path fill="#55636F" d="M40,52 C46,30 60,24 70,26 C64,38 58,48 54,56 C50,58 44,57 40,52 Z"/>
+    <!-- hlava -->
+    <circle fill="#6E7F90" cx="78" cy="50" r="12"/>
+  </g>
+  <!-- zobák -->
+  <path fill="#F6A21E" stroke="#B9740A" stroke-width="1" stroke-linejoin="round" d="M88,48 L98,50 L88,54 Z"/>
+  <!-- oko -->
+  <circle fill="#20313F" cx="82" cy="47" r="2.2"/>
+  <circle fill="#FFFFFF" cx="82.8" cy="46.3" r="0.7"/>
+</svg>

client/public/butterfly-blue.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <g stroke="#1B3F73" stroke-width="1.5" stroke-linejoin="round">
+    <path fill="#4A8FE7" d="M48,32 C30,10 8,14 8,34 C8,50 30,52 48,50 Z"/>
+    <path fill="#4A8FE7" d="M52,32 C70,10 92,14 92,34 C92,50 70,52 52,50 Z"/>
+    <path fill="#4A8FE7" d="M47,50 C34,54 16,58 18,74 C20,86 40,84 47,66 Z"/>
+    <path fill="#4A8FE7" d="M53,50 C66,54 84,58 82,74 C80,86 60,84 53,66 Z"/>
+  </g>
+  <g fill="#BBD7FF" stroke="none">
+    <circle cx="20" cy="30" r="4"/>
+    <circle cx="80" cy="30" r="4"/>
+    <circle cx="30" cy="70" r="3"/>
+    <circle cx="70" cy="70" r="3"/>
+  </g>
+  <g stroke="#17233B" stroke-width="1.6" fill="none" stroke-linecap="round">
+    <path d="M49,28 C44,18 40,14 36,11"/>
+    <path d="M51,28 C56,18 60,14 64,11"/>
+  </g>
+  <g fill="#17233B" stroke="none">
+    <circle cx="36" cy="11" r="1.8"/>
+    <circle cx="64" cy="11" r="1.8"/>
+    <rect x="47.5" y="24" width="5" height="52" rx="2.5"/>
+    <circle cx="50" cy="24" r="4.5"/>
+  </g>
+</svg>

client/public/butterfly-golden.svg

@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <radialGradient id="goldGlow" cx="0.5" cy="0.5" r="0.55">
+      <stop offset="0%" stop-color="#FFF6C8" stop-opacity="0.9"/>
+      <stop offset="55%" stop-color="#FFD24A" stop-opacity="0.35"/>
+      <stop offset="100%" stop-color="#FFD24A" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="goldWing" x1="0" y1="0" x2="0.7" y2="1">
+      <stop offset="0%" stop-color="#FFFBE6"/>
+      <stop offset="35%" stop-color="#FFDE6A"/>
+      <stop offset="70%" stop-color="#F5B617"/>
+      <stop offset="100%" stop-color="#C97B00"/>
+    </linearGradient>
+    <linearGradient id="goldSheen" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Zářivá aura -->
+  <circle cx="50" cy="48" r="48" fill="url(#goldGlow)"/>
+
+  <!-- Křídla -->
+  <g stroke="#8A5A00" stroke-width="1.6" stroke-linejoin="round">
+    <path fill="url(#goldWing)" d="M48,32 C30,8 6,12 6,34 C6,52 30,54 48,50 Z"/>
+    <path fill="url(#goldWing)" d="M52,32 C70,8 94,12 94,34 C94,52 70,54 52,50 Z"/>
+    <path fill="url(#goldWing)" d="M47,50 C33,54 14,58 16,76 C18,89 41,86 47,66 Z"/>
+    <path fill="url(#goldWing)" d="M53,50 C67,54 86,58 84,76 C82,89 59,86 53,66 Z"/>
+  </g>
+
+  <!-- Drahokamové body na křídlech -->
+  <g fill="#FFF8D8" stroke="#E8B23A" stroke-width="0.6">
+    <circle cx="20" cy="30" r="4.5"/>
+    <circle cx="80" cy="30" r="4.5"/>
+    <circle cx="29" cy="72" r="3.5"/>
+    <circle cx="71" cy="72" r="3.5"/>
+  </g>
+  <g fill="#B8860B">
+    <circle cx="20" cy="30" r="1.6"/>
+    <circle cx="80" cy="30" r="1.6"/>
+  </g>
+
+  <!-- Lesklý přeliv přes horní křídla -->
+  <path fill="url(#goldSheen)" opacity="0.55" d="M48,33 C34,15 16,17 12,31 C24,26 40,27 48,40 Z"/>
+
+  <!-- Tykadla -->
+  <g stroke="#6A4A00" stroke-width="1.6" fill="none" stroke-linecap="round">
+    <path d="M49,28 C44,17 40,13 36,10"/>
+    <path d="M51,28 C56,17 60,13 64,10"/>
+  </g>
+
+  <!-- Tělo -->
+  <g fill="#5A3E00" stroke="none">
+    <circle cx="36" cy="10" r="2"/>
+    <circle cx="64" cy="10" r="2"/>
+    <rect x="47" y="24" width="6" height="52" rx="3"/>
+    <circle cx="50" cy="24" r="5"/>
+  </g>
+
+  <!-- Jiskry -->
+  <g fill="#FFFFFF">
+    <path d="M50 2 l1.4 3.4 l3.4 1.4 l-3.4 1.4 l-1.4 3.4 l-1.4 -3.4 l-3.4 -1.4 l3.4 -1.4 z"/>
+    <path d="M90 20 l1 2.6 l2.6 1 l-2.6 1 l-1 2.6 l-1 -2.6 l-2.6 -1 l2.6 -1 z" opacity="0.85"/>
+    <path d="M12 66 l0.9 2.3 l2.3 0.9 l-2.3 0.9 l-0.9 2.3 l-0.9 -2.3 l-2.3 -0.9 l2.3 -0.9 z" opacity="0.8"/>
+  </g>
+</svg>

client/public/butterfly-moth.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="mothWing" x1="0" y1="0" x2="0.6" y2="1">
+      <stop offset="0%" stop-color="#5A5560"/>
+      <stop offset="60%" stop-color="#3A3540"/>
+      <stop offset="100%" stop-color="#211E26"/>
+    </linearGradient>
+  </defs>
+  <g stroke="#15121A" stroke-width="1.5" stroke-linejoin="round">
+    <path fill="url(#mothWing)" d="M48,34 C32,16 10,20 10,36 C10,50 30,50 48,48 Z"/>
+    <path fill="url(#mothWing)" d="M52,34 C68,16 90,20 90,36 C90,50 70,50 52,48 Z"/>
+    <path fill="url(#mothWing)" d="M47,49 C35,52 20,56 22,70 C24,80 42,78 47,62 Z"/>
+    <path fill="url(#mothWing)" d="M53,49 C65,52 80,56 78,70 C76,80 58,78 53,62 Z"/>
+  </g>
+  <!-- zlověstné oční skvrny -->
+  <g fill="#C9302C" stroke="#3a0d0b" stroke-width="1">
+    <circle cx="24" cy="34" r="4"/>
+    <circle cx="76" cy="34" r="4"/>
+  </g>
+  <g fill="#1a0605">
+    <circle cx="24" cy="34" r="1.6"/>
+    <circle cx="76" cy="34" r="1.6"/>
+  </g>
+  <!-- huňatá tykadla -->
+  <g stroke="#15121A" stroke-width="1.8" fill="none" stroke-linecap="round">
+    <path d="M49,30 C44,20 39,16 34,14"/>
+    <path d="M51,30 C56,20 61,16 66,14"/>
+  </g>
+  <!-- tělo -->
+  <g fill="#15121A" stroke="none">
+    <rect x="47" y="26" width="6" height="46" rx="3"/>
+    <circle cx="50" cy="26" r="5"/>
+  </g>
+</svg>

client/public/butterfly-net-golden.svg

@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 100 100"
+     width="100"
+     height="100">
+
+    <defs>
+        <linearGradient id="netFillGold" x1="0" y1="0" x2="0.4" y2="1">
+            <stop offset="0%" stop-color="#FFF3C4" stop-opacity="0.28"/>
+            <stop offset="100%" stop-color="#F0C24A" stop-opacity="0.12"/>
+        </linearGradient>
+
+        <clipPath id="netBagClipGold">
+            <path d="
+        M 36 8
+        C 21 8, 9 20, 9 35
+        C 9 51, 13 70, 19 84
+        C 22 92, 27 94, 31 87
+        C 40 72, 54 51, 63 35
+        C 63 20, 51 8, 36 8
+        Z"/>
+        </clipPath>
+    </defs>
+
+    <!-- Síťový vak za obručí -->
+    <path d="
+    M 36 8
+    C 21 8, 9 20, 9 35
+    C 9 51, 13 70, 19 84
+    C 22 92, 27 94, 31 87
+    C 40 72, 54 51, 63 35
+    C 63 20, 51 8, 36 8
+    Z"
+          fill="url(#netFillGold)"
+          stroke="#E8B23A"
+          stroke-width="1"
+          opacity="0.85"/>
+
+    <!-- Výplet síťky -->
+    <g clip-path="url(#netBagClipGold)"
+       fill="none"
+       stroke="#E8B23A"
+       stroke-width="0.8"
+       opacity="0.7"
+       stroke-linecap="round">
+        <path d="M 16 17 C 15 42, 19 69, 25 90"/>
+        <path d="M 25 10 C 23 39, 24 69, 25 90"/>
+        <path d="M 36 8 C 34 39, 30 69, 25 90"/>
+        <path d="M 47 10 C 44 40, 36 70, 25 90"/>
+        <path d="M 56 18 C 51 44, 41 72, 25 90"/>
+        <path d="M 62 30 C 55 51, 43 75, 25 90"/>
+        <path d="M 9 29 C 13 49, 18 72, 25 90"/>
+        <path d="M 10 42 C 14 60, 19 78, 25 90"/>
+        <path d="M 16 17 C 28 22, 45 22, 56 18"/>
+        <path d="M 10 28 C 25 34, 47 34, 62 29"/>
+        <path d="M 9 40 C 25 46, 45 47, 59 42"/>
+        <path d="M 11 52 C 24 58, 41 59, 53 54"/>
+        <path d="M 13 64 C 24 69, 36 70, 45 66"/>
+        <path d="M 16 75 C 24 79, 31 80, 38 77"/>
+        <path d="M 20 84 C 24 87, 28 87, 32 84"/>
+    </g>
+
+    <!-- Rukojeť -->
+    <line x1="57" y1="57" x2="93" y2="93" stroke="#8B5A2B" stroke-width="6" stroke-linecap="round"/>
+    <line x1="57" y1="57" x2="93" y2="93" stroke="#A9713A" stroke-width="3" stroke-linecap="round"/>
+
+    <!-- Kovové napojení rukojeti -->
+    <line x1="56" y1="55" x2="61" y2="61" stroke="#B8860B" stroke-width="6" stroke-linecap="round"/>
+    <line x1="56" y1="55" x2="61" y2="61" stroke="#FFE79A" stroke-width="2.5" stroke-linecap="round"/>
+
+    <!-- Zlatá obruč -->
+    <circle cx="36" cy="35" r="27" fill="none" stroke="#C8891A" stroke-width="4.5"/>
+    <circle cx="36" cy="35" r="27" fill="none" stroke="#FFD24A" stroke-width="2"/>
+
+    <!-- Třpytky -->
+    <g fill="#FFF7D6" stroke="none">
+      <path d="M 33 6 l 1.2 3 l 3 1.2 l -3 1.2 l -1.2 3 l -1.2 -3 l -3 -1.2 l 3 -1.2 z"/>
+      <path d="M 60 40 l 1 2.4 l 2.4 1 l -2.4 1 l -1 2.4 l -1 -2.4 l -2.4 -1 l 2.4 -1 z"/>
+    </g>
+</svg>

client/public/butterfly-net-torn.svg

@@ -0,0 +1,74 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 100 100"
+     width="100"
+     height="100">
+
+    <defs>
+        <linearGradient id="netFillTorn" x1="0" y1="0" x2="0.4" y2="1">
+            <stop offset="0%" stop-color="#E4EDF5" stop-opacity="0.14"/>
+            <stop offset="100%" stop-color="#B9C4CF" stop-opacity="0.06"/>
+        </linearGradient>
+
+        <!-- Vak s vyříznutou dírou uprostřed -->
+        <clipPath id="netBagClipTorn">
+            <path d="
+        M 36 8 C 21 8, 9 20, 9 35 C 9 51, 13 70, 19 84
+        C 22 92, 27 94, 31 87 C 40 72, 54 51, 63 35 C 63 20, 51 8, 36 8 Z
+        M 27 40 C 20 44, 22 55, 30 58 C 38 61, 46 54, 43 46 C 41 40, 33 37, 27 40 Z"
+        clip-rule="evenodd"/>
+        </clipPath>
+    </defs>
+
+    <!-- Síťový vak (s dírou) -->
+    <path d="
+    M 36 8 C 21 8, 9 20, 9 35 C 9 51, 13 70, 19 84
+    C 22 92, 27 94, 31 87 C 40 72, 54 51, 63 35 C 63 20, 51 8, 36 8 Z
+    M 27 40 C 20 44, 22 55, 30 58 C 38 61, 46 54, 43 46 C 41 40, 33 37, 27 40 Z"
+          fill="url(#netFillTorn)"
+          stroke="#AEBBC8"
+          stroke-width="1"
+          opacity="0.7"
+          fill-rule="evenodd"/>
+
+    <!-- Výplet síťky (oříznutý dírou) -->
+    <g clip-path="url(#netBagClipTorn)"
+       fill="none"
+       stroke="#AEBBC8"
+       stroke-width="0.8"
+       opacity="0.55"
+       stroke-linecap="round">
+        <path d="M 16 17 C 15 42, 19 69, 25 90"/>
+        <path d="M 25 10 C 23 39, 24 69, 25 90"/>
+        <path d="M 36 8 C 34 39, 30 69, 25 90"/>
+        <path d="M 47 10 C 44 40, 36 70, 25 90"/>
+        <path d="M 56 18 C 51 44, 41 72, 25 90"/>
+        <path d="M 62 30 C 55 51, 43 75, 25 90"/>
+        <path d="M 9 29 C 13 49, 18 72, 25 90"/>
+        <path d="M 10 42 C 14 60, 19 78, 25 90"/>
+        <path d="M 16 17 C 28 22, 45 22, 56 18"/>
+        <path d="M 13 64 C 24 69, 36 70, 45 66"/>
+        <path d="M 16 75 C 24 79, 31 80, 38 77"/>
+        <path d="M 20 84 C 24 87, 28 87, 32 84"/>
+    </g>
+
+    <!-- Roztřepená vlákna kolem díry -->
+    <g stroke="#9AA7B4" stroke-width="0.8" fill="none" stroke-linecap="round" opacity="0.8">
+        <path d="M 27 40 l -3 -2"/>
+        <path d="M 43 46 l 3 -1"/>
+        <path d="M 30 58 l -1 3"/>
+        <path d="M 38 52 l 3 2"/>
+        <path d="M 24 49 l -3 1"/>
+    </g>
+
+    <!-- Rukojeť -->
+    <line x1="57" y1="57" x2="93" y2="93" stroke="#8B5A2B" stroke-width="6" stroke-linecap="round"/>
+    <line x1="57" y1="57" x2="93" y2="93" stroke="#A9713A" stroke-width="3" stroke-linecap="round"/>
+
+    <!-- Kovové napojení rukojeti -->
+    <line x1="56" y1="55" x2="61" y2="61" stroke="#71808E" stroke-width="6" stroke-linecap="round"/>
+    <line x1="56" y1="55" x2="61" y2="61" stroke="#B8C4CF" stroke-width="2.5" stroke-linecap="round"/>
+
+    <!-- Obruč -->
+    <circle cx="36" cy="35" r="27" fill="none" stroke="#7A8896" stroke-width="4.5"/>
+    <circle cx="36" cy="35" r="27" fill="none" stroke="#AEBBC8" stroke-width="2"/>
+</svg>

client/public/butterfly-net.svg

@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 100 100"
+     width="100"
+     height="100">
+
+    <defs>
+        <linearGradient id="netFill" x1="0" y1="0" x2="0.4" y2="1">
+            <stop offset="0%" stop-color="#E4EDF5" stop-opacity="0.18"/>
+            <stop offset="100%" stop-color="#B9C4CF" stop-opacity="0.08"/>
+        </linearGradient>
+
+        <!-- Celý tvar síťového vaku -->
+        <clipPath id="netBagClip">
+            <path d="
+        M 36 8
+        C 21 8, 9 20, 9 35
+        C 9 51, 13 70, 19 84
+        C 22 92, 27 94, 31 87
+        C 40 72, 54 51, 63 35
+        C 63 20, 51 8, 36 8
+        Z"/>
+        </clipPath>
+    </defs>
+
+    <!-- Síťový vak za obručí -->
+    <path d="
+    M 36 8
+    C 21 8, 9 20, 9 35
+    C 9 51, 13 70, 19 84
+    C 22 92, 27 94, 31 87
+    C 40 72, 54 51, 63 35
+    C 63 20, 51 8, 36 8
+    Z"
+          fill="url(#netFill)"
+          stroke="#AEBBC8"
+          stroke-width="1"
+          opacity="0.7"/>
+
+    <!-- Výplet síťky -->
+    <g clip-path="url(#netBagClip)"
+       fill="none"
+       stroke="#AEBBC8"
+       stroke-width="0.8"
+       opacity="0.6"
+       stroke-linecap="round">
+
+        <!-- Vlákna začínající na horní a boční obruči -->
+        <path d="M 16 17 C 15 42, 19 69, 25 90"/>
+        <path d="M 25 10 C 23 39, 24 69, 25 90"/>
+        <path d="M 36 8 C 34 39, 30 69, 25 90"/>
+        <path d="M 47 10 C 44 40, 36 70, 25 90"/>
+        <path d="M 56 18 C 51 44, 41 72, 25 90"/>
+        <path d="M 62 30 C 55 51, 43 75, 25 90"/>
+
+        <!-- Vlákna od levého okraje obruče -->
+        <path d="M 9 29 C 13 49, 18 72, 25 90"/>
+        <path d="M 10 42 C 14 60, 19 78, 25 90"/>
+
+        <!-- Příčná oka -->
+        <path d="M 16 17 C 28 22, 45 22, 56 18"/>
+        <path d="M 10 28 C 25 34, 47 34, 62 29"/>
+        <path d="M 9 40 C 25 46, 45 47, 59 42"/>
+        <path d="M 11 52 C 24 58, 41 59, 53 54"/>
+        <path d="M 13 64 C 24 69, 36 70, 45 66"/>
+        <path d="M 16 75 C 24 79, 31 80, 38 77"/>
+        <path d="M 20 84 C 24 87, 28 87, 32 84"/>
+    </g>
+
+    <!-- Rukojeť -->
+    <line x1="57" y1="57"
+          x2="93" y2="93"
+          stroke="#8B5A2B"
+          stroke-width="6"
+          stroke-linecap="round"/>
+
+    <line x1="57" y1="57"
+          x2="93" y2="93"
+          stroke="#A9713A"
+          stroke-width="3"
+          stroke-linecap="round"/>
+
+    <!-- Kovové napojení rukojeti -->
+    <line x1="56" y1="55"
+          x2="61" y2="61"
+          stroke="#71808E"
+          stroke-width="6"
+          stroke-linecap="round"/>
+
+    <line x1="56" y1="55"
+          x2="61" y2="61"
+          stroke="#B8C4CF"
+          stroke-width="2.5"
+          stroke-linecap="round"/>
+
+    <!-- Hlavní obruč – nezměněná -->
+    <circle cx="36" cy="35" r="27"
+            fill="none"
+            stroke="#7A8896"
+            stroke-width="4.5"/>
+
+    <circle cx="36" cy="35" r="27"
+            fill="none"
+            stroke="#AEBBC8"
+            stroke-width="2"/>
+
+</svg>

client/public/butterfly-orange.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <g stroke="#7A3B00" stroke-width="1.5" stroke-linejoin="round">
+    <path fill="#F59E1E" d="M48,32 C30,10 8,14 8,34 C8,50 30,52 48,50 Z"/>
+    <path fill="#F59E1E" d="M52,32 C70,10 92,14 92,34 C92,50 70,52 52,50 Z"/>
+    <path fill="#F59E1E" d="M47,50 C34,54 16,58 18,74 C20,86 40,84 47,66 Z"/>
+    <path fill="#F59E1E" d="M53,50 C66,54 84,58 82,74 C80,86 60,84 53,66 Z"/>
+  </g>
+  <g fill="#FFE0A3" stroke="none">
+    <circle cx="20" cy="30" r="4"/>
+    <circle cx="80" cy="30" r="4"/>
+    <circle cx="30" cy="70" r="3"/>
+    <circle cx="70" cy="70" r="3"/>
+  </g>
+  <g stroke="#2B1A0B" stroke-width="1.6" fill="none" stroke-linecap="round">
+    <path d="M49,28 C44,18 40,14 36,11"/>
+    <path d="M51,28 C56,18 60,14 64,11"/>
+  </g>
+  <g fill="#2B1A0B" stroke="none">
+    <circle cx="36" cy="11" r="1.8"/>
+    <circle cx="64" cy="11" r="1.8"/>
+    <rect x="47.5" y="24" width="5" height="52" rx="2.5"/>
+    <circle cx="50" cy="24" r="4.5"/>
+  </g>
+</svg>

client/public/butterfly-pink.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <g stroke="#8A2255" stroke-width="1.5" stroke-linejoin="round">
+    <path fill="#F06B9B" d="M48,32 C30,10 8,14 8,34 C8,50 30,52 48,50 Z"/>
+    <path fill="#F06B9B" d="M52,32 C70,10 92,14 92,34 C92,50 70,52 52,50 Z"/>
+    <path fill="#F06B9B" d="M47,50 C34,54 16,58 18,74 C20,86 40,84 47,66 Z"/>
+    <path fill="#F06B9B" d="M53,50 C66,54 84,58 82,74 C80,86 60,84 53,66 Z"/>
+  </g>
+  <g fill="#FFD1E3" stroke="none">
+    <circle cx="20" cy="30" r="4"/>
+    <circle cx="80" cy="30" r="4"/>
+    <circle cx="30" cy="70" r="3"/>
+    <circle cx="70" cy="70" r="3"/>
+  </g>
+  <g stroke="#3B0E24" stroke-width="1.6" fill="none" stroke-linecap="round">
+    <path d="M49,28 C44,18 40,14 36,11"/>
+    <path d="M51,28 C56,18 60,14 64,11"/>
+  </g>
+  <g fill="#3B0E24" stroke="none">
+    <circle cx="36" cy="11" r="1.8"/>
+    <circle cx="64" cy="11" r="1.8"/>
+    <rect x="47.5" y="24" width="5" height="52" rx="2.5"/>
+    <circle cx="50" cy="24" r="4.5"/>
+  </g>
+</svg>

client/public/butterfly-yellow.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <g stroke="#8A6D00" stroke-width="1.5" stroke-linejoin="round">
+    <path fill="#FFD23F" d="M48,32 C30,10 8,14 8,34 C8,50 30,52 48,50 Z"/>
+    <path fill="#FFD23F" d="M52,32 C70,10 92,14 92,34 C92,50 70,52 52,50 Z"/>
+    <path fill="#FFD23F" d="M47,50 C34,54 16,58 18,74 C20,86 40,84 47,66 Z"/>
+    <path fill="#FFD23F" d="M53,50 C66,54 84,58 82,74 C80,86 60,84 53,66 Z"/>
+  </g>
+  <g fill="#FFF3C4" stroke="none">
+    <circle cx="20" cy="30" r="4"/>
+    <circle cx="80" cy="30" r="4"/>
+    <circle cx="30" cy="70" r="3"/>
+    <circle cx="70" cy="70" r="3"/>
+  </g>
+  <g stroke="#3A2E00" stroke-width="1.6" fill="none" stroke-linecap="round">
+    <path d="M49,28 C44,18 40,14 36,11"/>
+    <path d="M51,28 C56,18 60,14 64,11"/>
+  </g>
+  <g fill="#3A2E00" stroke="none">
+    <circle cx="36" cy="11" r="1.8"/>
+    <circle cx="64" cy="11" r="1.8"/>
+    <rect x="47.5" y="24" width="5" height="52" rx="2.5"/>
+    <circle cx="50" cy="24" r="4.5"/>
+  </g>
+</svg>

client/public/coin.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <radialGradient id="coinFace" cx="0.4" cy="0.35" r="0.75">
+      <stop offset="0%" stop-color="#FFE9A3"/>
+      <stop offset="60%" stop-color="#FFCB3D"/>
+      <stop offset="100%" stop-color="#E0A200"/>
+    </radialGradient>
+  </defs>
+  <circle cx="50" cy="50" r="42" fill="#C88A12"/>
+  <circle cx="50" cy="50" r="38" fill="url(#coinFace)" stroke="#F2D774" stroke-width="2"/>
+  <circle cx="50" cy="50" r="30" fill="none" stroke="#B8860B" stroke-width="2" opacity="0.6"/>
+  <!-- stylizovaný motýlek na minci -->
+  <g fill="#B8860B" opacity="0.85">
+    <path d="M50,42 C42,32 30,34 30,44 C30,52 42,52 50,50 Z"/>
+    <path d="M50,42 C58,32 70,34 70,44 C70,52 58,52 50,50 Z"/>
+    <path d="M49,50 C42,52 34,56 36,64 C38,70 48,66 49,58 Z"/>
+    <path d="M51,50 C58,52 66,56 64,64 C62,70 52,66 51,58 Z"/>
+    <rect x="48.5" y="40" width="3" height="26" rx="1.5"/>
+  </g>
+  <!-- lesk -->
+  <path d="M 30 30 C 38 24, 50 24, 58 28" fill="none" stroke="#FFF7DC" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
+</svg>

client/public/spider.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <!-- vlákno -->
+  <line x1="50" y1="0" x2="50" y2="30" stroke="#8A8A8A" stroke-width="1.5"/>
+  <g stroke="#15121A" stroke-width="3" fill="none" stroke-linecap="round">
+    <!-- nohy -->
+    <path d="M40,52 C24,44 18,52 12,46"/>
+    <path d="M40,58 C24,58 16,66 10,64"/>
+    <path d="M40,64 C26,70 20,80 12,82"/>
+    <path d="M40,70 C30,80 28,90 22,94"/>
+    <path d="M60,52 C76,44 82,52 88,46"/>
+    <path d="M60,58 C76,58 84,66 90,64"/>
+    <path d="M60,64 C74,70 80,80 88,82"/>
+    <path d="M60,70 C70,80 72,90 78,94"/>
+  </g>
+  <!-- tělo -->
+  <g stroke="#15121A" stroke-width="1.5">
+    <ellipse cx="50" cy="46" rx="11" ry="9" fill="#2B2733"/>
+    <ellipse cx="50" cy="64" rx="15" ry="16" fill="#211E26"/>
+    <!-- přesýpací hodiny (varovná značka) -->
+    <path d="M50,58 l5,6 l-5,6 l-5,-6 z" fill="#C9302C" stroke="none"/>
+  </g>
+  <!-- oči -->
+  <g fill="#F5C518">
+    <circle cx="46" cy="44" r="1.6"/>
+    <circle cx="54" cy="44" r="1.6"/>
+  </g>
+</svg>

client/public/sw.js

@@ -0,0 +1,48 @@
+// Service Worker pro Web Push notifikace (připomínka výběru oběda, doručení objednávky)
+
+self.addEventListener('push', (event) => {
+    const data = event.data?.json() ?? { title: 'Luncher', body: 'Ještě nemáte zvolený oběd!' };
+    event.waitUntil(
+        self.registration.showNotification(data.title, {
+            body: data.body,
+            icon: '/favicon.ico',
+            tag: data.tag ?? 'lunch-reminder',
+            data: { login: data.login, token: data.token, url: data.url },
+            // Token posílá jen připomínka oběda — ostatní notifikace tlačítko nemají.
+            actions: data.token
+                ? [{ action: 'neobedvam', title: 'Mám vlastní/neobědvám' }]
+                : [],
+        })
+    );
+});
+
+self.addEventListener('notificationclick', (event) => {
+    event.notification.close();
+
+    if (event.action === 'neobedvam') {
+        const { login, token } = event.notification.data ?? {};
+        if (login && token) {
+            event.waitUntil(
+                fetch('/api/notifications/push/quickChoice', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ login, token }),
+                })
+            );
+        }
+        return;
+    }
+
+    const url = event.notification.data?.url ?? '/';
+    event.waitUntil(
+        self.clients.matchAll({ type: 'window' }).then((clientList) => {
+            for (const client of clientList) {
+                if (client.url.includes(self.location.origin) && 'focus' in client) {
+                    if ('navigate' in client) client.navigate(url).catch(() => {});
+                    return client.focus();
+                }
+            }
+            return self.clients.openWindow(url);
+        })
+    );
+});

client/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { EVENT_DISCONNECT, EVENT_MESSAGE, SocketContext } from './context/socket';
+import { EVENT_DISCONNECT, EVENT_MESSAGE, EVENT_PENDING_QR, SocketContext } from './context/socket';
 import { useAuth } from './context/auth';
 import Login from './Login';
 import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
@@ -13,15 +13,18 @@ import './App.scss';
 import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
 import { useSettings } from './context/settings';
 import Footer from './components/Footer';
-import { faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faArrowUpRightFromSquare, faBasketShopping, faChainBroken, faChevronLeft, faChevronRight, faGear, faMoneyBillTransfer, faSatelliteDish, faSearch, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { useNavigate } from 'react-router-dom';
 import Loader from './components/Loader';
 import { getHumanDateTime, isInTheFuture } from './Utils';
 import NoteModal from './components/modals/NoteModal';
+import PayForAllModal from './components/modals/PayForAllModal';
+import PendingPayments from './components/PendingPayments';
 import { useEasterEgg } from './context/eggs';
-import { ClientData, Food, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime } from '../../types';
+import { ClientData, Food, MealSlot, PendingQr, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, LocationLunchChoicesMap, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime, setBuyer, generateQr } from '../../types';
 import { getLunchChoiceName } from './enums';
-import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
-import './FallingLeaves.scss';
+// import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
+// import './FallingLeaves.scss';
 
 const EVENT_CONNECT = "connect"
 
@@ -58,6 +61,7 @@ const EASTER_EGG_DEFAULT_DURATION = 0.75;
 function App() {
   const auth = useAuth();
   const settings = useSettings();
+  const navigate = useNavigate();
   const [easterEgg, _] = useEasterEgg(auth);
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [data, setData] = useState<ClientData>();
@@ -74,6 +78,7 @@ function App() {
   const [dayIndex, setDayIndex] = useState<number>();
   const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false);
   const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
+  const [payForAllLocationKey, setPayForAllLocationKey] = useState<LunchChoice | null>(null);
   const [eggImage, setEggImage] = useState<Blob>();
   const eggRef = useRef<HTMLImageElement>(null);
   // Prazvláštní workaround, aby socket.io listener viděl aktuální hodnotu
@@ -124,33 +129,74 @@ function App() {
     });
     socket.on(EVENT_MESSAGE, (newData: ClientData) => {
       // console.log("Přijata nová data ze socketu", newData);
+      if (newData.slot === MealSlot.EXTRA) return;
       // Aktualizujeme pouze, pokud jsme dostali data pro den, který máme aktuálně zobrazený
       if (dayIndexRef.current == null || newData.dayIndex === dayIndexRef.current) {
         setData(newData);
       }
     });
+    socket.on(EVENT_PENDING_QR, (pendingQr: PendingQr) => {
+      setData(prev => prev ? { ...prev, pendingQrs: [...(prev.pendingQrs ?? []), pendingQr] } : prev);
+    });
 
     return () => {
       socket.off(EVENT_CONNECT);
       socket.off(EVENT_DISCONNECT);
       socket.off(EVENT_MESSAGE);
+      socket.off(EVENT_PENDING_QR);
     }
   }, [socket]);
 
+  // Připojení do osobní socket místnosti po přihlášení
   useEffect(() => {
-    if (!auth?.login) {
+    if (auth?.login) {
+      socket.emit('join', auth.login);
+    }
+  }, [auth?.login, socket]);
+
+  // Po znovupřipojení socketu znovu vstoupit do místnosti a obnovit data
+  useEffect(() => {
+    const onReconnect = () => {
+      if (auth?.login) socket.emit('join', auth.login);
+      getData({ query: { dayIndex: dayIndexRef.current } }).then(response => {
+        if (response.data) {
+          setData(response.data);
+          setFood(response.data.menus);
+        }
+      });
+    };
+    socket.io.on('reconnect', onReconnect);
+    return () => { socket.io.off('reconnect', onReconnect); };
+  }, [socket, auth?.login]);
+
+  useEffect(() => {
+    if (!auth?.login || !data?.choices) {
       return
     }
-    // TODO tohle občas náhodně nezafunguje, nutno přepsat, viz https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
-    // TODO nutno opravit
-    // if (data?.choices && choiceRef.current) {
-    //   for (let entry of Object.entries(data.choices)) {
-    //     if (entry[1].includes(auth.login)) {
-    //       const value = entry[0] as any as number; // TODO tohle je absurdní
-    //       choiceRef.current.value = Object.values(Locations)[value];
-    //     }
-    //   }
-    // }
+    // Pre-fill form refs from existing choices
+    let foundKey: LunchChoice | undefined;
+    let foundChoice: UserLunchChoice | undefined;
+    for (const key of Object.keys(data.choices)) {
+      const locationKey = key as LunchChoice;
+      const locationChoices = data.choices[locationKey];
+      if (locationChoices && auth.login in locationChoices) {
+        foundKey = locationKey;
+        foundChoice = locationChoices[auth.login];
+        break;
+      }
+    }
+    if (foundKey && choiceRef.current) {
+      choiceRef.current.value = foundKey;
+      const restaurantKey = Object.keys(Restaurant).indexOf(foundKey);
+      if (restaurantKey > -1 && food) {
+        const restaurant = Object.keys(Restaurant)[restaurantKey] as Restaurant;
+        setFoodChoiceList(food[restaurant]?.food);
+        setClosed(food[restaurant]?.closed ?? false);
+      }
+    }
+    if (foundChoice?.departureTime && departureChoiceRef.current) {
+      departureChoiceRef.current.value = foundChoice.departureTime;
+    }
   }, [auth, auth?.login, data?.choices])
 
   // Reference na mojí objednávku
@@ -161,6 +207,11 @@ function App() {
     }
   }, [auth?.login, data?.pizzaDay?.orders])
 
+  // Kontrola, zda má uživatel vybranou volbu PIZZA
+  const userHasPizzaChoice = useMemo(() => {
+    return auth?.login ? data?.choices?.PIZZA?.[auth.login] != null : false;
+  }, [data?.choices?.PIZZA, auth?.login]);
+
   useEffect(() => {
     if (choiceRef?.current?.value && choiceRef.current.value !== "") {
       const locationKey = choiceRef.current.value as LunchChoice;
@@ -212,22 +263,103 @@ function App() {
     }
   }, [auth?.login, easterEgg?.duration, easterEgg?.url, eggImage]);
 
+  // Pomocná funkce pro kontrolu a potvrzení změny volby při existujícím Pizza day
+  const checkPizzaDayBeforeChange = async (newLocationKey: LunchChoice): Promise<boolean> => {
+    if (!auth?.login || !data) return false;
+
+    // Kontrola, zda uživatel má vybranou PIZZA a mění na něco jiného
+    const hasPizzaChoice = data.choices?.PIZZA?.[auth.login] != null;
+    const isCreator = data.pizzaDay?.creator === auth.login;
+    const isPizzaDayCreated = data.pizzaDay?.state === PizzaDayState.CREATED;
+
+    // Pokud není vybraná PIZZA nebo přepínáme na PIZZA, není potřeba kontrolovat
+    if (!hasPizzaChoice || newLocationKey === LunchChoice.PIZZA) {
+      return true;
+    }
+
+    // Pokud uživatel není zakladatel Pizza day, není potřeba dialogu
+    if (!isCreator || !data?.pizzaDay) {
+      return true;
+    }
+
+    // Uživatel je zakladatel Pizza day a mění volbu z PIZZA
+    if (!isPizzaDayCreated) {
+      // Pizza day není ve stavu CREATED, nelze změnit volbu
+      alert(`Nelze změnit volbu. Pizza day je ve stavu "${data.pizzaDay.state}" a musí být nejprve dokončen.`);
+      return false;
+    }
+
+    // Pizza day je CREATED, zobrazit potvrzovací dialog
+    const confirmed = window.confirm(
+      'Jsi zakladatel aktivního Pizza day. Změna volby smaže celý Pizza day včetně všech objednávek. Pokračovat?'
+    );
+
+    if (!confirmed) {
+      return false;
+    }
+
+    // Uživatel potvrdil, smazat Pizza day
+    try {
+      await deletePizzaDay();
+      return true;
+    } catch (error: any) {
+      alert(`Chyba při mazání Pizza day: ${error.message || error}`);
+      return false;
+    }
+  };
+
   const doAddClickFoodChoice = async (location: LunchChoice, foodIndex?: number) => {
     if (document.getSelection()?.type !== 'Range') { // pouze pokud se nejedná o výběr textu
-      if (auth?.login) {
+      if (canChangeChoice && auth?.login) {
+        // Kontrola Pizza day před změnou volby
+        const canProceed = await checkPizzaDayBeforeChange(location);
+        if (!canProceed) {
+          return;
+        }
+
+        try {
           await addChoice({ body: { locationKey: location, foodIndex, dayIndex } });
+          await tryAutoSelectDepartureTime();
+        } catch (error: any) {
+          alert(`Chyba při změně volby: ${error.message || error}`);
+        }
       }
     }
   }
 
   const doAddChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
     const locationKey = event.target.value as LunchChoice;
-    if (auth?.login) {
+    if (canChangeChoice && auth?.login) {
+      // Kontrola Pizza day před změnou volby
+      const canProceed = await checkPizzaDayBeforeChange(locationKey);
+      if (!canProceed) {
+        // Uživatel zrušil akci nebo došlo k chybě, reset výběru zpět na PIZZA
+        if (choiceRef.current) {
+          choiceRef.current.value = LunchChoice.PIZZA;
+        }
+        return;
+      }
+
+      try {
         await addChoice({ body: { locationKey, dayIndex } });
         if (foodChoiceRef.current?.value) {
           foodChoiceRef.current.value = "";
         }
         choiceRef.current?.blur();
+        // Automatický výběr času odchodu pouze pro restaurace s menu
+        if (Object.keys(Restaurant).includes(locationKey)) {
+          await tryAutoSelectDepartureTime();
+        }
+      } catch (error: any) {
+        alert(`Chyba při změně volby: ${error.message || error}`);
+        // Reset výběru zpět
+        const hasPizzaChoice = data?.choices?.PIZZA?.[auth.login] != null;
+        if (choiceRef.current && hasPizzaChoice) {
+          choiceRef.current.value = LunchChoice.PIZZA;
+        } else if (choiceRef.current) {
+          choiceRef.current.value = "";
+        }
+      }
     }
   }
 
@@ -242,6 +374,7 @@ function App() {
       const locationKey = choiceRef.current.value as LunchChoice;
       if (auth?.login) {
         await addChoice({ body: { locationKey, foodIndex: Number(event.target.value), dayIndex } });
+        await tryAutoSelectDepartureTime();
       }
     }
   }
@@ -284,34 +417,88 @@ function App() {
     }
   }
 
+  const markAsBuyer = async () => {
+    if (auth?.login) {
+      await setBuyer();
+    }
+  }
+
+  const handleCreatePizzaDay = async () => {
+    if (!window.confirm('Opravdu chcete založit Pizza day?')) return;
+    setLoadingPizzaDay(true);
+    await createPizzaDay().then(() => setLoadingPizzaDay(false));
+  }
+
+  const handleDeletePizzaDay = async () => {
+    if (!window.confirm('Opravdu chcete smazat Pizza day? Budou smazány i všechny dosud zadané objednávky.')) return;
+    await deletePizzaDay();
+  }
+
+  const handleLockPizzaDay = async () => {
+    if (!window.confirm('Opravdu chcete uzamknout objednávky? Po uzamčení nebude možné přidávat ani odebírat objednávky.')) return;
+    await lockPizzaDay();
+  }
+
+  const handleUnlockPizzaDay = async () => {
+    if (!window.confirm('Opravdu chcete odemknout objednávky? Uživatelé budou moci opět upravovat své objednávky.')) return;
+    await unlockPizzaDay();
+  }
+
+  const handleFinishOrder = async () => {
+    if (!window.confirm('Opravdu chcete označit objednávky jako objednané? Objednávky zůstanou zamčeny.')) return;
+    await finishOrder();
+  }
+
+  const handleReturnToLocked = async () => {
+    if (!window.confirm('Opravdu chcete vrátit stav zpět do "uzamčeno" (před objednáním)?')) return;
+    await lockPizzaDay();
+  }
+
+  const handleFinishDelivery = async () => {
+    if (!window.confirm(`Opravdu chcete označit pizzy jako doručené?${settings?.bankAccount && settings?.holderName ? ' Uživatelům bude vygenerován QR kód pro platbu.' : ''}`)) return;
+    await finishDelivery({ body: { bankAccount: settings?.bankAccount, bankAccountHolder: settings?.holderName } });
+  }
+
   const pizzaSuggestions = useMemo(() => {
-    if (!data?.pizzaList) {
+    if (!data?.pizzaList && !data?.salatList) {
       return [];
     }
     const suggestions: SelectSearchOption[] = [];
-    data.pizzaList.forEach((pizza, index) => {
+    data.pizzaList?.forEach((pizza, index) => {
       const group: SelectSearchOption = { name: pizza.name, type: "group", items: [] }
       pizza.sizes.forEach((size, sizeIndex) => {
-        const name = `${size.size} (${size.price} Kč)`;
-        const value = `${index}|${sizeIndex}`;
+        const name = `${size.size} (${size.price / 100} Kč)`;
+        const value = `pizza|${index}|${sizeIndex}`;
         group.items?.push({ name, value });
       })
       suggestions.push(group);
-    })
+    });
+    if (data.salatList?.length) {
+      const salatGroup: SelectSearchOption = { name: "Saláty", type: "group", items: [] }
+      data.salatList.forEach((salat, index) => {
+        salatGroup.items?.push({ name: `${salat.name} (${salat.price / 100} Kč)`, value: `salat|${index}` });
+      });
+      suggestions.push(salatGroup);
+    }
     return suggestions;
-  }, [data?.pizzaList]);
+  }, [data?.pizzaList, data?.salatList]);
 
   const handlePizzaChange = async (value: SelectedOptionValue | SelectedOptionValue[]) => {
-    if (auth?.login && data?.pizzaList) {
+    if (auth?.login) {
       if (typeof value !== 'string') {
-        throw Error('Nepodporovaný typ hodnoty');
+        throw new TypeError('Nepodporovaný typ hodnoty: ' + typeof value);
       }
       const s = value.split('|');
-      const pizzaIndex = Number.parseInt(s[0]);
-      const pizzaSizeIndex = Number.parseInt(s[1]);
+      if (s[0] === 'salat') {
+        const salatIndex = Number.parseInt(s[1]);
+        await addPizza({ body: { salatIndex } });
+      } else {
+        const pizzaIndex = Number.parseInt(s[1]);
+        const pizzaSizeIndex = Number.parseInt(s[2]);
         await addPizza({ body: { pizzaIndex, pizzaSizeIndex } });
       }
     }
+  }
 
   const handlePizzaDelete = async (pizzaOrder: PizzaVariant) => {
     await removePizza({ body: { pizzaOrder } });
@@ -325,37 +512,24 @@ function App() {
     updatePizzaDayNote({ body: { note: pizzaPoznamkaRef.current?.value } });
   }
 
-  // const addToCart = async () => {
-  // TODO aktuálně nefunkční - nedokážeme poslat PHPSESSIONID cookie
-  // if (data?.pizzaDay?.orders) {
-  //   for (const order of data?.pizzaDay?.orders) {
-  //     for (const pizzaOrder of order.pizzaList) {
-  //       const url = 'https://www.pizzachefie.cz/pridat.html';
-  //       const payload = new URLSearchParams();
-  //       payload.append('varId', pizzaOrder.varId.toString());
-  //       await fetch(url, {
-  //         method: "POST",
-  //         mode: "no-cors",
-  //         cache: "no-cache",
-  //         credentials: "same-origin",
-  //         headers: {
-  //           'Content-Type': 'application/x-www-form-urlencoded',
-  //         },
-  //         body: payload,
-  //       })
-  //     }
-  //   }
-  //   // TODO otevřít košík v nové záložce
-  // }
-  // }
-
   const handleChangeDepartureTime = async (event: React.ChangeEvent<HTMLSelectElement>) => {
-    if (foodChoiceList?.length && choiceRef.current?.value) {
+    if (choiceRef.current?.value) {
       await changeDepartureTime({ body: { time: event.target.value as DepartureTime, dayIndex } });
     }
   }
 
-  const handleDayChange = async (dayIndex: number) => {
+  // Automaticky nastaví preferovaný čas odchodu 10:45, pokud tento čas ještě nenastal (nebo jde o budoucí den)
+  const tryAutoSelectDepartureTime = async () => {
+    const preferredTime = "10:45" as DepartureTime;
+    const isToday = dayIndex === data?.todayDayIndex;
+    if ((!isToday || isInTheFuture(preferredTime)) && departureChoiceRef.current) {
+      departureChoiceRef.current.value = preferredTime;
+      await changeDepartureTime({ body: { time: preferredTime, dayIndex } });
+    }
+  }
+
+  const handleDayChange = async (requestedIndex: number) => {
+    const dayIndex = Math.max(0, Math.min(4, requestedIndex));
     setDayIndex(dayIndex);
     dayIndexRef.current = dayIndex;
     if (choiceRef?.current?.value) {
@@ -372,41 +546,60 @@ function App() {
   const renderFoodTable = (location: Restaurant, menu: RestaurantDayMenu) => {
     let content;
     if (menu?.closed) {
-      content = <h3>Zavřeno</h3>
+      content = <div className="restaurant-closed">Zavřeno</div>
     } else if (menu?.food?.length && menu.food.length > 0) {
       const hideSoups = settings?.hideSoups;
-      content = <Table striped bordered hover>
-        <tbody style={{ cursor: 'pointer' }}>
+      content = <Table className="food-table">
+        <tbody style={{ cursor: canChangeChoice ? 'pointer' : 'default' }}>
           {menu.food.map((f: Food, index: number) =>
             (!hideSoups || !f.isSoup) &&
             <tr key={f.name} onClick={() => doAddClickFoodChoice(location, index)}>
-              <td>{f.amount}</td>
               <td>
+                <div className="food-name">
                   {f.name}
                   {f.allergens && f.allergens.length > 0 && (
-                  <> ({f.allergens.map((a, idx) => (
+                    <span className="food-allergens">
+                      {' '}({f.allergens.map((a, idx) => (
                         <span key={a}>
-                      <span title={ALLERGENS[a]} style={{ cursor: 'help', textDecoration: 'underline' }} onClick={e => {
+                          <span className="allergen-link" title={ALLERGENS[a]} onClick={e => {
                             e.stopPropagation();
                             window.open(LINK_ALLERGENS, '_blank');
                           }}>{a}</span>
-                      {idx < f.allergens!.length - 1 && ','}
+                          {idx < f.allergens!.length - 1 && ', '}
+                        </span>
+                      ))})
                     </span>
-                  ))})</>
                   )}
+                </div>
+                <div className="food-meta">
+                  {f.amount && f.amount !== '-' && <span className="food-amount">{f.amount}</span>}
+                  <span className="food-price">{f.price}</span>
+                </div>
               </td>
-              <td>{f.price}</td>
             </tr>
           )}
         </tbody>
       </Table>
     } else {
-      content = <h3>Chyba načtení dat</h3>
+      content = <div className="restaurant-error">Chyba načtení dat</div>
     }
-    return <Col md={12} lg={3} className='mt-3'>
-      <h3 style={{ cursor: 'pointer' }} onClick={() => doAddClickFoodChoice(location)}>{getLunchChoiceName(location)}</h3>
-      {menu?.lastUpdate && <small>Poslední aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
+    return <Col md={6} lg={3} className='mt-3'>
+      <div className="restaurant-card">
+        <div className="restaurant-header" style={{ cursor: canChangeChoice ? 'pointer' : 'default' }} onClick={() => doAddClickFoodChoice(location)}>
+          <div className="restaurant-header-content">
+            <h3>
+              {getLunchChoiceName(location)}
+            </h3>
+            {menu?.lastUpdate && <small>Aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
+          </div>
+          {menu?.warnings && menu.warnings.length > 0 && (
+            <span className="restaurant-warning" title={menu.warnings.join('\n')}>
+              <FontAwesomeIcon icon={faTriangleExclamation} />
+            </span>
+          )}
+        </div>
         {content}
+      </div>
     </Col>
   }
 
@@ -446,43 +639,37 @@ function App() {
   return (
     <div className="app-container">
       {easterEgg && eggImage && <img ref={eggRef} alt='' src={URL.createObjectURL(eggImage)} style={{ position: 'absolute', ...EASTER_EGG_STYLE, ...style, animationDuration: `${duration ?? EASTER_EGG_DEFAULT_DURATION}s` }} />}
-      <Header />
+      <Header choices={data?.choices} dayIndex={dayIndex} />
       <div className='wrapper'>
-        {data.isWeekend ? <h4>Užívejte víkend :)</h4> : <>
-          <Alert variant={'primary'}>
-            {/* <img alt="" src='hat.png' style={{ position: "absolute", width: "70px", rotate: "-45deg", left: -40, top: -58 }} />
-            <img alt="" src='snowman.png' style={{ position: "absolute", height: "110px", right: 10, top: 5 }} /> */}
-            Poslední změny:
-            <ul>
-              <li>Zobrazení alergenu při najetí myší a proklik na seznam alergenů</li>
-              <li>Přesun přenačtení menu do samostatného dialogu</li>
-              <li>Podzimní atmosféra</li>
-            </ul>
+        {data.todayDayIndex != null && data.todayDayIndex > 4 &&
+          <Alert variant="info" className="mb-3">
+            Zobrazujete uplynulý týden
           </Alert>
+        }
+        <>
           {dayIndex != null &&
             <div className='day-navigator'>
               <span title='Předchozí den'>
                 <FontAwesomeIcon icon={faChevronLeft} style={{ cursor: "pointer", visibility: dayIndex > 0 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex - 1)} />
               </span>
-              <h1 className='title' style={{ color: dayIndex === data.todayDayIndex ? 'black' : 'gray' }}>{data.date}</h1>
+              <h1 className={`title ${dayIndex !== data.todayDayIndex ? 'text-muted' : ''}`}>{data.date}</h1>
               <span title="Následující den">
                 <FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer", visibility: dayIndex < 4 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex + 1)} />
               </span>
             </div>
           }
           <Row className='food-tables'>
-            {/* TODO zjednodušit, stačí iterovat klíče typu Restaurant */}
-            {food['SLADOVNICKA'] && renderFoodTable('SLADOVNICKA', food['SLADOVNICKA'])}
-            {food['TECHTOWER'] && renderFoodTable('TECHTOWER', food['TECHTOWER'])}
-            {food['ZASTAVKAUMICHALA'] && renderFoodTable('ZASTAVKAUMICHALA', food['ZASTAVKAUMICHALA'])}
-            {food['SENKSERIKOVA'] && renderFoodTable('SENKSERIKOVA', food['SENKSERIKOVA'])}
+            {Object.keys(Restaurant).map(key => {
+              const locationKey = key as Restaurant;
+              return food[locationKey] && renderFoodTable(locationKey, food[locationKey]);
+            })}
           </Row>
           <div className='content-wrapper'>
             <div className='content'>
-              {canChangeChoice && <>
+              {canChangeChoice && <div className="choice-section fade-in">
                 <p>{`Jak to ${dayIndex == null || dayIndex === data.todayDayIndex ? 'dnes' : 'tento den'} vidíš s obědem?`}</p>
                 <Form.Select ref={choiceRef} onChange={doAddChoice}>
-                  <option></option>
+                  <option value="">Vyber možnost...</option>
                   {Object.entries(LunchChoice)
                     .filter(entry => {
                       const locationKey = entry[0] as Restaurant;
@@ -492,56 +679,86 @@ function App() {
                 </Form.Select>
                 <small>Je možné vybrat jen jednu možnost. Výběr jiné odstraní předchozí.</small>
                 {foodChoiceList && !closed && <>
-                  <p style={{ marginTop: "10px" }}>Na co dobrého? <small>(nepovinné)</small></p>
+                  <p className="mt-3">Na co dobrého?</p>
                   <Form.Select ref={foodChoiceRef} onChange={doAddFoodChoice}>
-                    <option></option>
+                    <option value="">Vyber jídlo...</option>
                     {foodChoiceList.map((food, index) => <option key={food.name} value={index}>{food.name}</option>)}
                   </Form.Select>
                 </>}
                 {foodChoiceList && !closed && <>
-                  <p style={{ marginTop: "10px" }}>V kolik hodin preferuješ odchod?</p>
+                  <p className="mt-3">V kolik hodin preferuješ odchod?</p>
                   <Form.Select ref={departureChoiceRef} onChange={handleChangeDepartureTime}>
-                    <option></option>
+                    <option value="">Vyber čas...</option>
                     {Object.values(DepartureTime)
-                      .filter(time => isInTheFuture(time))
+                      .filter(time => dayIndex !== data.todayDayIndex || isInTheFuture(time))
                       .map(time => <option key={time} value={time}>{time}</option>)}
                   </Form.Select>
                 </>}
-              </>}
+              </div>}
               {Object.keys(data.choices).length > 0 ?
-                <Table bordered className='mt-5'>
+                <Table className='choices-table mt-4 fade-in'>
                   <tbody>
                     {Object.keys(data.choices).map(key => {
                       const locationKey = key as LunchChoice;
                       const locationName = getLunchChoiceName(locationKey);
                       const loginObject = data.choices[locationKey];
                       if (!loginObject) {
-                        return;
+                        return null;
                       }
                       const locationLoginList = Object.entries(loginObject);
                       const locationPickCount = locationLoginList.length
                       return (
                         <tr key={key}>
-                          {(locationPickCount ?? 0) > 1 ? (
-                            <td>{locationName} ({locationPickCount})</td>
-                          ) : (
-                            <td>{locationName}</td>)}
+                          <td>
+                            {locationName}
+                            {(locationPickCount ?? 0) > 1 && <span className="ms-1">({locationPickCount})</span>}
+                            {locationPickCount >= 2 && auth.login && loginObject[auth.login] !== undefined
+                              && locationKey !== LunchChoice.PIZZA && locationKey !== LunchChoice.NEOBEDVAM && locationKey !== LunchChoice.ROZHODUJI
+                              && settings?.bankAccount && settings?.holderName && (
+                                <span title='Zaplatit za všechny a vygenerovat QR kódy ostatním' className="ms-2">
+                                  <FontAwesomeIcon
+                                    icon={faMoneyBillTransfer}
+                                    onClick={() => setPayForAllLocationKey(locationKey)}
+                                    className='action-icon'
+                                    style={{ cursor: 'pointer' }}
+                                  />
+                                </span>
+                              )}
+                          </td>
                           <td className='p-0'>
-                            <Table>
+                            <Table className="nested-table">
                               <tbody>
-                                {locationLoginList.map((entry: [string, UserLunchChoice], index) => {
+                                {locationLoginList.map((entry: [string, UserLunchChoice]) => {
                                   const login = entry[0];
                                   const userPayload = entry[1];
                                   const userChoices = userPayload?.selectedFoods;
                                   const trusted = userPayload?.trusted || false;
+                                  const isBuyer = userPayload?.isBuyer || false;
                                   return <tr key={entry[0]}>
                                     <td>
+                                      <div className="user-row">
+                                        <div className="user-info">
                                           {trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
                                             <FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
                                           </span>}
-                                      {login}
-                                      {userPayload.departureTime && <small> ({userPayload.departureTime})</small>}
-                                      {userPayload.note && <span style={{ fontSize: 'small' }}> ({userPayload.note})</span>}
+                                          <strong>{login}</strong>
+                                          {userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
+                                          {userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
+                                        </div>
+                                        <div className="user-actions">
+                                          {login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'>
+                                            <FontAwesomeIcon onClick={() => {
+                                              markAsBuyer();
+                                            }} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{ cursor: 'pointer' }} />
+                                          </span>}
+                                          {login === auth.login && locationKey === LunchChoice.OBJEDNAVAM && <span title='Přejít na stránku objednávek'>
+                                            <FontAwesomeIcon onClick={() => navigate('/objednani')} icon={faArrowUpRightFromSquare} className='action-icon' style={{ cursor: 'pointer' }} />
+                                          </span>}
+                                          {login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer && <span title='Objednávající'>
+                                            <FontAwesomeIcon onClick={() => {
+                                              copyNote(userPayload.note!);
+                                            }} icon={faBasketShopping} className='buyer-icon' />
+                                          </span>}
                                           {login !== auth.login && canChangeChoice && userPayload?.note?.length && <span title='Převzít poznámku'>
                                             <FontAwesomeIcon onClick={() => {
                                               copyNote(userPayload.note!);
@@ -557,24 +774,28 @@ function App() {
                                               doRemoveChoices(key as LunchChoice);
                                             }} className='action-icon' icon={faTrashCan} />
                                           </span>}
-                                    </td>
-                                    {userChoices?.length && food ? <td>
-                                      <ul>
-                                        {userChoices?.map(foodIndex => {
+                                        </div>
+                                      </div>
+                                      {userChoices && userChoices.length > 0 && food && (
+                                        <div className="food-choices">
+                                          {userChoices
+                                            .filter(foodIndex => food[key as Restaurant]?.food?.[foodIndex] != null)
+                                            .map(foodIndex => {
                                             const restaurantKey = key as Restaurant;
-                                          const foodName = food[restaurantKey]?.food?.[foodIndex].name;
-                                          return <li key={foodIndex}>
-                                            {foodName}
+                                            const foodName = food[restaurantKey]?.food?.[foodIndex]?.name;
+                                            return <div key={foodIndex} className="food-choice-item">
+                                              <span className="food-choice-name">{foodName}</span>
                                               {login === auth.login && canChangeChoice &&
                                                 <span title={`Odstranit ${foodName}`}>
                                                   <FontAwesomeIcon onClick={() => {
                                                     doRemoveFoodChoice(restaurantKey, foodIndex);
                                                   }} className='action-icon' icon={faTrashCan} />
                                                 </span>}
-                                          </li>
+                                            </div>
                                           })}
-                                      </ul>
-                                    </td> : null}
+                                        </div>
+                                      )}
+                                    </td>
                                   </tr>
                                 }
                                 )}
@@ -586,137 +807,140 @@ function App() {
                     )}
                   </tbody>
                 </Table>
-                : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
+                : <div className='no-votes mt-4'>Zatím nikdo nehlasoval...</div>
               }
             </div>
-            {dayIndex === data.todayDayIndex &&
-              <div className='mt-5'>
+            {dayIndex === data.todayDayIndex && userHasPizzaChoice &&
+              <div className='pizza-section fade-in'>
                 {!data.pizzaDay &&
-                  <div style={{ textAlign: 'center' }}>
+                  <>
+                    <h3>Pizza Day</h3>
                     <p>Pro dnešní den není aktuálně založen Pizza day.</p>
                     {loadingPizzaDay ?
-                      <span>
-                        <FontAwesomeIcon icon={faGear} className='fa-spin' /> Zjišťujeme dostupné pizzy
+                      <span style={{ color: 'var(--luncher-primary)' }}>
+                        <FontAwesomeIcon icon={faGear} className='fa-spin me-2' /> Zjišťujeme dostupné pizzy
                       </span>
                       :
-                      <>
-                        <Button onClick={async () => {
-                          setLoadingPizzaDay(true);
-                          await createPizzaDay().then(() => setLoadingPizzaDay(false));
-                        }}>Založit Pizza day</Button>
-                        <Button onClick={doJdemeObed} style={{ marginLeft: "14px" }}>Jdeme na oběd !</Button>
-                      </>
-                    }
+                      <div>
+                        <Button onClick={handleCreatePizzaDay}>Založit Pizza day</Button>
+                        <Button variant="outline-primary" onClick={doJdemeObed}>Jdeme na oběd!</Button>
                       </div>
                     }
+                  </>
+                }
                 {data.pizzaDay &&
-                  <div>
-                    <div style={{ textAlign: 'center' }}>
-                      <h3>Pizza day</h3>
+                  <>
+                    <h3>Pizza Day</h3>
                     {
                       data.pizzaDay.state === PizzaDayState.CREATED &&
-                        <div>
+                      <>
                         <p>
-                            Pizza Day je založen a spravován uživatelem {data.pizzaDay.creator}.<br />
+                          Pizza Day je založen a spravován uživatelem <strong>{data.pizzaDay.creator}</strong>.<br />
                           Můžete upravovat své objednávky.
                         </p>
                         {
                           data.pizzaDay.creator === auth.login &&
-                            <>
-                              <Button className='danger mb-3' title="Smaže kompletně pizza day, včetně dosud zadaných objednávek." onClick={async () => {
-                                await deletePizzaDay();
-                              }}>Smazat Pizza day</Button>
-                              <Button className='mb-3' style={{ marginLeft: '20px' }} title={noOrders ? "Nelze uzamknout - neexistuje žádná objednávka" : "Zamezí přidávat/odebírat objednávky. Použij před samotným objednáním, aby již nemohlo docházet ke změnám."} disabled={noOrders} onClick={async () => {
-                                await lockPizzaDay();
-                              }}>Uzamknout</Button>
-                            </>
-                          }
+                          <div className="mb-4">
+                            <Button variant="danger" title="Smaže kompletně pizza day, včetně dosud zadaných objednávek." onClick={handleDeletePizzaDay}>Smazat Pizza day</Button>
+                            <Button title={noOrders ? "Nelze uzamknout - neexistuje žádná objednávka" : "Zamezí přidávat/odebírat objednávky. Použij před samotným objednáním, aby již nemohlo docházet ke změnám."} disabled={noOrders} onClick={handleLockPizzaDay}>Uzamknout</Button>
                           </div>
                         }
+                      </>
+                    }
                     {
                       data.pizzaDay.state === PizzaDayState.LOCKED &&
-                        <div>
-                          <p>Objednávky jsou uzamčeny uživatelem {data.pizzaDay.creator}</p>
-                          {data.pizzaDay.creator === auth.login &&
                       <>
-                              <Button className='danger mb-3' title="Umožní znovu editovat objednávky." onClick={async () => {
-                                await unlockPizzaDay();
-                              }}>Odemknout</Button>
-                              <Button className='danger mb-3' style={{ marginLeft: '20px' }} title={noOrders ? "Nelze objednat - neexistuje žádná objednávka" : "Použij po objednání. Objednávky zůstanou zamčeny."} disabled={noOrders} onClick={async () => {
-                                await finishOrder();
-                              }}>Objednáno</Button>
-                            </>
-                          }
+                        <p>Objednávky jsou uzamčeny uživatelem <strong>{data.pizzaDay.creator}</strong></p>
+                        {data.pizzaDay.creator === auth.login &&
+                          <div className="mb-4">
+                            <Button variant="secondary" title="Umožní znovu editovat objednávky." onClick={handleUnlockPizzaDay}>Odemknout</Button>
+                            <Button title={noOrders ? "Nelze objednat - neexistuje žádná objednávka" : "Použij po objednání. Objednávky zůstanou zamčeny."} disabled={noOrders} onClick={handleFinishOrder}>Objednáno</Button>
                           </div>
                         }
+                      </>
+                    }
                     {
                       data.pizzaDay.state === PizzaDayState.ORDERED &&
-                        <div>
-                          <p>Pizzy byly objednány uživatelem {data.pizzaDay.creator}</p>
+                      <>
+                        <p>Pizzy byly objednány uživatelem <strong>{data.pizzaDay.creator}</strong></p>
                         {data.pizzaDay.creator === auth.login &&
-                            <div>
-                              <Button className='danger mb-3' title="Vrátí stav do předchozího kroku (před objednáním)." onClick={async () => {
-                                await lockPizzaDay();
-                              }}>Vrátit do "uzamčeno"</Button>
-                              <Button className='danger mb-3' style={{ marginLeft: '20px' }} title="Nastaví stav na 'Doručeno' - koncový stav." onClick={async () => {
-                                await finishDelivery({ body: { bankAccount: settings?.bankAccount, bankAccountHolder: settings?.holderName } });
-                              }}>Doručeno</Button>
+                          <div className="mb-4">
+                            <Button variant="secondary" title="Vrátí stav do předchozího kroku (před objednáním)." onClick={handleReturnToLocked}>Vrátit do "uzamčeno"</Button>
+                            <Button title="Nastaví stav na 'Doručeno' - koncový stav." onClick={handleFinishDelivery}>Doručeno</Button>
                           </div>
                         }
-                        </div>
+                      </>
                     }
                     {
                       data.pizzaDay.state === PizzaDayState.DELIVERED &&
-                        <div>
-                          <p>{`Pizzy byly doručeny.${myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''}`}</p>
-                        </div>
+                      <p>
+                        Pizzy byly doručeny.
+                        {myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''}
+                      </p>
                     }
-                    </div>
                     {data.pizzaDay.state === PizzaDayState.CREATED &&
-                      <div style={{ textAlign: 'center' }}>
+                      <div className="pizza-order-form">
                         <SelectSearch
                           search={true}
                           options={pizzaSuggestions}
-                          placeholder='Vyhledat pizzu...'
+                          placeholder='Vyhledat pizzu nebo salát...'
                           onChange={handlePizzaChange}
                           onBlur={_ => { }}
                           onFocus={_ => { }}
                         />
-                        Poznámka: <input ref={pizzaPoznamkaRef} className='mt-3' type="text" onKeyDown={event => {
+                        <div className="d-flex align-items-center gap-2">
+                          <label style={{ color: 'var(--luncher-text-secondary)' }}>Poznámka:</label>
+                          <input ref={pizzaPoznamkaRef} type="text" placeholder="Např. bez cibule" onKeyDown={event => {
                             if (event.key === 'Enter') {
                               handlePizzaPoznamkaChange();
                             }
                             event.stopPropagation();
                           }} />
                           <Button
-                          style={{ marginLeft: '20px' }}
                             disabled={!myOrder?.pizzaList?.length}
                             onClick={handlePizzaPoznamkaChange}>
                             Uložit
                           </Button>
                         </div>
+                      </div>
                     }
                     <PizzaOrderList state={data.pizzaDay.state!} orders={data.pizzaDay.orders!} onDelete={handlePizzaDelete} creator={data.pizzaDay.creator!} />
-                    {
-                      data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr ?
-                        <div className='qr-code'>
-                          <h3>QR platba</h3>
-                          <img src={`/api/qr?login=${auth.login}`} alt='QR kód' />
-                        </div> : null
+                  </>
                 }
               </div>
             }
           </div>
+          <PendingPayments
+            pendingQrs={data.pendingQrs}
+            login={auth.login}
+            onDismissed={async () => {
+              const response = await getData({ query: { dayIndex } });
+              if (response.data) {
+                setData(response.data);
               }
+            }}
+          />
+        </>
       </div>
-        </> || "Jejda, něco se nám nepovedlo :("}
-      </div>
-      <FallingLeaves
+      {/* <FallingLeaves
         numLeaves={LEAF_PRESETS.NORMAL}
         leafVariants={LEAF_COLOR_THEMES.AUTUMN}
-      />
+      /> */}
       <Footer />
       <NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
+      {payForAllLocationKey && data && (
+        <PayForAllModal
+          isOpen
+          onClose={() => setPayForAllLocationKey(null)}
+          locationKey={payForAllLocationKey}
+          locationName={getLunchChoiceName(payForAllLocationKey)}
+          locationChoices={data.choices[payForAllLocationKey as keyof typeof data.choices] as LocationLunchChoicesMap}
+          menu={food?.[payForAllLocationKey as Restaurant]}
+          payerLogin={auth.login ?? ''}
+          bankAccount={settings?.bankAccount ?? ''}
+          bankAccountHolder={settings?.holderName ?? ''}
+        />
+      )}
     </div>
   );
 }

client/src/AppRoutes.tsx

@@ -1,27 +1,40 @@
 import { Routes, Route } from "react-router-dom";
 import { ProvideSettings } from "./context/settings";
-// import Snowfall from "react-snowfall";
+import FlyingButterflies, { BUTTERFLY_PRESETS } from "./FlyingButterflies";
+import "./FlyingButterflies.scss";
 import { ToastContainer } from "react-toastify";
 import { SocketContext, socket } from "./context/socket";
 import StatsPage from "./pages/StatsPage";
+import OrderGroupsPage from "./pages/OrderGroupsPage";
+import SuggestionsPage from "./pages/SuggestionsPage";
 import App from "./App";
 
 export const STATS_URL = '/stats';
+export const OBJEDNANI_URL = '/objednani';
+export const NAVRHY_URL = '/navrhy';
 
 export default function AppRoutes() {
     return (
         <Routes>
             <Route path={STATS_URL} element={<StatsPage />} />
+            <Route path={NAVRHY_URL} element={
+                <ProvideSettings>
+                    <SuggestionsPage />
+                </ProvideSettings>
+            } />
+            <Route path={OBJEDNANI_URL} element={
+                <ProvideSettings>
+                    <SocketContext.Provider value={socket}>
+                        <OrderGroupsPage />
+                        <ToastContainer />
+                    </SocketContext.Provider>
+                </ProvideSettings>
+            } />
             <Route path="/" element={
                 <ProvideSettings>
                     <SocketContext.Provider value={socket}>
                         <>
-                            {/* <Snowfall style={{
-                                zIndex: 2,
-                                position: 'fixed',
-                                width: '100vw',
-                                height: '100vh'
-                            }} /> */}
+                            <FlyingButterflies numButterflies={BUTTERFLY_PRESETS.NORMAL} />
                             <App />
                         </>
                         <ToastContainer />

client/src/FlyingButterflies.scss

@@ -0,0 +1,749 @@
+.flying-butterflies {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 2;
+  overflow: hidden;
+
+  // V režimu hraní herní vrstva zachytává kliknutí, aby se nedalo omylem
+  // překliknout do objednávek. V režimu objednávání propouští vše dál (none).
+  &.playing {
+    pointer-events: auto;
+  }
+}
+
+// Přepínač režimu hraní / objednávání
+.butterfly-mode-toggle {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  z-index: 7;
+  pointer-events: auto;
+  padding: 8px 14px;
+  border: none;
+  border-radius: 999px;
+  background: rgba(33, 37, 41, 0.88);
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.9rem;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(4px);
+  transition: background 0.15s ease, transform 0.08s ease;
+
+  &:hover { background: rgba(33, 37, 41, 1); }
+  &:active { transform: scale(0.96); }
+
+  &.playing {
+    background: #2f9e44;
+    &:hover { background: #2b8a3e; }
+  }
+}
+
+// Vrstva herních prvků (síťka, škůdci, pavučina) – skrývá se v režimu objednávání
+.butterfly-game-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.butterfly-scene {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+
+  // Vnější element – pozici a natočení nastavuje JS přes transform
+  > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 34px;
+    height: 34px;
+    will-change: transform;
+  }
+}
+
+// Vnitřní element se sprite motýla – máchá křídly (scaleX kolem svislé osy těla)
+.butterfly-sprite {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  animation: butterfly-flap 0.45s ease-in-out infinite;
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
+
+  // Vzácný zlatý motýl – WOW: silná pulzující zlatá záře + duhový nádech
+  &.golden {
+    animation:
+      butterfly-flap 0.35s ease-in-out infinite,
+      butterfly-golden-glow 1.4s ease-in-out infinite;
+  }
+}
+
+@keyframes butterfly-golden-glow {
+  0%,
+  100% {
+    filter:
+      saturate(1.15) hue-rotate(0deg)
+      drop-shadow(0 0 5px rgba(255, 215, 80, 0.85))
+      drop-shadow(0 0 10px rgba(255, 180, 40, 0.55))
+      drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
+  }
+  50% {
+    filter:
+      saturate(1.4) hue-rotate(-16deg)
+      drop-shadow(0 0 13px rgba(255, 235, 130, 1))
+      drop-shadow(0 0 24px rgba(255, 190, 50, 0.95))
+      drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
+  }
+}
+
+@keyframes butterfly-flap {
+  0%,
+  100% {
+    transform: scaleX(1);
+  }
+  50% {
+    transform: scaleX(0.35);
+  }
+}
+
+// Korunovaný motýl (anti-bot inspekce) – nepřehlédnutelná duhová záře
+.butterfly-sprite.royal {
+  animation: butterfly-flap 0.35s ease-in-out infinite, butterfly-royal-glow 0.9s ease-in-out infinite;
+}
+
+@keyframes butterfly-royal-glow {
+  0%, 100% {
+    filter: drop-shadow(0 0 8px rgba(255, 215, 80, 1)) drop-shadow(0 0 16px rgba(120, 200, 255, 0.8));
+  }
+  50% {
+    filter: drop-shadow(0 0 16px rgba(255, 120, 220, 1)) drop-shadow(0 0 28px rgba(120, 255, 160, 0.9));
+  }
+}
+
+// Černá můra – zlověstný tmavý nádech
+.butterfly-sprite.moth {
+  filter: drop-shadow(0 0 4px rgba(120, 60, 160, 0.6)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+  animation: butterfly-flap 0.5s ease-in-out infinite, butterfly-moth-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes butterfly-moth-pulse {
+  0%, 100% { filter: drop-shadow(0 0 4px rgba(120, 60, 160, 0.5)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
+  50% { filter: drop-shadow(0 0 9px rgba(150, 40, 40, 0.8)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
+}
+
+// --- Havěť (ptáci a vosy) ----------------------------------------------------
+
+.butterfly-critter {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+  will-change: transform;
+  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
+  z-index: 3;
+
+  // Vosa jde zaklikat (plácačka)
+  &.wasp {
+    pointer-events: auto;
+    cursor: crosshair;
+    touch-action: none;
+  }
+
+  // Netopýr jde zahnat klikáním
+  &.bat {
+    pointer-events: auto;
+    cursor: crosshair;
+    touch-action: none;
+    z-index: 5;
+    filter: drop-shadow(0 0 6px rgba(60, 40, 90, 0.8));
+  }
+
+  &.hit {
+    animation: butterfly-stalker-hit 0.18s ease-out;
+  }
+}
+
+// Pavučina přes síťku – blokuje chytání, dokud ji hráč nestrhne
+.butterfly-web {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 120px;
+  height: 120px;
+  background-image: url(/spider.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: auto;
+  cursor: crosshair;
+  touch-action: none;
+  z-index: 6;
+  opacity: 0.9;
+  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
+
+  &.hit {
+    animation: butterfly-stalker-hit 0.15s ease-out;
+  }
+}
+
+// --- Síťka na chytání --------------------------------------------------------
+
+.butterfly-net {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: auto;
+  cursor: grab;
+  z-index: 4;
+  will-change: transform;
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
+  transition: filter 0.15s ease;
+  touch-action: none;
+  user-select: none;
+
+  &.grabbed {
+    cursor: grabbing;
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
+  }
+
+  // Prémiová (zlatá) síťka – zlatá záře a jemný pulz
+  &.premium {
+    filter: drop-shadow(0 0 8px rgba(255, 200, 60, 0.85)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
+    animation: butterfly-net-glow 1.3s ease-in-out infinite;
+  }
+
+  // Protržená síťka – nedá se chytat
+  &.torn {
+    cursor: not-allowed;
+    opacity: 0.9;
+    filter: drop-shadow(0 2px 3px rgba(150, 30, 30, 0.35));
+  }
+
+  &.catch-pop {
+    animation: butterfly-net-pop 0.3s ease-out;
+  }
+
+  &.stung {
+    animation: butterfly-net-stung 0.4s ease-in-out;
+  }
+
+  // Záblesk při chycení černé můry (chyba)
+  &.moth-hit {
+    animation: butterfly-net-moth 0.4s ease-out;
+  }
+
+  // Omráčená síťka (po žihnutí vosou) – po celou dobu, kdy nejde chytat.
+  // Má přednost před grabbed kurzorem.
+  &.stunned {
+    cursor: not-allowed !important;
+    animation: butterfly-net-dizzy 0.9s ease-in-out infinite;
+  }
+}
+
+// Zešednutí + červený nádech, ať je jasné, že síťka teď nechytá.
+// NEanimujeme transform (ten řídí JS inline) – jen filter.
+@keyframes butterfly-net-dizzy {
+  0%,
+  100% {
+    filter: grayscale(0.7) brightness(0.85) drop-shadow(0 0 5px rgba(217, 72, 15, 0.55));
+  }
+  50% {
+    filter: grayscale(0.85) brightness(0.8) drop-shadow(0 0 9px rgba(217, 72, 15, 0.8));
+  }
+}
+
+@keyframes butterfly-net-pop {
+  0% {
+    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1);
+  }
+  40% {
+    filter: drop-shadow(0 2px 8px rgba(120, 200, 120, 0.7)) brightness(1.25);
+  }
+  100% {
+    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1);
+  }
+}
+
+@keyframes butterfly-net-glow {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.6)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
+  }
+  50% {
+    filter: drop-shadow(0 0 12px rgba(255, 220, 100, 1)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
+  }
+}
+
+// Pozn.: NEanimujeme transform – ten nastavuje JS inline (poloha síťky).
+// Žihnutí vosou proto naznačíme jen červeným zábleskem filtru.
+@keyframes butterfly-net-stung {
+  0%,
+  100% {
+    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1);
+  }
+  30% {
+    filter: drop-shadow(0 0 8px rgba(217, 72, 15, 0.85)) brightness(1.1) hue-rotate(-15deg);
+  }
+}
+
+// Prchavé texty (chycení, protržení, žihnutí)
+.butterfly-catch-fx,
+.butterfly-tear-fx,
+.butterfly-sting-fx {
+  position: fixed;
+  margin: -12px 0 0 10px;
+  font-weight: 700;
+  font-size: 1.1rem;
+  pointer-events: none;
+  z-index: 5;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
+  animation: butterfly-catch-float 0.8s ease-out forwards;
+}
+
+.butterfly-catch-fx {
+  color: #2f9e44;
+
+  &.golden {
+    color: #e0a200;
+    font-size: 1.35rem;
+    text-shadow: 0 0 6px rgba(255, 220, 100, 0.9), 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+
+  &.moth {
+    color: #c92a2a;
+    font-size: 1.35rem;
+    text-shadow: 0 0 6px rgba(120, 40, 160, 0.7), 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+}
+
+@keyframes butterfly-net-moth {
+  0%, 100% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1); }
+  30% { filter: drop-shadow(0 0 9px rgba(150, 40, 160, 0.9)) brightness(0.8); }
+}
+
+.butterfly-tear-fx {
+  color: #c92a2a;
+}
+
+.butterfly-sting-fx {
+  color: #d9480f;
+}
+
+@keyframes butterfly-catch-float {
+  0% {
+    opacity: 0;
+    transform: translateY(0) scale(0.9);
+  }
+  20% {
+    opacity: 1;
+    transform: translateY(-6px) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-40px) scale(1);
+  }
+}
+
+// --- HUD: počítadlo, mince, úroveň, kombo, hlášky ----------------------------
+
+.butterfly-hud {
+  position: fixed;
+  bottom: 16px;
+  left: 16px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  // HUD sám o sobě neblokuje klikání; interaktivní je jen tlačítko opravy
+  pointer-events: none;
+}
+
+.butterfly-shop-open {
+  pointer-events: auto;
+  align-self: flex-start;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 999px;
+  background: #f59e1e;
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.85rem;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  transition: background 0.15s ease, transform 0.08s ease;
+
+  &:hover { background: #e8890a; }
+  &:active { transform: scale(0.96); }
+}
+
+.butterfly-counter {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.88);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(4px);
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #333;
+  user-select: none;
+  pointer-events: auto;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+
+  &:hover {
+    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
+  }
+
+  &.bump {
+    animation: butterfly-counter-bump 0.3s ease-out;
+  }
+}
+
+.butterfly-counter-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.butterfly-counter-icon,
+.butterfly-coin-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.butterfly-counter-icon {
+  background-image: url(/butterfly-orange.svg);
+}
+
+.butterfly-coin-icon {
+  background-image: url(/coin.svg);
+  margin-left: 4px;
+}
+
+.butterfly-counter-value {
+  min-width: 1ch;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.butterfly-level {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.butterfly-level-title {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #6b5b2e;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 180px;
+}
+
+.butterfly-progress {
+  width: 100%;
+  height: 5px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.butterfly-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #ffcb3d, #e0a200);
+  border-radius: 999px;
+  transition: width 0.4s ease;
+}
+
+.butterfly-pests {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.butterfly-pest {
+  color: #868e96;
+  font-variant-numeric: tabular-nums;
+
+  &.warn {
+    color: #d9480f;
+  }
+
+  &.ok {
+    color: #2f9e44;
+  }
+}
+
+.butterfly-torn-note {
+  margin-top: 4px;
+  font-size: 0.76rem;
+  font-weight: 600;
+  color: #c92a2a;
+}
+
+.butterfly-action-btn {
+  margin-top: 4px;
+  padding: 5px 10px;
+  border: none;
+  border-radius: 999px;
+  background: #1c7ed6;
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.82rem;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  transition: background 0.15s ease, transform 0.1s ease;
+
+  &:hover:not(:disabled) {
+    background: #1971c2;
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.96);
+  }
+
+  &:disabled {
+    background: #adb5bd;
+    cursor: not-allowed;
+  }
+
+  &.danger {
+    background: #c92a2a;
+
+    &:hover:not(:disabled) {
+      background: #e03131;
+    }
+  }
+}
+
+// --- Bossové (zloděj / housenka) ---------------------------------------------
+
+.butterfly-stalker {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 56px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: auto;
+  cursor: crosshair;
+  user-select: none;
+  touch-action: none;
+  z-index: 6;
+  will-change: transform;
+
+  &.hit .stalker-emoji {
+    animation: butterfly-stalker-hit 0.18s ease-out;
+  }
+}
+
+.stalker-emoji {
+  font-size: 44px;
+  line-height: 1;
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
+}
+
+.stalker-hp {
+  width: 46px;
+  height: 6px;
+  margin-bottom: 3px;
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 999px;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.stalker-hp-inner {
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(90deg, #ff6b6b, #c92a2a);
+  border-radius: 999px;
+  transition: width 0.1s linear;
+}
+
+@keyframes butterfly-stalker-hit {
+  0% { transform: scale(1) rotate(0); }
+  50% { transform: scale(0.82) rotate(-8deg); filter: brightness(1.6); }
+  100% { transform: scale(1) rotate(0); }
+}
+
+// Efekt při plácnutí vosy
+.butterfly-swat-fx {
+  position: fixed;
+  margin: -14px 0 0 -6px;
+  font-size: 1.4rem;
+  pointer-events: none;
+  z-index: 5;
+  animation: butterfly-catch-float 0.8s ease-out forwards;
+}
+
+.butterfly-combo {
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(224, 162, 0, 0.92);
+  color: #fff;
+  font-weight: 800;
+  font-size: 0.9rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  animation: butterfly-counter-bump 0.3s ease-out;
+}
+
+.butterfly-flash {
+  max-width: 260px;
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: rgba(33, 37, 41, 0.92);
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.85rem;
+  line-height: 1.25;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
+  animation: butterfly-flash-in 0.25s ease-out;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+@keyframes butterfly-flash-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes butterfly-counter-bump {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1.18);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+// Ohleduplnost k uživatelům, kteří nechtějí pohyb
+@media (prefers-reduced-motion: reduce) {
+  .butterfly-sprite,
+  .butterfly-sprite.golden {
+    animation: none;
+  }
+
+  .butterfly-net.catch-pop,
+  .butterfly-net.premium,
+  .butterfly-net.stung,
+  .butterfly-net.stunned,
+  .butterfly-counter.bump,
+  .butterfly-combo {
+    animation: none;
+  }
+
+  // Bez animace aspoň staticky ukážeme, že síťka je omráčená
+  .butterfly-net.stunned {
+    filter: grayscale(0.8) brightness(0.82) drop-shadow(0 0 6px rgba(217, 72, 15, 0.7));
+  }
+
+  // Zlatý motýl bez animace aspoň staticky září
+  .butterfly-sprite.golden {
+    filter: saturate(1.3) drop-shadow(0 0 8px rgba(255, 215, 80, 0.95)) drop-shadow(0 0 16px rgba(255, 190, 50, 0.7));
+  }
+}
+
+// --- Anti-bot inspekce a vězení ---------------------------------------------
+
+.butterfly-inspection {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 8;
+  pointer-events: none;
+  max-width: 92vw;
+  padding: 10px 16px;
+  border-radius: 999px;
+  background: rgba(28, 126, 214, 0.95);
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.95rem;
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
+  animation: butterfly-flash-in 0.25s ease-out;
+}
+
+.butterfly-jail {
+  position: fixed;
+  inset: 0;
+  z-index: 6;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Svislé mříže přes celou obrazovku
+.butterfly-jail-bars {
+  position: absolute;
+  inset: 0;
+  background:
+    repeating-linear-gradient(
+      90deg,
+      rgba(20, 22, 28, 0.92) 0px,
+      rgba(20, 22, 28, 0.92) 14px,
+      rgba(20, 22, 28, 0) 14px,
+      rgba(20, 22, 28, 0) 70px
+    );
+  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6);
+}
+
+.butterfly-jail-note {
+  position: relative;
+  text-align: center;
+  padding: 22px 26px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
+  max-width: 90vw;
+
+  .jail-emoji { font-size: 2.4rem; }
+  .jail-title { font-weight: 800; font-size: 1.2rem; color: #c92a2a; margin-top: 4px; }
+  .jail-sub { margin-top: 6px; font-size: 0.95rem; color: #333; font-variant-numeric: tabular-nums; }
+  .jail-hint { margin-top: 8px; font-size: 0.8rem; color: #868e96; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .butterfly-sprite.royal { animation: none; }
+}

client/src/Login.css

@@ -1,13 +1,89 @@
-.login {
-  height: 100%;
+.login-page {
+  min-height: 100vh;
   display: flex;
-  flex-direction: column;
-  text-align: center;
+  align-items: center;
   justify-content: center;
+  background: var(--luncher-bg);
+  padding: 24px;
 }
 
-.login-inner {
+.login-card {
+  background: var(--luncher-bg-card);
+  border-radius: var(--luncher-radius-xl);
+  box-shadow: var(--luncher-shadow-lg);
+  padding: 48px;
+  max-width: 420px;
+  width: 100%;
+  text-align: center;
+  border: 1px solid var(--luncher-border-light);
+}
+
+.login-logo {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--luncher-text);
+  margin-bottom: 8px;
+  letter-spacing: -0.5px;
+}
+
+.login-subtitle {
+  color: var(--luncher-text-secondary);
+  font-size: 1rem;
+  margin-bottom: 40px;
+  line-height: 1.5;
+}
+
+.login-form {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  gap: 20px;
+}
+
+.login-form label {
+  display: block;
+  text-align: left;
+  font-weight: 500;
+  color: var(--luncher-text);
+  margin-bottom: 8px;
+}
+
+.login-form .hint {
+  font-size: 0.85rem;
+  color: var(--luncher-text-muted);
+  margin-top: 8px;
+  text-align: left;
+  line-height: 1.5;
+}
+
+.login-form input[type="text"] {
+  width: 100%;
+  padding: 14px 18px;
+  font-size: 1rem;
+  border: 2px solid var(--luncher-border);
+  border-radius: var(--luncher-radius-sm);
+  background: var(--luncher-bg);
+  color: var(--luncher-text);
+  transition: var(--luncher-transition);
+}
+
+.login-form input[type="text"]:hover {
+  border-color: var(--luncher-text-muted);
+}
+
+.login-form input[type="text"]:focus {
+  border-color: var(--luncher-primary);
+  box-shadow: 0 0 0 3px var(--luncher-primary-light);
+  outline: none;
+}
+
+.login-form input[type="text"]::placeholder {
+  color: var(--luncher-text-muted);
+}
+
+.login-form .btn {
+  width: 100%;
+  padding: 14px 24px;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 8px;
 }

client/src/Login.tsx

@@ -26,7 +26,7 @@ export default function Login() {
   }, [auth]);
 
   const doLogin = useCallback(async () => {
-    const length = loginRef?.current?.value.length && loginRef.current.value.replace(/\s/g, '').length
+    const length = loginRef?.current?.value.length && loginRef.current.value.replaceAll(/\s/g, '').length
     if (length) {
       const response = await login({ body: { login: loginRef.current?.value } });
       if (response.data) {
@@ -36,21 +36,35 @@ export default function Login() {
   }, [auth]);
 
   if (!auth?.login) {
-    return <div className='login'>
-      <h1>Luncher</h1>
-      <h4 style={{ marginBottom: "50px" }}>Aplikace pro profesionální management obědů</h4>
-      <div className='login-inner'>
-        <p style={{ fontSize: "12px", marginTop: "10px" }}>
-          Zobrazované jméno by mělo být vaše jméno nebo přezdívka, pod kterou vás kolegové dokáží snadno identifikovat. Jméno je možné kdykoli změnit.
-        </p>
-        Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' onKeyDown={event => {
+    return (
+      <div className='login-page'>
+        <div className='login-card'>
+          <h1 className='login-logo'>Luncher</h1>
+          <p className='login-subtitle'>Aplikace pro profesionální management obědů</p>
+          <div className='login-form'>
+            <div>
+              <label htmlFor="login-input">Zobrazované jméno</label>
+              <input
+                id="login-input"
+                ref={loginRef}
+                type='text'
+                placeholder="Např. Jan Novák"
+                onKeyDown={event => {
                   if (event.key === 'Enter') {
                     doLogin()
                   }
-        }} />
-        <Button onClick={doLogin} style={{ marginTop: "20px" }}>Uložit</Button>
+                }}
+              />
+              <p className='hint'>
+                Zadejte jméno nebo přezdívku, pod kterou vás kolegové snadno identifikují.
+                Jméno je možné kdykoli změnit.
+              </p>
+            </div>
+            <Button onClick={doLogin}>Pokračovat</Button>
           </div>
         </div>
+      </div>
+    );
   }
   return <div>Neplatný stav</div>
 }

client/src/Utils.tsx

@@ -75,14 +75,14 @@ export const getDayOfWeekIndex = (date: Date) => {
 
 /** Vrátí první pracovní den v týdnu předaného data. */
 export function getFirstWorkDayOfWeek(date: Date) {
-    const firstDay = new Date(date.getTime());
+    const firstDay = new Date(date);
     firstDay.setDate(date.getDate() - getDayOfWeekIndex(date));
     return firstDay;
 }
 
 /** Vrátí poslední pracovní den v týdnu předaného data. */
 export function getLastWorkDayOfWeek(date: Date) {
-    const lastDay = new Date(date.getTime());
+    const lastDay = new Date(date);
     lastDay.setDate(date.getDate() + (4 - getDayOfWeekIndex(date)));
     return lastDay;
 }
@@ -104,3 +104,22 @@ export function getHumanDate(date: Date) {
     let currentYear = date.getFullYear();
     return `${currentDay}.${currentMonth}.${currentYear}`;
 }
+
+/** Převede datum ve formátu YYYY-MM-DD na DD.MM.YYYY */
+export function formatDateString(dateString: string): string {
+    const [year, month, day] = dateString.split('-');
+    return `${day}.${month}.${year}`;
+}
+
+/**
+ * Očistí zprávu (účel platby) pro QR platbu – musí odpovídat serverové logice (qr.ts):
+ * transliteruje diakritiku na základní písmena (š→s, č→c, ...), odstraní znaky mimo
+ * ISO 8859-1 a hvězdičku (oddělovač polí v QR platbě) a ořízne na max. 60 znaků.
+ */
+export function sanitizeQrMessage(message: string): string {
+    const sanitized = message
+        .normalize('NFD').replace(/[\u0300-\u036f]/g, '') // diakritika → základní písmeno
+        .replace(/[^\x00-\xff]/g, '')                      // znaky mimo ISO 8859-1
+        .replace(/\*/g, '');                               // '*' je v QR platbě oddělovač
+    return sanitized.length > 60 ? sanitized.substring(0, 60) : sanitized;
+}

client/src/components/Footer.tsx

@@ -1,12 +1,12 @@
-import { Navbar } from "react-bootstrap";
-
 export default function Footer() {
-    return <Navbar className="text-light" variant='dark' expand="lg" style={{
-        display: "flex",
-        justifyContent: "center",
-        marginTop: "auto", // Pushne footer na spodek
-        flexShrink: 0 // Zabrání zmenšování při malém obsahu
-    }}>
-        <span>🄯 Žádná práva nevyhrazena. TODO a zdrojové kódy dostupné <a href="https://gitea.melancholik.eu/mates/Luncher">zde</a>.</span>
-    </Navbar >
+    return (
+        <footer className="footer">
+            <span>
+                Zdroj. kódy dostupné na{' '}
+                <a href="https://gitea.melancholik.eu/mates/Luncher" target="_blank" rel="noopener noreferrer">
+                    Gitea
+                </a>
+            </span>
+        </footer>
+    );
 }

client/src/components/Header.tsx

@@ -1,41 +1,62 @@
 import { useEffect, useState } from "react";
-import { Navbar, Nav, NavDropdown } from "react-bootstrap";
+import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap";
 import { useAuth } from "../context/auth";
 import SettingsModal from "./modals/SettingsModal";
-import { useSettings } from "../context/settings";
-import FeaturesVotingModal from "./modals/FeaturesVotingModal";
+import { useSettings, ThemePreference } from "../context/settings";
+import HuePicker from "./HuePicker";
 import PizzaCalculatorModal from "./modals/PizzaCalculatorModal";
 import RefreshMenuModal from "./modals/RefreshMenuModal";
+import GenerateQrModal from "./modals/GenerateQrModal";
+import GenerateMockDataModal from "./modals/GenerateMockDataModal";
+import ClearMockDataModal from "./modals/ClearMockDataModal";
 import { useNavigate } from "react-router";
-import { STATS_URL } from "../AppRoutes";
-import { FeatureRequest, getVotes, updateVote } from "../../../types";
+import { STATS_URL, OBJEDNANI_URL, NAVRHY_URL } from "../AppRoutes";
+import { LunchChoices, getChangelogs } from "../../../types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import { formatDateString } from "../Utils";
 
-export default function Header() {
+const LAST_SEEN_CHANGELOG_KEY = "lastChangelogDate";
+
+const IS_DEV = process.env.NODE_ENV === 'development';
+
+type Props = {
+    choices?: LunchChoices;
+    dayIndex?: number;
+};
+
+export default function Header({ choices, dayIndex }: Props) {
     const auth = useAuth();
     const settings = useSettings();
     const navigate = useNavigate();
     const [settingsModalOpen, setSettingsModalOpen] = useState<boolean>(false);
-    const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false);
     const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false);
     const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false);
-    const [featureVotes, setFeatureVotes] = useState<FeatureRequest[] | undefined>([]);
+    const [changelogModalOpen, setChangelogModalOpen] = useState<boolean>(false);
+    const [changelogEntries, setChangelogEntries] = useState<Record<string, string[]>>({});
+    const [qrModalOpen, setQrModalOpen] = useState<boolean>(false);
+    const [generateMockModalOpen, setGenerateMockModalOpen] = useState<boolean>(false);
+    const [clearMockModalOpen, setClearMockModalOpen] = useState<boolean>(false);
+
+    const effectiveDark = settings?.effectiveDark ?? false;
 
     useEffect(() => {
-        if (auth?.login) {
-            getVotes().then(response => {
-                setFeatureVotes(response.data);
-            })
-        }
+        if (!auth?.login) return;
+        const lastSeen = localStorage.getItem(LAST_SEEN_CHANGELOG_KEY) ?? undefined;
+        getChangelogs({ query: lastSeen ? { since: lastSeen } : {} }).then(response => {
+            const entries = response.data;
+            if (!entries || Object.keys(entries).length === 0) return;
+            setChangelogEntries(entries);
+            setChangelogModalOpen(true);
+            const newestDate = Object.keys(entries).sort((a, b) => b.localeCompare(a))[0];
+            localStorage.setItem(LAST_SEEN_CHANGELOG_KEY, newestDate);
+        });
     }, [auth?.login]);
 
     const closeSettingsModal = () => {
         setSettingsModalOpen(false);
     }
 
-    const closeVotingModal = () => {
-        setVotingModalOpen(false);
-    }
-
     const closePizzaModal = () => {
         setPizzaModalOpen(false);
     }
@@ -44,6 +65,23 @@ export default function Header() {
         setRefreshMenuModalOpen(false);
     }
 
+    const closeQrModal = () => {
+        setQrModalOpen(false);
+    }
+
+    const handleQrMenuClick = () => {
+        if (!settings?.bankAccount || !settings?.holderName) {
+            alert('Pro generování QR kódů je nutné mít v nastavení vyplněné číslo účtu a jméno držitele účtu.');
+            return;
+        }
+        setQrModalOpen(true);
+    }
+
+    const toggleTheme = () => {
+        const newTheme: ThemePreference = effectiveDark ? 'light' : 'dark';
+        settings?.setThemePreference(newTheme);
+    }
+
     const isValidInteger = (str: string) => {
         str = str.trim();
         if (!str) {
@@ -54,19 +92,19 @@ export default function Header() {
         return n !== Infinity && String(n) === str && n >= 0;
     }
 
-    const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => {
+    const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => {
         if (bankAccountNumber) {
             try {
                 // Validace kódu banky
-                if (bankAccountNumber.indexOf('/') < 0) {
-                    throw Error("Číslo účtu neobsahuje lomítko/kód banky")
+                if (!bankAccountNumber.includes('/')) {
+                    throw new Error("Číslo účtu neobsahuje lomítko/kód banky")
                 }
                 const split = bankAccountNumber.split("/");
                 if (split[1].length !== 4) {
-                    throw Error("Kód banky musí být 4 číslice")
+                    throw new Error("Kód banky musí být 4 číslice")
                 }
                 if (!isValidInteger(split[1])) {
-                    throw Error("Kód banky není číslo")
+                    throw new Error("Kód banky není číslo")
                 }
 
                 // Validace čísla a předčíslí
@@ -76,7 +114,7 @@ export default function Header() {
                     cislo = cislo.replace('-', '');
                 }
                 if (!isValidInteger(cislo)) {
-                    throw Error("Předčíslí nebo číslo účtu neobsahuje pouze číslice")
+                    throw new Error("Předčíslí nebo číslo účtu neobsahuje pouze číslice")
                 }
                 if (cislo.length < 16) {
                     cislo = cislo.padStart(16, '0');
@@ -89,7 +127,7 @@ export default function Header() {
                     sum += Number.parseInt(char) * weight
                 }
                 if (sum % 11 !== 0) {
-                    throw Error("Číslo účtu je neplatné")
+                    throw new Error("Číslo účtu je neplatné")
                 }
             } catch (e: any) {
                 alert(e.message)
@@ -99,31 +137,56 @@ export default function Header() {
         settings?.setBankAccountNumber(bankAccountNumber);
         settings?.setBankAccountHolderName(bankAccountHolderName);
         settings?.setHideSoupsOption(hideSoupsOption);
+        if (themePreference) {
+            settings?.setThemePreference(themePreference);
+        }
         closeSettingsModal();
     }
 
-    const saveFeatureVote = async (option: FeatureRequest, active: boolean) => {
-        await updateVote({ body: { option, active } });
-        const votes = [...featureVotes || []];
-        if (active) {
-            votes.push(option);
-        } else {
-            votes.splice(votes.indexOf(option), 1);
-        }
-        setFeatureVotes(votes);
-    }
-
     return <Navbar variant='dark' expand="lg">
         <Navbar.Brand href="/">Luncher</Navbar.Brand>
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="nav">
+                <button
+                    className="theme-toggle"
+                    onClick={toggleTheme}
+                    title={effectiveDark ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
+                    aria-label="Přepnout světlý/tmavý režim"
+                >
+                    <FontAwesomeIcon icon={effectiveDark ? faSun : faMoon} />
+                </button>
+                <HuePicker
+                    accentHue={settings?.accentHue ?? 142}
+                    isDark={effectiveDark}
+                    onChange={hue => settings?.setAccentHue(hue)}
+                />
                 <NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
                     <NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</NavDropdown.Item>
-                    <NavDropdown.Item onClick={() => setVotingModalOpen(true)}>Hlasovat o nových funkcích</NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => navigate(NAVRHY_URL)}>Návrhy na vylepšení</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item>
+                    <NavDropdown.Item onClick={handleQrMenuClick}>Generování QR kódů</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => navigate(OBJEDNANI_URL)}>Objednání</NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => {
+                        getChangelogs().then(response => {
+                            const entries = response.data ?? {};
+                            setChangelogEntries(entries);
+                            setChangelogModalOpen(true);
+                            const dates = Object.keys(entries).sort((a, b) => b.localeCompare(a));
+                            if (dates.length > 0) {
+                                localStorage.setItem(LAST_SEEN_CHANGELOG_KEY, dates[0]);
+                            }
+                        });
+                    }}>Novinky</NavDropdown.Item>
+                    {IS_DEV && (
+                        <>
+                            <NavDropdown.Divider />
+                            <NavDropdown.Item onClick={() => setGenerateMockModalOpen(true)}>🔧 Generovat mock data</NavDropdown.Item>
+                            <NavDropdown.Item onClick={() => setClearMockModalOpen(true)}>🔧 Smazat mock data</NavDropdown.Item>
+                        </>
+                    )}
                     <NavDropdown.Divider />
                     <NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item>
                 </NavDropdown>
@@ -131,7 +194,54 @@ export default function Header() {
         </Navbar.Collapse>
         <SettingsModal isOpen={settingsModalOpen} onClose={closeSettingsModal} onSave={saveSettings} />
         <RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} />
-        <FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} />
         <PizzaCalculatorModal isOpen={pizzaModalOpen} onClose={closePizzaModal} />
+        {choices && settings?.bankAccount && settings?.holderName && (
+            <GenerateQrModal
+                isOpen={qrModalOpen}
+                onClose={closeQrModal}
+                choices={choices}
+                bankAccount={settings.bankAccount}
+                bankAccountHolder={settings.holderName}
+            />
+        )}
+        {IS_DEV && (
+            <>
+                <GenerateMockDataModal
+                    isOpen={generateMockModalOpen}
+                    onClose={() => setGenerateMockModalOpen(false)}
+                    currentDayIndex={dayIndex}
+                />
+                <ClearMockDataModal
+                    isOpen={clearMockModalOpen}
+                    onClose={() => setClearMockModalOpen(false)}
+                    currentDayIndex={dayIndex}
+                />
+            </>
+        )}
+        <Modal show={changelogModalOpen} onHide={() => setChangelogModalOpen(false)} size="lg">
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Novinky</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {Object.keys(changelogEntries).sort((a, b) => b.localeCompare(a)).map(date => (
+                    <div key={date}>
+                        <strong>{formatDateString(date)}</strong>
+                        <ul>
+                            {changelogEntries[date].map((item, index) => (
+                                <li key={index}>{item}</li>
+                            ))}
+                        </ul>
+                    </div>
+                ))}
+                {Object.keys(changelogEntries).length === 0 && (
+                    <p>Žádné novinky.</p>
+                )}
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={() => setChangelogModalOpen(false)}>
+                    Zavřít
+                </Button>
+            </Modal.Footer>
+        </Modal>
     </Navbar>
 }

client/src/components/HuePicker.scss

@@ -0,0 +1,141 @@
+.hue-picker-dropdown {
+  display: flex;
+  align-items: center;
+
+  .dropdown-toggle {
+    background: transparent !important;
+    border: none !important;
+    color: var(--luncher-navbar-text) !important;
+    padding: 8px 12px;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    border-radius: var(--luncher-radius-sm);
+    transition: var(--luncher-transition);
+
+    &::after {
+      display: none;
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1) !important;
+      transform: scale(1.1);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
+    }
+  }
+}
+
+.hue-picker-panel {
+  padding: 0 !important;
+  min-width: 240px;
+
+  .hue-picker-inner {
+    padding: 14px 16px;
+  }
+
+  .hue-picker-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--luncher-text-secondary);
+    margin-bottom: 12px;
+  }
+}
+
+.hue-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(
+    to right,
+    hsl(0 70% 50%), hsl(30 70% 50%), hsl(60 70% 50%), hsl(90 70% 50%),
+    hsl(120 70% 50%), hsl(150 70% 50%), hsl(180 70% 50%), hsl(210 70% 50%),
+    hsl(240 70% 50%), hsl(270 70% 50%), hsl(300 70% 50%), hsl(330 70% 50%), hsl(360 70% 50%)
+  );
+  outline: none;
+  cursor: pointer;
+  margin-bottom: 14px;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: white;
+    border: 2px solid rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    transition: transform 0.15s ease;
+
+    &:hover {
+      transform: scale(1.15);
+    }
+  }
+
+  &::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: white;
+    border: 2px solid rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.hue-presets {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 14px;
+
+  .hue-swatch {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    padding: 0;
+    transition: transform 0.15s ease, border-color 0.15s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+
+    &:hover {
+      transform: scale(1.15);
+    }
+
+    &.active {
+      border-color: var(--luncher-text);
+      transform: scale(1.1);
+    }
+  }
+}
+
+.hue-preview {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-top: 4px;
+  border-top: 1px solid var(--luncher-border);
+
+  .hue-preview-chip {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--luncher-radius-sm);
+    flex-shrink: 0;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    transition: background 0.2s ease;
+  }
+
+  span {
+    font-size: 0.8rem;
+    color: var(--luncher-text-secondary);
+  }
+}

client/src/components/HuePicker.tsx

@@ -0,0 +1,71 @@
+import { Dropdown } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPalette } from '@fortawesome/free-solid-svg-icons';
+import './HuePicker.scss';
+
+const PRESETS = [
+  { hue: 142, label: 'Zelená' },
+  { hue: 217, label: 'Modrá' },
+  { hue: 263, label: 'Fialová' },
+  { hue: 0, label: 'Červená' },
+  { hue: 28, label: 'Oranžová' },
+  { hue: 340, label: 'Růžová' },
+];
+
+type Props = {
+  accentHue: number;
+  isDark: boolean;
+  onChange: (hue: number) => void;
+};
+
+function swatchColor(hue: number, isDark: boolean): string {
+  return `hsl(${hue} 70% ${isDark ? 55 : 38}%)`;
+}
+
+export default function HuePicker({ accentHue, isDark, onChange }: Props) {
+  return (
+    <Dropdown align="end" autoClose="outside" className="hue-picker-dropdown">
+      <Dropdown.Toggle
+        as="button"
+        className="theme-toggle"
+        aria-label="Barva zvýraznění"
+        title="Barva zvýraznění"
+      >
+        <FontAwesomeIcon icon={faPalette} />
+      </Dropdown.Toggle>
+      <Dropdown.Menu className="hue-picker-panel">
+        <div className="hue-picker-inner">
+          <div className="hue-picker-label">Barva zvýraznění</div>
+          <input
+            type="range"
+            min={0}
+            max={360}
+            value={accentHue}
+            onChange={e => onChange(parseInt(e.target.value, 10))}
+            className="hue-slider"
+            aria-label="Odstín barvy zvýraznění"
+          />
+          <div className="hue-presets">
+            {PRESETS.map(p => (
+              <button
+                key={p.hue}
+                className={`hue-swatch${accentHue === p.hue ? ' active' : ''}`}
+                style={{ background: swatchColor(p.hue, isDark) }}
+                title={p.label}
+                onClick={() => onChange(p.hue)}
+                aria-label={p.label}
+              />
+            ))}
+          </div>
+          <div className="hue-preview">
+            <div
+              className="hue-preview-chip"
+              style={{ background: swatchColor(accentHue, isDark) }}
+            />
+            <span>Aktuální barva zvýraznění</span>
+          </div>
+        </div>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}

client/src/components/Loader.tsx

@@ -9,11 +9,13 @@ type Props = {
 }
 
 function Loader(props: Readonly<Props>) {
-  return <div className='loader'>
-    <h1>{props.title ?? 'Prosím čekejte...'}</h1>
-    <FontAwesomeIcon icon={props.icon} className={`loader-icon mb-3 ` + (props.animation ?? '')} />
-    <p>{props.description}</p>
+  return (
+    <div className='loader'>
+      <FontAwesomeIcon icon={props.icon} className={`loader-icon ${props.animation ?? ''}`} />
+      <h2 className='loader-title'>{props.title ?? 'Prosím čekejte...'}</h2>
+      <p className='loader-description'>{props.description}</p>
     </div>
+  );
 }
 
 export default Loader;

client/src/components/OrderProgress.scss

@@ -0,0 +1,71 @@
+.tracking-progress {
+    display: flex;
+    align-items: flex-start;
+    max-width: 400px;
+
+    .tracking-step {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        flex: 1;
+        min-width: 64px;
+
+        .tracking-dot {
+            position: relative;
+            z-index: 1;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: var(--luncher-border, #ced4da);
+        }
+
+        .tracking-label {
+            margin-top: 2px;
+            font-size: 0.7em;
+            color: var(--luncher-text-muted, #6c757d);
+            white-space: nowrap;
+        }
+
+        // Spojnice k předchozímu kroku – vede od středu této tečky doleva ke středu předchozí.
+        // Tečka má průměr 12px, takže její střed je 6px od levého okraje segmentu.
+        &:not(:first-child)::before {
+            content: '';
+            position: absolute;
+            top: 5px;
+            left: calc(6px - 100%);
+            width: 100%;
+            height: 2px;
+            background: var(--luncher-border, #ced4da);
+        }
+
+        &.done {
+            .tracking-dot {
+                background: var(--bs-success, #198754);
+            }
+
+            &:not(:first-child)::before {
+                background: var(--bs-success, #198754);
+            }
+        }
+
+        &.active .tracking-label {
+            font-weight: 600;
+            color: inherit;
+        }
+    }
+
+    // Pulzování aktivního kroku, dokud sledování běží
+    &.live .tracking-step.active .tracking-dot {
+        animation: tracking-pulse 2s ease-in-out infinite;
+    }
+}
+
+@keyframes tracking-pulse {
+    0%, 100% {
+        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5);
+    }
+    50% {
+        box-shadow: 0 0 0 5px rgba(25, 135, 84, 0);
+    }
+}

client/src/components/OrderProgress.tsx

@@ -0,0 +1,153 @@
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { TrackingProvider } from '../../../types';
+import './OrderProgress.scss';
+
+const STEPS = ['Přijato', 'Příprava', 'Vyzvedávání', 'Na cestě', 'Doručeno'];
+
+/** Lidský název rozvozové služby do tooltipu. */
+export const PROVIDER_LABEL: Record<TrackingProvider, string> = {
+    bolt: 'Bolt Food',
+    wolt: 'Wolt',
+};
+
+/**
+ * Známé stavy objednávky z Bolt API → index kroku ve stepperu.
+ * Pozor: waiting_delivery znamená "jídlo čeká v podniku na vyzvednutí",
+ * nikoli "na cestě" — tu signalizuje až stav kurýra (picked_up apod.).
+ * Krok „Vyzvedávání" je vyhrazen pro kombinaci „kurýr u podniku + jídlo hotové"
+ * (viz logika níže), samotný order_state ho neudělí — jinak bychom hlásili
+ * vyzvedávání i když se ještě peče (chování, na které si Bolt sám občas stěžuje).
+ */
+const BOLT_STATE_TO_STEP: Record<string, number> = {
+    created: 0,
+    pending: 0,
+    waiting_acceptance: 0,
+    accepted: 0,
+    waiting_preparation: 0,
+    preparing: 1,
+    waiting_delivery: 1,
+    ready_for_pickup: 1,
+    waiting_courier: 1,
+    waiting_pickup: 1,
+    picked_up: 3,
+    in_delivery: 3,
+    delivering: 3,
+    heading_to_client: 3,
+    delivered: 4,
+    finished: 4,
+};
+
+/** Stavy kurýra z Bolt API → index kroku. Kurýr u podniku ještě neznamená "na cestě". */
+const BOLT_COURIER_STATE_TO_STEP: Record<string, number> = {
+    matched: 0,
+    accepted: 0,
+    heading_to_provider: 1,
+    arrived_to_provider: 1,
+    picked_up: 3,
+    heading_to_client: 3,
+    delivering: 3,
+    arrived_to_client: 3,
+    delivered: 4,
+};
+
+/**
+ * Známé stavy objednávky z Wolt tracking API → index kroku ve stepperu.
+ * Pozor: Wolt hlásí stav podniku, ne rozvozu — "ready" (jídlo hotové) zůstává
+ * i celou dobu, co kurýr objednávku veze. Kroky „Vyzvedávání" a „Na cestě" proto
+ * neurčuje status, ale odvozený stav kurýra (viz trackingProviders.ts).
+ */
+const WOLT_STATE_TO_STEP: Record<string, number> = {
+    received: 0,
+    acknowledged: 0,
+    confirmed: 0,
+    waiting: 0,
+    production: 1,
+    preparing: 1,
+    ready: 1,
+    picked_up: 3,
+    transport: 3,
+    delivering: 3,
+    delivered: 4,
+};
+
+/** Popis odvozeného stavu kurýra u Woltu do tooltipu. */
+const WOLT_COURIER_INFO: Record<string, string> = {
+    assigned: 'kurýr přiřazen',
+    delivering: 'kurýr veze objednávku',
+    delivering_other: 'kurýr veze objednávku, ale nejdřív doručuje jinou',
+};
+
+/** Stavy, ve kterých už jídlo čeká připravené na kurýra. */
+const PICKUP_READY_STATES: Record<TrackingProvider, Set<string>> = {
+    bolt: new Set(['waiting_delivery', 'ready_for_pickup', 'waiting_courier', 'waiting_pickup']),
+    wolt: new Set(['ready']),
+};
+
+/** Neznámé stavy se mapují heuristicky podle klíčových slov. */
+function stepForOrderState(provider: TrackingProvider, state: string): number | 'cancelled' {
+    const s = state.toLowerCase();
+    const known = provider === 'wolt' ? WOLT_STATE_TO_STEP : BOLT_STATE_TO_STEP;
+    if (s in known) return known[s];
+    if (/cancel|reject|fail/.test(s)) return 'cancelled';
+    if (/delivered|finished/.test(s)) return 4;
+    if (/accept|pending|created|received/.test(s)) return 0;
+    if (/^waiting|prepar|ready|cook|production/.test(s)) return 1;
+    if (/picked|delivering|heading_to_client|transport/.test(s)) return 3;
+    return 0;
+}
+
+function stepForCourierState(provider: TrackingProvider, state?: string): number {
+    if (!state) return 0;
+    const s = state.toLowerCase();
+    // Wolt má jen odvozené stavy: 'assigned' o kroku nic neříká, 'delivering'
+    // i 'delivering_other' znamenají, že kurýr naši objednávku už veze
+    if (provider === 'wolt') return s.startsWith('delivering') ? 3 : 0;
+    if (s in BOLT_COURIER_STATE_TO_STEP) return BOLT_COURIER_STATE_TO_STEP[s];
+    if (/picked|client|delivering|transport/.test(s)) return 3;
+    return 0;
+}
+
+interface Props {
+    /** Rozvozová služba, ze které stav pochází */
+    provider: TrackingProvider;
+    /** Raw stav objednávky (Bolt order_state, Wolt status) */
+    state: string;
+    /** Raw stav kurýra (Bolt courier.state, Wolt 'assigned') */
+    courierState?: string;
+    /** Zda sledování stále běží (skupina má trackingCode) */
+    tracking: boolean;
+}
+
+/** Mini progress stepper se stavem objednávky u rozvozové služby. */
+export default function OrderProgress({ provider, state, courierState, tracking }: Props) {
+    const label = PROVIDER_LABEL[provider] ?? provider;
+    const orderStep = stepForOrderState(provider, state);
+    if (orderStep === 'cancelled') {
+        return <small className="text-danger">Objednávka {label} byla zrušena</small>;
+    }
+    // Stav kurýra může krok jen zpřesnit dopředu (např. waiting_delivery + picked_up → Na cestě)
+    let step = Math.max(orderStep, stepForCourierState(provider, courierState));
+    // Vyzvedávání = kurýr u podniku a jídlo skutečně hotové. Sám arrived_to_provider
+    // (bez toho, že by jídlo bylo hotové) nestačí — viz komentář u BOLT_STATE_TO_STEP.
+    const courierAtProvider = provider === 'wolt'
+        ? !!courierState
+        : courierState?.toLowerCase() === 'arrived_to_provider';
+    const foodReadyForPickup = PICKUP_READY_STATES[provider]?.has(state.toLowerCase());
+    if (step < 3 && courierAtProvider && foodReadyForPickup) step = 2;
+    const courierInfo = provider === 'wolt'
+        ? WOLT_COURIER_INFO[courierState ?? ''] ?? 'kurýr přiřazen'
+        : `kurýr: ${courierState}`;
+    const rawInfo = courierState ? `${state} / ${courierInfo}` : state;
+    return (
+        <OverlayTrigger overlay={<Tooltip>Stav z {label}: {rawInfo}</Tooltip>}>
+            <div className={`tracking-progress${tracking && step < 4 ? ' live' : ''}`}>
+                {STEPS.map((stepLabel, i) => (
+                    <div key={stepLabel} className={`tracking-step${i <= step ? ' done' : ''}${i === step ? ' active' : ''}`}>
+                        <div className="tracking-dot" />
+                        <div className="tracking-label">{stepLabel}</div>
+                    </div>
+                ))}
+            </div>
+        </OverlayTrigger>
+    );
+}

client/src/components/PendingPayments.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button, Modal } from 'react-bootstrap';
+import { PendingQr, dismissQr } from '../../../types';
+import { formatDateString } from '../Utils';
+import ConfirmModal from './modals/ConfirmModal';
+
+type Props = {
+    pendingQrs?: PendingQr[];
+    login?: string;
+    // Zavolá se po úspěšném potvrzení platby, aby si rodič mohl znovu načíst data
+    onDismissed?: () => void | Promise<void>;
+};
+
+// Sekce "Nevyřízené platby" – zobrazí QR kódy neuhrazených plateb přihlášeného uživatele
+// včetně tlačítka "Zaplatil jsem" a potvrzovacího dialogu. Sdíleno hlavní stránkou i stránkou objednávek.
+// Při příchodu nových nevyřízených plateb se navíc automaticky otevře modální dialog,
+// aby si uživatel QR kódů určitě všiml (často si jich nevšimnou, protože sekce je dole na stránce).
+export default function PendingPayments({ pendingQrs, login, onDismissed }: Readonly<Props>) {
+    const [dismissQrId, setDismissQrId] = useState<string | null>(null);
+    const [modalOpen, setModalOpen] = useState(false);
+
+    // ID QR kódů, pro které už byl v rámci tohoto načtení stránky automaticky zobrazen
+    // modální dialog. Drží se jen v paměti (ne v sessionStorage), takže se při každém
+    // ručním přenačtení stránky vynuluje a dialog se znovu otevře, dokud uživatel platby
+    // neuhradí. Zároveň se nepřekrývá při pouhém obnovení dat či příchodu už zobrazeného QR.
+    const autoShownQrIds = useRef<Set<string>>(new Set());
+
+    const qrIdsKey = (pendingQrs ?? []).map(qr => qr.id).join(',');
+
+    // Automaticky otevřeme modální dialog, jakmile přijdou nové (dosud nezobrazené) platby.
+    useEffect(() => {
+        const ids = (pendingQrs ?? []).map(qr => qr.id);
+        if (ids.length === 0) return;
+        const unseen = ids.filter(id => !autoShownQrIds.current.has(id));
+        if (unseen.length > 0) {
+            setModalOpen(true);
+            unseen.forEach(id => autoShownQrIds.current.add(id));
+        }
+    }, [qrIdsKey, pendingQrs]);
+
+    if (!pendingQrs || pendingQrs.length === 0) return null;
+
+    // Vykreslení jednoho QR kódu i s tlačítkem "Zaplatil jsem" – sdíleno sekcí i modálem.
+    const renderQr = (qr: PendingQr) => (
+        <div key={qr.id} className='qr-code mb-3'>
+            <p>
+                <strong>{formatDateString(qr.date)}</strong> — {qr.creator} ({qr.totalPrice / 100} Kč)
+                {qr.purpose && <><br /><span className="text-muted">{qr.purpose}</span></>}
+            </p>
+            <img src={`/api/qr?login=${login}&id=${qr.id}`} alt='QR kód' />
+            <div className='mt-2'>
+                <Button variant="success" onClick={() => setDismissQrId(qr.id)}>
+                    Zaplatil jsem
+                </Button>
+            </div>
+        </div>
+    );
+
+    return (
+        <>
+            <div className='pizza-section fade-in mt-4'>
+                <h3>Nevyřízené platby</h3>
+                <p>
+                    Máte neuhrazené platby.{' '}
+                    <Button variant="link" className="p-0 align-baseline" onClick={() => setModalOpen(true)}>
+                        Zobrazit QR kódy
+                    </Button>
+                </p>
+                {pendingQrs.map(renderQr)}
+            </div>
+            <Modal show={modalOpen} onHide={() => setModalOpen(false)} centered scrollable>
+                <Modal.Header closeButton>
+                    <Modal.Title>Nevyřízené platby</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <p>Máte neuhrazené platby. Naskenujte QR kód pro zaplacení.</p>
+                    {pendingQrs.map(renderQr)}
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={() => setModalOpen(false)}>
+                        Zavřít
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+            <ConfirmModal
+                isOpen={dismissQrId !== null}
+                title="Potvrzení platby"
+                message="Opravdu jste zaplatili? QR kód bude odstraněn."
+                confirmLabel="Zaplatil jsem"
+                confirmVariant="success"
+                onClose={() => setDismissQrId(null)}
+                onConfirm={async () => {
+                    if (!dismissQrId) return;
+                    const id = dismissQrId;
+                    setDismissQrId(null);
+                    await dismissQr({ body: { id } });
+                    await onDismissed?.();
+                }}
+            />
+        </>
+    );
+}

client/src/components/PizzaOrderList.tsx

@@ -15,29 +15,43 @@ export default function PizzaOrderList({ state, orders, onDelete, creator }: Rea
     }
 
     if (!orders?.length) {
-        return <p className="mt-3"><i>Zatím žádné objednávky...</i></p>
+        return <p className="mt-4" style={{ color: 'var(--luncher-text-muted)', fontStyle: 'italic' }}>Zatím žádné objednávky...</p>
     }
 
     const total = orders.reduce((total, order) => total + order.totalPrice, 0);
 
-    return <Table className="mt-3" striped bordered hover>
-        <thead>
+    return (
+        <div className="mt-4" style={{
+            background: 'var(--luncher-bg-card)',
+            borderRadius: 'var(--luncher-radius-lg)',
+            overflow: 'hidden',
+            border: '1px solid var(--luncher-border-light)',
+            boxShadow: 'var(--luncher-shadow)'
+        }}>
+            <Table className="mb-0" style={{ color: 'var(--luncher-text)' }}>
+                <thead style={{ background: 'var(--luncher-primary-light)' }}>
                     <tr>
-                <th>Jméno</th>
-                <th>Objednávka</th>
-                <th>Poznámka</th>
-                <th>Příplatek</th>
-                <th>Cena</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Jméno</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Objednávka</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Poznámka</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Příplatek</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none', textAlign: 'right' }}>Cena</th>
                     </tr>
                 </thead>
                 <tbody>
-            {orders.map(order => <tr key={order.customer}>
+                    {orders.map(order => <tr key={order.customer} style={{ borderColor: 'var(--luncher-border-light)' }}>
                         <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
                     </tr>)}
-            <tr style={{ fontWeight: 'bold' }}>
-                <td colSpan={4}>Celkem</td>
-                <td>{`${total} Kč`}</td>
+                    <tr style={{
+                        fontWeight: 700,
+                        background: 'var(--luncher-bg-hover)',
+                        borderTop: '2px solid var(--luncher-border)'
+                    }}>
+                        <td colSpan={4} style={{ padding: '16px 20px', border: 'none' }}>Celkem</td>
+                        <td style={{ padding: '16px 20px', border: 'none', textAlign: 'right', color: 'var(--luncher-primary)' }}>{`${total / 100} Kč`}</td>
                     </tr>
                 </tbody>
             </Table>
+        </div>
+    );
 }

client/src/components/PizzaOrderRow.tsx

@@ -26,7 +26,7 @@ export default function PizzaOrderRow({ creator, order, state, onDelete, onFeeMo
         <td>{order.customer}</td>
         <td>{order.pizzaList!.map<React.ReactNode>(pizzaOrder =>
             <span key={pizzaOrder.name}>
-                {`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price} Kč)`}
+                {`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price / 100} Kč)`}
                 {auth?.login === order.customer && state === PizzaDayState.CREATED &&
                     <span title='Odstranit'>
                         <FontAwesomeIcon onClick={() => {
@@ -38,10 +38,10 @@ export default function PizzaOrderRow({ creator, order, state, onDelete, onFeeMo
             .reduce((prev, curr, index) => [prev, <br key={`br-${index}`} />, curr])}
         </td>
         <td style={{ maxWidth: "200px" }}>{order.note ?? '-'}</td>
-        <td style={{ maxWidth: "200px" }}>{order.fee?.price ? `${order.fee.price} Kč${order.fee.text ? ` (${order.fee.text})` : ''}` : '-'}</td>
+        <td style={{ maxWidth: "200px" }}>{order.fee?.price ? `${order.fee.price / 100} Kč${order.fee.text ? ` (${order.fee.text})` : ''}` : '-'}</td>
         <td>
-            {order.totalPrice} Kč{auth?.login === creator && state === PizzaDayState.CREATED && <span title='Nastavit příplatek'><FontAwesomeIcon onClick={() => { setIsFeeModalOpen(true) }} className='action-icon' icon={faMoneyBill1} /></span>}
+            {order.totalPrice / 100} Kč{auth?.login === creator && state === PizzaDayState.CREATED && <span title='Nastavit příplatek'><FontAwesomeIcon onClick={() => { setIsFeeModalOpen(true) }} className='action-icon' icon={faMoneyBill1} /></span>}
         </td>
-        <PizzaAdditionalFeeModal customerName={order.customer} isOpen={isFeeModalOpen} onClose={() => setIsFeeModalOpen(false)} onSave={saveFees} initialValues={{ text: order.fee?.text, price: order.fee?.price?.toString() }} />
+        <PizzaAdditionalFeeModal customerName={order.customer} isOpen={isFeeModalOpen} onClose={() => setIsFeeModalOpen(false)} onSave={saveFees} initialValues={{ text: order.fee?.text, price: order.fee?.price != null ? String(order.fee.price / 100) : undefined }} />
     </>
 }

client/src/components/modals/AddSuggestionModal.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { Modal, Button, Form } from "react-bootstrap";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (title: string, description: string) => Promise<void>;
+};
+
+/** Modální dialog pro přidání nového návrhu na vylepšení. */
+export default function AddSuggestionModal({ isOpen, onClose, onSubmit }: Readonly<Props>) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const reset = () => {
+    setTitle("");
+    setDescription("");
+  };
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  const handleSubmit = async () => {
+    if (!title.trim() || !description.trim()) return;
+    setSubmitting(true);
+    try {
+      await onSubmit(title.trim(), description.trim());
+      reset();
+      onClose();
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal show={isOpen} onHide={handleClose} size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title><h2>Nový návrh na vylepšení</h2></Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form.Group className="mb-3">
+          <Form.Label>Název</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Stručný název návrhu"
+            value={title}
+            maxLength={120}
+            onChange={e => setTitle(e.target.value)}
+            onKeyDown={e => e.stopPropagation()}
+            autoFocus
+          />
+          <Form.Text className="text-muted">Krátký, výstižný název navrhované úpravy.</Form.Text>
+        </Form.Group>
+        <Form.Group className="mb-3">
+          <Form.Label>Popis</Form.Label>
+          <Form.Control
+            as="textarea"
+            rows={5}
+            placeholder="Detailní popis navrhované úpravy, řešení apod."
+            value={description}
+            onChange={e => setDescription(e.target.value)}
+            onKeyDown={e => e.stopPropagation()}
+          />
+        </Form.Group>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={handleClose}>
+          Storno
+        </Button>
+        <Button onClick={handleSubmit} disabled={submitting || !title.trim() || !description.trim()}>
+          Přidat
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}

client/src/components/modals/BoltSimulationModal.tsx

@@ -0,0 +1,174 @@
+import { useState } from "react";
+import { Modal, Button, Form, Alert, Badge } from "react-bootstrap";
+import {
+    OrderGroup,
+    simulateBoltTracking, advanceBoltTracking, setBoltTrackingState,
+    pollBoltTracking, stopBoltTrackingSimulation,
+} from "../../../../types";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    group: OrderGroup;
+};
+
+/** Nabídka stavů pro ruční nastavení (odpovídá mapování v OrderProgress). */
+const STATE_OPTIONS: { key: string; label: string; order_state: string; courier_state?: string }[] = [
+    { key: 'accepted', label: 'Přijato', order_state: 'accepted' },
+    { key: 'preparing', label: 'Příprava', order_state: 'preparing' },
+    { key: 'waiting_delivery', label: 'Příprava (čeká na vyzvednutí)', order_state: 'waiting_delivery' },
+    { key: 'pickup', label: 'Vyzvedávání', order_state: 'waiting_delivery', courier_state: 'arrived_to_provider' },
+    { key: 'in_delivery', label: 'Na cestě', order_state: 'in_delivery', courier_state: 'heading_to_client' },
+    { key: 'delivered', label: 'Doručeno', order_state: 'delivered' },
+    { key: 'cancelled', label: 'Zrušeno', order_state: 'cancelled' },
+];
+
+/** Modální dialog pro simulaci sledování Bolt objednávky (pouze DEV). */
+export default function BoltSimulationModal({ isOpen, onClose, group }: Readonly<Props>) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [info, setInfo] = useState<string | null>(null);
+    const [manualKey, setManualKey] = useState<string>('preparing');
+
+    const running = !!group.trackingCode;
+
+    /** Obecný runner — spustí akci, ošetří chybu a krátce zobrazí výsledek. */
+    const run = async (action: () => Promise<{ error?: unknown }>, okMsg: string) => {
+        setError(null);
+        setInfo(null);
+        setLoading(true);
+        try {
+            const response = await action();
+            if (response.error) {
+                setError((response.error as any)?.error || 'Akce simulace selhala');
+            } else {
+                setInfo(okMsg);
+            }
+        } catch (e: any) {
+            setError(e?.message || 'Akce simulace selhala');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleStart = () => run(
+        () => simulateBoltTracking({ body: { groupId: group.id } }),
+        'Simulace spuštěna — objednávka přijata.',
+    );
+    const handleAdvance = () => run(
+        () => advanceBoltTracking({ body: { groupId: group.id } }),
+        'Posunuto na další krok.',
+    );
+    const handleSetState = () => {
+        const opt = STATE_OPTIONS.find(o => o.key === manualKey);
+        if (!opt) return;
+        return run(
+            () => setBoltTrackingState({
+                body: {
+                    groupId: group.id,
+                    order_state: opt.order_state,
+                    courier_state: opt.courier_state,
+                },
+            }),
+            `Stav nastaven na „${opt.label}".`,
+        );
+    };
+    const handlePoll = () => run(
+        () => pollBoltTracking(),
+        'Scheduler spuštěn (poll proběhl).',
+    );
+    const handleStop = () => run(
+        () => stopBoltTrackingSimulation({ body: { groupId: group.id } }),
+        'Simulace ukončena.',
+    );
+
+    const handleClose = () => {
+        setError(null);
+        setInfo(null);
+        onClose();
+    };
+
+    return (
+        <Modal show={isOpen} onHide={handleClose}>
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Simulace sledování Bolt</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <Alert variant="warning">
+                    <strong>DEV režim</strong> – simuluje sledování objednávky Bolt pro skupinu{' '}
+                    <strong>{group.name}</strong> bez reálné objednávky.
+                </Alert>
+
+                {error && (
+                    <Alert variant="danger" onClose={() => setError(null)} dismissible>
+                        {error}
+                    </Alert>
+                )}
+                {info && (
+                    <Alert variant="success" onClose={() => setInfo(null)} dismissible>
+                        {info}
+                    </Alert>
+                )}
+
+                <p className="mb-2">
+                    Stav simulace:{' '}
+                    {running
+                        ? <Badge bg="success">běží{group.trackingOrderState ? ` — ${group.trackingOrderState}` : ''}</Badge>
+                        : <Badge bg="secondary">neběží</Badge>}
+                </p>
+
+                {!running ? (
+                    <p className="text-muted">
+                        Spuštěním se skupina přepne do stavu „Objednáno", přiřadí se simulovaný
+                        sledovací token a provede se první poll (stav „Přijato").
+                    </p>
+                ) : (
+                    <>
+                        <p className="text-muted">
+                            Krokuj objednávku tlačítkem <strong>Další krok</strong> (Přijato → Příprava →
+                            Vyzvedávání → Na cestě → Doručeno) nebo nastav konkrétní stav ručně:
+                        </p>
+                        <Form.Group className="mb-3 d-flex gap-2 align-items-end">
+                            <div className="flex-grow-1">
+                                <Form.Label>Konkrétní stav</Form.Label>
+                                <Form.Select
+                                    value={manualKey}
+                                    onChange={e => setManualKey(e.target.value)}
+                                >
+                                    {STATE_OPTIONS.map(o => (
+                                        <option key={o.key} value={o.key}>{o.label}</option>
+                                    ))}
+                                </Form.Select>
+                            </div>
+                            <Button variant="outline-primary" onClick={handleSetState} disabled={loading}>
+                                Nastavit
+                            </Button>
+                        </Form.Group>
+                    </>
+                )}
+            </Modal.Body>
+            <Modal.Footer className="d-flex flex-wrap gap-2">
+                {!running ? (
+                    <Button variant="primary" onClick={handleStart} disabled={loading}>
+                        {loading ? 'Spouštím…' : 'Spustit simulaci'}
+                    </Button>
+                ) : (
+                    <>
+                        <Button variant="success" onClick={handleAdvance} disabled={loading}>
+                            Další krok
+                        </Button>
+                        <Button variant="outline-secondary" onClick={handlePoll} disabled={loading}>
+                            Aktualizovat teď
+                        </Button>
+                        <Button variant="outline-danger" onClick={handleStop} disabled={loading}>
+                            Ukončit simulaci
+                        </Button>
+                    </>
+                )}
+                <Button variant="secondary" onClick={handleClose} disabled={loading}>
+                    Zavřít
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/ButterflyLeaderboardModal.scss

@@ -0,0 +1,142 @@
+.butterfly-mystats {
+  margin-bottom: 16px;
+  padding: 12px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, rgba(255, 203, 61, 0.16), rgba(224, 162, 0, 0.08));
+  border: 1px solid rgba(224, 162, 0, 0.35);
+}
+
+.butterfly-mystats-title {
+  font-weight: 700;
+  color: #6b5b2e;
+  margin-bottom: 8px;
+}
+
+.butterfly-mystats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  gap: 8px;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .v {
+    font-size: 1.3rem;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+
+    &.gold {
+      color: #e0a200;
+    }
+  }
+
+  .l {
+    font-size: 0.72rem;
+    color: #6c757d;
+  }
+}
+
+.butterfly-leaderboard-heading {
+  font-weight: 700;
+  margin: 12px 0 8px;
+}
+
+.butterfly-achievements {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 6px;
+}
+
+.butterfly-achievement {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.04);
+  font-size: 0.78rem;
+  opacity: 0.55;
+  filter: grayscale(1);
+
+  &.unlocked {
+    opacity: 1;
+    filter: none;
+    background: rgba(255, 203, 61, 0.18);
+  }
+
+  .ach-icon { flex: 0 0 auto; }
+  .ach-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.butterfly-leaderboard {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.butterfly-leaderboard-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.03);
+
+  &.me {
+    background: rgba(255, 203, 61, 0.22);
+    border: 1px solid rgba(224, 162, 0, 0.5);
+    font-weight: 700;
+  }
+}
+
+.butterfly-leaderboard-rank {
+  flex: 0 0 auto;
+  width: 28px;
+  text-align: center;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.butterfly-leaderboard-name {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.butterfly-leaderboard-title {
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: #6b5b2e;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.butterfly-leaderboard-stats {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-variant-numeric: tabular-nums;
+}
+
+.butterfly-leaderboard-golden {
+  color: #e0a200;
+  font-weight: 700;
+}

client/src/components/modals/ButterflyLeaderboardModal.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+import { Modal } from "react-bootstrap";
+import {
+    ButterflyLeaderboardEntry, ButterflyStats, ButterflyAchievement,
+    getButterflyLeaderboard, getButterflyAchievements,
+} from "../../../../types";
+import { useAuth } from "../../context/auth";
+import "./ButterflyLeaderboardModal.scss";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    myStats?: ButterflyStats;
+};
+
+const MEDALS = ['🥇', '🥈', '🥉'];
+
+/** Modální dialog s osobními statistikami, achievementy a týmovým žebříčkem. */
+export default function ButterflyLeaderboardModal({ isOpen, onClose, myStats }: Readonly<Props>) {
+    const auth = useAuth();
+    const [entries, setEntries] = useState<ButterflyLeaderboardEntry[]>();
+    const [achievements, setAchievements] = useState<ButterflyAchievement[]>();
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        let cancelled = false;
+        setLoading(true);
+        Promise.all([
+            getButterflyLeaderboard({ query: { limit: 20 } }).then(r => r.data ?? []).catch(() => []),
+            getButterflyAchievements().then(r => r.data ?? []).catch(() => []),
+        ]).then(([lb, ach]) => {
+            if (cancelled) return;
+            setEntries(lb);
+            setAchievements(ach);
+        }).finally(() => { if (!cancelled) setLoading(false); });
+        return () => { cancelled = true; };
+    }, [isOpen]);
+
+    return (
+        <Modal show={isOpen} onHide={onClose} centered>
+            <Modal.Header closeButton>
+                <Modal.Title>🦋 Chytání motýlků</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {myStats && (
+                    <div className="butterfly-mystats">
+                        <div className="butterfly-mystats-title">
+                            {myStats.level}. {myStats.title}
+                        </div>
+                        <div className="butterfly-mystats-grid">
+                            <div><span className="v">{myStats.caught}</span><span className="l">🦋 chyceno</span></div>
+                            <div><span className="v gold">{myStats.goldenCaught}</span><span className="l">✨ zlatých</span></div>
+                            <div><span className="v">{myStats.coins}</span><span className="l">🪙 mincí</span></div>
+                            <div><span className="v">{myStats.waspsKilled}</span><span className="l">🪰 vos zabito</span></div>
+                            <div><span className="v">{myStats.birdsScared}</span><span className="l">🦅 vyplašeno</span></div>
+                            <div><span className="v">{myStats.thievesDefeated}</span><span className="l">🦹 zlodějů</span></div>
+                            <div><span className="v">{myStats.caterpillarsDefeated}</span><span className="l">🐛 housenek</span></div>
+                        </div>
+                    </div>
+                )}
+
+                {achievements && achievements.length > 0 && (
+                    <>
+                        <h6 className="butterfly-leaderboard-heading">Odznaky</h6>
+                        <div className="butterfly-achievements">
+                            {achievements.map(a => (
+                                <div
+                                    key={a.id}
+                                    className={a.unlocked ? 'butterfly-achievement unlocked' : 'butterfly-achievement'}
+                                    title={a.description}
+                                >
+                                    <span className="ach-icon">{a.unlocked ? '🏅' : '🔒'}</span>
+                                    <span className="ach-title">{a.title}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                <h6 className="butterfly-leaderboard-heading">Žebříček týmu</h6>
+                {loading && <p className="text-center text-muted mb-0">Načítám žebříček…</p>}
+                {!loading && entries && entries.length === 0 && (
+                    <p className="text-center text-muted mb-0">Zatím nikdo nic nechytil. Buď první!</p>
+                )}
+                {!loading && entries && entries.length > 0 && (
+                    <ol className="butterfly-leaderboard">
+                        {entries.map((e, i) => (
+                            <li
+                                key={e.login}
+                                className={e.login === auth?.login ? 'butterfly-leaderboard-row me' : 'butterfly-leaderboard-row'}
+                            >
+                                <span className="butterfly-leaderboard-rank">{MEDALS[i] ?? `${i + 1}.`}</span>
+                                <span className="butterfly-leaderboard-name" title={e.title}>
+                                    {e.login}
+                                    <span className="butterfly-leaderboard-title">{e.level}. {e.title}</span>
+                                </span>
+                                <span className="butterfly-leaderboard-stats">
+                                    <span className="butterfly-leaderboard-caught">{e.caught} 🦋</span>
+                                    {e.goldenCaught > 0 && (
+                                        <span className="butterfly-leaderboard-golden">{e.goldenCaught} ✨</span>
+                                    )}
+                                </span>
+                            </li>
+                        ))}
+                    </ol>
+                )}
+            </Modal.Body>
+        </Modal>
+    );
+}

client/src/components/modals/ButterflyShopModal.scss

@@ -0,0 +1,106 @@
+.shop-balance {
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: #e0a200;
+  margin-left: 8px;
+}
+
+.shop-heading {
+  font-weight: 700;
+  margin: 14px 0 8px;
+}
+
+.butterfly-shop-daily {
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(28, 126, 214, 0.12);
+  border: 1px solid rgba(28, 126, 214, 0.35);
+  margin-bottom: 12px;
+
+  .daily-title {
+    font-weight: 700;
+    font-size: 0.9rem;
+    margin-bottom: 6px;
+  }
+
+  .daily-bar {
+    height: 8px;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 999px;
+    overflow: hidden;
+  }
+
+  .daily-bar-inner {
+    height: 100%;
+    background: linear-gradient(90deg, #4dabf7, #1c7ed6);
+    border-radius: 999px;
+    transition: width 0.3s ease;
+  }
+
+  .daily-status {
+    margin-top: 5px;
+    font-size: 0.8rem;
+    color: #495057;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+.butterfly-shop-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.butterfly-shop-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  background: #fff;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s ease, transform 0.08s ease;
+
+  &:hover:not(:disabled) {
+    background: #f1f3f5;
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.99);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .shop-item-label {
+    display: flex;
+    flex-direction: column;
+    font-weight: 600;
+    font-size: 0.9rem;
+  }
+
+  .shop-item-lvl {
+    display: inline;
+    color: #1c7ed6;
+    font-weight: 700;
+  }
+
+  .shop-item-desc {
+    font-weight: 400;
+    font-size: 0.74rem;
+    color: #868e96;
+  }
+
+  .shop-item-cost {
+    flex: 0 0 auto;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    color: #e0a200;
+    white-space: nowrap;
+  }
+}

client/src/components/modals/ButterflyShopModal.tsx

@@ -0,0 +1,113 @@
+import { Modal } from "react-bootstrap";
+import { ButterflyStats } from "../../../../types";
+import "./ButterflyShopModal.scss";
+
+type UpgradeId = 'net' | 'scarecrow' | 'reinforced';
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    stats?: ButterflyStats;
+    onBuyPremium: () => void;
+    onWaspSpray: () => void;
+    onRepellent: () => void;
+    onBuyInsurance: () => void;
+    onBuyUpgrade: (item: UpgradeId) => void;
+};
+
+// Zrcadlí serverové hodnoty (server/src/butterflies.ts)
+const PREMIUM_BUY_COST = 40;
+const WASP_SPRAY_COST = 25;
+const REPELLENT_COST = 70;
+const INSURANCE_COST = 50;
+const UPGRADE_BASE: Record<UpgradeId, number> = { net: 100, scarecrow: 120, reinforced: 150 };
+const UPGRADE_MAX: Record<UpgradeId, number> = { net: 5, scarecrow: 4, reinforced: 3 };
+const UPGRADE_META: Record<UpgradeId, { icon: string; title: string; desc: string }> = {
+    net: { icon: '🥅', title: 'Větší síťka', desc: 'Zvětší dosah chytání' },
+    scarecrow: { icon: '🐦‍⬛', title: 'Strašák', desc: 'Ptáci přibývají pomaleji' },
+    reinforced: { icon: '🧵', title: 'Zpevněná síťka', desc: 'Rychlejší samo-zašití' },
+};
+
+function upgradeCost(item: UpgradeId, level: number): number {
+    return UPGRADE_BASE[item] * Math.pow(2, level);
+}
+
+/** Obchod: spotřební pomůcky a trvalá vylepšení za mince. */
+export default function ButterflyShopModal({
+    isOpen, onClose, stats, onBuyPremium, onWaspSpray, onRepellent, onBuyInsurance, onBuyUpgrade,
+}: Readonly<Props>) {
+    const coins = stats?.coins ?? 0;
+    const insuranceActive = !!stats && stats.insuranceUntil > Date.now();
+
+    const consumable = (label: string, cost: number, onBuy: () => void, extra?: string) => (
+        <button
+            type="button"
+            className="butterfly-shop-item"
+            onClick={onBuy}
+            disabled={coins < cost}
+        >
+            <span className="shop-item-label">{label}{extra ? ` ${extra}` : ''}</span>
+            <span className="shop-item-cost">{cost} 🪙</span>
+        </button>
+    );
+
+    return (
+        <Modal show={isOpen} onHide={onClose} centered>
+            <Modal.Header closeButton>
+                <Modal.Title>🛒 Obchod <span className="shop-balance">{coins} 🪙</span></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {stats?.daily && (
+                    <div className="butterfly-shop-daily">
+                        <div className="daily-title">🎯 Denní úkol: {stats.daily.title}</div>
+                        <div className="daily-bar">
+                            <div
+                                className="daily-bar-inner"
+                                style={{ width: `${Math.min(100, Math.round((stats.daily.progress / stats.daily.target) * 100))}%` }}
+                            />
+                        </div>
+                        <div className="daily-status">
+                            {stats.daily.done
+                                ? `✅ Splněno (+${stats.daily.reward} 🪙)`
+                                : `${stats.daily.progress}/${stats.daily.target} · odměna ${stats.daily.reward} 🪙`}
+                        </div>
+                    </div>
+                )}
+
+                <h6 className="shop-heading">Pomůcky</h6>
+                <div className="butterfly-shop-list">
+                    {consumable('🪄 Prémiová síťka (60 s)', PREMIUM_BUY_COST, onBuyPremium)}
+                    {consumable('💨 Vosí sprej (vyhubí vosy)', WASP_SPRAY_COST, onWaspSpray)}
+                    {consumable('🦅🚫 Plašič ptáků', REPELLENT_COST, onRepellent)}
+                    {consumable('🛡️ Pojistka proti zloději', INSURANCE_COST, onBuyInsurance, insuranceActive ? '(aktivní)' : '')}
+                </div>
+
+                <h6 className="shop-heading">Trvalá vylepšení</h6>
+                <div className="butterfly-shop-list">
+                    {(Object.keys(UPGRADE_META) as UpgradeId[]).map(item => {
+                        const level = stats?.upgrades?.[item] ?? 0;
+                        const max = UPGRADE_MAX[item];
+                        const maxed = level >= max;
+                        const cost = upgradeCost(item, level);
+                        const meta = UPGRADE_META[item];
+                        return (
+                            <button
+                                key={item}
+                                type="button"
+                                className="butterfly-shop-item upgrade"
+                                onClick={() => onBuyUpgrade(item)}
+                                disabled={maxed || coins < cost}
+                            >
+                                <span className="shop-item-label">
+                                    {meta.icon} {meta.title} <span className="shop-item-lvl">{level}/{max}</span>
+                                    <span className="shop-item-desc">{meta.desc}</span>
+                                </span>
+                                <span className="shop-item-cost">{maxed ? 'MAX' : `${cost} 🪙`}</span>
+                            </button>
+                        );
+                    })}
+                </div>
+            </Modal.Body>
+        </Modal>
+    );
+}

client/src/components/modals/ClearMockDataModal.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { Modal, Button, Form, Alert } from "react-bootstrap";
+import { clearMockData, DayIndex } from "../../../../types";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    currentDayIndex?: number;
+};
+
+const DAY_NAMES = ['Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek'];
+
+/** Hodnota v selectu dne pro smazání dat celého týdne. */
+const WHOLE_WEEK = 'week';
+
+/** Modální dialog pro smazání mock dat (pouze DEV). */
+export default function ClearMockDataModal({ isOpen, onClose, currentDayIndex }: Readonly<Props>) {
+    const [daySelection, setDaySelection] = useState<string>(currentDayIndex !== undefined ? String(currentDayIndex) : '');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState(false);
+
+    const wholeWeek = daySelection === WHOLE_WEEK;
+
+    const handleClear = async () => {
+        setError(null);
+        setLoading(true);
+
+        try {
+            const body: any = {};
+            if (wholeWeek) {
+                body.wholeWeek = true;
+            } else if (daySelection !== '') {
+                body.dayIndex = parseInt(daySelection, 10) as DayIndex;
+            }
+
+            const response = await clearMockData({ body });
+            if (response.error) {
+                setError((response.error as any).error || 'Nastala chyba při mazání dat');
+            } else {
+                setSuccess(true);
+                setTimeout(() => {
+                    onClose();
+                    setSuccess(false);
+                }, 1500);
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba při mazání dat');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        setError(null);
+        setSuccess(false);
+        onClose();
+    };
+
+    // Popis rozsahu mazání pro potvrzovací otázku
+    let scopeLabel: string;
+    if (wholeWeek) {
+        scopeLabel = 'celý týden (pondělí až pátek)';
+    } else if (daySelection !== '') {
+        scopeLabel = DAY_NAMES[parseInt(daySelection, 10)];
+    } else {
+        scopeLabel = 'aktuální den';
+    }
+
+    return (
+        <Modal show={isOpen} onHide={handleClose}>
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Smazat mock data</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {success ? (
+                    <Alert variant="success">
+                        Data byla úspěšně smazána!
+                    </Alert>
+                ) : (
+                    <>
+                        <Alert variant="warning">
+                            <strong>DEV režim</strong> - Tato funkce je dostupná pouze ve vývojovém prostředí.
+                        </Alert>
+
+                        {error && (
+                            <Alert variant="danger" onClose={() => setError(null)} dismissible>
+                                {error}
+                            </Alert>
+                        )}
+
+                        <Form.Group className="mb-3">
+                            <Form.Label>Den</Form.Label>
+                            <Form.Select
+                                value={daySelection}
+                                onChange={e => setDaySelection(e.target.value)}
+                            >
+                                <option value="">Aktuální den</option>
+                                {DAY_NAMES.map((name, index) => (
+                                    <option key={index} value={index}>{name}</option>
+                                ))}
+                                <option value={WHOLE_WEEK}>Celý týden</option>
+                            </Form.Select>
+                        </Form.Group>
+
+                        <p>
+                            Opravdu chcete smazat všechny volby stravování pro <strong>{scopeLabel}</strong>?
+                        </p>
+                        <p className="text-muted">
+                            Tato akce je nevratná.
+                        </p>
+                    </>
+                )}
+            </Modal.Body>
+            <Modal.Footer>
+                {!success && (
+                    <>
+                        <Button variant="secondary" onClick={handleClose} disabled={loading}>
+                            Ne, zrušit
+                        </Button>
+                        <Button variant="danger" onClick={handleClear} disabled={loading}>
+                            {loading ? 'Mažu...' : 'Ano, smazat'}
+                        </Button>
+                    </>
+                )}
+                {success && (
+                    <Button variant="secondary" onClick={handleClose}>
+                        Zavřít
+                    </Button>
+                )}
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/ConfirmModal.tsx

@@ -0,0 +1,26 @@
+import { Modal, Button } from "react-bootstrap";
+
+type Props = {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    confirmVariant?: string;
+    onConfirm: () => void;
+    onClose: () => void;
+};
+
+export default function ConfirmModal({ isOpen, title, message, confirmLabel = "Potvrdit", confirmVariant = "primary", onConfirm, onClose }: Readonly<Props>) {
+    return (
+        <Modal show={isOpen} onHide={onClose}>
+            <Modal.Header closeButton>
+                <Modal.Title>{title}</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>{message}</Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={onClose}>Zrušit</Button>
+                <Button variant={confirmVariant} onClick={onConfirm}>{confirmLabel}</Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/EditGroupFeesModal.tsx

@@ -0,0 +1,193 @@
+import { useState, useEffect } from "react";
+import { Modal, Button, Form, Table, Alert } from "react-bootstrap";
+import { updateGroupFees, OrderGroup, OrderGroupMember } from "../../../../types";
+import { computeFeeShare, computeMemberTotal, countActiveMembers, isActiveMember } from "../../utils/groupFees";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    group: OrderGroup;
+    onSaved: (data: any) => void;
+};
+
+function parseHal(s: string): number {
+    const n = parseFloat(s.replace(',', '.'));
+    return isNaN(n) || n < 0 ? 0 : Math.round(n * 100);
+}
+
+function parsePercent(s: string): number {
+    const n = parseFloat(s.replace(',', '.'));
+    return isNaN(n) || n < 0 ? 0 : Math.round(n);
+}
+
+export default function EditGroupFeesModal({ isOpen, onClose, group, onSaved }: Readonly<Props>) {
+    const [fees, setFees] = useState('');
+    const [shipping, setShipping] = useState('');
+    const [tip, setTip] = useState('');
+    const [discountType, setDiscountType] = useState<'percent' | 'fixed'>('percent');
+    const [discountValue, setDiscountValue] = useState('');
+    const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        setFees(group.fees ? String(group.fees / 100) : '');
+        setShipping(group.shipping ? String(group.shipping / 100) : '');
+        setTip(group.tip ? String(group.tip / 100) : '');
+        setDiscountType((group.discountType as 'percent' | 'fixed') ?? 'percent');
+        setDiscountValue(group.discountValue
+            ? ((group.discountType as string) === 'fixed' ? String(group.discountValue / 100) : String(group.discountValue))
+            : '');
+        setError(null);
+    }, [isOpen, group]);
+
+    const memberEntries = Object.entries(group.members) as [string, OrderGroupMember][];
+    // Poplatky se dělí jen mezi aktivní strávníky (kdo si reálně něco objednal).
+    const activeCount = countActiveMembers(group.members);
+
+    const feesNum = parseHal(fees);
+    const shippingNum = parseHal(shipping);
+    const tipNum = parseHal(tip);
+    const discountNum = discountType === 'percent' ? parsePercent(discountValue) : parseHal(discountValue);
+    const totalFees = feesNum + shippingNum + tipNum;
+    const feeShare = computeFeeShare(totalFees, activeCount);
+    const feeParams = { totalFees, discountType, discountValue: discountNum };
+
+    const handleSave = async () => {
+        setError(null);
+        setLoading(true);
+        try {
+            const res = await updateGroupFees({
+                body: {
+                    id: group.id,
+                    fees: feesNum,
+                    shipping: shippingNum,
+                    tip: tipNum,
+                    discountType: discountNum > 0 ? discountType : undefined,
+                    discountValue: discountNum > 0 ? discountNum : undefined,
+                }
+            });
+            if (res.error) {
+                setError((res.error as any).error || 'Nastala chyba');
+            } else {
+                onSaved(res.data);
+                onClose();
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <Modal show={isOpen} onHide={onClose} size="lg">
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Poplatky skupiny — {group.name}</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {error && (
+                    <Alert variant="danger" onClose={() => setError(null)} dismissible>{error}</Alert>
+                )}
+
+                <div className="d-flex gap-3 flex-wrap mb-3">
+                    <Form.Group>
+                        <Form.Label>Poplatky (Kč)</Form.Label>
+                        <Form.Control
+                            type="number" min={0} step={0.01}
+                            value={fees} onChange={e => setFees(e.target.value)}
+                            placeholder="0" style={{ width: 110 }}
+                            onKeyDown={e => e.stopPropagation()}
+                        />
+                    </Form.Group>
+                    <Form.Group>
+                        <Form.Label>Doprava (Kč)</Form.Label>
+                        <Form.Control
+                            type="number" min={0} step={0.01}
+                            value={shipping} onChange={e => setShipping(e.target.value)}
+                            placeholder="0" style={{ width: 110 }}
+                            onKeyDown={e => e.stopPropagation()}
+                        />
+                    </Form.Group>
+                    <Form.Group>
+                        <Form.Label>Spropitné (Kč)</Form.Label>
+                        <Form.Control
+                            type="number" min={0} step={0.01}
+                            value={tip} onChange={e => setTip(e.target.value)}
+                            placeholder="0" style={{ width: 110 }}
+                            onKeyDown={e => e.stopPropagation()}
+                        />
+                    </Form.Group>
+                </div>
+
+                <div className="d-flex gap-3 align-items-end flex-wrap mb-3">
+                    <Form.Group>
+                        <Form.Label>Sleva</Form.Label>
+                        <div className="d-flex gap-2 align-items-center">
+                            <Form.Select
+                                value={discountType}
+                                onChange={e => setDiscountType(e.target.value as 'percent' | 'fixed')}
+                                style={{ width: 160 }}
+                            >
+                                <option value="percent">Procentuální (%)</option>
+                                <option value="fixed">Pevná částka (Kč)</option>
+                            </Form.Select>
+                            <Form.Control
+                                type="number" min={0} step={discountType === 'percent' ? 1 : 0.01}
+                                value={discountValue} onChange={e => setDiscountValue(e.target.value)}
+                                placeholder="0" style={{ width: 100 }}
+                                onKeyDown={e => e.stopPropagation()}
+                            />
+                            <span className="text-muted">{discountType === 'percent' ? '%' : 'Kč'}</span>
+                        </div>
+                    </Form.Group>
+                </div>
+
+                <hr />
+                <h6>Náhled celkových částek ({activeCount} {activeCount === 1 ? 'strávník' : 'strávníků'} s objednávkou, {feeShare > 0 ? `poplatek ${feeShare / 100} Kč/os.` : 'bez poplatku'})</h6>
+                <Table size="sm" bordered>
+                    <thead>
+                        <tr>
+                            <th>Člen</th>
+                            <th className="text-end">Základ</th>
+                            <th className="text-end">Příplatek</th>
+                            <th className="text-end">Poplatek</th>
+                            <th className="text-end">Sleva</th>
+                            <th className="text-end fw-bold">Celkem</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {memberEntries.map(([login, member]) => {
+                            const base = member.amount ?? 0;
+                            const surcharge = member.surchargeAmount ?? 0;
+                            const active = isActiveMember(member);
+                            const total = computeMemberTotal(member, feeParams, feeShare, activeCount);
+                            // Sleva i poplatek se týkají jen aktivních strávníků.
+                            const discount = active && discountNum > 0
+                                ? (discountType === 'percent'
+                                    ? Math.round((base + surcharge) * discountNum / 100)
+                                    : Math.round(discountNum / activeCount))
+                                : 0;
+                            return (
+                                <tr key={login} className={active ? '' : 'text-muted'}>
+                                    <td><strong>{login}</strong>{!active && <small className="ms-1">(jen objednává)</small>}</td>
+                                    <td className="text-end">{base > 0 ? `${base / 100} Kč` : '—'}</td>
+                                    <td className="text-end">{surcharge > 0 ? `${surcharge / 100} Kč` : '—'}</td>
+                                    <td className="text-end">{active && feeShare > 0 ? `${feeShare / 100} Kč` : '—'}</td>
+                                    <td className="text-end text-danger">{discount > 0 ? `-${discount / 100} Kč` : '—'}</td>
+                                    <td className="text-end fw-bold">{total > 0 ? `${total / 100} Kč` : '—'}</td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </Table>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={onClose} disabled={loading}>Storno</Button>
+                <Button variant="primary" onClick={handleSave} disabled={loading}>
+                    {loading ? 'Ukládám...' : 'Uložit'}
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/FeaturesVotingModal.tsx

@@ -1,45 +0,0 @@
-import { Modal, Button, Form } from "react-bootstrap"
-import { FeatureRequest } from "../../../../types";
-
-type Props = {
-    isOpen: boolean,
-    onClose: () => void,
-    onChange: (option: FeatureRequest, active: boolean) => void,
-    initialValues?: FeatureRequest[],
-}
-
-/** Modální dialog pro hlasování o nových funkcích. */
-export default function FeaturesVotingModal({ isOpen, onClose, onChange, initialValues }: Readonly<Props>) {
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        onChange(e.currentTarget.value as FeatureRequest, e.currentTarget.checked);
-    }
-
-    return <Modal show={isOpen} onHide={onClose} size="lg">
-        <Modal.Header closeButton>
-            <Modal.Title>
-                Hlasujte pro nové funkce
-                <p style={{ fontSize: '12px' }}>Je možno vybrat maximálně 4 možnosti</p>
-            </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-            {(Object.keys(FeatureRequest) as Array<keyof typeof FeatureRequest>).map(key => {
-                return <Form.Check
-                    key={key}
-                    type='checkbox'
-                    id={key}
-                    label={FeatureRequest[key]}
-                    onChange={handleChange}
-                    value={key}
-                    defaultChecked={initialValues?.includes(key as FeatureRequest)}
-                />
-            })}
-            <p className="mt-3" style={{ fontSize: '12px' }}>Něco jiného? Dejte vědět.</p>
-        </Modal.Body>
-        <Modal.Footer>
-            <Button variant="primary" onClick={onClose}>
-                Zavřít
-            </Button>
-        </Modal.Footer>
-    </Modal>
-}

client/src/components/modals/GenerateMockDataModal.tsx

@@ -0,0 +1,153 @@
+import { useState } from "react";
+import { Modal, Button, Form, Alert } from "react-bootstrap";
+import { generateMockData, DayIndex } from "../../../../types";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    currentDayIndex?: number;
+};
+
+const DAY_NAMES = ['Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek'];
+
+/** Hodnota v selectu dne pro generování napříč celým týdnem. */
+const WHOLE_WEEK = 'week';
+
+/** Modální dialog pro generování mock dat (pouze DEV). */
+export default function GenerateMockDataModal({ isOpen, onClose, currentDayIndex }: Readonly<Props>) {
+    const [daySelection, setDaySelection] = useState<string>(currentDayIndex !== undefined ? String(currentDayIndex) : '');
+    const [count, setCount] = useState<string>('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState<string | null>(null);
+
+    const wholeWeek = daySelection === WHOLE_WEEK;
+
+    const handleGenerate = async () => {
+        setError(null);
+        setLoading(true);
+
+        try {
+            const body: any = {};
+            if (wholeWeek) {
+                body.wholeWeek = true;
+            } else if (daySelection !== '') {
+                body.dayIndex = parseInt(daySelection, 10) as DayIndex;
+            }
+            if (count && count.trim() !== '') {
+                const countNum = parseInt(count, 10);
+                if (isNaN(countNum) || countNum < 1 || countNum > 100) {
+                    setError('Počet musí být číslo mezi 1 a 100');
+                    setLoading(false);
+                    return;
+                }
+                body.count = countNum;
+            }
+
+            const response = await generateMockData({ body });
+            if (response.error) {
+                setError((response.error as any).error || 'Nastala chyba při generování dat');
+            } else {
+                const total = (response.data as any)?.count;
+                setSuccess(wholeWeek
+                    ? `Mock data byla vygenerována pro celý týden (celkem ${total} záznamů).`
+                    : 'Mock data byla úspěšně vygenerována!');
+                setTimeout(() => {
+                    onClose();
+                    setSuccess(null);
+                    setCount('');
+                }, 1500);
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba při generování dat');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        setError(null);
+        setSuccess(null);
+        setCount('');
+        onClose();
+    };
+
+    return (
+        <Modal show={isOpen} onHide={handleClose}>
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Generovat mock data</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {success ? (
+                    <Alert variant="success">
+                        {success}
+                    </Alert>
+                ) : (
+                    <>
+                        <Alert variant="warning">
+                            <strong>DEV režim</strong> - Tato funkce je dostupná pouze ve vývojovém prostředí.
+                        </Alert>
+
+                        {error && (
+                            <Alert variant="danger" onClose={() => setError(null)} dismissible>
+                                {error}
+                            </Alert>
+                        )}
+
+                        <Form.Group className="mb-3">
+                            <Form.Label>Den</Form.Label>
+                            <Form.Select
+                                value={daySelection}
+                                onChange={e => setDaySelection(e.target.value)}
+                            >
+                                <option value="">Aktuální den</option>
+                                {DAY_NAMES.map((name, index) => (
+                                    <option key={index} value={index}>{name}</option>
+                                ))}
+                                <option value={WHOLE_WEEK}>Celý týden</option>
+                            </Form.Select>
+                            <Form.Text className="text-muted">
+                                Pokud není vybráno, použije se aktuální den.
+                            </Form.Text>
+                        </Form.Group>
+
+                        <Form.Group className="mb-3">
+                            <Form.Label>Počet záznamů</Form.Label>
+                            <Form.Control
+                                type="number"
+                                placeholder="Náhodný (5-20)"
+                                value={count}
+                                onChange={e => setCount(e.target.value)}
+                                min={1}
+                                max={100}
+                                onKeyDown={e => e.stopPropagation()}
+                            />
+                            <Form.Text className="text-muted">
+                                {wholeWeek
+                                    ? 'Zadaný počet se vygeneruje pro každý den týdne. Pokud není zadáno, vybere se pro každý den náhodný počet 5-20.'
+                                    : 'Pokud není zadáno, vybere se náhodný počet 5-20.'}
+                            </Form.Text>
+                        </Form.Group>
+                    </>
+                )}
+            </Modal.Body>
+            <Modal.Footer>
+                {!success && (
+                    <>
+                        <Button variant="secondary" onClick={handleClose} disabled={loading}>
+                            Storno
+                        </Button>
+                        <Button variant="primary" onClick={handleGenerate} disabled={loading}>
+                            {loading ? 'Generuji...' : 'Generovat'}
+                        </Button>
+                    </>
+                )}
+                {success && (
+                    <Button variant="secondary" onClick={handleClose}>
+                        Zavřít
+                    </Button>
+                )}
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/GenerateQrModal.tsx

@@ -0,0 +1,255 @@
+import { useState, useEffect, useCallback } from "react";
+import { Modal, Button, Form, Table, Alert } from "react-bootstrap";
+import { generateQr, LunchChoices, QrRecipient } from "../../../../types";
+
+type UserEntry = {
+    login: string;
+    selected: boolean;
+    purpose: string;
+    amount: string;
+};
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    choices: LunchChoices;
+    bankAccount: string;
+    bankAccountHolder: string;
+};
+
+/** Modální dialog pro generování QR kódů pro platbu. */
+export default function GenerateQrModal({ isOpen, onClose, choices, bankAccount, bankAccountHolder }: Readonly<Props>) {
+    const [users, setUsers] = useState<UserEntry[]>([]);
+    const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [success, setSuccess] = useState(false);
+
+    // Při otevření modálu načteme seznam uživatelů z choices
+    useEffect(() => {
+        if (isOpen && choices) {
+            const userLogins = new Set<string>();
+            // Projdeme všechny lokace a získáme unikátní loginy
+            Object.values(choices).forEach(locationChoices => {
+                if (locationChoices) {
+                    Object.keys(locationChoices).forEach(login => {
+                        userLogins.add(login);
+                    });
+                }
+            });
+            // Vytvoříme seznam uživatelů
+            const userList: UserEntry[] = Array.from(userLogins)
+                .sort((a, b) => a.localeCompare(b, 'cs'))
+                .map(login => ({
+                    login,
+                    selected: false,
+                    purpose: '',
+                    amount: '',
+                }));
+            setUsers(userList);
+            setError(null);
+            setSuccess(false);
+        }
+    }, [isOpen, choices]);
+
+    const handleCheckboxChange = useCallback((login: string, checked: boolean) => {
+        setUsers(prev => prev.map(u =>
+            u.login === login ? { ...u, selected: checked } : u
+        ));
+    }, []);
+
+    const handlePurposeChange = useCallback((login: string, value: string) => {
+        setUsers(prev => prev.map(u =>
+            u.login === login ? { ...u, purpose: value } : u
+        ));
+    }, []);
+
+    const handleAmountChange = useCallback((login: string, value: string) => {
+        // Povolíme pouze čísla, tečku a čárku
+        const sanitized = value.replace(/[^0-9.,]/g, '').replace(',', '.');
+        setUsers(prev => prev.map(u =>
+            u.login === login ? { ...u, amount: sanitized } : u
+        ));
+    }, []);
+
+    const validateAmount = (amountStr: string): number | null => {
+        if (!amountStr || amountStr.trim().length === 0) {
+            return null;
+        }
+        const amount = parseFloat(amountStr);
+        if (isNaN(amount) || amount <= 0) {
+            return null;
+        }
+        // Max 2 desetinná místa
+        const parts = amountStr.split('.');
+        if (parts.length === 2 && parts[1].length > 2) {
+            return null;
+        }
+        return Math.round(amount * 100) / 100; // Zaokrouhlíme na 2 desetinná místa
+    };
+
+    const handleGenerate = async () => {
+        setError(null);
+        const selectedUsers = users.filter(u => u.selected);
+
+        if (selectedUsers.length === 0) {
+            setError("Nebyl vybrán žádný uživatel");
+            return;
+        }
+
+        // Validace
+        const recipients: QrRecipient[] = [];
+        for (const user of selectedUsers) {
+            if (!user.purpose || user.purpose.trim().length === 0) {
+                setError(`Uživatel ${user.login} nemá vyplněný účel platby`);
+                return;
+            }
+            const amount = validateAmount(user.amount);
+            if (amount === null) {
+                setError(`Uživatel ${user.login} má neplatnou částku (musí být kladné číslo s max. 2 desetinnými místy)`);
+                return;
+            }
+            recipients.push({
+                login: user.login,
+                purpose: user.purpose.trim(),
+                amount,
+            });
+        }
+
+        setLoading(true);
+        try {
+            const response = await generateQr({
+                body: {
+                    recipients,
+                    bankAccount,
+                    bankAccountHolder,
+                }
+            });
+            if (response.error) {
+                setError((response.error as any).error || 'Nastala chyba při generování QR kódů');
+            } else {
+                setSuccess(true);
+                // Po 2 sekundách zavřeme modal
+                setTimeout(() => {
+                    onClose();
+                }, 2000);
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba při generování QR kódů');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        setError(null);
+        setSuccess(false);
+        onClose();
+    };
+
+    const selectedCount = users.filter(u => u.selected).length;
+
+    return (
+        <Modal show={isOpen} onHide={handleClose} size="lg">
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Generování QR kódů</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {success ? (
+                    <Alert variant="success">
+                        QR kódy byly úspěšně vygenerovány! Uživatelé je uvidí v sekci "Nevyřízené platby".
+                    </Alert>
+                ) : (
+                    <>
+                        <p>
+                            Vyberte uživatele, kterým chcete vygenerovat QR kód pro platbu.
+                            QR kódy se uživatelům zobrazí v sekci "Nevyřízené platby".
+                        </p>
+
+                        {error && (
+                            <Alert variant="danger" onClose={() => setError(null)} dismissible>
+                                {error}
+                            </Alert>
+                        )}
+
+                        {users.length === 0 ? (
+                            <Alert variant="info">
+                                V tento den nemá žádný uživatel zvolenou možnost stravování.
+                            </Alert>
+                        ) : (
+                            <Table striped bordered hover responsive>
+                                <thead>
+                                    <tr>
+                                        <th style={{ width: '50px' }}></th>
+                                        <th>Uživatel</th>
+                                        <th>Účel platby</th>
+                                        <th style={{ width: '120px' }}>Částka (Kč)</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {users.map(user => (
+                                        <tr key={user.login} className={user.selected ? '' : 'text-muted'}>
+                                            <td className="text-center">
+                                                <Form.Check
+                                                    type="checkbox"
+                                                    checked={user.selected}
+                                                    onChange={e => handleCheckboxChange(user.login, e.target.checked)}
+                                                />
+                                            </td>
+                                            <td>{user.login}</td>
+                                            <td>
+                                                <Form.Control
+                                                    type="text"
+                                                    placeholder="např. Pizza prosciutto"
+                                                    value={user.purpose}
+                                                    onChange={e => handlePurposeChange(user.login, e.target.value)}
+                                                    disabled={!user.selected}
+                                                    size="sm"
+                                                    onKeyDown={e => e.stopPropagation()}
+                                                />
+                                            </td>
+                                            <td>
+                                                <Form.Control
+                                                    type="text"
+                                                    placeholder="0.00"
+                                                    value={user.amount}
+                                                    onChange={e => handleAmountChange(user.login, e.target.value)}
+                                                    disabled={!user.selected}
+                                                    size="sm"
+                                                    onKeyDown={e => e.stopPropagation()}
+                                                />
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </Table>
+                        )}
+                    </>
+                )}
+            </Modal.Body>
+            <Modal.Footer>
+                {!success && (
+                    <>
+                        <span className="me-auto text-muted">
+                            Vybráno: {selectedCount} / {users.length}
+                        </span>
+                        <Button variant="secondary" onClick={handleClose} disabled={loading}>
+                            Storno
+                        </Button>
+                        <Button
+                            variant="primary"
+                            onClick={handleGenerate}
+                            disabled={loading || selectedCount === 0}
+                        >
+                            {loading ? 'Generuji...' : 'Generovat'}
+                        </Button>
+                    </>
+                )}
+                {success && (
+                    <Button variant="secondary" onClick={handleClose}>
+                        Zavřít
+                    </Button>
+                )}
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/PayForAllModal.tsx

@@ -0,0 +1,305 @@
+import { useState, useEffect, useCallback } from "react";
+import { Modal, Button, Form, Table, Alert } from "react-bootstrap";
+import { generateQr, LunchChoice, LocationLunchChoicesMap, RestaurantDayMenu, QrRecipient } from "../../../../types";
+import { parsePriceCzk } from "../../utils/parsePrice";
+
+type DinerEntry = {
+    login: string;
+    selectedFoods: number[];
+    baseAmount: number;
+    baseAmountParseFailed: boolean;
+    surchargeText: string;
+    surchargeAmount: string;
+    included: boolean;
+};
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    locationKey: LunchChoice;
+    locationName: string;
+    locationChoices: LocationLunchChoicesMap;
+    menu: RestaurantDayMenu | undefined;
+    payerLogin: string;
+    bankAccount: string;
+    bankAccountHolder: string;
+};
+
+function sanitizeAmount(value: string): string {
+    return value.replace(/[^0-9.,]/g, '').replace(',', '.');
+}
+
+function parseAmount(s: string): number | null {
+    if (!s || s.trim().length === 0) return null;
+    const n = parseFloat(s);
+    if (isNaN(n) || n < 0) return null;
+    return Math.round(n * 100);
+}
+
+export default function PayForAllModal({ isOpen, onClose, locationName, locationChoices, menu, payerLogin, bankAccount, bankAccountHolder }: Readonly<Props>) {
+    const [diners, setDiners] = useState<DinerEntry[]>([]);
+    const [tipTotal, setTipTotal] = useState('');
+    const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [success, setSuccess] = useState(false);
+
+    const hasMenu = !!menu;
+
+    useEffect(() => {
+        if (!isOpen) return;
+        const entries: DinerEntry[] = Object.entries(locationChoices).map(([login, choice]) => {
+            const selectedFoods = choice.selectedFoods ?? [];
+            let baseAmount = 0;
+            let baseAmountParseFailed = false;
+            if (menu) {
+                for (const idx of selectedFoods) {
+                    const priceKc = parsePriceCzk(menu.food?.[idx]?.price);
+                    if (priceKc === null) {
+                        baseAmountParseFailed = true;
+                    } else {
+                        baseAmount += Math.round(priceKc * 100);
+                    }
+                }
+            }
+            return {
+                login,
+                selectedFoods,
+                baseAmount,
+                baseAmountParseFailed,
+                surchargeText: '',
+                surchargeAmount: '',
+                included: login !== payerLogin,
+            };
+        });
+        setDiners(entries);
+        setTipTotal('');
+        setError(null);
+        setSuccess(false);
+    }, [isOpen, locationChoices, menu, payerLogin]);
+
+    const includedDiners = diners.filter(d => d.included && d.login !== payerLogin);
+    const tipPerPerson = (() => {
+        if (includedDiners.length === 0) return 0;
+        const tip = parseAmount(tipTotal);
+        if (tip === null || tip === 0) return 0;
+        const totalPeople = includedDiners.length + 1;
+        return Math.round(tip / totalPeople);
+    })();
+    const payerTipShare = (() => {
+        const tip = parseAmount(tipTotal);
+        if (!tip) return 0;
+        return tip - tipPerPerson * includedDiners.length;
+    })();
+
+    const getTotal = (d: DinerEntry): number => {
+        const surcharge = parseAmount(d.surchargeAmount) ?? 0;
+        const tip = d.login === payerLogin ? payerTipShare : tipPerPerson;
+        return d.baseAmount + surcharge + tip;
+    };
+
+    const handleInclude = useCallback((login: string, checked: boolean) => {
+        setDiners(prev => prev.map(d => d.login === login ? { ...d, included: checked } : d));
+    }, []);
+
+    const handleSurchargeText = useCallback((login: string, value: string) => {
+        setDiners(prev => prev.map(d => d.login === login ? { ...d, surchargeText: value } : d));
+    }, []);
+
+    const handleSurchargeAmount = useCallback((login: string, value: string) => {
+        setDiners(prev => prev.map(d => d.login === login ? { ...d, surchargeAmount: sanitizeAmount(value) } : d));
+    }, []);
+
+    const handleGenerate = async () => {
+        setError(null);
+        const recipients: QrRecipient[] = [];
+
+        for (const d of diners) {
+            if (!d.included || d.login === payerLogin) continue;
+            const total = getTotal(d);
+            if (total <= 0) {
+                setError(`Celková částka pro ${d.login} musí být kladná`);
+                return;
+            }
+            const foods = d.selectedFoods.map(i => menu?.food?.[i]?.name).filter(Boolean).join(', ');
+            const purposeBase = `Oběd ${locationName}${foods ? ` — ${foods}` : ''}`;
+            recipients.push({
+                login: d.login,
+                purpose: purposeBase.substring(0, 60),
+                amount: total,
+            });
+        }
+
+        if (recipients.length === 0) {
+            setError("Nebyl vybrán žádný příjemce");
+            return;
+        }
+
+        setLoading(true);
+        try {
+            const response = await generateQr({
+                body: { recipients, bankAccount, bankAccountHolder },
+            });
+            if (response.error) {
+                setError((response.error as any).error || 'Nastala chyba při generování QR kódů');
+            } else {
+                setSuccess(true);
+                setTimeout(() => onClose(), 2000);
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba při generování QR kódů');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const anyParseFailed = diners.some(d => d.baseAmountParseFailed && d.included);
+
+    return (
+        <Modal show={isOpen} onHide={onClose} size="lg">
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Zaplatit za všechny — {locationName}</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {success ? (
+                    <Alert variant="success">
+                        QR kódy byly úspěšně vygenerovány! Uživatelé je uvidí v sekci „Nevyřízené platby".
+                    </Alert>
+                ) : (
+                    <>
+                        <p>Zaplatili jste za skupinu v restauraci. Nastavte příplatky a společné poplatky, poté vygenerujte QR kódy pro ostatní.</p>
+
+                        {!hasMenu && (
+                            <Alert variant="info">
+                                Pro tuto skupinu nejsou k dispozici ceny jídel — vyplňte příplatky ručně.
+                            </Alert>
+                        )}
+
+                        {anyParseFailed && (
+                            <Alert variant="warning">
+                                U některých jídel se nepodařilo načíst cenu — doplňte ji ručně v sloupci Příplatek.
+                            </Alert>
+                        )}
+
+                        {error && (
+                            <Alert variant="danger" onClose={() => setError(null)} dismissible>
+                                {error}
+                            </Alert>
+                        )}
+
+                        <Table striped bordered hover responsive size="sm">
+                            <thead>
+                                <tr>
+                                    <th style={{ width: 40 }}></th>
+                                    <th>Strávník</th>
+                                    <th>Jídla</th>
+                                    <th style={{ width: 220 }}>Příplatek</th>
+                                    <th style={{ width: 90 }}>Poplatek</th>
+                                    <th style={{ width: 90 }}>Celkem</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {diners.map(d => {
+                                    const isPayer = d.login === payerLogin;
+                                    const foodNames = d.selectedFoods.map(i => menu?.food?.[i]?.name).filter(Boolean).join(', ');
+                                    const total = getTotal(d);
+                                    return (
+                                        <tr key={d.login} className={!d.included && !isPayer ? 'text-muted' : ''}>
+                                            <td className="text-center">
+                                                {isPayer ? (
+                                                    <small className="text-muted">plátce</small>
+                                                ) : (
+                                                    <Form.Check
+                                                        type="checkbox"
+                                                        checked={d.included}
+                                                        onChange={e => handleInclude(d.login, e.target.checked)}
+                                                    />
+                                                )}
+                                            </td>
+                                            <td><strong>{d.login}</strong></td>
+                                            <td>
+                                                <small>
+                                                    {foodNames || <span className="text-muted">—</span>}
+                                                    {hasMenu && d.baseAmount > 0 && <span className="text-muted"> ({d.baseAmount / 100} Kč)</span>}
+                                                    {d.baseAmountParseFailed && <span className="text-warning"> ⚠</span>}
+                                                </small>
+                                            </td>
+                                            <td>
+                                                <div className="d-flex gap-1">
+                                                    <Form.Control
+                                                        type="text"
+                                                        placeholder="popis"
+                                                        value={d.surchargeText}
+                                                        onChange={e => handleSurchargeText(d.login, e.target.value)}
+                                                        disabled={!isPayer && !d.included}
+                                                        size="sm"
+                                                        onKeyDown={e => e.stopPropagation()}
+                                                    />
+                                                    <Form.Control
+                                                        type="text"
+                                                        placeholder="Kč"
+                                                        value={d.surchargeAmount}
+                                                        onChange={e => handleSurchargeAmount(d.login, e.target.value)}
+                                                        disabled={!isPayer && !d.included}
+                                                        size="sm"
+                                                        style={{ width: 70 }}
+                                                        onKeyDown={e => e.stopPropagation()}
+                                                    />
+                                                </div>
+                                            </td>
+                                            <td className="text-end">
+                                                {(() => { const s = isPayer ? payerTipShare : tipPerPerson; return s > 0 ? `${s / 100} Kč` : '—'; })()}
+                                            </td>
+                                            <td className="text-end fw-bold">
+                                                {`${total / 100} Kč`}
+                                            </td>
+                                        </tr>
+                                    );
+                                })}
+                            </tbody>
+                        </Table>
+
+                        <div className="d-flex align-items-center gap-2 mt-2">
+                            <label className="mb-0 text-nowrap">Poplatky celkem (Kč):</label>
+                            <Form.Control
+                                type="text"
+                                placeholder="0"
+                                value={tipTotal}
+                                onChange={e => setTipTotal(sanitizeAmount(e.target.value))}
+                                size="sm"
+                                style={{ width: 100 }}
+                                onKeyDown={e => e.stopPropagation()}
+                            />
+                            <small className="text-muted">
+                                {includedDiners.length > 0 && tipPerPerson > 0
+                                    ? `(${tipPerPerson / 100} Kč / osoba)`
+                                    : ''}
+                            </small>
+                        </div>
+                    </>
+                )}
+            </Modal.Body>
+            <Modal.Footer>
+                {!success && (
+                    <>
+                        <span className="me-auto text-muted">
+                            Příjemci: {includedDiners.length}
+                        </span>
+                        <Button variant="secondary" onClick={onClose} disabled={loading}>
+                            Storno
+                        </Button>
+                        <Button
+                            variant="primary"
+                            onClick={handleGenerate}
+                            disabled={loading || includedDiners.length === 0}
+                        >
+                            {loading ? 'Generuji...' : 'Vygenerovat QR'}
+                        </Button>
+                    </>
+                )}
+                {success && (
+                    <Button variant="secondary" onClick={onClose}>Zavřít</Button>
+                )}
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/PayForGroupModal.tsx

@@ -0,0 +1,220 @@
+import { useState, useEffect } from "react";
+import { Modal, Button, Form, Table, Alert } from "react-bootstrap";
+import { generateQr, OrderGroup, OrderGroupMember, QrRecipient } from "../../../../types";
+import { sanitizeQrMessage } from "../../Utils";
+import { computeFeeShare, computeMemberTotal, countActiveMembers, isActiveMember } from "../../utils/groupFees";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess?: () => void;
+    group: OrderGroup;
+    payerLogin: string;
+    bankAccount: string;
+    bankAccountHolder: string;
+    groupId?: string;
+};
+
+type DinerEntry = {
+    login: string;
+    member: OrderGroupMember;
+    included: boolean;
+};
+
+export default function PayForGroupModal({ isOpen, onClose, onSuccess, group, payerLogin, bankAccount, bankAccountHolder, groupId }: Readonly<Props>) {
+    const [diners, setDiners] = useState<DinerEntry[]>([]);
+    const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [success, setSuccess] = useState(false);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        const entries: DinerEntry[] = (Object.entries(group.members) as [string, OrderGroupMember][]).map(([login, member]) => ({
+            login,
+            member,
+            // Standardně zahrnout všechny, kdo nejsou plátce a něco si objednali.
+            included: login !== payerLogin && isActiveMember(member),
+        }));
+        setDiners(entries);
+        setError(null);
+        setSuccess(false);
+    }, [isOpen, group, payerLogin]);
+
+    const fees = group.fees ?? 0;
+    const shipping = group.shipping ?? 0;
+    const tip = group.tip ?? 0;
+    const totalFees = fees + shipping + tip;
+    // Poplatky se dělí jen mezi aktivní strávníky (kdo si reálně něco objednal).
+    const activeCount = countActiveMembers(group.members);
+    const feeShare = computeFeeShare(totalFees, activeCount);
+    const feeParams = { totalFees, discountType: group.discountType, discountValue: group.discountValue ?? 0 };
+
+    const getMemberTotal = (entry: DinerEntry): number =>
+        computeMemberTotal(entry.member, feeParams, feeShare, activeCount);
+
+    const includedNonPayers = diners.filter(d => d.included && d.login !== payerLogin);
+
+    const handleInclude = (login: string, checked: boolean) => {
+        setDiners(prev => prev.map(d => d.login === login ? { ...d, included: checked } : d));
+    };
+
+    const handleGenerate = async () => {
+        setError(null);
+        const recipients: QrRecipient[] = [];
+
+        for (const d of diners) {
+            if (!d.included || d.login === payerLogin) continue;
+            const total = getMemberTotal(d);
+            if (total <= 0) {
+                setError(`Celková částka pro ${d.login} musí být kladná`);
+                return;
+            }
+            const note = d.member.note?.trim();
+            recipients.push({
+                login: d.login,
+                purpose: sanitizeQrMessage(note || `Objednávka ${group.name}`),
+                amount: total,
+            });
+        }
+
+        if (recipients.length === 0) {
+            setError("Nebyl vybrán žádný příjemce");
+            return;
+        }
+
+        setLoading(true);
+        try {
+            const response = await generateQr({
+                body: { recipients, bankAccount, bankAccountHolder, ...(groupId ? { groupId } : {}) },
+            });
+            if (response.error) {
+                setError((response.error as any).error || 'Nastala chyba při generování QR kódů');
+            } else {
+                setSuccess(true);
+                onSuccess?.();
+                setTimeout(() => onClose(), 2000);
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba při generování QR kódů');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const hasFees = totalFees > 0;
+
+    return (
+        <Modal show={isOpen} onHide={onClose} size="lg">
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Generovat QR — {group.name}</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {success ? (
+                    <Alert variant="success">
+                        QR kódy byly úspěšně vygenerovány! Uživatelé je uvidí v sekci „Nevyřízené platby".
+                    </Alert>
+                ) : (
+                    <>
+                        <p>Zaplatili jste za skupinu. Vyberte, komu vygenerovat QR kód k úhradě.</p>
+
+                        {error && (
+                            <Alert variant="danger" onClose={() => setError(null)} dismissible>
+                                {error}
+                            </Alert>
+                        )}
+
+                        {hasFees && (
+                            <div className="d-flex gap-3 mb-2 text-muted" style={{ fontSize: '0.9em' }}>
+                                {fees > 0 && <span>Poplatky: <strong>{fees / 100} Kč</strong></span>}
+                                {shipping > 0 && <span>Doprava: <strong>{shipping / 100} Kč</strong></span>}
+                                {tip > 0 && <span>Spropitné: <strong>{tip / 100} Kč</strong></span>}
+                                <span>→ {feeShare / 100} Kč/os.</span>
+                            </div>
+                        )}
+                        {group.discountValue != null && group.discountValue > 0 && (
+                            <div className="mb-2 text-success" style={{ fontSize: '0.9em' }}>
+                                Sleva: {group.discountType === 'percent' ? `${group.discountValue}%` : `${group.discountValue / 100} Kč`}
+                            </div>
+                        )}
+
+                        <Table striped bordered hover responsive size="sm">
+                            <thead>
+                                <tr>
+                                    <th style={{ width: 40 }}></th>
+                                    <th>Člen</th>
+                                    <th style={{ width: 90 }} className="text-end">Základ</th>
+                                    <th style={{ width: 90 }} className="text-end">Příplatek</th>
+                                    {hasFees && <th style={{ width: 90 }} className="text-end">Poplatek</th>}
+                                    <th style={{ width: 90 }} className="text-end fw-bold">Celkem</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {diners.map(d => {
+                                    const isPayer = d.login === payerLogin;
+                                    const active = isActiveMember(d.member);
+                                    const total = getMemberTotal(d);
+                                    const surcharge = d.member.surchargeAmount ?? 0;
+                                    return (
+                                        <tr key={d.login} className={(!d.included && !isPayer) || !active ? 'text-muted' : ''}>
+                                            <td className="text-center">
+                                                {isPayer ? (
+                                                    <small className="text-muted">plátce</small>
+                                                ) : !active ? (
+                                                    <small className="text-muted">jen objednává</small>
+                                                ) : (
+                                                    <Form.Check
+                                                        type="checkbox"
+                                                        checked={d.included}
+                                                        onChange={e => handleInclude(d.login, e.target.checked)}
+                                                    />
+                                                )}
+                                            </td>
+                                            <td>
+                                                <strong>{d.login}</strong>
+                                                {d.member.surchargeText && (
+                                                    <small className="text-muted ms-1">({d.member.surchargeText})</small>
+                                                )}
+                                            </td>
+                                            <td className="text-end">
+                                                {(d.member.amount ?? 0) > 0 ? `${d.member.amount! / 100} Kč` : <span className="text-muted">—</span>}
+                                            </td>
+                                            <td className="text-end">
+                                                {surcharge > 0 ? `${surcharge / 100} Kč` : <span className="text-muted">—</span>}
+                                            </td>
+                                            {hasFees && (
+                                                <td className="text-end">
+                                                    {active && feeShare > 0 ? `${feeShare / 100} Kč` : '—'}
+                                                </td>
+                                            )}
+                                            <td className="text-end fw-bold">
+                                                {total > 0 ? `${total / 100} Kč` : <span className="text-muted">—</span>}
+                                            </td>
+                                        </tr>
+                                    );
+                                })}
+                            </tbody>
+                        </Table>
+                    </>
+                )}
+            </Modal.Body>
+            <Modal.Footer>
+                {!success && (
+                    <>
+                        <span className="me-auto text-muted">Příjemci: {includedNonPayers.length}</span>
+                        <Button variant="secondary" onClick={onClose} disabled={loading}>Storno</Button>
+                        <Button
+                            variant="primary"
+                            onClick={handleGenerate}
+                            disabled={loading || includedNonPayers.length === 0}
+                        >
+                            {loading ? 'Generuji...' : 'Vygenerovat QR'}
+                        </Button>
+                    </>
+                )}
+                {success && (
+                    <Button variant="secondary" onClick={onClose}>Zavřít</Button>
+                )}
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/PizzaAdditionalFeeModal.tsx

@@ -15,12 +15,12 @@ export default function PizzaAdditionalFeeModal({ customerName, isOpen, onClose,
     const priceRef = useRef<HTMLInputElement>(null);
 
     const doSubmit = () => {
-        onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value ?? "0"));
+        onSave(customerName, textRef.current?.value, Math.round(Number.parseFloat(priceRef.current?.value ?? "0") * 100));
     }
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter') {
-            onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value ?? "0"));
+            onSave(customerName, textRef.current?.value, Math.round(Number.parseFloat(priceRef.current?.value ?? "0") * 100));
         }
     }
 

client/src/components/modals/PizzaCalculatorModal.tsx

@@ -36,13 +36,13 @@ export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props
 
         // 1. pizza
         if (diameter1Ref.current?.value) {
-            const diameter1 = parseInt(diameter1Ref.current?.value);
+            const diameter1 = Number.parseInt(diameter1Ref.current?.value);
             r.pizza1 ??= {};
             if (diameter1 && diameter1 > 0) {
                 r.pizza1.diameter = diameter1;
                 r.pizza1.area = Math.PI * Math.pow(diameter1 / 2, 2);
                 if (price1Ref.current?.value) {
-                    const price1 = parseInt(price1Ref.current?.value);
+                    const price1 = Number.parseInt(price1Ref.current?.value);
                     if (price1) {
                         r.pizza1.pricePerM = price1 / r.pizza1.area;
                     } else {
@@ -56,13 +56,13 @@ export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props
 
         // 2. pizza
         if (diameter2Ref.current?.value) {
-            const diameter2 = parseInt(diameter2Ref.current?.value);
+            const diameter2 = Number.parseInt(diameter2Ref.current?.value);
             r.pizza2 ??= {};
             if (diameter2 && diameter2 > 0) {
                 r.pizza2.diameter = diameter2;
                 r.pizza2.area = Math.PI * Math.pow(diameter2 / 2, 2);
                 if (price2Ref.current?.value) {
-                    const price2 = parseInt(price2Ref.current?.value);
+                    const price2 = Number.parseInt(price2Ref.current?.value);
                     if (price2) {
                         r.pizza2.pricePerM = price2 / r.pizza2.area;
                     } else {
@@ -77,8 +77,8 @@ export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props
         // Srovnání
         if (r.pizza1?.pricePerM && r.pizza2?.pricePerM && r.pizza1.diameter && r.pizza2.diameter) {
             r.choice = r.pizza1.pricePerM < r.pizza2.pricePerM ? 1 : 2;
-            const bigger = r.pizza1.pricePerM > r.pizza2.pricePerM ? r.pizza1.pricePerM : r.pizza2.pricePerM;
-            const smaller = r.pizza1.pricePerM < r.pizza2.pricePerM ? r.pizza1.pricePerM : r.pizza2.pricePerM;
+            const bigger = Math.max(r.pizza1.pricePerM, r.pizza2.pricePerM);
+            const smaller = Math.min(r.pizza1.pricePerM, r.pizza2.pricePerM);
             r.ratio = (bigger / smaller) - 1;
             r.diameterDiff = Math.abs(r.pizza1.diameter - r.pizza2.diameter);
         } else {

client/src/components/modals/RefreshMenuModal.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { Modal, Button, Alert } from "react-bootstrap";
+import { Modal, Button, Alert, Form } from "react-bootstrap";
 
 type Props = {
     isOpen: boolean;
@@ -30,7 +30,6 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
             if (res.ok) {
                 setRefreshMessage({ type: 'success', text: 'Uspesny fetch' });
                 if (refreshPassRef.current) {
-                    // Clean hesla xd
                     refreshPassRef.current.value = '';
                 }
             } else {
@@ -50,7 +49,7 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
     };
 
     return (
-        <Modal show={isOpen} onHide={handleClose} size="lg">
+        <Modal show={isOpen} onHide={handleClose}>
             <Modal.Header closeButton>
                 <Modal.Title><h2>Přenačtení menu</h2></Modal.Title>
             </Modal.Header>
@@ -63,36 +62,29 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
                     </Alert>
                 )}
 
-                <div className="mb-3">
-                    Heslo: <input
+                <Form.Group className="mb-3">
+                    <Form.Label>Heslo</Form.Label>
+                    <Form.Control
                         ref={refreshPassRef}
                         type="password"
                         placeholder="Zadejte heslo"
-                        className="form-control d-inline-block"
-                        style={{ width: 'auto', marginLeft: '10px' }}
                         onKeyDown={e => e.stopPropagation()}
                     />
-                </div>
+                </Form.Group>
 
-                <div className="mb-3">
-                    Typ refreshe: <select
-                        ref={refreshTypeRef}
-                        className="form-select d-inline-block"
-                        style={{ width: 'auto', marginLeft: '10px' }}
-                        defaultValue="week"
-                    >
+                <Form.Group className="mb-3">
+                    <Form.Label>Typ refreshe</Form.Label>
+                    <Form.Select ref={refreshTypeRef} defaultValue="week">
                         <option value="week">Týden</option>
                         <option value="day">Den</option>
-                    </select>
-                </div>
+                    </Form.Select>
+                </Form.Group>
 
                 <Button
-                    variant="info"
                     onClick={handleRefresh}
                     disabled={refreshLoading}
-                    className="mb-3"
                 >
-                    {refreshLoading ? 'Refreshing...' : 'Refresh'}
+                    {refreshLoading ? 'Načítám...' : 'Obnovit menu'}
                 </Button>
             </Modal.Body>
             <Modal.Footer>

client/src/components/modals/SettingsModal.tsx

@@ -1,42 +1,261 @@
-import { useRef } from "react";
-import { Modal, Button } from "react-bootstrap"
-import { useSettings } from "../../context/settings";
+import { useEffect, useRef, useState } from "react";
+import { Modal, Button, Form } from "react-bootstrap"
+import { useSettings, ThemePreference } from "../../context/settings";
+import { NotificationSettings, UdalostEnum, getNotificationSettings, updateNotificationSettings } from "../../../../types";
+import { useAuth } from "../../context/auth";
+import { subscribeToPush, unsubscribeFromPush } from "../../hooks/usePushReminder";
 
 type Props = {
     isOpen: boolean,
     onClose: () => void,
-    onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => void,
+    onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => void,
 }
 
 /** Modální dialog pro uživatelská nastavení. */
 export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Props>) {
+    const auth = useAuth();
     const settings = useSettings();
     const bankAccountRef = useRef<HTMLInputElement>(null);
     const nameRef = useRef<HTMLInputElement>(null);
     const hideSoupsRef = useRef<HTMLInputElement>(null);
+    const themeRef = useRef<HTMLSelectElement>(null);
 
-    return <Modal show={isOpen} onHide={onClose} size="lg">
+    const reminderTimeRef = useRef<HTMLInputElement>(null);
+    const boltDeliveredRef = useRef<HTMLInputElement>(null);
+    const ntfyTopicRef = useRef<HTMLInputElement>(null);
+    const discordWebhookRef = useRef<HTMLInputElement>(null);
+    const teamsWebhookRef = useRef<HTMLInputElement>(null);
+    const [notifSettings, setNotifSettings] = useState<NotificationSettings>({});
+    const [enabledEvents, setEnabledEvents] = useState<UdalostEnum[]>([]);
+
+    useEffect(() => {
+        if (isOpen && auth?.login) {
+            getNotificationSettings().then(response => {
+                if (response.data) {
+                    setNotifSettings(response.data);
+                    setEnabledEvents(response.data.enabledEvents ?? []);
+                }
+            }).catch(() => {});
+        }
+    }, [isOpen, auth?.login]);
+
+    const toggleEvent = (event: UdalostEnum) => {
+        setEnabledEvents(prev =>
+            prev.includes(event) ? prev.filter(e => e !== event) : [...prev, event]
+        );
+    };
+
+    const handleSave = async () => {
+        const newReminderTime = reminderTimeRef.current?.value || undefined;
+        const oldReminderTime = notifSettings.reminderTime;
+        const newBoltDelivered = boltDeliveredRef.current?.checked ?? false;
+        const oldBoltDelivered = notifSettings.boltDeliveredPush ?? false;
+
+        // Uložení notifikačních nastavení na server
+        const newSettings: NotificationSettings = {
+            ntfyTopic: ntfyTopicRef.current?.value || undefined,
+            discordWebhookUrl: discordWebhookRef.current?.value || undefined,
+            teamsWebhookUrl: teamsWebhookRef.current?.value || undefined,
+            enabledEvents,
+            reminderTime: newReminderTime,
+            boltDeliveredPush: newBoltDelivered,
+        };
+        await updateNotificationSettings({ body: newSettings }).catch(() => {});
+        setNotifSettings(newSettings);
+
+        // Správa push subscription — drží ji naživu kterákoli z push funkcí.
+        // Záměrně bez await: subscribeToPush si vyžádá oprávnění prohlížeče a modal
+        // by na tu dobu zůstal otevřený.
+        const wantsPush = !!newReminderTime || newBoltDelivered;
+        const hadPush = !!oldReminderTime || oldBoltDelivered;
+        if (wantsPush && (newReminderTime !== oldReminderTime || newBoltDelivered !== oldBoltDelivered)) {
+            subscribeToPush(newReminderTime);
+        } else if (!wantsPush && hadPush) {
+            unsubscribeFromPush();
+        }
+
+        // Uložení ostatních nastavení (localStorage)
+        onSave(
+            bankAccountRef.current?.value,
+            nameRef.current?.value,
+            hideSoupsRef.current?.checked,
+            themeRef.current?.value as ThemePreference,
+        );
+    };
+
+    return (
+        <Modal show={isOpen} onHide={onClose} size="lg">
             <Modal.Header closeButton>
                 <Modal.Title><h2>Nastavení</h2></Modal.Title>
             </Modal.Header>
             <Modal.Body>
-            <h4>Obecné</h4>
-            <span title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální, a zejména u TechTower bývá často problém polévky spolehlivě rozeznat. V případě využití této funkce průběžně nahlašujte stále se zobrazující polévky." style={{ "cursor": "help" }}>
-                <input ref={hideSoupsRef} type="checkbox" defaultChecked={settings?.hideSoups} /> Skrýt polévky
-            </span>
+                <h4>Vzhled</h4>
+                <Form.Group className="mb-3">
+                    <Form.Label>Barevný motiv</Form.Label>
+                    <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
+                        <option value="system">Podle systému</option>
+                        <option value="light">Světlý</option>
+                        <option value="dark">Tmavý</option>
+                    </Form.Select>
+                </Form.Group>
+
                 <hr />
+
+                <h4>Obecné</h4>
+                <Form.Group className="mb-3">
+                    <Form.Check
+                        id="hideSoupsCheckbox"
+                        ref={hideSoupsRef}
+                        type="checkbox"
+                        label="Skrýt polévky"
+                        defaultChecked={settings?.hideSoups}
+                        title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální."
+                    />
+                    <Form.Text className="text-muted">
+                        Experimentální funkce - zejména u TechTower bývá problém polévky spolehlivě rozeznat.
+                    </Form.Text>
+                </Form.Group>
+
+                <hr />
+
+                <h4>Notifikace</h4>
+                <p>
+                    Nastavením notifikací budete dostávat upozornění o událostech (např. "Jdeme na oběd") přímo do vámi zvoleného komunikačního kanálu.
+                </p>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Připomínka výběru oběda</Form.Label>
+                    <Form.Control
+                        ref={reminderTimeRef}
+                        type="time"
+                        defaultValue={notifSettings.reminderTime ?? ''}
+                        key={notifSettings.reminderTime ?? 'reminder-empty'}
+                    />
+                    <Form.Text className="text-muted">
+                        V zadaný čas vám přijde push notifikace, pokud nemáte zvolenou možnost stravování. Nechte prázdné pro vypnutí.
+                    </Form.Text>
+                </Form.Group>
+
+                <Form.Group className="mb-3">
+                    <Form.Check
+                        id="boltDeliveredCheckbox"
+                        ref={boltDeliveredRef}
+                        type="checkbox"
+                        label="Upozornění na doručení objednávky (Bolt Food / Wolt)"
+                        defaultChecked={notifSettings.boltDeliveredPush ?? false}
+                        key={`bolt-delivered-${notifSettings.boltDeliveredPush ?? false}`}
+                    />
+                    <Form.Text className="text-muted">
+                        Až bude sledovaná skupinová objednávka doručena, přijde vám push notifikace.
+                        Zakladateli skupiny se neposílá — ten dostane upozornění přímo z aplikace rozvozové služby.
+                    </Form.Text>
+                </Form.Group>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>ntfy téma (topic)</Form.Label>
+                    <Form.Control
+                        ref={ntfyTopicRef}
+                        type="text"
+                        placeholder="moje-tema"
+                        defaultValue={notifSettings.ntfyTopic}
+                        key={notifSettings.ntfyTopic ?? 'ntfy-empty'}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        Téma pro ntfy push notifikace. Nechte prázdné pro vypnutí.
+                    </Form.Text>
+                </Form.Group>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Discord webhook URL</Form.Label>
+                    <Form.Control
+                        ref={discordWebhookRef}
+                        type="text"
+                        placeholder="https://discord.com/api/webhooks/..."
+                        defaultValue={notifSettings.discordWebhookUrl}
+                        key={notifSettings.discordWebhookUrl ?? 'discord-empty'}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        URL webhooku Discord kanálu. Nechte prázdné pro vypnutí.
+                    </Form.Text>
+                </Form.Group>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>MS Teams webhook URL</Form.Label>
+                    <Form.Control
+                        ref={teamsWebhookRef}
+                        type="text"
+                        placeholder="https://outlook.office.com/webhook/..."
+                        defaultValue={notifSettings.teamsWebhookUrl}
+                        key={notifSettings.teamsWebhookUrl ?? 'teams-empty'}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        URL webhooku MS Teams kanálu. Nechte prázdné pro vypnutí.
+                    </Form.Text>
+                </Form.Group>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Události k odběru</Form.Label>
+                    {Object.values(UdalostEnum).map(event => (
+                        <Form.Check
+                            key={event}
+                            id={`notif-event-${event}`}
+                            type="checkbox"
+                            label={event}
+                            checked={enabledEvents.includes(event)}
+                            onChange={() => toggleEvent(event)}
+                        />
+                    ))}
+                    <Form.Text className="text-muted">
+                        Zvolte události, o kterých chcete být notifikováni. Notifikace jsou odesílány pouze uživatelům se stejnou zvolenou lokalitou.
+                    </Form.Text>
+                </Form.Group>
+
+                <hr />
+
                 <h4>Bankovní účet</h4>
-            <p>Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.<br />Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.<br /><br />Číslo účtu není ukládáno na serveru, posílá se na něj pouze za účelem vygenerování QR kódů.</p>
-            Číslo účtu: <input className="mb-3" ref={bankAccountRef} type="text" placeholder="123456-1234567890/1234" defaultValue={settings?.bankAccount} onKeyDown={e => e.stopPropagation()} /> <br />
-            Název příjemce (jméno majitele účtu): <input ref={nameRef} type="text" placeholder="Jan Novák" defaultValue={settings?.holderName} onKeyDown={e => e.stopPropagation()} />
+                <p>
+                    Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.
+                </p>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Číslo účtu</Form.Label>
+                    <Form.Control
+                        ref={bankAccountRef}
+                        type="text"
+                        placeholder="123456-1234567890/1234"
+                        defaultValue={settings?.bankAccount}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.
+                    </Form.Text>
+                </Form.Group>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Název příjemce</Form.Label>
+                    <Form.Control
+                        ref={nameRef}
+                        type="text"
+                        placeholder="Jan Novák"
+                        defaultValue={settings?.holderName}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        Jméno majitele účtu pro QR platbu.
+                    </Form.Text>
+                </Form.Group>
             </Modal.Body>
             <Modal.Footer>
                 <Button variant="secondary" onClick={onClose}>
                     Storno
                 </Button>
-            <Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked)}>
+                <Button onClick={handleSave}>
                     Uložit
                 </Button>
             </Modal.Footer>
         </Modal>
+    );
 }

client/src/components/modals/StoreAdminModal.tsx

@@ -0,0 +1,275 @@
+import { useState } from "react";
+import { Modal, Button, Form, ListGroup, Alert } from "react-bootstrap";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrashCan } from "@fortawesome/free-regular-svg-icons";
+import { faPen, faPlus, faUpRightFromSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { addStore, deleteStore, updateStore, Store } from "../../../../types";
+import { getStoreUrls, storeUrlLabel } from "../../utils/storeUrls";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    stores: Store[];
+    onStoresChanged: (stores: Store[]) => void;
+};
+
+/** Rozpracovaná editace obchodu — původní název slouží k jeho identifikaci na serveru. */
+type EditState = {
+    originalName: string;
+    name: string;
+    urls: string[];
+};
+
+/** Vstupní pole pro URL nabídek — vždy alespoň jedno prázdné, aby bylo kam psát. */
+function toUrlInputs(urls: string[]): string[] {
+    return urls.length > 0 ? urls : [''];
+}
+
+export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChanged }: Readonly<Props>) {
+    const [newName, setNewName] = useState('');
+    // Jeden podnik může být dostupný přes více dovozových služeb — proto seznam URL
+    const [newUrls, setNewUrls] = useState<string[]>(['']);
+    const [edit, setEdit] = useState<EditState | null>(null);
+    const [heslo, setHeslo] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const addUrlRow = (urls: string[]) => [...urls, ''];
+
+    const removeUrlRow = (urls: string[], index: number) =>
+        urls.length === 1 ? [''] : urls.filter((_, i) => i !== index);
+
+    const setUrlAt = (urls: string[], index: number, value: string) =>
+        urls.map((u, i) => (i === index ? value : u));
+
+    /** Zpracuje odpověď API — vrací true při úspěchu. Chybu z API hlásí globální toaster. */
+    const applyResult = (res: { data?: unknown; error?: unknown }): boolean => {
+        if (res.error) {
+            return false;
+        }
+        if (res.data) {
+            onStoresChanged(res.data as Store[]);
+            return true;
+        }
+        return false;
+    };
+
+    const handleAdd = async () => {
+        if (!newName.trim()) return;
+        setError(null);
+        setLoading(true);
+        try {
+            const urls = newUrls.map(u => u.trim()).filter(Boolean);
+            const res = await addStore({ body: { name: newName.trim(), urls: urls.length > 0 ? urls : undefined, heslo } });
+            if (applyResult(res)) {
+                setNewName('');
+                setNewUrls(['']);
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const startEdit = (store: Store) => {
+        setError(null);
+        setEdit({ originalName: store.name, name: store.name, urls: toUrlInputs(store.urls ?? []) });
+    };
+
+    const handleSaveEdit = async () => {
+        if (!edit || !edit.name.trim()) return;
+        setError(null);
+        setLoading(true);
+        try {
+            const res = await updateStore({
+                body: {
+                    name: edit.originalName,
+                    newName: edit.name.trim(),
+                    urls: edit.urls.map(u => u.trim()).filter(Boolean),
+                    heslo,
+                },
+            });
+            if (applyResult(res)) {
+                setEdit(null);
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleRemove = async (name: string) => {
+        setError(null);
+        setLoading(true);
+        try {
+            const res = await deleteStore({ body: { name, heslo } });
+            if (applyResult(res) && edit?.originalName === name) {
+                setEdit(null);
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    /** Řádky se vstupy pro URL — používá se pro přidání i pro editaci obchodu. */
+    const renderUrlInputs = (urls: string[], onChange: (urls: string[]) => void, onSubmit: () => void) => (
+        <>
+            {urls.map((url, index) => (
+                <div key={index} className="d-flex gap-2 mb-2 align-items-center">
+                    <Form.Control
+                        type="url"
+                        placeholder={index === 0
+                            ? 'URL na nabídku (volitelné, např. Bolt Food/Wolt)'
+                            : 'Další URL na nabídku (jiná dovozová služba)'}
+                        value={url}
+                        onChange={e => onChange(setUrlAt(urls, index, e.target.value))}
+                        onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') onSubmit(); }}
+                    />
+                    <Button
+                        variant="outline-secondary"
+                        onClick={() => onChange(removeUrlRow(urls, index))}
+                        disabled={urls.length === 1 && !url}
+                        title="Odebrat tuto URL"
+                    >
+                        <FontAwesomeIcon icon={faXmark} />
+                    </Button>
+                </div>
+            ))}
+            <Button variant="link" size="sm" className="p-0" onClick={() => onChange(addUrlRow(urls))}>
+                <FontAwesomeIcon icon={faPlus} className="me-1" />
+                Přidat další URL
+            </Button>
+        </>
+    );
+
+    return (
+        <Modal show={isOpen} onHide={onClose}>
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Správa obchodů</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {error && (
+                    <Alert variant="danger" onClose={() => setError(null)} dismissible>
+                        {error}
+                    </Alert>
+                )}
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Admin heslo</Form.Label>
+                    <Form.Control
+                        type="password"
+                        placeholder="Heslo"
+                        value={heslo}
+                        onChange={e => setHeslo(e.target.value)}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                </Form.Group>
+
+                <hr />
+                <h6>Přidat obchod</h6>
+                <Form.Control
+                    className="mb-2"
+                    type="text"
+                    placeholder="Název obchodu"
+                    value={newName}
+                    onChange={e => setNewName(e.target.value)}
+                    onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleAdd(); }}
+                />
+                {renderUrlInputs(newUrls, setNewUrls, handleAdd)}
+                <div className="d-flex justify-content-end mb-3">
+                    <Button variant="primary" onClick={handleAdd} disabled={loading || !newName.trim() || !heslo}>
+                        Přidat
+                    </Button>
+                </div>
+
+                <h6>Aktuální seznam</h6>
+                {stores.length === 0 ? (
+                    <p className="text-muted">Žádné obchody v seznamu</p>
+                ) : (
+                    <ListGroup>
+                        {stores.map(s => {
+                            const urls = getStoreUrls(s);
+                            const isEditing = edit?.originalName === s.name;
+
+                            if (isEditing) {
+                                return (
+                                    <ListGroup.Item key={s.name}>
+                                        <Form.Control
+                                            className="mb-2"
+                                            type="text"
+                                            placeholder="Název obchodu"
+                                            value={edit.name}
+                                            onChange={e => setEdit({ ...edit, name: e.target.value })}
+                                            onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveEdit(); }}
+                                        />
+                                        {renderUrlInputs(edit.urls, next => setEdit({ ...edit, urls: next }), handleSaveEdit)}
+                                        <div className="d-flex justify-content-end gap-2 mt-2">
+                                            <Button variant="secondary" size="sm" onClick={() => setEdit(null)}>
+                                                Zrušit
+                                            </Button>
+                                            <Button
+                                                variant="primary"
+                                                size="sm"
+                                                onClick={handleSaveEdit}
+                                                disabled={loading || !edit.name.trim() || !heslo}
+                                            >
+                                                Uložit
+                                            </Button>
+                                        </div>
+                                    </ListGroup.Item>
+                                );
+                            }
+
+                            return (
+                                <ListGroup.Item key={s.name} className="d-flex justify-content-between align-items-start">
+                                    <div>
+                                        <div>{s.name}</div>
+                                        {urls.length > 0 && (
+                                            <small className="text-muted d-flex flex-wrap gap-2">
+                                                {urls.map(url => (
+                                                    <a
+                                                        key={url}
+                                                        href={url}
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                        title={url}
+                                                    >
+                                                        {storeUrlLabel(url)}
+                                                        <FontAwesomeIcon icon={faUpRightFromSquare} className="ms-1" />
+                                                    </a>
+                                                ))}
+                                            </small>
+                                        )}
+                                    </div>
+                                    <div className="d-flex gap-3">
+                                        <FontAwesomeIcon
+                                            icon={faPen}
+                                            className="action-icon"
+                                            title="Upravit"
+                                            onClick={() => startEdit(s)}
+                                            style={{ cursor: 'pointer' }}
+                                        />
+                                        <FontAwesomeIcon
+                                            icon={faTrashCan}
+                                            className="action-icon"
+                                            title="Odebrat"
+                                            onClick={() => handleRemove(s.name)}
+                                            style={{ cursor: 'pointer' }}
+                                        />
+                                    </div>
+                                </ListGroup.Item>
+                            );
+                        })}
+                    </ListGroup>
+                )}
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={onClose}>Zavřít</Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/SuggestionDetailModal.tsx

@@ -0,0 +1,30 @@
+import { Modal, Button } from "react-bootstrap";
+import { Suggestion } from "../../../../types";
+
+type Props = {
+  suggestion?: Suggestion;
+  onClose: () => void;
+};
+
+/** Modální dialog zobrazující celý detail návrhu na vylepšení. */
+export default function SuggestionDetailModal({ suggestion, onClose }: Readonly<Props>) {
+  return (
+    <Modal show={!!suggestion} onHide={onClose} size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title><h2>{suggestion?.title}</h2></Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <p className="text-muted mb-3">
+          Navrhovatel: <strong>{suggestion?.author}</strong> · Hlasy: <strong>{suggestion?.voteScore}</strong>
+          {suggestion?.resolved && <> · <strong>Vyřešeno</strong></>}
+        </p>
+        <p style={{ whiteSpace: "pre-wrap" }}>{suggestion?.description}</p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onClose}>
+          Zavřít
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}

client/src/context/auth.tsx

@@ -55,7 +55,7 @@ function useProvideAuth(): AuthContextProps {
     setLoginName(undefined);
     setTrusted(undefined);
     if (trusted && logoutUrl?.length) {
-      window.location.replace(logoutUrl);
+      globalThis.location.replace(logoutUrl);
     }
   }
 

client/src/context/settings.tsx

@@ -3,14 +3,24 @@ import React, { ReactNode, useContext, useEffect, useState } from "react"
 const BANK_ACCOUNT_NUMBER_KEY = 'bank_account_number';
 const BANK_ACCOUNT_HOLDER_KEY = 'bank_account_holder_name';
 const HIDE_SOUPS_KEY = 'hide_soups';
+const THEME_KEY = 'theme_preference';
+const ACCENT_HUE_KEY = 'accent_hue';
+const LEGACY_COLOR_THEME_KEY = 'color_theme';
+
+export type ThemePreference = 'system' | 'light' | 'dark';
 
 export type SettingsContextProps = {
   bankAccount?: string,
   holderName?: string,
   hideSoups?: boolean,
+  themePreference: ThemePreference,
+  accentHue: number,
+  effectiveDark: boolean,
   setBankAccountNumber: (accountNumber?: string) => void,
   setBankAccountHolderName: (holderName?: string) => void,
   setHideSoupsOption: (hideSoups?: boolean) => void,
+  setThemePreference: (theme: ThemePreference) => void,
+  setAccentHue: (hue: number) => void,
 }
 
 type ContextProps = {
@@ -28,10 +38,86 @@ export const useSettings = () => {
   return useContext(settingsContext);
 }
 
+function getInitialTheme(): ThemePreference {
+  try {
+    const saved = localStorage.getItem(THEME_KEY) as ThemePreference | null;
+    if (saved && ['system', 'light', 'dark'].includes(saved)) {
+      return saved;
+    }
+  } catch (e) {
+    // localStorage nedostupný
+  }
+  return 'system';
+}
+
+function getInitialAccentHue(): number {
+  try {
+    const saved = localStorage.getItem(ACCENT_HUE_KEY);
+    if (saved !== null) {
+      const n = parseInt(saved, 10);
+      if (!isNaN(n) && n >= 0 && n <= 360) return n;
+    }
+    // Migrace ze starého string formátu (green/blue/purple)
+    const old = localStorage.getItem(LEGACY_COLOR_THEME_KEY);
+    if (old === 'blue') return 217;
+    if (old === 'purple') return 263;
+  } catch {
+    // localStorage nedostupný
+  }
+  return 142;
+}
+
+// Převod HSL na relativní jas dle WCAG (pro výpočet kontrastu s bílým textem)
+function hslToRelativeLuminance(h: number, s: number, l: number): number {
+  const sn = s / 100, ln = l / 100;
+  const a = sn * Math.min(ln, 1 - ln);
+  const ch = (n: number) => {
+    const k = (n + h / 30) % 12;
+    return ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+  };
+  const toLinear = (c: number) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  return 0.2126 * toLinear(ch(0)) + 0.7152 * toLinear(ch(8)) + 0.0722 * toLinear(ch(4));
+}
+
+// Najde nejnižší světlost, při které má barva dostatečný kontrast s bílým textem (WCAG AA 4.5:1)
+function adjustedL(hue: number, sat: number, targetL: number): number {
+  let l = targetL;
+  while (l >= 5) {
+    const lum = hslToRelativeLuminance(hue, sat, l);
+    if (1.05 / (lum + 0.05) >= 4.5) return l;
+    l -= 1;
+  }
+  return l;
+}
+
+function applyAccentColors(hue: number, isDark: boolean): void {
+  const sat = 70;
+  const baseL = adjustedL(hue, sat, isDark ? 55 : 38);
+  const hoverL = isDark ? Math.min(baseL + 10, 80) : Math.max(baseL - 10, 10);
+  const root = document.documentElement;
+  root.style.setProperty('--luncher-primary', `hsl(${hue} ${sat}% ${baseL}%)`);
+  root.style.setProperty('--luncher-primary-hover', `hsl(${hue} ${sat}% ${hoverL}%)`);
+  root.style.setProperty('--luncher-primary-light', isDark
+    ? `hsl(${hue} 60% 12%)`
+    : `hsl(${hue} 60% 92%)`);
+  root.style.setProperty('--luncher-action-icon', `hsl(${hue} ${sat}% ${baseL}%)`);
+  root.style.setProperty('--luncher-success', `hsl(${hue} ${sat}% ${baseL}%)`);
+}
+
 function useProvideSettings(): SettingsContextProps {
   const [bankAccount, setBankAccount] = useState<string | undefined>();
   const [holderName, setHolderName] = useState<string | undefined>();
   const [hideSoups, setHideSoups] = useState<boolean | undefined>();
+  const [themePreference, setTheme] = useState<ThemePreference>(getInitialTheme);
+  const [accentHue, setHue] = useState<number>(getInitialAccentHue);
+  const [effectiveDark, setEffectiveDark] = useState<boolean>(() => {
+    try {
+      const pref = localStorage.getItem(THEME_KEY) as ThemePreference | null;
+      if (pref === 'dark') return true;
+      if (pref === 'light') return false;
+    } catch { /* noop */ }
+    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+  });
 
   useEffect(() => {
     const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
@@ -72,6 +158,32 @@ function useProvideSettings(): SettingsContextProps {
     }
   }, [hideSoups]);
 
+  useEffect(() => {
+    localStorage.setItem(THEME_KEY, themePreference);
+  }, [themePreference]);
+
+  useEffect(() => {
+    const applyTheme = (dark: boolean) => {
+      document.documentElement.setAttribute('data-bs-theme', dark ? 'dark' : 'light');
+      setEffectiveDark(dark);
+    };
+    if (themePreference === 'system') {
+      const mq = window.matchMedia('(prefers-color-scheme: dark)');
+      applyTheme(mq.matches);
+      const handler = (e: MediaQueryListEvent) => applyTheme(e.matches);
+      mq.addEventListener('change', handler);
+      return () => mq.removeEventListener('change', handler);
+    } else {
+      applyTheme(themePreference === 'dark');
+    }
+  }, [themePreference]);
+
+  // Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý
+  useEffect(() => {
+    localStorage.setItem(ACCENT_HUE_KEY, String(accentHue));
+    applyAccentColors(accentHue, effectiveDark);
+  }, [accentHue, effectiveDark]);
+
   function setBankAccountNumber(bankAccount?: string) {
     setBankAccount(bankAccount);
   }
@@ -84,12 +196,25 @@ function useProvideSettings(): SettingsContextProps {
     setHideSoups(hideSoups);
   }
 
+  function setThemePreference(theme: ThemePreference) {
+    setTheme(theme);
+  }
+
+  function setAccentHue(hue: number) {
+    setHue(hue);
+  }
+
   return {
     bankAccount,
     holderName,
     hideSoups,
+    themePreference,
+    accentHue,
+    effectiveDark,
     setBankAccountNumber,
     setBankAccountHolderName,
     setHideSoupsOption,
+    setThemePreference,
+    setAccentHue,
   }
 }

client/src/context/socket.js

@@ -7,14 +7,28 @@ if (process.env.NODE_ENV === 'development') {
     socketUrl = `http://localhost:3001`;
     socketPath = undefined;
 } else {
-    socketUrl = `${window.location.host}`;
-    socketPath = `${window.location.pathname}socket.io`;
+    socketUrl = `${globalThis.location.host}`;
+    socketPath = '/socket.io';
 }
 
 export const socket = socketio.connect(socketUrl, { path: socketPath, transports: ["websocket"] });
 export const SocketContext = React.createContext();
 
+// Prohlížeče throttlují setTimeout v neaktivních tabech, což zdržuje automatické
+// znovupřipojení socket.io. Po návratu do tabu nebo focusu okna se připojíme hned.
+document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible' && !socket.connected) {
+        socket.connect();
+    }
+});
+window.addEventListener('focus', () => {
+    if (!socket.connected) {
+        socket.connect();
+    }
+});
+
 // Konstanty websocket eventů, musí odpovídat těm na serveru!
 export const EVENT_CONNECT = 'connect';
 export const EVENT_DISCONNECT = 'disconnect';
 export const EVENT_MESSAGE = 'message';
+export const EVENT_PENDING_QR = 'pendingQr';

client/src/hooks/useButterflyStats.ts

@@ -0,0 +1,256 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+    ButterflyStats,
+    getButterflyStats,
+    catchButterflies,
+    repairNet as repairNetApi,
+    killWasp as killWaspApi,
+    buyRepellent as buyRepellentApi,
+    reportNetTorn as reportTearApi,
+    reportRobbery as reportRobberyApi,
+    defeatThief as defeatThiefApi,
+    reportCaterpillarAte as caterpillarAteApi,
+    defeatCaterpillar as defeatCaterpillarApi,
+    reportMothHit as mothHitApi,
+    reportInspectionFail as inspectionFailApi,
+    buyPremiumNet as buyPremiumApi,
+    buyWaspSpray as waspSprayApi,
+    buyInsurance as buyInsuranceApi,
+    buyUpgrade as buyUpgradeApi,
+} from '../../../types';
+
+/** Druhy trvalých vylepšení v obchodě. */
+export type UpgradeItem = 'net' | 'scarecrow' | 'reinforced';
+
+/** Výsledek nákupu: úspěch / nedostatek mincí / jiná chyba (např. starý server). */
+export type BuyResult = 'ok' | 'poor' | 'error';
+
+/** Jak dlouho se čeká, než se nasbíraná dávka úlovků odešle na server. */
+const FLUSH_DEBOUNCE_MS = 1500;
+/** Jak často se přenačte stav ze serveru (kvůli přibývajícím škůdcům). */
+const POLL_INTERVAL_MS = 30_000;
+
+/** Událost odměny hlášená scéně po úspěšném odeslání dávky. */
+export interface RewardEvent {
+    coinsAwarded: number;
+    dailyBonusApplied: boolean;
+    leveledUp: boolean;
+    premiumUnlocked: boolean;
+    newLevel: number;
+    newTitle: string;
+}
+
+/**
+ * Hook spravující serverovou perzistenci chytání motýlků: načtení stavu, dávkové
+ * odesílání úlovků, hubení vos, plašič ptáků, protržení/opravu síťky, zloděje a
+ * periodické přenačítání (růst škůdců). Server je zdroj pravdy; počítadlo se
+ * zobrazuje jako serverová hodnota + zatím neodeslané úlovky.
+ */
+export function useButterflyStats(onReward?: (e: RewardEvent) => void) {
+    const [stats, setStats] = useState<ButterflyStats | undefined>();
+    /** Optimisticky zobrazený přírůstek chycených, který ještě neodešel na server. */
+    const [pendingShown, setPendingShown] = useState(0);
+    /** Živá hodnota mincí pro scénu (aby nečetla zastaralý stav přes closure). */
+    const coinsRef = useRef(0);
+    const pending = useRef({ normal: 0, golden: 0 });
+    const flushTimer = useRef<number | null>(null);
+    const onRewardRef = useRef(onReward);
+    onRewardRef.current = onReward;
+
+    const applyStats = useCallback((incoming: ButterflyStats) => {
+        coinsRef.current = incoming.coins;
+        setStats(incoming);
+    }, []);
+
+    const flush = useCallback(async () => {
+        if (flushTimer.current) {
+            clearTimeout(flushTimer.current);
+            flushTimer.current = null;
+        }
+        const batch = pending.current;
+        const batchTotal = batch.normal + batch.golden;
+        if (batchTotal === 0) return;
+        pending.current = { normal: 0, golden: 0 };
+        try {
+            const res = await catchButterflies({ body: { normal: batch.normal, golden: batch.golden } });
+            if (res.data) {
+                applyStats(res.data.stats);
+                // Odeslané úlovky už jsou v serverové hodnotě → sundáme je z optimistického přírůstku
+                setPendingShown(p => Math.max(0, p - batchTotal));
+                onRewardRef.current?.({
+                    coinsAwarded: res.data.coinsAwarded,
+                    dailyBonusApplied: res.data.dailyBonusApplied,
+                    leveledUp: res.data.leveledUp,
+                    premiumUnlocked: res.data.premiumUnlocked,
+                    newLevel: res.data.stats.level,
+                    newTitle: res.data.stats.title,
+                });
+            } else {
+                setPendingShown(p => Math.max(0, p - batchTotal));
+            }
+        } catch {
+            // Při chybě vrátíme dávku zpět (přírůstek necháme zobrazený)
+            pending.current.normal += batch.normal;
+            pending.current.golden += batch.golden;
+        }
+    }, [applyStats]);
+
+    /** Nahlásí chycení jednoho motýla (optimisticky + naplánuje odeslání dávky). */
+    const reportCatch = useCallback((golden: boolean) => {
+        if (golden) pending.current.golden += 1;
+        else pending.current.normal += 1;
+        setPendingShown(p => p + 1);
+        if (!flushTimer.current) {
+            flushTimer.current = window.setTimeout(() => { void flush(); }, FLUSH_DEBOUNCE_MS);
+        }
+    }, [flush]);
+
+    const repair = useCallback(async (): Promise<boolean> => {
+        try {
+            const res = await repairNetApi();
+            if (res.data) { applyStats(res.data); return true; }
+            return false;
+        } catch { return false; }
+    }, [applyStats]);
+
+    const killWasp = useCallback(async () => {
+        try {
+            const res = await killWaspApi();
+            if (res.data) applyStats(res.data);
+        } catch { /* ignore */ }
+    }, [applyStats]);
+
+    const buyRepellent = useCallback(async (): Promise<BuyResult> => {
+        try {
+            const res = await buyRepellentApi();
+            if (res.data) { applyStats(res.data); return 'ok'; }
+            return res.response?.status === 402 ? 'poor' : 'error';
+        } catch { return 'error'; }
+    }, [applyStats]);
+
+    const reportTear = useCallback(async () => {
+        try {
+            const res = await reportTearApi();
+            if (res.data) applyStats(res.data);
+        } catch { /* ignore */ }
+    }, [applyStats]);
+
+    /** Zloděj se dostal k penězům – server strhne podíl mincí. */
+    const reportRobbery = useCallback(async () => {
+        try {
+            const res = await reportRobberyApi();
+            if (res.data) applyStats(res.data);
+        } catch { /* ignore */ }
+    }, [applyStats]);
+
+    /** Hráč porazil zloděje – odměna a statistika. */
+    const defeatThief = useCallback(async () => {
+        try {
+            const res = await defeatThiefApi();
+            if (res.data) applyStats(res.data);
+        } catch { /* ignore */ }
+    }, [applyStats]);
+
+    /** Housenka se dostala k úlovkům – server sníží počet chycených. */
+    const caterpillarAte = useCallback(async () => {
+        try {
+            const res = await caterpillarAteApi();
+            if (res.data) applyStats(res.data);
+        } catch { /* ignore */ }
+    }, [applyStats]);
+
+    /** Hráč omylem chytil černou můru – server sníží úlovky. */
+    const mothHit = useCallback(async () => {
+        try {
+            const res = await mothHitApi();
+            if (res.data) applyStats(res.data);
+        } catch { /* ignore */ }
+    }, [applyStats]);
+
+    /** Selhání anti-bot inspekce – server počítá selhání a případně udělí ban. */
+    const reportInspectionFail = useCallback(async () => {
+        try {
+            const res = await inspectionFailApi();
+            if (res.data) applyStats(res.data);
+        } catch { /* ignore */ }
+    }, [applyStats]);
+
+    /** Vyhodnotí výsledek nákupu z odpovědi (402 = nedostatek mincí, jinak chyba). */
+    const buyResult = useCallback((res: { data?: unknown; response?: Response }): BuyResult => {
+        if (res.data) { applyStats(res.data as ButterflyStats); return 'ok'; }
+        return res.response?.status === 402 ? 'poor' : 'error';
+    }, [applyStats]);
+
+    /** Obchod: koupě spotřebního předmětu / vylepšení. */
+    const buyPremium = useCallback(async (): Promise<BuyResult> => {
+        try { return buyResult(await buyPremiumApi()); } catch { return 'error'; }
+    }, [buyResult]);
+    const waspSpray = useCallback(async (): Promise<BuyResult> => {
+        try { return buyResult(await waspSprayApi()); } catch { return 'error'; }
+    }, [buyResult]);
+    const buyInsurance = useCallback(async (): Promise<BuyResult> => {
+        try { return buyResult(await buyInsuranceApi()); } catch { return 'error'; }
+    }, [buyResult]);
+    const buyUpgrade = useCallback(async (item: UpgradeItem): Promise<BuyResult> => {
+        try { return buyResult(await buyUpgradeApi({ body: { item } })); } catch { return 'error'; }
+    }, [buyResult]);
+
+    /** Hráč porazil housenku – odměna a statistika. */
+    const defeatCaterpillar = useCallback(async () => {
+        try {
+            const res = await defeatCaterpillarApi();
+            if (res.data) applyStats(res.data);
+        } catch { /* ignore */ }
+    }, [applyStats]);
+
+    const refresh = useCallback(async () => {
+        try {
+            const res = await getButterflyStats();
+            if (res.data) applyStats(res.data);
+        } catch { /* ignore */ }
+    }, [applyStats]);
+
+    // Načtení stavu
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const res = await getButterflyStats();
+                if (!cancelled && res.data) applyStats(res.data);
+            } catch { /* server nedostupný – hra jede dál bez perzistence */ }
+        })();
+        return () => { cancelled = true; };
+    }, [applyStats]);
+
+    // Periodické přenačítání (růst škůdců) + při návratu na záložku
+    useEffect(() => {
+        const id = window.setInterval(() => { void refresh(); }, POLL_INTERVAL_MS);
+        const onVisible = () => { if (document.visibilityState === 'visible') void refresh(); };
+        document.addEventListener('visibilitychange', onVisible);
+        return () => {
+            window.clearInterval(id);
+            document.removeEventListener('visibilitychange', onVisible);
+        };
+    }, [refresh]);
+
+    // Odeslání rozdělané dávky při skrytí/opuštění stránky a při odmontování
+    useEffect(() => {
+        const onVisibility = () => { if (document.visibilityState === 'hidden') void flush(); };
+        const onPageHide = () => { void flush(); };
+        document.addEventListener('visibilitychange', onVisibility);
+        window.addEventListener('pagehide', onPageHide);
+        return () => {
+            document.removeEventListener('visibilitychange', onVisibility);
+            window.removeEventListener('pagehide', onPageHide);
+            void flush();
+        };
+    }, [flush]);
+
+    const displayCaught = (stats?.caught ?? 0) + pendingShown;
+
+    return {
+        stats, displayCaught, coinsRef, reportCatch, repair, killWasp, buyRepellent,
+        reportTear, reportRobbery, defeatThief, caterpillarAte, defeatCaterpillar,
+        mothHit, reportInspectionFail, buyPremium, waspSpray, buyInsurance, buyUpgrade,
+    };
+}

client/src/hooks/usePushReminder.ts

@@ -0,0 +1,109 @@
+import { getToken } from '../Utils';
+
+/** Převede base64url VAPID klíč na Uint8Array pro PushManager. */
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+    const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+    const rawData = atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+    for (let i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}
+
+/** Helper pro autorizované API volání na push endpointy. */
+async function pushApiFetch(path: string, options: RequestInit = {}): Promise<Response> {
+    const token = getToken();
+    return fetch(`/api/notifications/push${path}`, {
+        ...options,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            ...options.headers,
+        },
+    });
+}
+
+/**
+ * Zaregistruje service worker, přihlásí se k push notifikacím
+ * a odešle subscription na server. `reminderTime` je volitelný — bez něj
+ * uživatel odebírá jen ostatní push notifikace (např. doručení objednávky).
+ */
+export async function subscribeToPush(reminderTime?: string): Promise<boolean> {
+    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+        console.warn('Push notifikace nejsou v tomto prohlížeči podporovány');
+        return false;
+    }
+
+    try {
+        // Registrace service workeru
+        const registration = await navigator.serviceWorker.register('/sw.js');
+        await navigator.serviceWorker.ready;
+
+        // Vyžádání oprávnění
+        const permission = await Notification.requestPermission();
+        if (permission !== 'granted') {
+            console.warn('Push notifikace: oprávnění zamítnuto');
+            return false;
+        }
+
+        // Získání VAPID veřejného klíče ze serveru
+        const vapidResponse = await pushApiFetch('/vapidKey');
+        if (!vapidResponse.ok) {
+            console.error('Push notifikace: nepodařilo se získat VAPID klíč');
+            return false;
+        }
+        const { key: vapidPublicKey } = await vapidResponse.json();
+
+        // Přihlášení k push
+        const subscription = await registration.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: urlBase64ToUint8Array(vapidPublicKey) as BufferSource,
+        });
+
+        // Odeslání subscription na server
+        const response = await pushApiFetch('/subscribe', {
+            method: 'POST',
+            body: JSON.stringify({
+                subscription: subscription.toJSON(),
+                reminderTime,
+            }),
+        });
+
+        if (!response.ok) {
+            console.error('Push notifikace: nepodařilo se odeslat subscription na server');
+            return false;
+        }
+
+        console.log('Push notifikace: úspěšně přihlášeno', reminderTime ? `(připomínka v ${reminderTime})` : '(bez připomínky oběda)');
+        return true;
+    } catch (error) {
+        console.error('Push notifikace: chyba při registraci', error);
+        return false;
+    }
+}
+
+/**
+ * Odhlásí se z push notifikací a informuje server.
+ */
+export async function unsubscribeFromPush(): Promise<void> {
+    if (!('serviceWorker' in navigator)) {
+        return;
+    }
+
+    try {
+        const registration = await navigator.serviceWorker.getRegistration('/sw.js');
+        if (registration) {
+            const subscription = await registration.pushManager.getSubscription();
+            if (subscription) {
+                await subscription.unsubscribe();
+            }
+        }
+
+        await pushApiFetch('/unsubscribe', { method: 'POST' });
+        console.log('Push notifikace: úspěšně odhlášeno');
+    } catch (error) {
+        console.error('Push notifikace: chyba při odhlášení', error);
+    }
+}

client/src/index.css

@@ -7,14 +7,32 @@ body,
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Better focus styles */
+:focus-visible {
+  outline: 2px solid var(--luncher-primary);
+  outline-offset: 2px;
+}
+
+/* Selection color */
+::selection {
+  background: var(--luncher-primary-light);
+  color: var(--luncher-primary);
+}

client/src/index.tsx

@@ -6,20 +6,38 @@ import './index.css';
 import AppRoutes from './AppRoutes';
 import { BrowserRouter } from 'react-router';
 import { client } from '../../types/gen/client.gen';
+import { getConfig } from '../../types/gen/sdk.gen';
 import { getToken } from './Utils';
 import { toast } from 'react-toastify';
+import * as Sentry from '@sentry/react';
 
 client.setConfig({
   auth: () => getToken(),
   baseUrl: '/api', // openapi-ts si to z nějakého důvodu neumí převzít z api.yml
 });
 
+// Sentry se inicializuje až podle runtime konfigurace ze serveru (bez DSN zůstává vypnuté).
+// Klient je statický build, takže DSN nejde zapéct při buildu — server ho zná z env.
+getConfig().then(({ data }) => {
+  if (data?.sentry.dsn) {
+    Sentry.init({
+      dsn: data.sentry.dsn,
+      environment: data.sentry.environment,
+    });
+  }
+}).catch(() => { /* config endpoint nedostupný — běžíme bez Sentry */ });
+
 // Interceptor na vyhození toasteru při chybě
 client.interceptors.response.use(async response => {
   // TODO opravit - login je zatím výjimka, voláme ho "naprázdno" abychom zjistili, zda nás nepřihlásily trusted headers
-  if (!response.ok && response.url.indexOf("/login") == -1) {
-    const json = await response.json();
+  if (!response.ok && !response.url.includes("/login")) {
+    // Čteme z klonu, aby tělo odpovědi zůstalo k dispozici i generovanému SDK
+    const json = await response.clone().json();
     toast.error(json.error, { theme: "colored" });
+    // Serverové chyby hlásíme do Sentry; 4xx jsou očekávané (chyby uživatele)
+    if (response.status >= 500) {
+      Sentry.captureMessage(`API ${response.status}: ${new URL(response.url).pathname} — ${json.error}`, 'error');
+    }
   }
   return response;
 });
@@ -29,10 +47,18 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
+    <Sentry.ErrorBoundary fallback={
+      <div className="text-center p-5">
+        <h4>Něco se pokazilo 😕</h4>
+        <p>Chyba byla nahlášena. Zkuste stránku načíst znovu.</p>
+        <button className="btn btn-primary" onClick={() => window.location.reload()}>Načíst znovu</button>
+      </div>
+    }>
       <BrowserRouter>
         <ProvideAuth>
           <AppRoutes />
         </ProvideAuth>
       </BrowserRouter>
+    </Sentry.ErrorBoundary>
   </React.StrictMode>
 );

client/src/pages/OrderGroupsPage.tsx

@@ -0,0 +1,968 @@
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Alert, Badge, Button, Card, Form, Modal, OverlayTrigger, Table, Tooltip } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrashCan } from '@fortawesome/free-regular-svg-icons';
+import { faBasketShopping, faChevronLeft, faChevronRight, faCircleCheck, faClockRotateLeft, faGear, faLock, faLockOpen, faPen, faSearch, faUserPlus } from '@fortawesome/free-solid-svg-icons';
+import DatePicker, { registerLocale } from 'react-datepicker';
+import { cs } from 'date-fns/locale';
+import 'react-datepicker/dist/react-datepicker.css';
+import {
+    ClientData, GroupState, MealSlot, OrderGroup, OrderGroupMember, PendingQr, TrackingProvider,
+    getData, createGroup, deleteGroup, addGroupMember, removeGroupMember, updateGroupMember, setGroupState, updateGroupTimes, setTracking, getOrderDates,
+} from '../../../types';
+import { computeFeeShare, computeMemberTotal, countActiveMembers } from '../utils/groupFees';
+import { getStoreUrls, isHttpUrl, storeUrlLabel } from '../utils/storeUrls';
+import { EVENT_MESSAGE, EVENT_PENDING_QR, SocketContext } from '../context/socket';
+import { useAuth } from '../context/auth';
+import { useSettings } from '../context/settings';
+import { formatDate, formatDateString } from '../Utils';
+import Login from '../Login';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import Loader from '../components/Loader';
+import StoreAdminModal from '../components/modals/StoreAdminModal';
+import PayForGroupModal from '../components/modals/PayForGroupModal';
+import EditGroupFeesModal from '../components/modals/EditGroupFeesModal';
+import BoltSimulationModal from '../components/modals/BoltSimulationModal';
+import PendingPayments from '../components/PendingPayments';
+import OrderProgress, { PROVIDER_LABEL } from '../components/OrderProgress';
+
+const SLOT = MealSlot.EXTRA;
+const TIME_REGEX = /^([01]\d|2[0-3]):[0-5]\d$/;
+const IS_DEV = process.env.NODE_ENV === 'development';
+
+/** Předpony sdílecích odkazů jednotlivých služeb (pro sestavení odkazu z uloženého kódu). */
+const TRACKING_URL_PREFIX: Record<TrackingProvider, string> = {
+    bolt: 'https://food.bolt.eu/sharedActiveOrder/',
+    wolt: 'https://track.wolt.com/',
+};
+/** Tvar kódu sledování u jednotlivých služeb — musí odpovídat serveru (trackingProviders.ts). */
+const TRACKING_CODE_REGEX: Record<TrackingProvider, RegExp> = {
+    bolt: /^[0-9a-f]{64}$/i,
+    wolt: /^[A-Za-z0-9_-]{20,32}$/,
+};
+const TRACKING_HOST: Record<TrackingProvider, string> = {
+    bolt: 'bolt.eu',
+    wolt: 'wolt.com',
+};
+
+/** Sestaví odkaz na sledování objednávky ze služby a kódu. */
+function trackingUrlFor(provider: TrackingProvider, code: string): string {
+    return `${TRACKING_URL_PREFIX[provider] ?? ''}${code}`;
+}
+
+/**
+ * Rozpozná rozvozovou službu podle odkazu na sledování (nebo podle samotného kódu)
+ * a vytáhne z něj kód sledování. Null = vstup nepatří žádné podporované službě.
+ */
+function extractTracking(input: string): { provider: TrackingProvider; code: string } | null {
+    const trimmed = input.trim();
+    if (!trimmed) return null;
+    let hostname = '';
+    let lastSegment = '';
+    try {
+        const url = new URL(trimmed);
+        hostname = url.hostname.toLowerCase();
+        const segments = url.pathname.split('/').filter(Boolean);
+        lastSegment = segments[segments.length - 1] ?? '';
+    } catch {
+        // Vstup není URL — zkusíme ho vzít jako samotný kód
+    }
+    for (const provider of Object.values(TrackingProvider)) {
+        const regex = TRACKING_CODE_REGEX[provider];
+        if (!hostname && regex.test(trimmed)) return { provider, code: trimmed };
+        const host = TRACKING_HOST[provider];
+        const hostMatches = hostname === host || hostname.endsWith(`.${host}`);
+        if (hostMatches && regex.test(lastSegment)) return { provider, code: lastSegment };
+    }
+    return null;
+}
+
+/** Zkrátí dlouhý odkaz pro zobrazení v řádku (zachová začátek i konec). */
+function shortenUrl(url: string, max = 48): string {
+    if (url.length <= max) return url;
+    const head = Math.ceil((max - 1) / 2);
+    const tail = Math.floor((max - 1) / 2);
+    return `${url.slice(0, head)}…${url.slice(url.length - tail)}`;
+}
+
+// Český lokál pro date picker (názvy měsíců/dnů, pondělí jako první den)
+registerLocale('cs', cs);
+
+/** Vrátí ISO datum (YYYY-MM-DD) posunuté o předaný počet dní. */
+function shiftIsoDate(iso: string, days: number): string {
+    const date = new Date(`${iso}T00:00:00`);
+    date.setDate(date.getDate() + days);
+    return formatDate(date);
+}
+
+/** Převede ISO datum (YYYY-MM-DD) na lokální Date (půlnoc), nebo null. */
+function isoToDate(iso?: string): Date | null {
+    return iso ? new Date(`${iso}T00:00:00`) : null;
+}
+
+function stateBadge(state: GroupState) {
+    const map: Record<GroupState, { bg: string; label: string }> = {
+        [GroupState.OPEN]: { bg: 'success', label: 'Otevřeno' },
+        [GroupState.LOCKED]: { bg: 'warning', label: 'Uzamčeno' },
+        [GroupState.ORDERED]: { bg: 'secondary', label: 'Objednáno' },
+    };
+    const { bg, label } = map[state] ?? { bg: 'light', label: state };
+    return <Badge bg={bg}>{label}</Badge>;
+}
+
+export default function OrderGroupsPage() {
+    const auth = useAuth();
+    const settings = useSettings();
+    const socket = useContext(SocketContext);
+    const [data, setData] = useState<ClientData | undefined>();
+    const [failure, setFailure] = useState(false);
+    // Vybrané datum pro zobrazení historie (undefined = aktuální den)
+    const [selectedDate, setSelectedDate] = useState<string | undefined>();
+    // ISO datum dnešního dne dle serveru (horní hranice navigace), zjištěné při prvním načtení
+    const [todayIso, setTodayIso] = useState<string | undefined>();
+    // Ref pro socket handler – aby věděl, zda se zobrazuje historie (na ní se živé aktualizace neaplikují)
+    const selectedDateRef = useRef<string | undefined>(undefined);
+    // ISO data dnů, ve kterých existuje aspoň jedna objednávka (pro zvýraznění v date pickeru)
+    const [orderDates, setOrderDates] = useState<string[]>([]);
+    const [newGroupName, setNewGroupName] = useState('');
+    // Vybraná URL na nabídku — podnik může být dostupný přes více dovozových služeb
+    const [newGroupUrl, setNewGroupUrl] = useState('');
+    const [creating, setCreating] = useState(false);
+    const [adminModalOpen, setAdminModalOpen] = useState(false);
+    const [editAmounts, setEditAmounts] = useState<Record<string, string>>({});
+    const [editNotes, setEditNotes] = useState<Record<string, string>>({});
+    const [editSurcharges, setEditSurcharges] = useState<Record<string, { text: string; amount: string }>>({});
+    const [editTimes, setEditTimes] = useState<Record<string, { orderedAt: string; deliveryAt: string; trackingUrl: string }>>({});
+    const [payModal, setPayModal] = useState<OrderGroup | null>(null);
+    const [feesModal, setFeesModal] = useState<OrderGroup | null>(null);
+    const [boltSimModal, setBoltSimModal] = useState<OrderGroup | null>(null);
+    const [confirmOrderGroup, setConfirmOrderGroup] = useState<OrderGroup | null>(null);
+    const [pageError, setPageError] = useState<string | null>(null);
+
+    const fetchData = async (date?: string) => {
+        try {
+            const r = await getData({ query: { slot: SLOT, date } });
+            if (r.data) {
+                setData(r.data);
+                // Při zobrazení aktuálního dne si zapamatujeme dnešní ISO datum jako horní hranici navigace
+                if (!date && r.data.isoDate) setTodayIso(r.data.isoDate);
+            }
+        } catch {
+            setFailure(true);
+        }
+    };
+
+    // Načte dny s objednávkou pro zvýraznění v date pickeru
+    const fetchOrderDates = async () => {
+        const r = await getOrderDates();
+        if (r.data?.dates) setOrderDates(r.data.dates);
+    };
+
+    useEffect(() => {
+        selectedDateRef.current = selectedDate;
+    }, [selectedDate]);
+
+    useEffect(() => {
+        if (!auth?.login) return;
+        fetchData(selectedDate);
+    }, [auth?.login, selectedDate]);
+
+    useEffect(() => {
+        if (!auth?.login) return;
+        fetchOrderDates();
+    }, [auth?.login]);
+
+    useEffect(() => {
+        socket.on(EVENT_MESSAGE, (newData: ClientData) => {
+            // Živé aktualizace se týkají vždy dneška – při zobrazení historie je ignorujeme
+            if (selectedDateRef.current) return;
+            if (newData.slot === SLOT) setData(prev => ({
+                ...newData,
+                stores: newData.stores ?? prev?.stores,
+            }));
+        });
+        // Nová nevyřízená platba (QR kód) – připojíme do dat, aby se zobrazila i bez znovunačtení stránky
+        socket.on(EVENT_PENDING_QR, (pendingQr: PendingQr) => {
+            if (selectedDateRef.current) return;
+            setData(prev => prev ? { ...prev, pendingQrs: [...(prev.pendingQrs ?? []), pendingQr] } : prev);
+        });
+        return () => { socket.off(EVENT_MESSAGE); socket.off(EVENT_PENDING_QR); };
+    }, [socket]);
+
+    // Připojení do osobní socket místnosti po přihlášení – bez toho nechodí události
+    // o nových nevyřízených platbách (QR kódy se posílají do místnosti user:<login>)
+    useEffect(() => {
+        if (auth?.login) {
+            socket.emit('join', auth.login);
+        }
+    }, [auth?.login, socket]);
+
+    useEffect(() => {
+        // Po znovupřipojení socketu znovu vstoupíme do osobní místnosti a načteme aktuálně
+        // zobrazený den (mohli jsme přijít o živé aktualizace)
+        const onReconnect = () => {
+            if (auth?.login) socket.emit('join', auth.login);
+            fetchData(selectedDateRef.current);
+        };
+        socket.io.on('reconnect', onReconnect);
+        return () => { socket.io.off('reconnect', onReconnect); };
+    }, [socket, auth?.login]);
+
+    // Navigace mezi dny pomocí klávesových šipek (←/→), obdobně jako na hlavní stránce
+    const handleKeyDown = useCallback((e: KeyboardEvent) => {
+        // Ignorujeme, pokud uživatel právě píše do formulářového pole
+        const tag = (e.target as HTMLElement)?.tagName;
+        if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
+        const currentIso = data?.isoDate;
+        if (!currentIso) return;
+        if (e.keyCode === 37) {
+            // Předchozí den – do minulosti bez omezení
+            setSelectedDate(shiftIsoDate(currentIso, -1));
+        } else if (e.keyCode === 39 && todayIso != null && currentIso < todayIso) {
+            // Následující den – nejvýše po dnešek (na dnešek přes undefined kvůli živým aktualizacím)
+            const target = shiftIsoDate(currentIso, 1);
+            setSelectedDate(target >= todayIso ? undefined : target);
+        }
+    }, [data?.isoDate, todayIso]);
+
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [handleKeyDown]);
+
+    const refresh = async (fn: () => Promise<any>): Promise<boolean> => {
+        setPageError(null);
+        const result = await fn();
+        if (result?.error) {
+            setPageError((result.error as any).error || 'Nastala chyba');
+            await fetchData();
+            return false;
+        }
+        if (result?.data) {
+            setData(result.data);
+            socket.emit?.('message', result.data as ClientData);
+        }
+        // Sada dnů s objednávkou se mohla změnit (vytvoření/smazání skupiny)
+        fetchOrderDates();
+        return true;
+    };
+
+    const handleCreate = async () => {
+        if (!newGroupName || !auth?.login) return;
+        setCreating(true);
+        // Pojistka, kdyby se seznam obchodů mezitím změnil (socket) — vezmeme první URL podniku
+        const urls = getStoreUrls((data?.stores ?? []).find(s => s.name === newGroupName));
+        const url = urls.includes(newGroupUrl) ? newGroupUrl : urls[0];
+        const ok = await refresh(() => createGroup({ body: { name: newGroupName, url } }));
+        if (ok) {
+            setNewGroupName('');
+            setNewGroupUrl('');
+        }
+        setCreating(false);
+    };
+
+
+    const handleJoin = (groupId: string) =>
+        refresh(() => addGroupMember({ body: { id: groupId } }));
+
+    const handleToggleLock = (group: OrderGroup) => {
+        const next = group.state === GroupState.OPEN ? GroupState.LOCKED : GroupState.OPEN;
+        return refresh(() => setGroupState({ body: { id: group.id, state: next } }));
+    };
+
+    const handleConfirmOrdered = async (group: OrderGroup) => {
+        setConfirmOrderGroup(null);
+        await refresh(() => setGroupState({ body: { id: group.id, state: GroupState.ORDERED } }));
+    };
+
+    const handleRevertOrdered = (group: OrderGroup) =>
+        refresh(() => setGroupState({ body: { id: group.id, state: GroupState.LOCKED } }));
+
+    const handleDelete = (groupId: string) =>
+        refresh(() => deleteGroup({ body: { id: groupId } }));
+
+    const handleSaveAmount = async (groupId: string, login: string) => {
+        const key = `${groupId}:${login}`;
+        const raw = editAmounts[key];
+        const n = parseFloat(raw ?? '');
+        if (!raw || isNaN(n) || n < 0) {
+            setPageError('Zadejte platnou kladnou částku');
+            return;
+        }
+        const ok = await refresh(() => updateGroupMember({ body: { id: groupId, login, amount: Math.round(n * 100) } }));
+        if (ok) setEditAmounts(prev => { const next = { ...prev }; delete next[key]; return next; });
+    };
+
+    const handleSaveNote = async (groupId: string, login: string) => {
+        const key = `${groupId}:${login}`;
+        const note = editNotes[key] ?? '';
+        const ok = await refresh(() => updateGroupMember({ body: { id: groupId, login, note } }));
+        if (ok) setEditNotes(prev => { const next = { ...prev }; delete next[key]; return next; });
+    };
+
+    const handleSaveSurcharge = async (groupId: string, login: string) => {
+        const key = `${groupId}:${login}`;
+        const surchargeText = editSurcharges[key]?.text ?? '';
+        const rawAmount = editSurcharges[key]?.amount ?? '';
+        const surchargeAmount = rawAmount === '' ? 0 : parseFloat(rawAmount.replace(',', '.'));
+        if (rawAmount !== '' && (isNaN(surchargeAmount) || surchargeAmount < 0)) {
+            setPageError('Zadejte platnou výši příplatku');
+            return;
+        }
+        const ok = await refresh(() => updateGroupMember({ body: { id: groupId, login, surchargeText, surchargeAmount: rawAmount === '' ? 0 : Math.round(surchargeAmount * 100) } }));
+        if (ok) setEditSurcharges(prev => { const next = { ...prev }; delete next[key]; return next; });
+    };
+
+    const handleSaveTimes = async (group: OrderGroup) => {
+        const times = editTimes[group.id];
+        if (!times) return;
+        const { orderedAt, deliveryAt, trackingUrl } = times;
+        if (orderedAt && !TIME_REGEX.test(orderedAt)) {
+            setPageError('Čas objednání musí být ve formátu HH:MM');
+            return;
+        }
+        if (deliveryAt && !TIME_REGEX.test(deliveryAt)) {
+            setPageError('Čas doručení musí být ve formátu HH:MM');
+            return;
+        }
+        // Odkaz na sledování se odesílá jen při změně oproti aktuálnímu kódu skupiny
+        const tracking = trackingUrl.trim() ? extractTracking(trackingUrl) : null;
+        if (trackingUrl.trim() && !tracking) {
+            setPageError('Neplatný odkaz pro sledování (očekáván odkaz Bolt Food nebo Wolt)');
+            return;
+        }
+        const trackingChanged = tracking?.code !== group.trackingCode || tracking?.provider !== group.trackingProvider;
+        let ok = await refresh(() => updateGroupTimes({ body: { id: group.id, orderedAt, deliveryAt } }));
+        if (ok && trackingChanged) {
+            ok = await refresh(() => setTracking({ body: { id: group.id, shareUrl: trackingUrl.trim() } }));
+        }
+        if (ok) setEditTimes(prev => { const next = { ...prev }; delete next[group.id]; return next; });
+    };
+
+    // Pozn.: tyto funkce se volají až v renderu, kde je k dispozici `selectedDate`.
+    // Historie (jiný než aktuální den) je vždy read-only.
+    const canEditMember = (group: OrderGroup, targetLogin: string) => {
+        if (selectedDate) return false;
+        if (group.state === GroupState.ORDERED) return false;
+        if (auth?.login === group.creatorLogin) return true;
+        if (auth?.login === targetLogin && group.state === GroupState.OPEN) return true;
+        return false;
+    };
+
+    const canManageMembers = (group: OrderGroup) => {
+        if (selectedDate) return false;
+        if (group.state === GroupState.ORDERED) return false;
+        if (auth?.login === group.creatorLogin) return true;
+        return group.state === GroupState.OPEN;
+    };
+
+    if (!auth?.login) return <Login />;
+
+    if (failure) return (
+        <Loader icon={faSearch} description="Nepodařilo se načíst data" animation="fa-beat" />
+    );
+
+    if (!data) return (
+        <Loader icon={faSearch} description="Načítám..." animation="fa-bounce" />
+    );
+
+    const stores = data.stores ?? [];
+    const groups = data.groups ?? [];
+    // URL na nabídku vybíraného podniku — výběr nabízíme, jen když jich je víc
+    const newStoreUrls = getStoreUrls(stores.find(s => s.name === newGroupName));
+
+    // Zobrazené datum a režim historie (vše read-only, pokud nejde o aktuální den)
+    const displayedIso = data.isoDate;
+    const isToday = !selectedDate || (todayIso != null && displayedIso === todayIso);
+    const isReadOnly = !isToday;
+    const canGoNext = todayIso != null && displayedIso != null && displayedIso < todayIso;
+
+    const goToDay = (offset: number) => {
+        if (!displayedIso) return;
+        const target = shiftIsoDate(displayedIso, offset);
+        // Na dnešek (či dál) se vracíme přes undefined, aby se obnovily živé aktualizace
+        setSelectedDate(todayIso != null && target >= todayIso ? undefined : target);
+    };
+
+    const handleDatePick = (value: string) => {
+        if (!value) return;
+        setSelectedDate(todayIso != null && value >= todayIso ? undefined : value);
+    };
+
+    // Dny s objednávkou jako Date objekty pro zvýraznění v kalendáři
+    const highlightedOrderDates = orderDates
+        .map(d => isoToDate(d))
+        .filter((d): d is Date => d != null);
+
+    return (
+        <div className="app-container">
+            <Header choices={data.choices} />
+            <div className="wrapper">
+                <div className="d-flex align-items-center justify-content-between mb-1">
+                    <h1 className="title mb-0">Objednání</h1>
+                    <Button variant="outline-primary" size="sm" onClick={() => setAdminModalOpen(true)} title="Správa obchodů">
+                        <FontAwesomeIcon icon={faGear} className="me-1" />
+                        Obchody
+                    </Button>
+                </div>
+                <p style={{ color: 'var(--luncher-text-muted)' }}>Skupinové objednávky z obchodů a restaurací</p>
+
+                {/* Navigace mezi dny – šipky kolem výběru data (i klávesami ←/→) */}
+                <div className="day-navigator order-day-navigator">
+                    <span title="Předchozí den">
+                        <FontAwesomeIcon icon={faChevronLeft} onClick={() => goToDay(-1)} />
+                    </span>
+                    <DatePicker
+                        selected={isoToDate(displayedIso)}
+                        onChange={(d: Date | null) => handleDatePick(d ? formatDate(d) : '')}
+                        maxDate={isoToDate(todayIso) ?? undefined}
+                        highlightDates={[{ 'luncher-order-day': highlightedOrderDates }]}
+                        locale="cs"
+                        dateFormat="d. M. yyyy"
+                        calendarStartDay={1}
+                        popperPlacement="bottom"
+                        className={`form-control text-center fw-semibold order-date-input ${isReadOnly ? 'text-muted' : ''}`}
+                    />
+                    <span title="Následující den">
+                        <FontAwesomeIcon
+                            icon={faChevronRight}
+                            style={{ visibility: canGoNext ? 'visible' : 'hidden' }}
+                            onClick={() => canGoNext && goToDay(1)}
+                        />
+                    </span>
+                </div>
+
+                {isReadOnly && (
+                    <Alert variant="secondary" className="d-flex align-items-center gap-2 py-2">
+                        <FontAwesomeIcon icon={faClockRotateLeft} />
+                        <span>
+                            Prohlížíte historii ze dne <strong>{displayedIso ? formatDateString(displayedIso) : data.date}</strong> – data jsou pouze pro čtení.
+                        </span>
+                        <Button variant="link" size="sm" className="p-0 ms-auto" onClick={() => setSelectedDate(undefined)}>
+                            Zpět na dnešek
+                        </Button>
+                    </Alert>
+                )}
+
+                {pageError && (
+                    <Alert variant="danger" dismissible onClose={() => setPageError(null)} className="mt-2">
+                        {pageError}
+                    </Alert>
+                )}
+
+                <div className="content-wrapper">
+                    <div className="content" style={{ maxWidth: 1200 }}>
+                        {/* Vytvoření nové skupiny – pouze pro aktuální den */}
+                        {!isReadOnly && (
+                        <div className="choice-section fade-in mb-4">
+                            <h5>Vytvořit skupinu</h5>
+                            {stores.length === 0 ? (
+                                <p className="text-muted">
+                                    Nejsou přidány žádné obchody.{' '}
+                                    <Button variant="link" size="sm" className="p-0" onClick={() => setAdminModalOpen(true)}>
+                                        Přidat obchod
+                                    </Button>
+                                </p>
+                            ) : (
+                                <div className="d-flex gap-2 align-items-center flex-wrap">
+                                    <Form.Select
+                                        value={newGroupName}
+                                        onChange={e => {
+                                            const name = e.target.value;
+                                            setNewGroupName(name);
+                                            // Výběr nabídky se resetuje na první URL nově vybraného podniku
+                                            setNewGroupUrl(getStoreUrls(stores.find(s => s.name === name))[0] ?? '');
+                                        }}
+                                        style={{ maxWidth: 260 }}
+                                    >
+                                        <option value="">— vyberte obchod —</option>
+                                        {stores.map(s => <option key={s.name} value={s.name}>{s.name}</option>)}
+                                    </Form.Select>
+                                    {newStoreUrls.length > 1 && (
+                                        <Form.Select
+                                            value={newStoreUrls.includes(newGroupUrl) ? newGroupUrl : newStoreUrls[0]}
+                                            onChange={e => setNewGroupUrl(e.target.value)}
+                                            style={{ maxWidth: 220 }}
+                                            title="Odkud se bude objednávat"
+                                        >
+                                            {newStoreUrls.map(url => (
+                                                <option key={url} value={url}>{storeUrlLabel(url)}</option>
+                                            ))}
+                                        </Form.Select>
+                                    )}
+                                    <Button variant="primary" onClick={handleCreate} disabled={creating || !newGroupName}>
+                                        Vytvořit skupinu
+                                    </Button>
+                                </div>
+                            )}
+                        </div>
+                        )}
+
+                        {/* Seznam skupin */}
+                        {groups.length === 0 && (
+                            <p className="text-muted fade-in">
+                                {isReadOnly ? 'Pro tento den nejsou žádné skupiny.' : 'Zatím žádné skupiny pro dnešní den.'}
+                            </p>
+                        )}
+
+                        {groups.map(group => {
+                            const login = auth!.login ?? '';
+                            const isCreator = login === group.creatorLogin;
+                            const isMember = login in group.members;
+                            const isOrdered = group.state === GroupState.ORDERED;
+                            const isLocked = group.state === GroupState.LOCKED;
+                            const memberEntries = Object.entries(group.members) as [string, OrderGroupMember][];
+                            const editingTimes = group.id in editTimes;
+                            // URL na nabídku podniku — přednostně ta, kterou zakladatel vybral při vytvoření
+                            // skupiny. Skupiny z doby před výběrem URL ji nemají, pak zkusíme jedinou URL obchodu.
+                            // Povolíme jen http(s), aby odkaz nemohl být zneužit (např. javascript:).
+                            const groupStoreUrls = getStoreUrls(stores.find(s => s.name === group.name));
+                            const storeUrl = isHttpUrl(group.url)
+                                ? group.url
+                                : (groupStoreUrls.length === 1 ? groupStoreUrls[0] : undefined);
+
+                            const totalFees = (group.fees ?? 0) + (group.shipping ?? 0) + (group.tip ?? 0);
+                            // Poplatky se dělí jen mezi aktivní strávníky (kdo si reálně něco objednal).
+                            const activeCount = countActiveMembers(group.members);
+                            const feeShare = computeFeeShare(totalFees, activeCount);
+                            const feeParams = { totalFees, discountType: group.discountType, discountValue: group.discountValue ?? 0 };
+                            const getMemberTotal = (m: OrderGroupMember) =>
+                                computeMemberTotal(m, feeParams, feeShare, activeCount);
+
+                            return (
+                                <Card key={group.id} className="mb-3 fade-in">
+                                    <Card.Header className="d-flex justify-content-between align-items-center">
+                                        <div className="d-flex align-items-center gap-2">
+                                            {storeUrl ? (
+                                                <strong>
+                                                    <a href={storeUrl} target="_blank" rel="noopener noreferrer" title="Otevřít nabídku v nové záložce">
+                                                        {group.name}
+                                                    </a>
+                                                </strong>
+                                            ) : (
+                                                <strong>{group.name}</strong>
+                                            )}
+                                            {stateBadge(group.state)}
+                                            <small className="text-muted">zakladatel: {group.creatorLogin}</small>
+                                        </div>
+                                        <div className="d-flex gap-2">
+                                            {!isReadOnly && isCreator && !isOrdered && (
+                                                <>
+                                                    <Button variant="outline-info" size="sm" onClick={() => setFeesModal(group)} title="Upravit poplatky a slevu">
+                                                        Poplatky
+                                                    </Button>
+                                                    <Button variant="outline-secondary" size="sm" onClick={() => handleToggleLock(group)} title={isLocked ? 'Odemknout' : 'Uzamknout'}>
+                                                        <FontAwesomeIcon icon={isLocked ? faLockOpen : faLock} />
+                                                    </Button>
+                                                    {isLocked && (
+                                                        <Button variant="outline-primary" size="sm" onClick={() => setConfirmOrderGroup(group)}>
+                                                            Objednáno
+                                                        </Button>
+                                                    )}
+                                                    <Button variant="outline-danger" size="sm" onClick={() => handleDelete(group.id)} title="Smazat skupinu">
+                                                        <FontAwesomeIcon icon={faTrashCan} />
+                                                    </Button>
+                                                </>
+                                            )}
+                                            {!isReadOnly && isCreator && isOrdered && (
+                                                <>
+                                                    {settings?.bankAccount && settings?.holderName && !group.qrGenerated && (
+                                                        <Button variant="primary" size="sm" onClick={() => setPayModal(group)}>
+                                                            <FontAwesomeIcon icon={faBasketShopping} className="me-1" />
+                                                            Generovat QR
+                                                        </Button>
+                                                    )}
+                                                    <Button variant="outline-warning" size="sm" onClick={() => handleRevertOrdered(group)} title="Vrátit na Uzamčeno (smaže QR kódy)">
+                                                        <FontAwesomeIcon icon={faLockOpen} />
+                                                    </Button>
+                                                </>
+                                            )}
+                                            {!isReadOnly && !isMember && !isOrdered && !isLocked && (
+                                                <Button variant="outline-success" size="sm" onClick={() => handleJoin(group.id)}>
+                                                    <FontAwesomeIcon icon={faUserPlus} className="me-1" />
+                                                    Přidat se
+                                                </Button>
+                                            )}
+                                        </div>
+                                    </Card.Header>
+                                    <Card.Body className="p-0">
+                                        <Table className="mb-0" size="sm">
+                                            <thead>
+                                                <tr>
+                                                    <th>Člen</th>
+                                                    <th style={{ width: 180 }}>Částka (bez slev)</th>
+                                                    <th style={{ width: 220 }}>Příplatek</th>
+                                                    <th>Poznámka</th>
+                                                    <th style={{ width: 160 }}>Celkem (s poplatky)</th>
+                                                    <th style={{ width: 40 }}></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {memberEntries.map(([memberLogin, member]) => {
+                                                    const key = `${group.id}:${memberLogin}`;
+                                                    const editingAmount = key in editAmounts;
+                                                    const editingNote = key in editNotes;
+                                                    const editingSurcharge = key in editSurcharges;
+                                                    const canEdit = canEditMember(group, memberLogin);
+                                                    const memberTotal = getMemberTotal(member);
+                                                    return (
+                                                        <tr key={memberLogin}>
+                                                            <td>
+                                                                <span className="user-info">
+                                                                    <strong>{memberLogin}</strong>
+                                                                    {memberLogin === group.creatorLogin && (
+                                                                        <OverlayTrigger placement="top" overlay={<Tooltip>Zakladatel / objednávající</Tooltip>}>
+                                                                            <span className="ms-1"><FontAwesomeIcon icon={faBasketShopping} className="buyer-icon" /></span>
+                                                                        </OverlayTrigger>
+                                                                    )}
+                                                                    {member.paid && (
+                                                                        <OverlayTrigger placement="top" overlay={<Tooltip>Zaplaceno</Tooltip>}>
+                                                                            <span className="ms-1"><FontAwesomeIcon icon={faCircleCheck} className="text-success" /></span>
+                                                                        </OverlayTrigger>
+                                                                    )}
+                                                                </span>
+                                                            </td>
+                                                            <td>
+                                                                {canEdit && editingAmount ? (
+                                                                    <div className="d-flex gap-1">
+                                                                        <Form.Control
+                                                                            type="number"
+                                                                            size="sm"
+                                                                            value={editAmounts[key]}
+                                                                            onChange={e => setEditAmounts(prev => ({ ...prev, [key]: e.target.value }))}
+                                                                            onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveAmount(group.id, memberLogin); if (e.key === 'Escape') setEditAmounts(prev => { const n = { ...prev }; delete n[key]; return n; }); }}
+                                                                            style={{ width: 95 }}
+                                                                            autoFocus
+                                                                        />
+                                                                        <Button size="sm" variant="outline-success" onClick={() => handleSaveAmount(group.id, memberLogin)}>✓</Button>
+                                                                    </div>
+                                                                ) : (
+                                                                    <span
+                                                                        style={{ cursor: canEdit ? 'pointer' : undefined }}
+                                                                        onClick={() => canEdit && setEditAmounts(prev => ({ ...prev, [key]: member.amount != null ? String(member.amount / 100) : '' }))}
+                                                                        title={canEdit ? 'Klikněte pro úpravu' : undefined}
+                                                                    >
+                                                                        {member.amount != null ? `${member.amount / 100} Kč` : <span className="text-muted">—</span>}
+                                                                    </span>
+                                                                )}
+                                                            </td>
+                                                            <td>
+                                                                {canEdit && editingSurcharge ? (
+                                                                    <div className="d-flex gap-1">
+                                                                        <Form.Control
+                                                                            type="text"
+                                                                            size="sm"
+                                                                            placeholder="popis"
+                                                                            value={editSurcharges[key]?.text ?? ''}
+                                                                            onChange={e => setEditSurcharges(prev => ({ ...prev, [key]: { ...prev[key], text: e.target.value } }))}
+                                                                            onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveSurcharge(group.id, memberLogin); if (e.key === 'Escape') setEditSurcharges(prev => { const n = { ...prev }; delete n[key]; return n; }); }}
+                                                                            style={{ width: 80 }}
+                                                                            autoFocus
+                                                                        />
+                                                                        <Form.Control
+                                                                            type="number"
+                                                                            size="sm"
+                                                                            placeholder="Kč"
+                                                                            value={editSurcharges[key]?.amount ?? ''}
+                                                                            onChange={e => setEditSurcharges(prev => ({ ...prev, [key]: { ...prev[key], amount: e.target.value } }))}
+                                                                            onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveSurcharge(group.id, memberLogin); if (e.key === 'Escape') setEditSurcharges(prev => { const n = { ...prev }; delete n[key]; return n; }); }}
+                                                                            style={{ width: 60 }}
+                                                                        />
+                                                                        <Button size="sm" variant="outline-success" onClick={() => handleSaveSurcharge(group.id, memberLogin)}>✓</Button>
+                                                                    </div>
+                                                                ) : (
+                                                                    <span
+                                                                        style={{ cursor: canEdit ? 'pointer' : undefined }}
+                                                                        onClick={() => canEdit && setEditSurcharges(prev => ({ ...prev, [key]: { text: member.surchargeText ?? '', amount: member.surchargeAmount != null ? String(member.surchargeAmount / 100) : '' } }))}
+                                                                        title={canEdit ? 'Klikněte pro úpravu příplatku' : undefined}
+                                                                    >
+                                                                        {member.surchargeAmount != null && member.surchargeAmount > 0 ? (
+                                                                            <small>{member.surchargeText ? `${member.surchargeText}: ` : ''}<strong>{member.surchargeAmount / 100} Kč</strong></small>
+                                                                        ) : (
+                                                                            <small className="text-muted">—</small>
+                                                                        )}
+                                                                    </span>
+                                                                )}
+                                                            </td>
+                                                            <td>
+                                                                {canEdit && editingNote ? (
+                                                                    <div className="d-flex gap-1">
+                                                                        <Form.Control
+                                                                            type="text"
+                                                                            size="sm"
+                                                                            value={editNotes[key]}
+                                                                            onChange={e => setEditNotes(prev => ({ ...prev, [key]: e.target.value }))}
+                                                                            onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveNote(group.id, memberLogin); if (e.key === 'Escape') setEditNotes(prev => { const n = { ...prev }; delete n[key]; return n; }); }}
+                                                                            autoFocus
+                                                                        />
+                                                                        <Button size="sm" variant="outline-success" onClick={() => handleSaveNote(group.id, memberLogin)}>✓</Button>
+                                                                    </div>
+                                                                ) : (
+                                                                    <span
+                                                                        style={{ cursor: canEdit ? 'pointer' : undefined }}
+                                                                        onClick={() => canEdit && setEditNotes(prev => ({ ...prev, [key]: member.note ?? '' }))}
+                                                                        title={canEdit ? 'Klikněte pro úpravu poznámky' : undefined}
+                                                                    >
+                                                                        <small className="text-muted">{member.note || '—'}</small>
+                                                                    </span>
+                                                                )}
+                                                            </td>
+                                                            <td className="text-end">
+                                                                <small className={memberTotal > 0 ? 'fw-bold' : 'text-muted'}>
+                                                                    {memberTotal > 0 ? `${memberTotal / 100} Kč` : '—'}
+                                                                </small>
+                                                            </td>
+                                                            <td className="align-middle">
+                                                                <div className="d-flex gap-1 justify-content-end align-items-center">
+                                                                    {canManageMembers(group) && (isCreator || memberLogin === login) && (memberLogin !== group.creatorLogin) && (
+                                                                        <FontAwesomeIcon
+                                                                            icon={faTrashCan}
+                                                                            className="action-icon"
+                                                                            title={memberLogin === login ? 'Odhlásit se' : 'Odebrat z skupiny'}
+                                                                            onClick={() => refresh(() => removeGroupMember({ body: { id: group.id, login: memberLogin } }))}
+                                                                        />
+                                                                    )}
+                                                                </div>
+                                                            </td>
+                                                        </tr>
+                                                    );
+                                                })}
+                                            </tbody>
+                                            {(() => {
+                                                const sumBase = memberEntries.reduce((sum, [, m]) => sum + (m.amount ?? 0) + (m.surchargeAmount ?? 0), 0);
+                                                const dv = group.discountValue ?? 0;
+                                                const totalDiscount = dv > 0
+                                                    ? (group.discountType === 'percent' ? Math.round(sumBase * dv / 100) : dv)
+                                                    : 0;
+                                                const groupTotal = sumBase + totalFees - totalDiscount;
+                                                return groupTotal > 0 ? (
+                                                    <tfoot>
+                                                        <tr style={{ fontWeight: 700, borderTop: '2px solid var(--luncher-border)' }}>
+                                                            <td colSpan={4} className="text-end" style={{ fontSize: '0.9em' }}>Celkem za skupinu:</td>
+                                                            <td className="text-end">{groupTotal / 100} Kč</td>
+                                                            <td></td>
+                                                        </tr>
+                                                    </tfoot>
+                                                ) : null;
+                                            })()}
+                                        </Table>
+
+                                        {/* Souhrn poplatků a slevy */}
+                                        {(totalFees > 0 || (group.discountValue != null && group.discountValue > 0)) && (
+                                            <div className="px-3 py-2 border-top d-flex gap-3 flex-wrap" style={{ fontSize: '0.85em', color: 'var(--luncher-text-muted)' }}>
+                                                {group.fees != null && group.fees > 0 && <span>Poplatky: <strong>{group.fees / 100} Kč</strong></span>}
+                                                {group.shipping != null && group.shipping > 0 && <span>Doprava: <strong>{group.shipping / 100} Kč</strong></span>}
+                                                {group.tip != null && group.tip > 0 && <span>Spropitné: <strong>{group.tip / 100} Kč</strong></span>}
+                                                {feeShare > 0 && <span>→ <strong>{feeShare / 100} Kč</strong>/os.</span>}
+                                                {group.discountValue != null && group.discountValue > 0 && (
+                                                    <span className="text-success">
+                                                        Sleva: <strong>{group.discountType === 'percent' ? `${group.discountValue}%` : `${group.discountValue / 100} Kč`}</strong>
+                                                    </span>
+                                                )}
+                                            </div>
+                                        )}
+
+                                        {/* Časy objednání a doručení */}
+                                        {isOrdered && (
+                                            <div className="px-3 py-2 border-top">
+                                                {!isReadOnly && isCreator && editingTimes ? (
+                                                    <div className="d-flex align-items-center gap-3 flex-wrap">
+                                                        <div className="d-flex align-items-center gap-1">
+                                                            <small className="text-muted text-nowrap">Objednáno v:</small>
+                                                            <Form.Control
+                                                                type="text"
+                                                                size="sm"
+                                                                placeholder="HH:MM"
+                                                                value={editTimes[group.id]?.orderedAt ?? ''}
+                                                                onChange={e => setEditTimes(prev => ({ ...prev, [group.id]: { ...prev[group.id], orderedAt: e.target.value } }))}
+                                                                onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveTimes(group); }}
+                                                                style={{ width: 75 }}
+                                                                autoFocus
+                                                            />
+                                                        </div>
+                                                        <div className="d-flex align-items-center gap-1">
+                                                            <small className="text-muted text-nowrap">Doručení v:</small>
+                                                            <Form.Control
+                                                                type="text"
+                                                                size="sm"
+                                                                placeholder="HH:MM"
+                                                                value={editTimes[group.id]?.deliveryAt ?? ''}
+                                                                onChange={e => setEditTimes(prev => ({ ...prev, [group.id]: { ...prev[group.id], deliveryAt: e.target.value } }))}
+                                                                onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveTimes(group); }}
+                                                                style={{ width: 75 }}
+                                                            />
+                                                        </div>
+                                                        <div className="d-flex align-items-center gap-1">
+                                                            <small className="text-muted text-nowrap">Odkaz pro sledování (Bolt Food / Wolt):</small>
+                                                            <Form.Control
+                                                                type="text"
+                                                                size="sm"
+                                                                placeholder={`${TRACKING_URL_PREFIX.wolt}…`}
+                                                                value={editTimes[group.id]?.trackingUrl ?? ''}
+                                                                onChange={e => setEditTimes(prev => ({ ...prev, [group.id]: { ...prev[group.id], trackingUrl: e.target.value } }))}
+                                                                onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveTimes(group); }}
+                                                                style={{ width: 260 }}
+                                                            />
+                                                        </div>
+                                                        <Button size="sm" variant="outline-success" onClick={() => handleSaveTimes(group)}>Uložit</Button>
+                                                        <Button size="sm" variant="outline-secondary" onClick={() => setEditTimes(prev => { const n = { ...prev }; delete n[group.id]; return n; })}>Zrušit</Button>
+                                                    </div>
+                                                ) : (
+                                                    <div className="d-flex align-items-center gap-3 flex-wrap">
+                                                        {(() => {
+                                                            const canEdit = !isReadOnly && isCreator;
+                                                            // Aktivace editačního režimu – stejné chování jako tlačítko s tužkou
+                                                            const trackingUrl = group.trackingProvider && group.trackingCode
+                                                                ? trackingUrlFor(group.trackingProvider, group.trackingCode)
+                                                                : null;
+                                                            const startEdit = () => canEdit && setEditTimes(prev => ({ ...prev, [group.id]: { orderedAt: group.orderedAt ?? '', deliveryAt: group.deliveryAt ?? '', trackingUrl: trackingUrl ?? '' } }));
+                                                            return (
+                                                                <>
+                                                                    {canEdit && (
+                                                                        <FontAwesomeIcon
+                                                                            icon={faPen}
+                                                                            className="action-icon ms-0"
+                                                                            title="Upravit časy a odkaz pro sledování"
+                                                                            onClick={startEdit}
+                                                                        />
+                                                                    )}
+                                                                    <small
+                                                                        className="text-muted"
+                                                                        style={{ cursor: canEdit ? 'pointer' : undefined }}
+                                                                        onClick={startEdit}
+                                                                    >
+                                                                        Objednáno v: <strong>{group.orderedAt ?? '—'}</strong>
+                                                                    </small>
+                                                                    <small
+                                                                        className="text-muted"
+                                                                        style={{ cursor: canEdit ? 'pointer' : undefined }}
+                                                                        onClick={startEdit}
+                                                                    >
+                                                                        Doručení v: <strong>{group.deliveryAt ?? '—'}</strong>
+                                                                        {group.trackingCode && group.trackingProvider && (
+                                                                            <OverlayTrigger overlay={<Tooltip>Čas doručení se aktualizuje automaticky z {PROVIDER_LABEL[group.trackingProvider]}</Tooltip>}>
+                                                                                <Badge bg="success" className="ms-1">{PROVIDER_LABEL[group.trackingProvider]}</Badge>
+                                                                            </OverlayTrigger>
+                                                                        )}
+                                                                    </small>
+                                                                    <small className="text-muted text-nowrap">
+                                                                        URL pro sledování:{' '}
+                                                                        {trackingUrl ? (
+                                                                            <a
+                                                                                href={trackingUrl}
+                                                                                target="_blank"
+                                                                                rel="noopener noreferrer"
+                                                                                title={trackingUrl}
+                                                                                onClick={e => e.stopPropagation()}
+                                                                            >
+                                                                                {shortenUrl(trackingUrl)}
+                                                                            </a>
+                                                                        ) : (
+                                                                            <strong>—</strong>
+                                                                        )}
+                                                                    </small>
+                                                                </>
+                                                            );
+                                                        })()}
+                                                    </div>
+                                                )}
+                                                {group.trackingOrderState && group.trackingProvider && (
+                                                    <div className="mt-2">
+                                                        <OrderProgress
+                                                            provider={group.trackingProvider}
+                                                            state={group.trackingOrderState}
+                                                            courierState={group.trackingCourierState}
+                                                            tracking={!!group.trackingCode}
+                                                        />
+                                                    </div>
+                                                )}
+                                                {IS_DEV && (
+                                                    <div className="mt-2">
+                                                        <Button variant="outline-warning" size="sm" onClick={() => setBoltSimModal(group)} title="Simulovat sledování Bolt (DEV)">
+                                                            🔧 Simulace Bolt
+                                                        </Button>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        )}
+                                    </Card.Body>
+                                </Card>
+                            );
+                        })}
+
+                        {/* Nevyřízené platby přihlášeného uživatele – jen v režimu aktuálního dne */}
+                        {!isReadOnly && (
+                            <PendingPayments
+                                pendingQrs={data.pendingQrs}
+                                login={auth.login}
+                                onDismissed={() => fetchData()}
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+            <Footer />
+
+            {/* Potvrzovací dialog pro přechod do stavu Objednáno */}
+            <Modal show={!!confirmOrderGroup} onHide={() => setConfirmOrderGroup(null)} centered>
+                <Modal.Header closeButton>
+                    <Modal.Title>Potvrdit objednání</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    Opravdu chcete označit skupinu <strong>{confirmOrderGroup?.name}</strong> jako objednanou?
+                    Tato akce uzavře skupinu a zaznamená čas objednání.
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={() => setConfirmOrderGroup(null)}>Zrušit</Button>
+                    <Button variant="primary" onClick={() => confirmOrderGroup && handleConfirmOrdered(confirmOrderGroup)}>
+                        Objednáno
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+
+            <StoreAdminModal
+                isOpen={adminModalOpen}
+                onClose={() => setAdminModalOpen(false)}
+                stores={stores}
+                onStoresChanged={updated => setData(prev => prev ? { ...prev, stores: updated } : prev)}
+            />
+
+            {payModal && settings?.bankAccount && settings?.holderName && (
+                <PayForGroupModal
+                    isOpen={!!payModal}
+                    onClose={() => setPayModal(null)}
+                    onSuccess={() => fetchData()}
+                    group={payModal}
+                    groupId={payModal.id}
+                    payerLogin={auth.login}
+                    bankAccount={settings.bankAccount}
+                    bankAccountHolder={settings.holderName}
+                />
+            )}
+
+            {feesModal && (
+                <EditGroupFeesModal
+                    isOpen={!!feesModal}
+                    onClose={() => setFeesModal(null)}
+                    group={feesModal}
+                    onSaved={newData => {
+                        if (newData) {
+                            setData(newData);
+                            socket.emit?.('message', newData as ClientData);
+                        }
+                        setFeesModal(null);
+                    }}
+                />
+            )}
+            {IS_DEV && boltSimModal && (
+                <BoltSimulationModal
+                    isOpen={!!boltSimModal}
+                    onClose={() => setBoltSimModal(null)}
+                    // živá skupina z dat (aktualizuje se přes websocket), fallback na snapshot
+                    group={groups.find(g => g.id === boltSimModal.id) ?? boltSimModal}
+                />
+            )}
+        </div>
+    );
+}

client/src/pages/StatsPage.scss

@@ -2,15 +2,132 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
+  padding: 32px 24px;
+  min-height: calc(100vh - 140px);
+  background: var(--luncher-bg);
+
+  h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--luncher-text);
+    margin-bottom: 24px;
+  }
 
   .week-navigator {
     display: flex;
     align-items: center;
-    font-size: xx-large;
+    gap: 24px;
+    margin-bottom: 32px;
+
+    svg {
+      font-size: 1.5rem;
+      color: var(--luncher-text-secondary);
+      cursor: pointer;
+      padding: 12px;
+      border-radius: 50%;
+      background: var(--luncher-bg-card);
+      box-shadow: var(--luncher-shadow-sm);
+      transition: var(--luncher-transition);
+
+      &:hover {
+        color: var(--luncher-primary);
+        background: var(--luncher-primary-light);
+        transform: scale(1.05);
+      }
+    }
 
     .date-range {
-      margin: 5px 20px;
+      margin: 0;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--luncher-text);
+      min-width: 280px;
+      text-align: center;
     }
   }
+
+  .export-panel {
+    margin-top: 32px;
+    padding: 24px;
+    width: 100%;
+    max-width: 560px;
+    background: var(--luncher-bg-card);
+    border: 1px solid var(--luncher-border-light);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow-sm);
+    text-align: center;
+
+    h3 {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--luncher-text);
+      margin-bottom: 8px;
+    }
+
+    .export-hint {
+      font-size: 0.85rem;
+      color: var(--luncher-text-secondary);
+      margin-bottom: 16px;
+    }
+
+    .export-controls {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+
+      input {
+        max-width: 180px;
+      }
+
+      select {
+        max-width: 160px;
+      }
+    }
+  }
+
+  // Chart container
+  .recharts-wrapper {
+    background: var(--luncher-bg-card);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    padding: 24px;
+    border: 1px solid var(--luncher-border-light);
+  }
+
+  // Chart text styling
+  .recharts-cartesian-axis-tick-value {
+    fill: var(--luncher-text-secondary);
+    font-size: 0.85rem;
+  }
+
+  .recharts-legend-item-text {
+    color: var(--luncher-text) !important;
+    font-weight: 500;
+  }
+
+  .recharts-tooltip-wrapper {
+    .recharts-default-tooltip {
+      background: var(--luncher-bg-card) !important;
+      border: 1px solid var(--luncher-border) !important;
+      border-radius: var(--luncher-radius-sm) !important;
+      box-shadow: var(--luncher-shadow-lg) !important;
+
+      .recharts-tooltip-label {
+        color: var(--luncher-text) !important;
+        font-weight: 600;
+        margin-bottom: 8px;
+      }
+
+      .recharts-tooltip-item {
+        color: var(--luncher-text-secondary) !important;
+      }
+    }
+  }
+
+  .recharts-cartesian-grid-horizontal line,
+  .recharts-cartesian-grid-vertical line {
+    stroke: var(--luncher-border);
+  }
 }

client/src/pages/StatsPage.tsx

@@ -1,12 +1,13 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
 import { useAuth } from "../context/auth";
 import Login from "../Login";
 import { formatDate, getFirstWorkDayOfWeek, getHumanDate, getLastWorkDayOfWeek } from "../Utils";
-import { WeeklyStats, LunchChoice, getStats } from "../../../types";
+import { WeeklyStats, LunchChoice, getStats, getStatsExport } from "../../../types";
 import Loader from "../components/Loader";
-import { faChevronLeft, faChevronRight, faGear } from "@fortawesome/free-solid-svg-icons";
+import { faChevronLeft, faChevronRight, faGear, faFileExcel, faFileCsv, faFileCode } from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { getLunchChoiceName } from "../enums";
@@ -17,22 +18,46 @@ const CHART_HEIGHT = 700;
 const STROKE_WIDTH = 2.5;
 
 const COLORS = [
-  // Komentáře jsou kvůli vizualizaci barev ve VS Code
-  '#ff1493', // #ff1493
-  '#1e90ff', // #1e90ff
-  '#c5a700', // #c5a700
-  '#006400', // #006400
-  '#b300ff', // #b300ff
-  '#ff4500', // #ff4500
-  '#bc8f8f', // #bc8f8f
-  '#00ff00', // #00ff00
-  '#7c7c7c', // #7c7c7c
+  '#ff1493',
+  '#1e90ff',
+  '#c5a700',
+  '#006400',
+  '#b300ff',
+  '#ff4500',
+  '#bc8f8f',
+  '#00ff00',
+  '#7c7c7c',
 ]
 
+/** Podporované formáty exportu přehledu (viz GET /api/stats/export). */
+const EXPORT_FORMATS = ['xlsx', 'csv', 'json'] as const;
+
+type ExportFormat = typeof EXPORT_FORMATS[number];
+
+const EXPORT_FORMAT_LABELS: Record<ExportFormat, string> = {
+  xlsx: 'Excel (.xlsx)',
+  csv: 'CSV (.csv)',
+  json: 'JSON (.json)',
+};
+
+const EXPORT_FORMAT_ICONS: Record<ExportFormat, IconDefinition> = {
+  xlsx: faFileExcel,
+  csv: faFileCsv,
+  json: faFileCode,
+};
+
+/** Vrátí měsíc předaného data ve formátu YYYY-MM (hodnota pro input type="month"). */
+function getMonthValue(date: Date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+}
+
 export default function StatsPage() {
   const auth = useAuth();
   const [dateRange, setDateRange] = useState<Date[]>();
   const [data, setData] = useState<WeeklyStats>();
+  const [exportMonth, setExportMonth] = useState<string>(() => getMonthValue(new Date()));
+  const [exportFormat, setExportFormat] = useState<ExportFormat>('xlsx');
+  const [exporting, setExporting] = useState(false);
 
   // Prvotní nastavení aktuálního týdne
   useEffect(() => {
@@ -54,6 +79,31 @@ export default function StatsPage() {
     return <Line key={location} name={getLunchChoiceName(location)} type="monotone" dataKey={data => data.locations[location] ?? 0} stroke={COLORS[index]} strokeWidth={STROKE_WIDTH} />
   }
 
+  /** Stáhne přehled stravování přihlášeného uživatele za vybraný měsíc ve vybraném formátu. */
+  const handleExport = async () => {
+    const [year, month] = exportMonth.split('-').map(Number);
+    if (!year || !month) {
+      return;
+    }
+    setExporting(true);
+    try {
+      // parseAs 'blob' — odpověď chceme stáhnout tak, jak přišla, bez parsování dle typu
+      const { data: file } = await getStatsExport({ query: { year, month, format: exportFormat }, parseAs: 'blob' });
+      // Chyby řeší globální interceptor (toaster), stahujeme jen při úspěchu
+      if (!(file instanceof Blob)) {
+        return;
+      }
+      const url = URL.createObjectURL(file);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `luncher-${auth?.login ?? 'prehled'}-${exportMonth}.${exportFormat}`;
+      link.click();
+      URL.revokeObjectURL(url);
+    } finally {
+      setExporting(false);
+    }
+  }
+
   const handlePreviousWeek = () => {
     if (dateRange) {
       const previousStartDate = new Date(dateRange[0]);
@@ -74,13 +124,19 @@ export default function StatsPage() {
     }
   }
 
+  const isCurrentOrFutureWeek = useMemo(() => {
+    if (!dateRange) return true;
+    // Porovnáváme jen dny (obě data nesou čas svého vzniku), dopředu jde jít nejvýše na aktuální týden
+    return formatDate(dateRange[1]) >= formatDate(getLastWorkDayOfWeek(new Date()));
+  }, [dateRange]);
+
   const handleKeyDown = useCallback((e: any) => {
     if (e.keyCode === 37) {
       handlePreviousWeek();
-    } else if (e.keyCode === 39) {
+    } else if (e.keyCode === 39 && !isCurrentOrFutureWeek) {
       handleNextWeek()
     }
-  }, [dateRange]);
+  }, [dateRange, isCurrentOrFutureWeek]);
 
   useEffect(() => {
     document.addEventListener('keydown', handleKeyDown);
@@ -112,7 +168,7 @@ export default function StatsPage() {
           </span>
           <h2 className="date-range">{getHumanDate(dateRange[0])} - {getHumanDate(dateRange[1])}</h2>
           <span title="Následující týden">
-            <FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer" }} onClick={handleNextWeek} />
+            <FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer", visibility: isCurrentOrFutureWeek ? "hidden" : "visible" }} onClick={handleNextWeek} />
           </span>
         </div>
         <LineChart width={CHART_WIDTH} height={CHART_HEIGHT} data={data}>
@@ -122,6 +178,40 @@ export default function StatsPage() {
           <Tooltip />
           <Legend />
         </LineChart>
+        <div className="export-panel">
+          <h3>Můj přehled</h3>
+          <p className="export-hint">
+            Přehled vašich záznamů za vybraný měsíc — datum, kde jste jedli, vybrané jídlo, poznámka
+            a u objednávek i částka po slevě.
+          </p>
+          <div className="export-controls">
+            <input
+              type="month"
+              className="form-control"
+              value={exportMonth}
+              max={getMonthValue(new Date())}
+              onChange={e => setExportMonth(e.target.value)}
+            />
+            <select
+              className="form-select"
+              value={exportFormat}
+              onChange={e => setExportFormat(e.target.value as ExportFormat)}
+            >
+              {EXPORT_FORMATS.map(format => (
+                <option key={format} value={format}>{EXPORT_FORMAT_LABELS[format]}</option>
+              ))}
+            </select>
+            <button
+              type="button"
+              className="btn btn-primary"
+              disabled={exporting || !exportMonth}
+              onClick={handleExport}
+            >
+              <FontAwesomeIcon icon={EXPORT_FORMAT_ICONS[exportFormat]} />{' '}
+              {exporting ? 'Generuji...' : 'Stáhnout přehled'}
+            </button>
+          </div>
+        </div>
       </div>
       <Footer />
     </>

client/src/pages/SuggestionsPage.scss

@@ -0,0 +1,145 @@
+.suggestions-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 24px;
+  min-height: calc(100vh - 140px);
+  background: var(--luncher-bg);
+
+  .suggestions-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    width: 100%;
+    max-width: 900px;
+    flex-wrap: wrap;
+
+    h1 {
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--luncher-text);
+      margin: 0;
+    }
+  }
+
+  .suggestions-info {
+    width: 100%;
+    max-width: 900px;
+    margin: 12px 0 24px;
+    color: var(--luncher-text-secondary);
+    font-size: 0.95rem;
+  }
+
+  .suggestions-empty {
+    color: var(--luncher-text-secondary);
+    margin-top: 32px;
+  }
+
+  .resolved-section {
+    width: 100%;
+    max-width: 900px;
+    margin-top: 48px;
+
+    h2 {
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: var(--luncher-text);
+      margin-bottom: 8px;
+    }
+  }
+
+  .suggestions-table.resolved {
+    th {
+      background: var(--luncher-text-secondary);
+    }
+
+    td.col-score {
+      color: var(--luncher-text-secondary);
+    }
+  }
+
+  .suggestions-table {
+    width: 100%;
+    max-width: 900px;
+    background: var(--luncher-bg-card);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    border: 1px solid var(--luncher-border-light);
+    overflow: hidden;
+    border-collapse: collapse;
+
+    th {
+      background: var(--luncher-primary);
+      color: #ffffff;
+      padding: 12px 20px;
+      text-align: left;
+      font-weight: 600;
+      font-size: 0.9rem;
+    }
+
+    td {
+      padding: 12px 20px;
+      border-bottom: 1px solid var(--luncher-border-light);
+      color: var(--luncher-text);
+      font-size: 0.9rem;
+      vertical-align: middle;
+    }
+
+    .col-score {
+      text-align: center;
+      width: 80px;
+      font-weight: 600;
+    }
+
+    td.col-score {
+      color: var(--luncher-primary);
+    }
+
+    .col-actions {
+      text-align: center;
+      width: 150px;
+      white-space: nowrap;
+    }
+
+    tbody tr {
+      cursor: pointer;
+      transition: var(--luncher-transition);
+
+      &:hover {
+        background: var(--luncher-bg-hover);
+      }
+
+      &:last-child td {
+        border-bottom: none;
+      }
+    }
+
+    .vote-btn {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 6px 8px;
+      border-radius: var(--luncher-radius-sm, 6px);
+      color: var(--luncher-text-secondary);
+      transition: var(--luncher-transition);
+
+      &:hover {
+        background: var(--luncher-bg-hover);
+        color: var(--luncher-text);
+      }
+
+      &.vote-up.active {
+        color: #2e7d32;
+      }
+
+      &.vote-down.active {
+        color: #c62828;
+      }
+
+      &.delete-btn:hover {
+        color: #c62828;
+      }
+    }
+  }
+}

client/src/pages/SuggestionsPage.tsx

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useState } from "react";
+import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { ToastContainer } from "react-toastify";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faThumbsUp, faThumbsDown, faTrash, faPlus, faGear } from "@fortawesome/free-solid-svg-icons";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import Loader from "../components/Loader";
+import { useAuth } from "../context/auth";
+import Login from "../Login";
+import AddSuggestionModal from "../components/modals/AddSuggestionModal";
+import SuggestionDetailModal from "../components/modals/SuggestionDetailModal";
+import {
+  Suggestion,
+  VoteDirection,
+  listSuggestions,
+  addSuggestion,
+  voteSuggestion,
+  deleteSuggestion,
+} from "../../../types";
+import "./SuggestionsPage.scss";
+
+export default function SuggestionsPage() {
+  const auth = useAuth();
+  const [suggestions, setSuggestions] = useState<Suggestion[]>();
+  const [addModalOpen, setAddModalOpen] = useState(false);
+  const [detail, setDetail] = useState<Suggestion>();
+
+  const reload = useCallback(async () => {
+    if (!auth?.login) return;
+    const response = await listSuggestions();
+    setSuggestions(response.data ?? []);
+  }, [auth?.login]);
+
+  useEffect(() => {
+    reload();
+  }, [reload]);
+
+  const handleAdd = async (title: string, description: string) => {
+    const response = await addSuggestion({ body: { title, description } });
+    if (response.data) {
+      setSuggestions(response.data);
+    }
+  };
+
+  const handleVote = async (id: string, direction: VoteDirection) => {
+    const response = await voteSuggestion({ body: { id, direction } });
+    if (response.data) {
+      setSuggestions(response.data);
+    }
+  };
+
+  const handleDelete = async (suggestion: Suggestion) => {
+    if (!window.confirm(`Opravdu chcete smazat návrh „${suggestion.title}“? Smažou se i všechny jeho hlasy.`)) {
+      return;
+    }
+    const response = await deleteSuggestion({ body: { id: suggestion.id } });
+    if (response.data) {
+      setSuggestions(response.data);
+    }
+  };
+
+  // Vykreslí jeden řádek tabulky. Vyřešené návrhy jsou read-only (bez hlasování),
+  // ale autor je stále může smazat.
+  const renderRow = (suggestion: Suggestion) => (
+    <OverlayTrigger
+      key={suggestion.id}
+      placement="top"
+      overlay={<Tooltip id={`tooltip-${suggestion.id}`}>{suggestion.description}</Tooltip>}
+    >
+      <tr onClick={() => setDetail(suggestion)}>
+        <td>{suggestion.author}</td>
+        <td>{suggestion.title}</td>
+        <td className="col-score">{suggestion.voteScore}</td>
+        <td className="col-actions" onClick={e => e.stopPropagation()}>
+          {!suggestion.resolved && (
+            <>
+              <button
+                type="button"
+                className={`vote-btn vote-up ${suggestion.myVote === VoteDirection.UP ? "active" : ""}`}
+                title="Hlasovat pro"
+                onClick={() => handleVote(suggestion.id, VoteDirection.UP)}
+              >
+                <FontAwesomeIcon icon={faThumbsUp} />
+              </button>
+              <button
+                type="button"
+                className={`vote-btn vote-down ${suggestion.myVote === VoteDirection.DOWN ? "active" : ""}`}
+                title="Hlasovat proti"
+                onClick={() => handleVote(suggestion.id, VoteDirection.DOWN)}
+              >
+                <FontAwesomeIcon icon={faThumbsDown} />
+              </button>
+            </>
+          )}
+          {suggestion.isMine && (
+            <button
+              type="button"
+              className="vote-btn delete-btn"
+              title="Smazat návrh"
+              onClick={() => handleDelete(suggestion)}
+            >
+              <FontAwesomeIcon icon={faTrash} />
+            </button>
+          )}
+        </td>
+      </tr>
+    </OverlayTrigger>
+  );
+
+  if (!auth?.login) {
+    return <Login />;
+  }
+
+  if (!suggestions) {
+    return <Loader icon={faGear} description={"Načítám návrhy..."} animation={"fa-bounce"} />;
+  }
+
+  const activeSuggestions = suggestions.filter(s => !s.resolved);
+  const resolvedSuggestions = suggestions.filter(s => s.resolved);
+
+  return (
+    <>
+      <Header />
+      <div className="suggestions-page">
+        <div className="suggestions-header">
+          <h1>Návrhy na vylepšení</h1>
+          <Button onClick={() => setAddModalOpen(true)}>
+            <FontAwesomeIcon icon={faPlus} /> Přidat návrh
+          </Button>
+        </div>
+        <p className="suggestions-info">
+          Zde můžete navrhovat vylepšení aplikace a hlasovat o návrzích ostatních. U každého návrhu je
+          zobrazeno jméno navrhovatele. Jména hlasujících jsou dostupná pouze administrátorům.
+        </p>
+
+        {suggestions.length === 0 ? (
+          <p className="suggestions-empty">Zatím nebyly přidány žádné návrhy. Buďte první!</p>
+        ) : (
+          <>
+            {activeSuggestions.length > 0 && (
+              <table className="suggestions-table">
+                <thead>
+                  <tr>
+                    <th>Navrhovatel</th>
+                    <th>Název</th>
+                    <th className="col-score">Hlasy</th>
+                    <th className="col-actions">Akce</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {activeSuggestions.map(renderRow)}
+                </tbody>
+              </table>
+            )}
+
+            {resolvedSuggestions.length > 0 && (
+              <div className="resolved-section">
+                <h2>Vyřešené návrhy</h2>
+                <p className="suggestions-info">
+                  Tyto návrhy již byly zapracovány. Nelze pro ně hlasovat, autor je však může odstranit.
+                </p>
+                <table className="suggestions-table resolved">
+                  <thead>
+                    <tr>
+                      <th>Navrhovatel</th>
+                      <th>Název</th>
+                      <th className="col-score">Hlasy</th>
+                      <th className="col-actions">Akce</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {resolvedSuggestions.map(renderRow)}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      <Footer />
+      <AddSuggestionModal isOpen={addModalOpen} onClose={() => setAddModalOpen(false)} onSubmit={handleAdd} />
+      <SuggestionDetailModal suggestion={detail} onClose={() => setDetail(undefined)} />
+      <ToastContainer />
+    </>
+  );
+}

client/src/utils/groupFees.ts

@@ -0,0 +1,67 @@
+import { OrderGroup, OrderGroupMember } from "../../../types";
+
+/**
+ * Pomocné funkce pro výpočet částek ve skupinových objednávkách.
+ *
+ * Klíčové pravidlo: poplatky (balné + doprava + spropitné) se rozpočítávají
+ * pouze mezi "aktivní" strávníky — tedy ty, kteří si reálně něco objednali.
+ * Kdo si nic neobjedná (typicky objednávající, který nakupuje jen pro ostatní),
+ * neplatí nic a nezapočítává se mu ani poměrná část poplatků.
+ */
+
+/** Parametry poplatků a slevy potřebné k výpočtu částky člena. */
+export type GroupFeeParams = {
+    /** Celkové poplatky skupiny v haléřích (balné + doprava + spropitné). */
+    totalFees: number;
+    /** Typ slevy ('percent' = procenta, 'fixed' = pevná částka v haléřích). */
+    discountType?: string;
+    /** Hodnota slevy — procenta, nebo pevná částka v haléřích dle discountType. */
+    discountValue?: number;
+};
+
+/** Vrátí true, pokud si člen něco objednal (má kladnou částku nebo příplatek). */
+export function isActiveMember(member: OrderGroupMember): boolean {
+    return (member.amount ?? 0) + (member.surchargeAmount ?? 0) > 0;
+}
+
+/** Počet aktivních strávníků — jen mezi ně se dělí poplatky. */
+export function countActiveMembers(members: OrderGroup["members"]): number {
+    return Object.values(members).filter(isActiveMember).length;
+}
+
+/** Celkové poplatky skupiny (balné + doprava + spropitné) v haléřích. */
+export function totalGroupFees(group: OrderGroup): number {
+    return (group.fees ?? 0) + (group.shipping ?? 0) + (group.tip ?? 0);
+}
+
+/** Poměrná část poplatků na jednoho aktivního strávníka v haléřích. */
+export function computeFeeShare(totalFees: number, activeCount: number): number {
+    return activeCount > 0 ? Math.round(totalFees / activeCount) : 0;
+}
+
+/**
+ * Celková částka, kterou má člen zaplatit (v haléřích).
+ * Neaktivní člen (nic si neobjednal) platí 0 — nepodílí se ani na poplatcích.
+ *
+ * @param member člen skupiny
+ * @param params poplatky a sleva
+ * @param feeShare poměrná část poplatků na osobu (viz computeFeeShare)
+ * @param activeCount počet aktivních strávníků (dělitel pevné slevy)
+ */
+export function computeMemberTotal(
+    member: OrderGroupMember,
+    params: GroupFeeParams,
+    feeShare: number,
+    activeCount: number,
+): number {
+    if (!isActiveMember(member)) return 0;
+    const base = member.amount ?? 0;
+    const surcharge = member.surchargeAmount ?? 0;
+    const discountValue = params.discountValue ?? 0;
+    const discount = discountValue > 0
+        ? (params.discountType === 'percent'
+            ? Math.round((base + surcharge) * discountValue / 100)
+            : Math.round(discountValue / activeCount))
+        : 0;
+    return base + surcharge + feeShare - discount;
+}

client/src/utils/parsePrice.ts

@@ -0,0 +1,11 @@
+/**
+ * Parsuje cenu ve formátu "135 Kč", "135,50 Kč" nebo "135.50 Kč" na číslo.
+ * Vrátí null při selhání.
+ */
+export function parsePriceCzk(raw: string | undefined): number | null {
+    if (!raw) return null;
+    const m = raw.replace(',', '.').match(/(\d+(?:\.\d+)?)/);
+    if (!m) return null;
+    const n = parseFloat(m[1]);
+    return Number.isFinite(n) ? n : null;
+}

client/src/utils/storeUrls.ts

@@ -0,0 +1,37 @@
+import { Store } from '../../../types';
+
+/** Známé dovozové služby — hostname (bez www) → čitelný název pro nabídku. */
+const KNOWN_SERVICES: { match: string; label: string }[] = [
+    { match: 'bolt.eu', label: 'Bolt Food' },
+    { match: 'wolt.com', label: 'Wolt' },
+    { match: 'foodora.cz', label: 'Foodora' },
+    { match: 'damejidlo.cz', label: 'Dáme jídlo' },
+];
+
+/**
+ * Ověří, že jde o odkaz s protokolem http(s) — jiné protokoly (např. javascript:)
+ * by mohly být zneužity, proto je jako odkaz nezobrazujeme.
+ */
+export function isHttpUrl(url?: string): boolean {
+    return !!url && /^https?:\/\//i.test(url);
+}
+
+/** Vrátí platné URL na nabídku daného obchodu. */
+export function getStoreUrls(store?: Store): string[] {
+    return (store?.urls ?? []).filter(isHttpUrl);
+}
+
+/**
+ * Popisek URL pro výběr nabídky — u známých dovozových služeb jejich název,
+ * jinak hostname odkazu (např. "restaurace-u-nas.cz").
+ */
+export function storeUrlLabel(url: string): string {
+    let hostname: string;
+    try {
+        hostname = new URL(url).hostname.toLowerCase().replace(/^www\./, '');
+    } catch {
+        return url;
+    }
+    const known = KNOWN_SERVICES.find(s => hostname === s.match || hostname.endsWith(`.${s.match}`));
+    return known ? known.label : hostname;
+}

client/vite.config.ts

@@ -6,8 +6,13 @@ export default defineConfig({
     // depending on your application, base can also be "/"
     base: '',
     plugins: [react(), viteTsconfigPaths()],
+    build: {
+        // Veřejné sourcemapy, aby Sentry umělo přeložit minifikované stack traces
+        sourcemap: true,
+    },
     server: {
         open: true,
+        host: '0.0.0.0',
         port: 3000,
         proxy: {
             '/api': 'http://localhost:3001',

e2e/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+playwright-report/
+test-results/

e2e/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@luncher/e2e",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:debug": "playwright test --debug",
+    "report": "playwright show-report"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.0",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.9.3"
+  }
+}

e2e/playwright.config.ts

@@ -0,0 +1,64 @@
+import { defineConfig, devices } from '@playwright/test';
+import path from 'path';
+
+// Use 127.0.0.1 explicitly — on Node.js 18+/Windows, `localhost` may resolve to ::1
+// (IPv6) while the HTTP server only binds to 0.0.0.0 (IPv4), causing the webServer
+// readiness poll to time out even though the server is listening.
+// Port 3099 avoids conflicts with locally running Docker containers on 3001-3003.
+// Override with E2E_PORT env var if needed.
+const E2E_PORT = process.env.E2E_PORT ?? '3099';
+const BASE_URL = process.env.E2E_BASE_URL ?? `http://127.0.0.1:${E2E_PORT}`;
+
+// Server env vars injected for local runs. In CI these are set at the step level.
+const serverEnv: Record<string, string> = {
+    NODE_ENV: 'test',
+    MOCK_DATA: 'true',
+    STORAGE: process.env.STORAGE ?? 'json',
+    JWT_SECRET: process.env.JWT_SECRET ?? 'e2e-test-secret-min-32-chars-aaaa',
+    HTTP_REMOTE_USER_ENABLED: 'true',
+    HTTP_REMOTE_USER_HEADER_NAME: 'remote-user',
+    HTTP_REMOTE_TRUSTED_IPS: process.env.HTTP_REMOTE_TRUSTED_IPS ?? '127.0.0.1,::1,::ffff:127.0.0.1',
+    PORT: E2E_PORT,
+};
+if (process.env.REDIS_HOST) {
+    serverEnv.REDIS_HOST = process.env.REDIS_HOST;
+    serverEnv.REDIS_PORT = process.env.REDIS_PORT ?? '6379';
+}
+
+export default defineConfig({
+    testDir: './tests',
+    timeout: 30_000,
+    retries: process.env.CI ? 1 : 0,
+    workers: 1,
+    reporter: [['list'], ['html', { open: 'never' }]],
+    use: {
+        baseURL: BASE_URL,
+        // Default: every test authenticates as e2e-user via trusted header.
+        // Tests that need the real login form should override this in their own context.
+        extraHTTPHeaders: {
+            'remote-user': 'e2e-user',
+        },
+        trace: 'retain-on-failure',
+        video: 'retain-on-failure',
+    },
+    projects: [
+        { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+        { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    ],
+    // Pre-built server must be started before tests. In CI the step does this
+    // explicitly. Locally: build types+server+client, cp -r client/dist server/public,
+    // then `cd e2e && yarn test` OR let webServer below do it if reuseExistingServer=true
+    // is set and the server is already running.
+    webServer: {
+        command: 'node dist/server/src/index.js',
+        cwd: path.resolve(__dirname, '../server'),
+        // Poll a dedicated health endpoint — polling '/' can stall in Express 5 when
+        // server/public/ doesn't exist in the working directory (no finalhandler match).
+        url: `http://127.0.0.1:${E2E_PORT}/api/health`,
+        timeout: 15_000,
+        reuseExistingServer: !process.env.CI,
+        env: serverEnv,
+        stdout: 'pipe',
+        stderr: 'pipe',
+    },
+});

e2e/tests/helpers.ts

@@ -0,0 +1,24 @@
+import { Page, APIRequestContext } from '@playwright/test';
+
+/** Přihlásí uživatele přes POST /api/login a uloží JWT do localStorage. */
+export async function loginViaApi(page: Page, login: string): Promise<void> {
+    const response = await page.request.post('/api/login', {
+        headers: { 'Content-Type': 'application/json', 'remote-user': login },
+        data: {},
+    });
+    const token = await response.json() as string;
+    await page.goto('/');
+    await page.evaluate((t) => localStorage.setItem('token', t), token);
+}
+
+/** Vyčistí stav dne pro zadaný dayIndex (0=pondělí…4=pátek) přes dev API.
+ *  /api/dev/* vyžaduje JWT – nejdřív získáme token přes /api/login.
+ */
+export async function clearDay(request: APIRequestContext, dayIndex = 4): Promise<void> {
+    const loginResp = await request.post('/api/login', { data: {} });
+    const token = await loginResp.json() as string;
+    await request.post('/api/dev/clear', {
+        headers: { Authorization: `Bearer ${token}` },
+        data: { dayIndex },
+    });
+}

e2e/tests/login.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+
+// Tento test záměrně NEPOUŽÍVÁ trusted-header – testuje reálný login formulář.
+test.use({ extraHTTPHeaders: {} });
+
+test('uživatel se přihlásí formulářem a uvidí obsah aplikace', async ({ page }) => {
+    // Server běží s HTTP_REMOTE_USER_ENABLED=true, takže POST /api/login vždy vyžaduje
+    // hlavičku remote-user. Zachytíme požadavky z formuláře (mají tělo s polem login)
+    // a přidáme hlavičku; požadavek auto-loginu (bez těla) projde bez hlavičky a selže,
+    // čímž formulář zůstane viditelný.
+    await page.route('**/api/login', async (route) => {
+        const body = route.request().postData();
+        let login: string | undefined;
+        try { login = body ? JSON.parse(body)?.login : undefined; } catch {}
+        await route.continue({
+            headers: login
+                ? { ...route.request().headers(), 'remote-user': login }
+                : route.request().headers(),
+        });
+    });
+
+    await page.goto('/');
+
+    // Formulář musí být viditelný – auto-login selhal (nepřišla hlavička)
+    const loginInput = page.locator('#login-input');
+    await expect(loginInput).toBeVisible({ timeout: 10_000 });
+
+    // Vyplnění loginu a odeslání Enterem
+    await loginInput.fill('testuser');
+    await loginInput.press('Enter');
+
+    // Po přihlášení musí zmizet login formulář
+    await expect(loginInput).not.toBeVisible({ timeout: 10_000 });
+
+    // JWT musí být uloženo v localStorage jako 3-dílný token
+    const token = await page.evaluate(() => localStorage.getItem('token'));
+    expect(token).toBeTruthy();
+    expect((token as string).split('.')).toHaveLength(3);
+});
+
+test('trusted-header přihlášení proběhne automaticky bez formuláře', async ({ page, context }) => {
+    // Obnoví trusted header (přepíše prázdný extraHTTPHeaders z test.use výše)
+    await context.setExtraHTTPHeaders({ 'remote-user': 'e2e-auto-user' });
+    await page.goto('/');
+
+    // Login formulář by se neměl nikdy zobrazit, nebo se ihned schová
+    await page.waitForLoadState('networkidle');
+    const loginInput = page.locator('#login-input');
+    await expect(loginInput).not.toBeVisible({ timeout: 5_000 });
+});

e2e/tests/notification-settings.spec.ts

@@ -0,0 +1,77 @@
+import { test, expect } from '@playwright/test';
+import { loginViaApi } from './helpers';
+
+const DELIVERY_LABEL = 'Upozornění na doručení objednávky (Bolt Food / Wolt)';
+
+test.beforeEach(async ({ page }) => {
+    await loginViaApi(page, 'e2e-user');
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+});
+
+async function openSettings(page: import('@playwright/test').Page) {
+    await page.locator('#basic-nav-dropdown').click();
+    await page.locator('text=Nastavení').click();
+    await expect(page.locator('.modal-title')).toContainText('Nastavení', { timeout: 5_000 });
+}
+
+test('Přepínač doručení objednávky je pod výběrem času připomínky', async ({ page }) => {
+    await openSettings(page);
+
+    const reminderGroup = page.locator('.modal-body .mb-3').filter({ hasText: 'Připomínka výběru oběda' });
+    const deliveryGroup = page.locator('.modal-body .mb-3').filter({ hasText: DELIVERY_LABEL });
+    await expect(reminderGroup).toBeVisible();
+    await expect(deliveryGroup).toBeVisible();
+
+    // Přepínač musí v DOM následovat až za skupinou s časem připomínky
+    const order = await page.evaluate((label) => {
+        const groups = Array.from(document.querySelectorAll('.modal-body .mb-3'));
+        return {
+            reminder: groups.findIndex(g => g.textContent?.includes('Připomínka výběru oběda')),
+            delivery: groups.findIndex(g => g.textContent?.includes(label)),
+        };
+    }, DELIVERY_LABEL);
+    expect(order.reminder).toBeGreaterThanOrEqual(0);
+    expect(order.delivery).toBe(order.reminder + 1);
+
+    // Výchozí stav je vypnuto
+    await expect(page.locator('#boltDeliveredCheckbox')).not.toBeChecked();
+});
+
+test('Zapnutí přepínače se uloží na server a přežije znovuotevření', async ({ page }) => {
+    await openSettings(page);
+    await page.locator('#boltDeliveredCheckbox').check();
+    await page.locator('.modal-footer button', { hasText: 'Uložit' }).click();
+    await expect(page.locator('.modal')).not.toBeVisible({ timeout: 5_000 });
+
+    // Server má nastavení uložené
+    const token = await page.evaluate(() => localStorage.getItem('token'));
+    const resp = await page.request.get('/api/notifications/settings', {
+        headers: { Authorization: `Bearer ${token}` },
+    });
+    expect(await resp.json()).toMatchObject({ boltDeliveredPush: true });
+
+    // Po znovunačtení stránky je přepínač stále zapnutý
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+    await openSettings(page);
+    await expect(page.locator('#boltDeliveredCheckbox')).toBeChecked();
+});
+
+test('Vypnutí přepínače se uloží zpět', async ({ page }) => {
+    await openSettings(page);
+    await page.locator('#boltDeliveredCheckbox').check();
+    await page.locator('.modal-footer button', { hasText: 'Uložit' }).click();
+    await expect(page.locator('.modal')).not.toBeVisible({ timeout: 5_000 });
+
+    await openSettings(page);
+    await page.locator('#boltDeliveredCheckbox').uncheck();
+    await page.locator('.modal-footer button', { hasText: 'Uložit' }).click();
+    await expect(page.locator('.modal')).not.toBeVisible({ timeout: 5_000 });
+
+    const token = await page.evaluate(() => localStorage.getItem('token'));
+    const resp = await page.request.get('/api/notifications/settings', {
+        headers: { Authorization: `Bearer ${token}` },
+    });
+    expect(await resp.json()).toMatchObject({ boltDeliveredPush: false });
+});

e2e/tests/pick-food.spec.ts

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+import { clearDay } from './helpers';
+
+test.beforeEach(async ({ page, request }) => {
+    // Vyčistíme volby dne, aby testy neovlivnily navzájem
+    await clearDay(request);
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+    // Počkáme, až se zobrazí volba stravování
+    await expect(page.locator('.choice-section select').first()).toBeVisible({ timeout: 10_000 });
+});
+
+test('výběr restaurace zobrazí seznam jídel', async ({ page }) => {
+    const locationSelect = page.locator('.choice-section select').first();
+
+    // Vybereme Sladovnickou – mock menu existuje
+    await locationSelect.selectOption('SLADOVNICKA');
+
+    // Po výběru restaurace se zobrazí druhý select s jídly
+    const foodSelect = page.locator('.choice-section select').nth(1);
+    await expect(foodSelect).toBeVisible({ timeout: 5_000 });
+
+    // Select musí obsahovat alespoň 2 možnosti (empty + ≥1 jídlo)
+    const options = foodSelect.locator('option');
+    expect(await options.count()).toBeGreaterThan(1);
+});
+
+test('výběr jídla se uloží a přetrvá po reload', async ({ page }) => {
+    const locationSelect = page.locator('.choice-section select').first();
+    await locationSelect.selectOption('SLADOVNICKA');
+
+    const foodSelect = page.locator('.choice-section select').nth(1);
+    await expect(foodSelect).toBeVisible({ timeout: 5_000 });
+
+    // Vybereme první nenulovou možnost
+    const options = await foodSelect.locator('option:not([value=""])').all();
+    if (options.length === 0) {
+        test.skip(); // Mock data nejsou dostupná pro tuto restauraci
+    }
+    const firstValue = await options[0].getAttribute('value');
+    await foodSelect.selectOption({ value: firstValue! });
+
+    // Počkáme, až se volba přenese na server
+    await page.waitForLoadState('networkidle');
+
+    // Po reload musí volba přetrvat v tabulce choices
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+    const choicesTable = page.locator('.choices-table');
+    await expect(choicesTable).toBeVisible({ timeout: 5_000 });
+    await expect(choicesTable.locator('text=Sladovnická')).toBeVisible();
+});
+
+test('přepnutí na NEOBEDVAM odstraní výběr restaurace', async ({ page }) => {
+    // Nejprve zvolíme restauraci
+    const locationSelect = page.locator('.choice-section select').first();
+    await locationSelect.selectOption('SLADOVNICKA');
+    await page.waitForLoadState('networkidle');
+
+    // Přepneme na "Neobědvám"
+    await locationSelect.selectOption('NEOBEDVAM');
+    await page.waitForLoadState('networkidle');
+
+    // Tabulka choices musí zobrazovat "Neobědvám"
+    const choicesTable = page.locator('.choices-table');
+    await expect(choicesTable).toBeVisible({ timeout: 5_000 });
+    await expect(choicesTable.locator('text=Neobědvám')).toBeVisible();
+});

e2e/tests/pizza-day.spec.ts

@@ -0,0 +1,83 @@
+import { test, expect } from '@playwright/test';
+import { clearDay } from './helpers';
+
+// Pizza day testy musí běžet sekvenčně (sdílejí stav mock dne)
+test.describe.serial('pizza day životní cyklus', () => {
+
+    test.beforeEach(async ({ request }) => {
+        // Vyčistíme data mock dne před každým testem
+        await clearDay(request);
+    });
+
+    test('zobrazí sekci Pizza Day bez aktivního dne', async ({ page }) => {
+        await page.goto('/');
+        await page.waitForLoadState('networkidle');
+        // Sekce pizza-section se zobrazí jen pokud má uživatel zvolenou možnost "Pizza day"
+        await page.locator('select').selectOption({ label: 'Pizza day' });
+        await page.waitForLoadState('networkidle');
+        const pizzaSection = page.locator('.pizza-section');
+        await expect(pizzaSection).toBeVisible({ timeout: 10_000 });
+        await expect(pizzaSection.locator('text=není aktuálně založen')).toBeVisible();
+    });
+
+    test('vytvoří, uzamkne a dokončí pizza day', async ({ page }) => {
+        // Tento test má více kroků a server při MOCK_DATA=true záměrně zpožďuje scraping pizz o 3s
+        test.setTimeout(60_000);
+        await page.goto('/');
+        await page.waitForLoadState('networkidle');
+        // Sekce pizza-section se zobrazí jen pokud má uživatel zvolenou možnost "Pizza day"
+        await page.locator('select').selectOption({ label: 'Pizza day' });
+        await page.waitForLoadState('networkidle');
+
+        // Přijmeme všechny window.confirm() dialogy v celém testu (vytvoření i doručení pizza dne)
+        page.on('dialog', dialog => dialog.accept());
+
+        // --- CREATED ---
+        const createBtn = page.locator('.pizza-section button', { hasText: 'Založit Pizza day' });
+        await expect(createBtn).toBeVisible({ timeout: 10_000 });
+        // Čekáme na odpověď API před reloadem – jinak by reload přerušil probíhající request
+        // Server s MOCK_DATA=true záměrně zpožďuje stahování pizz o 3s, proto velkorysý timeout
+        const createResponse = page.waitForResponse(
+            resp => resp.url().includes('/api/pizzaDay/create'),
+            { timeout: 15_000 },
+        );
+        await createBtn.click();
+        await createResponse;
+        await page.reload();
+        await page.waitForLoadState('networkidle');
+        await expect(page.locator('.pizza-section')).toContainText('spravován uživatelem', { timeout: 5_000 });
+
+        // Přidáme pizzu přes API (obejde komplex SelectSearch)
+        const token = await page.evaluate(() => localStorage.getItem('token'));
+        const addResp = await page.request.post('/api/pizzaDay/add', {
+            headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+            data: { pizzaIndex: 0, pizzaSizeIndex: 0 },
+        });
+        expect(addResp.ok()).toBeTruthy();
+
+        // Reload – server aktualizoval data přes WebSocket, ale reload je jistější
+        await page.reload();
+        await page.waitForLoadState('networkidle');
+
+        // --- LOCK ---
+        const lockBtn = page.locator('.pizza-section button', { hasText: 'Uzamknout' });
+        await expect(lockBtn).toBeEnabled({ timeout: 5_000 });
+        await lockBtn.click();
+        await page.waitForLoadState('networkidle');
+        await expect(page.locator('.pizza-section')).toContainText('uzamčeny', { timeout: 5_000 });
+
+        // --- ORDERED ---
+        const orderBtn = page.locator('.pizza-section button', { hasText: 'Objednáno' });
+        await expect(orderBtn).toBeEnabled({ timeout: 5_000 });
+        await orderBtn.click();
+        await page.waitForLoadState('networkidle');
+        await expect(page.locator('.pizza-section')).toContainText('objednány', { timeout: 5_000 });
+
+        // --- DELIVERED ---
+        const deliverBtn = page.locator('.pizza-section button', { hasText: 'Doručeno' });
+        await expect(deliverBtn).toBeVisible({ timeout: 5_000 });
+        await deliverBtn.click();
+        await page.waitForLoadState('networkidle');
+        await expect(page.locator('.pizza-section')).toContainText('doručeny', { timeout: 5_000 });
+    });
+});

e2e/tests/qr.spec.ts

@@ -0,0 +1,79 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page, request }) => {
+    // Naseedujeme 5 uživatelů pro dnešní den – GenerateQrModal pracuje se stávajícími choices
+    await request.post('/api/dev/generate', { data: { dayIndex: 4, count: 5 } });
+
+    // Přednastavíme bankovní účet v localStorage (SettingsContext čte z LS při inicializaci)
+    await page.goto('/');
+    await page.evaluate(() => {
+        localStorage.setItem('bank_account_number', '2400000000/2010');
+        localStorage.setItem('bank_account_holder_name', 'Test User');
+    });
+    // Reload tak, aby SettingsContext načetl nové hodnoty z localStorage
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+});
+
+test('Nastavení ukládají číslo účtu a jméno do localStorage', async ({ page }) => {
+    // Otevření nastavení
+    await page.locator('#basic-nav-dropdown').click();
+    await page.locator('text=Nastavení').click();
+
+    // Modal musí být viditelný
+    await expect(page.locator('.modal-title')).toContainText('Nastavení', { timeout: 5_000 });
+
+    // Změníme číslo účtu – pressSequentially zajistí spuštění React onChange na každý znak
+    // Číslo 1000000005 je platné (kontrolní součet mod 11 = 0), jinak by validace zamítla uložení
+    const accountInput = page.getByPlaceholder('123456-1234567890/1234');
+    await accountInput.click({ clickCount: 3 });
+    await accountInput.pressSequentially('1000000005/5500');
+
+    // Změníme jméno
+    const nameInput = page.getByPlaceholder('Jan Novák');
+    await nameInput.click({ clickCount: 3 });
+    await nameInput.pressSequentially('Nové Jméno');
+
+    // Uložíme a počkáme na zavření modalu
+    await page.locator('.modal-footer button', { hasText: 'Uložit' }).click();
+    await expect(page.locator('.modal')).not.toBeVisible({ timeout: 5_000 });
+
+    // Ověříme v localStorage
+    const bankAccount = await page.evaluate(() => localStorage.getItem('bank_account_number'));
+    const holderName = await page.evaluate(() => localStorage.getItem('bank_account_holder_name'));
+    expect(bankAccount).toBe('1000000005/5500');
+    expect(holderName).toBe('Nové Jméno');
+});
+
+test('otevře modal Generování QR kódů pokud je nastaven účet', async ({ page }) => {
+    // Otevření dropdown menu
+    await page.locator('#basic-nav-dropdown').click();
+    await page.locator('text=Generování QR kódů').click();
+
+    // Modal se otevře
+    await expect(page.locator('.modal')).toBeVisible({ timeout: 5_000 });
+    // Modal musí obsahovat seznam uživatelů nebo prázdný stav
+    await expect(page.locator('.modal-body')).toBeVisible();
+});
+
+test('upozorní pokud není nastaven bankovní účet', async ({ page }) => {
+    // Odebereme nastavení účtu
+    await page.evaluate(() => {
+        localStorage.removeItem('bank_account_number');
+        localStorage.removeItem('bank_account_holder_name');
+    });
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+
+    // Dialog místo modalu
+    page.on('dialog', async dialog => {
+        expect(dialog.message()).toContain('číslo účtu');
+        await dialog.accept();
+    });
+
+    await page.locator('#basic-nav-dropdown').click();
+    await page.locator('text=Generování QR kódů').click();
+
+    // Modal se NESMÍ otevřít
+    await expect(page.locator('.modal')).not.toBeVisible({ timeout: 3_000 });
+});

e2e/tests/view-menus.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+    // Trusted-header login runs automatically when Login mounts.
+    // networkidle zaručí, že fetch('/api/data') byl dokončen.
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+});
+
+test('zobrazí mock datum 10.01.2025', async ({ page }) => {
+    // MOCK_DATA=true pins today to 2025-01-10
+    await expect(page.locator('text=10.01')).toBeVisible({ timeout: 10_000 });
+});
+
+test('zobrazí čtyři restaurační karty z mock dat', async ({ page }) => {
+    // Každá restaurace je obalena v .restaurant-card
+    const cards = page.locator('.restaurant-card');
+    await expect(cards).toHaveCount(4, { timeout: 10_000 });
+});
+
+test('zobrazí alespoň jedno jídlo v menu každé restaurace', async ({ page }) => {
+    await expect(page.locator('.restaurant-card').first()).toBeVisible({ timeout: 10_000 });
+
+    // Každá karta musí mít aspoň jeden řádek v .food-table
+    const cards = page.locator('.restaurant-card');
+    const count = await cards.count();
+    for (let i = 0; i < count; i++) {
+        const card = cards.nth(i);
+        const rows = card.locator('.food-table tr');
+        expect(await rows.count()).toBeGreaterThan(0);
+    }
+});
+
+test('zobrazí volbu stravování před menu', async ({ page }) => {
+    // Sekce .choice-section obsahuje select pro výběr stravování
+    const choiceSection = page.locator('.choice-section');
+    await expect(choiceSection).toBeVisible({ timeout: 10_000 });
+    await expect(choiceSection.locator('select').first()).toBeVisible();
+});

e2e/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts"]
+}

e2e/yarn.lock

@@ -0,0 +1,46 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@playwright/test@^1.50.0":
+  version "1.59.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.59.1.tgz#5c4d38eac84a61527af466602ae20277685a02d6"
+  integrity sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==
+  dependencies:
+    playwright "1.59.1"
+
+"@types/node@^22.0.0":
+  version "22.19.17"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.19.17.tgz#09c71fb34ba2510f8ac865361b1fcb9552b8a581"
+  integrity sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q==
+  dependencies:
+    undici-types "~6.21.0"
+
+fsevents@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+playwright-core@1.59.1:
+  version "1.59.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.59.1.tgz#d8a2b28bcb8f2bd08ef3df93b02ae83c813244b2"
+  integrity sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==
+
+playwright@1.59.1:
+  version "1.59.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.59.1.tgz#f7b0ca61637ae25264cec370df671bbe1f368a4a"
+  integrity sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==
+  dependencies:
+    playwright-core "1.59.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
+typescript@^5.9.3:
+  version "5.9.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.9.3.tgz#5b4f59e15310ab17a216f5d6cf53ee476ede670f"
+  integrity sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==
+
+undici-types@~6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.21.0.tgz#691d00af3909be93a7faa13be61b3a5b50ef12cb"
+  integrity sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==

k8s/README.md

@@ -0,0 +1,186 @@
+# Kubernetes — Luncher HA
+
+Manifesty pro nasazení Luncheru na Kubernetes s vysokou dostupností (3 repliky, Redis adapter pro Socket.io, WATCH/MULTI atomické zápisy, graceful shutdown).
+
+## Prerekvizity
+
+- kubectl nakonfigurovaný na cílový cluster
+- `helm` nainstalovaný
+- Redis Stack image přístupný z clusteru (`redis/redis-stack-server:7.2.0-v14`)
+- Obraz `luncher:ha-test` načtený do clusteru (viz níže)
+
+## Lokální kind cluster (testik) — setup
+
+### 1. Smazat a znovu vytvořit cluster s port mappings
+
+```powershell
+$env:KIND_EXPERIMENTAL_PROVIDER = "nerdctl"
+# Přidat nerdctl do PATH (Rancher Desktop)
+$env:PATH += ";$env:LOCALAPPDATA\Programs\Rancher Desktop\resources\resources\win32\bin"
+
+kind delete cluster --name testik
+kind create cluster --name testik --config k8s/kind/testik.yaml
+```
+
+### 2. Sestavit a načíst obraz
+
+```powershell
+docker build -t luncher:ha-test .
+
+# Uložit a načíst přes nerdctl (kind + nerdctl provider)
+nerdctl save luncher:ha-test -o luncher.tar
+kind load image-archive luncher.tar --name testik
+Remove-Item luncher.tar
+```
+
+### 3. Nainstalovat Traefik (rke2-traefik)
+
+> **Prerekvizita (Rancher Desktop):** Pokud Rancher Desktop běží s `kubernetes.options.traefik=true`,
+> host-switch.exe obsadí port 80 dříve než kind. Vypni traefik v k3s:
+> ```powershell
+> rdctl set --kubernetes.options.traefik=false
+> ```
+>
+> **Prerekvizita — inotify limity:** Čtyř-uzlový kind cluster vyčerpá výchozí
+> `fs.inotify.max_user_instances=128`. kube-proxy pak padá s „too many open files".
+> Zvyš limit v rancher-desktop WSL2 (přežije restart WSL2, ale ne reboot — přidej do
+> `/etc/sysctl.d/99-kind.conf` pro trvalost):
+> ```powershell
+> wsl -d rancher-desktop -- sysctl -w fs.inotify.max_user_instances=1280
+> ```
+
+```powershell
+# rke2-traefik je v rke2-charts, ne rancher-charts
+helm repo add rke2-charts https://rke2-charts.rancher.io
+helm repo update
+
+# Nejdřív CRD chart, pak samotný chart
+helm install traefik-crd rke2-charts/rke2-traefik-crd -n kube-system --create-namespace
+helm install traefik rke2-charts/rke2-traefik -n kube-system `
+  --set "tolerations[0].key=node-role.kubernetes.io/control-plane" `
+  --set "tolerations[0].operator=Exists" `
+  --set "tolerations[0].effect=NoSchedule"
+```
+
+Ověř že Traefik DaemonSet běží na control-plane (má hostPort 80):
+```powershell
+kubectl get ds -n kube-system traefik-rke2-traefik
+kubectl get pods -n kube-system -o wide | Select-String traefik
+```
+
+### 4. Nainstalovat Reloader
+
+[stakater/Reloader](https://github.com/stakater/Reloader) sleduje změny Secret a ConfigMap a automaticky spustí rolling restart Deploymentu — odpadá nutnost ručního `kubectl rollout restart` po rotaci `JWT_SECRET` nebo `ADMIN_PASSWORD`.
+
+Manifest je vendorovaný ve verzi v1.4.16 (`k8s/base/reloader.yaml`). Nasadit do `default` namespace:
+
+```powershell
+kubectl apply -f k8s/base/reloader.yaml
+kubectl rollout status deploy/reloader-reloader
+```
+
+Reloader běží cluster-wide díky `ClusterRoleBinding` — nepotřebuje žádnou konfiguraci per-namespace. Deployment Luncheru má anotaci `reloader.stakater.com/auto: "true"`, která říká Reloaderu, ať sleduje všechny Secrety a ConfigMapy odkazované přes `envFrom`.
+
+### 5. Nasadit Luncher
+
+```powershell
+# Namespace + Redis
+kubectl apply -f k8s/base/namespace.yaml
+kubectl apply -f k8s/base/redis-statefulset.yaml
+kubectl apply -f k8s/base/redis-service.yaml
+
+# Počkat na Redis
+kubectl rollout status statefulset/redis -n luncher
+
+# Server secret (nebo použít šablonu server-secret.yaml)
+kubectl create secret generic luncher-secrets -n luncher `
+  --from-literal=JWT_SECRET=dev-secret-change-me `
+  --from-literal=ADMIN_PASSWORD=admin
+
+# Server
+kubectl apply -f k8s/base/server-configmap.yaml
+kubectl apply -f k8s/base/server-deployment.yaml
+kubectl apply -f k8s/base/server-service.yaml
+kubectl apply -f k8s/base/server-pdb.yaml
+kubectl apply -f k8s/base/ingressroute.yaml
+
+# Počkat na server
+kubectl rollout status deploy/luncher -n luncher
+```
+
+## Testovací scénáře
+
+### Baseline
+
+```powershell
+kubectl get pods -n luncher -o wide
+# Ověř: 3 pody na 3 různých worker uzlech, status Running
+```
+
+### Rolling update bez výpadku
+
+V jednom terminálu posílej provoz:
+```powershell
+# Nainstaluj hey: go install github.com/rakyll/hey@latest
+hey -z 60s -c 20 http://luncher.localhost/api/health
+```
+
+Ve druhém terminálu spusť rollout:
+```powershell
+kubectl rollout restart deploy/luncher -n luncher
+```
+
+**Kritérium: 0 non-2xx odpovědí, 0 connection errors.**
+
+### Node drain
+
+```powershell
+kubectl cordon testik-worker2
+kubectl drain testik-worker2 --ignore-daemonsets --delete-emptydir-data
+# PDB zabrání souběžnému drainu druhého nodu
+kubectl get pods -n luncher -o wide  # pody se přeplánují
+kubectl uncordon testik-worker2
+```
+
+### Ověření Socket.io cross-pod
+
+1. Otevři dvě záložky prohlížeče na `http://luncher.localhost`
+2. Z jednoho podu vyvolej změnu:
+   ```powershell
+   kubectl exec -it deploy/luncher -n luncher -- curl -s -X POST localhost:3001/api/...
+   ```
+3. Ověř, že druhá záložka (pravděpodobně jiný pod) obdrží WebSocket event
+
+### Concurrent write test
+
+1. Otevři stejnou Pizza day objednávku ve dvou záložkách
+2. Simuluj souběžné odeslání (otevřít DevTools → síť → odeslat obě požadavky současně)
+3. Ověř Redis: `kubectl exec -it redis-0 -n luncher -- redis-cli JSON.GET luncher:<datum>`
+   — oba zápisy musí být zachovány (WATCH/MULTI retry)
+
+### Auto-rollout při změně Secret / ConfigMap
+
+Reloader automaticky spustí rolling restart, kdykoli se změní `luncher-secrets` nebo `luncher-config`:
+
+```powershell
+# Příklad: rotace admin hesla
+kubectl -n luncher patch secret luncher-secrets --type=merge `
+  -p '{"stringData":{"ADMIN_PASSWORD":"nove-heslo"}}'
+
+# Reloader detekuje změnu resourceVersion a patchne pod template
+kubectl rollout status deploy/luncher -n luncher
+
+# Ověř anotaci přidanou Reloaderem na pod template
+kubectl get deploy luncher -n luncher -o yaml | Select-String "STAKATER"
+```
+
+**Kritérium: pody se automaticky vyrolují bez ručního restartu. PDB zajistí, že alespoň jeden pod zůstane dostupný.**
+
+## Pořadí aplikace manifestů
+
+1. `reloader.yaml` (do `default` namespace — musí být před Deployment)
+2. `namespace.yaml`
+3. `redis-statefulset.yaml` + `redis-service.yaml`
+4. `server-configmap.yaml` + `server-secret.yaml`
+5. `server-deployment.yaml` + `server-service.yaml` + `server-pdb.yaml`
+6. `ingressroute.yaml`

k8s/base/ingressroute.yaml

@@ -0,0 +1,16 @@
+apiVersion: traefik.io/v1alpha1
+kind: IngressRoute
+metadata:
+  name: luncher
+  namespace: luncher
+  annotations:
+    kubernetes.io/ingress.class: traefik
+spec:
+  entryPoints:
+    - web
+  routes:
+    - match: Host(`luncher.localhost`)
+      kind: Rule
+      services:
+        - name: luncher
+          port: 3001

k8s/base/namespace.yaml

@@ -0,0 +1,4 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: luncher

k8s/base/redis-service.yaml

@@ -0,0 +1,12 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: redis
+  namespace: luncher
+spec:
+  clusterIP: None  # headless — StatefulSet pod discovery
+  selector:
+    app: redis
+  ports:
+    - port: 6379
+      targetPort: 6379

k8s/base/redis-statefulset.yaml

@@ -0,0 +1,50 @@
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: redis
+  namespace: luncher
+spec:
+  serviceName: redis
+  replicas: 1
+  selector:
+    matchLabels:
+      app: redis
+  template:
+    metadata:
+      labels:
+        app: redis
+    spec:
+      containers:
+        - name: redis
+          # Redis Stack je nutný — aplikace používá JSON.GET / JSON.SET (modul RedisJSON)
+          image: redis/redis-stack-server:7.2.0-v14
+          ports:
+            - containerPort: 6379
+          resources:
+            requests:
+              cpu: 100m
+              memory: 128Mi
+            limits:
+              cpu: 500m
+              memory: 512Mi
+          volumeMounts:
+            - name: data
+              mountPath: /data
+          readinessProbe:
+            exec:
+              command: ["redis-cli", "ping"]
+            initialDelaySeconds: 5
+            periodSeconds: 5
+          livenessProbe:
+            exec:
+              command: ["redis-cli", "ping"]
+            initialDelaySeconds: 10
+            periodSeconds: 10
+  volumeClaimTemplates:
+    - metadata:
+        name: data
+      spec:
+        accessModes: ["ReadWriteOnce"]
+        resources:
+          requests:
+            storage: 1Gi

k8s/base/reloader.yaml

@@ -0,0 +1,184 @@
+# stakater/Reloader v1.4.16
+# Zdroj: https://raw.githubusercontent.com/stakater/Reloader/v1.4.16/deployments/kubernetes/reloader.yaml
+# Aktualizace: stáhnout novou verzi ze stejné URL a nahradit tento soubor.
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: reloader-reloader
+  namespace: default
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: Role
+metadata:
+  name: reloader-reloader-metadata-role
+  namespace: default
+rules:
+- apiGroups:
+  - ""
+  resources:
+  - configmaps
+  verbs:
+  - list
+  - get
+  - watch
+  - create
+  - update
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRole
+metadata:
+  name: reloader-reloader-role
+rules:
+- apiGroups:
+  - ""
+  resources:
+  - secrets
+  - configmaps
+  verbs:
+  - list
+  - get
+  - watch
+- apiGroups:
+  - apps
+  resources:
+  - deployments
+  - daemonsets
+  - statefulsets
+  verbs:
+  - list
+  - get
+  - update
+  - patch
+- apiGroups:
+  - extensions
+  resources:
+  - deployments
+  - daemonsets
+  verbs:
+  - list
+  - get
+  - update
+  - patch
+- apiGroups:
+  - batch
+  resources:
+  - cronjobs
+  verbs:
+  - list
+  - get
+- apiGroups:
+  - batch
+  resources:
+  - jobs
+  verbs:
+  - create
+  - delete
+  - list
+  - get
+- apiGroups:
+  - ""
+  resources:
+  - events
+  verbs:
+  - create
+  - patch
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: RoleBinding
+metadata:
+  name: reloader-reloader-metadata-rolebinding
+  namespace: default
+roleRef:
+  apiGroup: rbac.authorization.k8s.io
+  kind: Role
+  name: reloader-reloader-metadata-role
+subjects:
+- kind: ServiceAccount
+  name: reloader-reloader
+  namespace: default
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRoleBinding
+metadata:
+  name: reloader-reloader-role-binding
+roleRef:
+  apiGroup: rbac.authorization.k8s.io
+  kind: ClusterRole
+  name: reloader-reloader-role
+subjects:
+- kind: ServiceAccount
+  name: reloader-reloader
+  namespace: default
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: reloader-reloader
+  namespace: default
+spec:
+  replicas: 1
+  revisionHistoryLimit: 2
+  selector:
+    matchLabels:
+      app: reloader-reloader
+  template:
+    metadata:
+      labels:
+        app: reloader-reloader
+    spec:
+      containers:
+      - env:
+        - name: GOMAXPROCS
+          valueFrom:
+            resourceFieldRef:
+              divisor: "1"
+              resource: limits.cpu
+        - name: GOMEMLIMIT
+          valueFrom:
+            resourceFieldRef:
+              divisor: "1"
+              resource: limits.memory
+        - name: RELOADER_NAMESPACE
+          valueFrom:
+            fieldRef:
+              fieldPath: metadata.namespace
+        - name: RELOADER_DEPLOYMENT_NAME
+          value: reloader-reloader
+        image: ghcr.io/stakater/reloader:v1.4.16
+        imagePullPolicy: IfNotPresent
+        livenessProbe:
+          failureThreshold: 5
+          httpGet:
+            path: /live
+            port: http
+          initialDelaySeconds: 10
+          periodSeconds: 10
+          successThreshold: 1
+          timeoutSeconds: 5
+        name: reloader-reloader
+        ports:
+        - containerPort: 9090
+          name: http
+        readinessProbe:
+          failureThreshold: 5
+          httpGet:
+            path: /metrics
+            port: http
+          initialDelaySeconds: 10
+          periodSeconds: 10
+          successThreshold: 1
+          timeoutSeconds: 5
+        resources:
+          limits:
+            cpu: "1"
+            memory: 512Mi
+          requests:
+            cpu: 10m
+            memory: 512Mi
+        securityContext: {}
+      securityContext:
+        runAsNonRoot: true
+        runAsUser: 65534
+        seccompProfile:
+          type: RuntimeDefault
+      serviceAccountName: reloader-reloader

k8s/base/server-configmap.yaml

@@ -0,0 +1,12 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: luncher-config
+  namespace: luncher
+data:
+  NODE_ENV: production
+  STORAGE: redis
+  REDIS_HOST: redis
+  REDIS_PORT: "6379"
+  PORT: "3001"
+  HOST: "0.0.0.0"