feat: automatický výběr výchozího času

fix: oprava kopírování changelogů do Docker image

fix: oprava kopírování changelogů do Docker image

fix: oprava

.gitignore

@@ -1,26 +1,3 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
 node_modules
-/.pnp
+types/gen
-.pnp.js
+**.DS_Store
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-__pycache__
-venv

.woodpecker/workflow.yaml

@@ -0,0 +1,64 @@
+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,111 @@
+# 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)
+```
+
+Each directory has its own `package.json` and `tsconfig.json`. Package manager: **Yarn Classic**.
+
+## Development Commands
+
+### Initial setup
+```bash
+cd types && yarn install && yarn openapi-ts   # Generate API types first
+cd ../server && yarn install
+cd ../client && 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
+cd server && yarn test           # Jest (tests in server/src/tests/)
+```
+
+### Formatting
+```bash
+# Prettier available in client (no config file — uses defaults)
+```
+
+## Architecture
+
+### API Types (types/)
+- OpenAPI 3.0 spec in `types/api.yml` — all API endpoints and DTOs defined here
+- `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/` — modular Express route handlers (food, pizzaDay, voting, notifications, qr, stats, easterEgg, dev)
+- **Services:** domain logic files at root level (`service.ts`, `pizza.ts`, `restaurants.ts`, `chefie.ts`, `voting.ts`, `stats.ts`, `qr.ts`, `notifikace.ts`)
+- **Auth:** `auth.ts` — JWT + optional trusted-header authentication
+- **Storage:** `storage/StorageInterface.ts` defines the interface; implementations in `storage/json.ts` (file-based, dev) and `storage/redis.ts` (production). Data keyed by date (YYYY-MM-DD).
+- **Restaurant scrapers:** Cheerio-based HTML parsing for daily menus from multiple restaurants
+- **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`
+- **Pages:** `pages/` (StatsPage)
+- **Components:** `components/` (Header, Footer, Loader, modals/, PizzaOrderList, PizzaOrderRow)
+- **Context providers:** `context/` — AuthContext, SettingsContext, SocketContext, EasterEggContext
+- **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), `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
+
+## Code Search Strategy
+When searching through the project for information, use the Task tool to spawn
+subagents. Each subagent should read the relevant files and return a brief
+summary of what it found (not the full file contents). This keeps the main
+context window small and saves tokens. Only pull in full file contents once
+you've identified the specific files that matter.
+When using subagents to search, each subagent should return:
+- File path
+- Whether it's relevant (yes/no)
+- 1-3 sentence summary of what's in the file
+Do NOT return full file contents in subagent responses.

Dockerfile

@@ -0,0 +1,96 @@
+ARG NODE_VERSION="node:22-alpine"
+
+# Builder
+FROM ${NODE_VERSION} AS builder
+
+WORKDIR /build
+
+# Zkopírování závislostí - OpenAPI generátor
+COPY types/package.json ./types/
+COPY types/yarn.lock ./types/
+COPY types/api.yml ./types/
+COPY types/schemas ./types/schemas/
+COPY types/paths ./types/paths/
+COPY types/openapi-ts.config.ts ./types/
+
+# Zkopírování závislostí - server
+COPY server/package.json ./server/
+COPY server/yarn.lock ./server/
+
+# Zkopírování závislostí - klient
+COPY client/package.json ./client/
+COPY client/yarn.lock ./client/
+
+# Instalace závislostí - OpenAPI generátor
+WORKDIR /build/types
+RUN yarn install --frozen-lockfile
+
+# Instalace závislostí - server
+WORKDIR /build/server
+RUN yarn install --frozen-lockfile
+
+# Instalace závislostí - klient
+WORKDIR /build/client
+RUN yarn install --frozen-lockfile
+
+WORKDIR /build
+
+# Zkopírování build závislostí - server
+COPY server/tsconfig.json ./server/
+COPY server/src ./server/src/
+
+# Zkopírování build závislostí - klient
+COPY client/tsconfig.json ./client/
+COPY client/vite.config.ts ./client/
+COPY client/vite-env.d.ts ./client/
+COPY client/index.html ./client/
+COPY client/src ./client/src
+COPY client/public ./client/public
+
+# Zkopírování společných typů
+COPY types/index.ts ./types/
+
+# Vygenerování společných typů z OpenAPI
+WORKDIR /build/types
+RUN yarn openapi-ts
+
+# Sestavení serveru
+WORKDIR /build/server
+RUN yarn build
+
+# Sestavení klienta
+WORKDIR /build/client
+RUN yarn build
+
+# Runner
+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 --from=builder /build/server/node_modules ./server/node_modules
+COPY --from=builder /build/server/dist ./
+
+# Vykopírování sestaveného klienta
+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ů a changelogů
+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"]
+
+EXPOSE 3000
+
+CMD [ "node", "./server/src/index.js" ]

Dockerfile-Woodpecker

@@ -0,0 +1,30 @@
+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í changelogů (seznamu novinek)
+COPY ./server/changelogs ./server/changelogs
+
+# Zkopírování konfigurace easter eggů a changelogů
+RUN if [ -f ./server/.easter-eggs.json ]; then cp ./server/.easter-eggs.json ./server/; fi \
+    && if [ -d ./server/changelogs ]; then cp -r ./server/changelogs ./server/changelogs; fi
+
+EXPOSE 3000
+
+CMD [ "node", "./server/src/index.js" ]

README.md

@@ -1,15 +1,40 @@
 # Luncher
+Aplikace pro profesionální management obědů.
 
-Zatím to nemá dokumentaci.
+Aplikace sestává ze tří modulů.
-Server je v adresáři /server, client v adresáři /client obojí lze spustit pomocí:
+- types
+  - OpenAPI definice společných typů, generované přes [openapi-ts](https://github.com/hey-api/openapi-ts)
+- server
+  - backend psaný v [node.js](https://nodejs.dev)
+- client
+  - frontend psaný v [React.js](https://react.dev)
 
-### `yarn`
+## Spuštění pro vývoj
-### `yarn start`
+### Závislosti
+#### Klient/server
+- [Node.js 22.x (>= 22.11)](https://nodejs.dev)
+- [Yarn 1.22.x (Classic)](https://classic.yarnpkg.com)
+
+### Spuštění na *nix platformách
+- Nainstalovat závislosti viz předchozí bod
+- Zkopírovat `server/.env.template` do `server/.env.development` a upravit dle potřeby
+- Vygenerovat společné TypeScript typy
+  - `cd types && yarn install && yarn openapi-ts`
+- Server
+  - `cd server && yarn install && export NODE_ENV=development && yarn startReload`
+- Klient
+  - `cd client && yarn install && yarn start`
+
+## Sestavení a spuštění produkční verze v Docker
+### Závislosti
+- [Docker](https://www.docker.com)
+- [Docker Compose](https://docs.docker.com/compose)
+
+### Spuštění
+- `docker compose up --build -d`
+
+### Spuštení s traefik
+- `docker compose -f compose-traefik.yml up --build -d`
 
 ## TODO
-- Popsat Food API, nginx
+Dostupné [zde](TODO.md).
-- Popsat spuštění pro vývoj
-- Vyndat URL na Food API do .env
-- Neselhat při nedostupnosti nebo chybě z Food API
-- Dokončit docker-compose pro kompletní funkčnost
-- Implementovat pizza day

TODO.md

@@ -0,0 +1,73 @@
+# TODO
+- [ ] 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í) 
+- [ ] Možnost úhrady celé útraty jednou osobou
+  - Základní myšlenka: jedna osoba uhradí celou útratu (v zájmu rychlosti odbavení), ostatním se automaticky vygeneruje QR kód, kterým následně uhradí svoji část útraty
+  - Obecně to bude problém např. pokud si někdo objedná něco navíc (pití apod.)
+  - [ ] Tlačítko "Uhradit" u každého řádku podniku - platí ten, kdo kliknul
+    - [ ] Zobrazeno bude pouze, pokud má daný uživatel nastaveno číslo účtu
+  - [ ] Dialog pro zadání spropitného, které se následně rozpočte rovnoměrně všem strávníkům
+  - [ ] Generování a zobrazení QR kódů ostatním strávníkům
+  - [ ] Umožnit u každého strávníka připočíst vlastní částku (např. za pití)
+  - [ ] Umožnit (např. zaškrtávátky) vybrat, za koho bude zaplaceno (pokud někdo bude platit zvlášť)
+- [ ] Podpora pro notifikace v externích systémech (Gotify, Discord, MS Teams)
+  - [ ] Umožnit zadat URL/tokeny uživatelem
+  - [ ] Umožnit uživatelsky konfigurovat typy notifikací, které se budou odesílat
+  - [ ] Zavést notifikace typu "Jdeme na oběd"
+    - [ ] Notifikaci dostanou pouze uživatelé, kteří mají vybranou stejnou lokalitu
+- [ ] Vylepšit parsery restaurací
+    - [ ] Sladovnická
+    - [ ] Zbytečná prvotní validace indexu, datum konkrétního dne je i v samotné tabulce s jídly, viz TODO v parseru
+  - [ ] U Motlíků
+    - [ ] Validovat, že vstupní datum je zahrnuto v rozsahu uvedeném nad tabulkou (např. '12.6.-16.6.')
+    - [ ] Jídelní lístek se stahuje jednou každý den, teoreticky by stačilo jednou týdně (za předpokladu, že se během týdne nemění)
+  - [ ] TechTower
+    - [ ] Validovat, že vstupní datum je zahrnuto v rozsahu uvedeném nad tabulkou (typicky 'Obědy 12. 6. - 16. 6. 2023 (každý den vždy i obědový  bufet)')
+    - [ ] Jídelní lístek se stahuje v rámci prvního požadavku daný den, ale často se jídelní lístek na stránkách aktualizuje až v průběhu pondělního dopoledne a ten zobrazený je proto neaktuální
+      - Stránka neposílá hlavičku o času poslední modifikace, takže o to se nelze opřít
+      - Nevím aktuálně jak řešit jinak, než častějším scrapováním celé stránky
+  - [X] Někdy jsou v názvech jídel přebytečné mezery kolem čárek ( , )
+- [ ] Nasazení nové verze v Docker smaže veškerá data (protože data.json není vystrčený ven z kontejneru)
+  - [ ] Zavést složku /data
+- [ ] Mazat z databáze data z minulosti, aktuálně je to k ničemu
+- [ ] Skripty pro snadné spuštění vývoje na Windows (ekvivalent ./run_dev.sh)
+- [ ] Implementovat Pizza day
+  - [ ] Zobrazit upozornění před smazáním/zamknutím/odemknutím pizza day
+  - [ ] Pizzy se samy budou při naklikání přidávat do košíku
+    - [ ] Nutno nejprve vyřešit předávání PHPSESSIONID cookie na pizzachefie.cz pomocí fetch()
+  - [ ] Ceny krabic za pizzu jsou napevno v kódu - problém, pokud se někdy změní
+  - [X] Umožnit u Pizza day ručně připočíst cenu za přísady
+  - [X] Prvotní načtení pizz při založení Pizza Day trvá a nic se během toho nezobrazuje (např. loader)
+  - [X] Po doručení zobrazit komu zaplatit (kdo objednával)
+  - [x] Zbytečně nescrapovat každý den pizzy z Pizza Chefie, dokud není založen Pizza Day
+  - [x] Umožnit uzamčení objednávek zakladatelem
+  - [x] Možnost uložení čísla účtu
+  - [x] Automatické generování a zobrazení QR kódů
+    - [x] https://qr-platba.cz/pro-vyvojare/restful-api/
+  - [x] Zobrazovat celkovou cenu objednávky pod tabulkou objednávek
+  - [x] Umožnit přidat k objednávce poznámku (např. "bez oliv")
+  - [x] Negenerovat QR kód pro objednávajícího
+- [X] Možnost náhledu na ostatní dny v týdnu (např. pomocí šipek)
+  - [X] Možnost výběru oběda na následující dny v týdnu
+- [X] Umožnit vybrat libovolný čas odchodu
+- [X] Validace zadání smysluplného času (ideálně i klientská)
+- [x] Umožnit smazání aktuální volby "popelnicí", místo nutnosti vybrat prázdnou položku v selectu
+- [x] Přívětivější možnost odhlašování
+- [x] Vyřešit responzivní design pro použití na mobilu
+- [x] Vyndat URL na Food API do .env
+- [x] Neselhat při nedostupnosti nebo chybě z Food API
+- [x] Dokončit docker-compose pro kompletní funkčnost
+- [x] Vylepšit dokumentaci projektu
+  - [x] Popsat závislosti, co je nutné provést před vývojem a postup spuštění pro vývoj
+  - [x] Popsat dostupné env
+- [x] Přesunout autentizaci na server (JWT?)
+- [x] Zavést .env.template a přidat .env do .gitignore
+- [x] Zkrášlit dialog pro vyplnění čísla účtu, vypadá mizerně
+- [x] Zbavit se Food API, potřebnou funkcionalitu zahrnout do serveru
+- [x] Vyřešit API mezi serverem a klientem, aby nebyl v obou projektech duplicitní kód (viz types.ts a Types.tsx)
+- [X] Vybraná jídla strávníků zobrazovat v samostatném sloupci
+- [X] Umožnit výběr/zadání preferovaného času odchodu na oběd
+  - Hodí se např. pokud má někdo schůzky
+- [X] Ukládat dostupné pizzy do DB místo souborů
+- [X] Ukládat jídla do DB místo souborů

client/.dockerignore

@@ -1,3 +0,0 @@
-**/node_modules
-**/npm-debug.log
-build

client/.env.production

@@ -1 +0,0 @@
-PUBLIC_URL=http://192.168.1.106:3005

client/.gitignore

@@ -1 +1,2 @@
 build
+dist

client/Dockerfile

@@ -1,23 +0,0 @@
-FROM node:alpine AS builder
-
-COPY package.json .
-COPY yarn.lock .
-COPY tsconfig.json .
-COPY .env.production .
-
-RUN yarn install
-
-COPY ./src ./src
-COPY ./public ./public
-
-RUN yarn build
-
-FROM node:alpine
-ENV NODE_ENV production
-
-WORKDIR /app
-
-COPY --from=builder /build .
-
-RUN yarn global add serve && yarn
-CMD ["serve", "-s", "."]

client/build.sh

@@ -1,2 +0,0 @@
-#!/bin/bash
-docker build -t luncher-client .

client/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Moderní webová aplikace pro lepší správu obědových preferencí" />
+  <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>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>

client/package.json

@@ -1,35 +1,46 @@
 {
-  "name": "luncher-client",
+  "name": "@luncher/client",
   "version": "0.1.0",
   "license": "MIT",
   "private": true,
+  "type": "module",
+  "homepage": ".",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@testing-library/react": "^13.4.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@types/jest": "^27.5.2",
+    "@fortawesome/react-fontawesome": "^3.1.0",
-    "@types/node": "^16.18.23",
+    "@types/jest": "^30.0.0",
-    "@types/react": "^18.0.33",
+    "@types/node": "^24.10.0",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^19.2.2",
-    "bootstrap": "^5.2.3",
+    "@types/react-dom": "^19.2.2",
-    "react": "^18.2.0",
+    "@vitejs/plugin-react": "^5.1.0",
-    "react-bootstrap": "^2.7.2",
+    "bootstrap": "^5.3.8",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
-    "react-scripts": "5.0.1",
+    "react-bootstrap": "^2.10.10",
+    "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",
+    "sass": "^1.93.3",
     "socket.io-client": "^4.6.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.9.3",
-    "web-vitals": "^2.1.4"
+    "vite": "^7.2.2",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "yarn vite",
-    "build": "react-scripts build",
+    "build": "tsc --noEmit && yarn vite build"
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
+      "react-app"
-      "react-app/jest"
     ]
   },
   "browserslist": {
@@ -43,5 +54,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "prettier": "^3.6.2"
   }
 }

client/public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Moderní webová aplikace pro lepší správu obědových preferencí" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-  <title>Luncher</title>
-</head>
-
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-</body>
-
-</html>

client/public/leaf-brown.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
+<path fill="#8B4513" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
+	s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
+	S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
+	s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
+	S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
+	s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
+	c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
+	c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
+	c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
+	c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
+	c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
+	c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
+	c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
+	c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
+	c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
+	c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
+</svg>

client/public/leaf-green.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
+<path fill="#228B22" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
+	s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
+	S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
+	s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
+	S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
+	s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
+	c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
+	c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
+	c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
+	c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
+	c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
+	c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
+	c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
+	c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
+	c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
+	c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
+</svg>

client/public/leaf-orange.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
+<path fill="#D2691E" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
+	s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
+	S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
+	s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
+	S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
+	s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
+	c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
+	c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
+	c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
+	c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
+	c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
+	c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
+	c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
+	c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
+	c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
+	c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
+</svg>

client/public/leaf-red.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
+<path fill="#B22222" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
+	s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
+	S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
+	s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
+	S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
+	s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
+	c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
+	c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
+	c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
+	c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
+	c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
+	c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
+	c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
+	c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
+	c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
+	c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
+</svg>

client/public/leaf-yellow.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
+<path fill="#FFD700" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
+	s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
+	S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
+	s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
+	S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
+	s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
+	c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
+	c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
+	c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
+	c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
+	c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
+	c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
+	c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
+	c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
+	c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
+	c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
+</svg>

client/public/leaf.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
+<path fill="#471C37" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
+	s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
+	S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
+	s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
+	S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
+	s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
+	c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
+	c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
+	c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
+	c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
+	c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
+	c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
+	c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
+	c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
+	c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
+	c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
+</svg>

client/public/sw.js

@@ -0,0 +1,46 @@
+// Service Worker pro Web Push notifikace (připomínka výběru oběda)
+
+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: 'lunch-reminder',
+            actions: [
+                { action: 'neobedvam', title: 'Mám vlastní/neobědvám' },
+            ],
+        })
+    );
+});
+
+self.addEventListener('notificationclick', (event) => {
+    event.notification.close();
+
+    if (event.action === 'neobedvam') {
+        event.waitUntil(
+            self.registration.pushManager.getSubscription().then((subscription) => {
+                if (!subscription) return;
+                return fetch('/api/notifications/push/quickChoice', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ endpoint: subscription.endpoint }),
+                });
+            })
+        );
+        return;
+    }
+
+    event.waitUntil(
+        self.clients.matchAll({ type: 'window' }).then((clientList) => {
+            // Pokud je již otevřené okno, zaostříme na něj
+            for (const client of clientList) {
+                if (client.url.includes(self.location.origin) && 'focus' in client) {
+                    return client.focus();
+                }
+            }
+            // Jinak otevřeme nové
+            return self.clients.openWindow('/');
+        })
+    );
+});

client/src/Api.ts

@@ -1,51 +0,0 @@
-// type Pizza = {
-//     name: string;
-//     // TODO ingredience
-//     sizes: [
-//         size: number,
-//         price: number,
-//     ];
-// }
-
-import { getBaseUrl } from "./Utils";
-
-async function request<TResponse>(
-    url: string,
-    config: RequestInit = {}
-): Promise<TResponse> {
-    return fetch(getBaseUrl() + url, config).then(response => {
-        if (!response.ok) {
-            throw new Error(response.statusText);
-        }
-        return response.json() as TResponse;
-    });
-}
-
-const api = {
-    get: <TResponse>(url: string) => request<TResponse>(url),
-    post: <TBody extends BodyInit, TResponse>(url: string, body: TBody) => request<TResponse>(url, { method: 'POST', body, headers: { 'Content-Type': 'application/json' } }),
-}
-
-export const getData = async () => {
-    return await api.get<any>('/api/data');
-}
-
-export const getFood = async () => {
-    return await api.get<any>('/api/food');
-}
-
-export const getPizzy = async () => {
-    return await api.get<any>('/api/pizza');
-}
-
-export const createPizzaDay = async () => {
-    return await api.post<any, any>('/api/createPizzaDay', {});
-}
-
-export const deletePizzaDay = async () => {
-    return await api.post<any, any>('/api/deletePizzaDay', {});
-}
-
-export const updateChoice = async (name: string, choice: number | null) => {
-    return await api.post<any, any>('/api/updateChoice', JSON.stringify({ name, choice }));
-}

client/src/App.css

@@ -1,60 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.wrapper {
-  padding: 20px;
-}
-
-.title {
-  margin: 50px 0;
-}
-
-.food-tables {
-  display: flex;
-  justify-content: space-evenly;
-  margin-bottom: 50px;
-}
-
-.content-wrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}

client/src/App.tsx

@@ -1,50 +1,133 @@
-import React, { useContext, useEffect, useState } from 'react';
+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 { getData, getFood, updateChoice } from './Api';
 import { useAuth } from './context/auth';
 import Login from './Login';
-import { Locations, ClientData } from './Types';
+import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
-import './App.css';
+import Header from './components/Header';
-import { Alert, Form, Table } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import PizzaOrderList from './components/PizzaOrderList';
+import SelectSearch, { SelectedOptionValue, SelectSearchOption } from 'react-select-search';
+import 'react-select-search/style.css';
+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 { faBasketShopping, faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import Loader from './components/Loader';
+import { getHumanDateTime, isInTheFuture, formatDateString } from './Utils';
+import NoteModal from './components/modals/NoteModal';
+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, setBuyer, dismissQr } from '../../types';
+import { getLunchChoiceName } from './enums';
+// import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
+// import './FallingLeaves.scss';
 
 const EVENT_CONNECT = "connect"
 
+// Fixní styl pro všechny easter egg obrázky
+const EASTER_EGG_STYLE = {
+  zIndex: 1,
+  animationName: "bounce-in",
+  animationTimingFunction: "ease"
+}
+
+// Mapování čísel alergenů na jejich názvy
+const ALLERGENS: { [key: number]: string } = {
+  1: "Obiloviny obsahující lepek",
+  2: "Korýši a výrobky z nich",
+  3: "Vejce a výrobky z nich",
+  4: "Ryby a výrobky z nich",
+  5: "Arašidy a výrobky z nich",
+  6: "Sója a výrobky z nich",
+  7: "Mléko a výrobky z nich (včetně laktózy)",
+  8: "Skořápkové plody",
+  9: "Celer a výrobky z něj",
+  10: "Hořčice a výrobky z ní",
+  11: "Sezamová semena a výrobky z nich",
+  12: "Oxid siřičitý a siřičitany",
+  13: "Vlčí bob (Lupina) a výrobky z něj",
+  14: "Měkkýši a výrobky z nich"
+}
+
+const LINK_ALLERGENS = 'https://www.strava.cz/Strava/Napoveda/cz/Prilohy/alergeny.pdf';
+
+// Výchozí doba trvání animace v sekundách, pokud není přetíženo v konfiguračním JSONu
+const EASTER_EGG_DEFAULT_DURATION = 0.75;
+
 function App() {
   const auth = useAuth();
+  const settings = useSettings();
+  const [easterEgg, _] = useEasterEgg(auth);
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [data, setData] = useState<ClientData>();
-  const [food, setFood] = useState<any>();
+  const [food, setFood] = useState<RestaurantDayMenuMap>();
-  // const [pizzy, setPizzy] = useState();
+  const [myOrder, setMyOrder] = useState<PizzaOrder>();
+  const [foodChoiceList, setFoodChoiceList] = useState<Food[]>();
+  const [closed, setClosed] = useState<boolean>(false);
   const socket = useContext(SocketContext);
+  const choiceRef = useRef<HTMLSelectElement>(null);
+  const foodChoiceRef = useRef<HTMLSelectElement>(null);
+  const departureChoiceRef = useRef<HTMLSelectElement>(null);
+  const pizzaPoznamkaRef = useRef<HTMLInputElement>(null);
+  const [failure, setFailure] = useState<boolean>(false);
+  const [dayIndex, setDayIndex] = useState<number>();
+  const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false);
+  const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
+  const [eggImage, setEggImage] = useState<Blob>();
+  const eggRef = useRef<HTMLImageElement>(null);
+  // Prazvláštní workaround, aby socket.io listener viděl aktuální hodnotu
+  // https://medium.com/@kishorkrishna/cant-access-latest-state-inside-socket-io-listener-heres-how-to-fix-it-1522a5abebdb
+  const dayIndexRef = useRef<number | undefined>(dayIndex);
 
-  // Prvotní načtení aktuálního stavu
+  // Načtení dat po přihlášení
   useEffect(() => {
-    // getPizzy().then(pizzy => {
+    if (!auth?.login) {
-    //   setPizzy(pizzy);
+      return
-    // });
+    }
-    getData().then(data => {
+    getData().then(response => {
+      const data = response.data
+      if (data) {
+        setData(data);
+        setDayIndex(data.dayIndex);
+        dayIndexRef.current = data.dayIndex;
+        setFood(data.menus);
+      }
+    }).catch(e => {
+      setFailure(true);
+    })
+  }, [auth, auth?.login]);
+
+  // Přenačtení pro zvolený den
+  useEffect(() => {
+    if (!auth?.login) {
+      return
+    }
+    getData({ query: { dayIndex: dayIndex } }).then(response => {
+      const data = response.data;
       setData(data);
+      if (data) {
+        setFood(data.menus);
+      }
+    }).catch(e => {
+      setFailure(true);
     })
-    getFood().then(food => {
+  }, [dayIndex, auth]);
-      setFood(food);
-    })
-  }, []);
 
   // Registrace socket eventů
   useEffect(() => {
     socket.on(EVENT_CONNECT, () => {
-      // console.log("Connected!");
       setIsConnected(true);
     });
     socket.on(EVENT_DISCONNECT, () => {
-      // console.log("Disconnected!");
       setIsConnected(false);
     });
     socket.on(EVENT_MESSAGE, (newData: ClientData) => {
-      // const data: any = JSON.parse(payload);
       // console.log("Přijata nová data ze socketu", newData);
-      setData(newData);
+      // Aktualizujeme pouze, pokud jsme dostali data pro den, který máme aktuálně zobrazený
+      if (dayIndexRef.current == null || newData.dayIndex === dayIndexRef.current) {
+        setData(newData);
+      }
     });
 
     return () => {
@@ -54,105 +137,759 @@ function App() {
     }
   }, [socket]);
 
-  const changeChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
+  useEffect(() => {
-    const index = Object.values(Locations).indexOf(event.target.value as unknown as Locations);
+    if (!auth?.login || !data?.choices) {
-    if (auth?.login) {
+      return
-      await updateChoice(auth.login, index > -1 ? index : null);
+    }
+    // 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
+  useEffect(() => {
+    if (data?.pizzaDay?.orders) {
+      const myOrder = data.pizzaDay.orders.find(o => o.customer === auth?.login);
+      setMyOrder(myOrder);
+    }
+  }, [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;
+      const restaurantKey = Object.keys(Restaurant).indexOf(locationKey);
+      if (restaurantKey > -1 && food) {
+        const restaurant = Object.keys(Restaurant)[restaurantKey] as Restaurant;
+        setFoodChoiceList(food[restaurant]?.food);
+        setClosed(food[restaurant]?.closed ?? false);
+      } else {
+        setFoodChoiceList(undefined);
+        setClosed(false);
+      }
+    } else {
+      setFoodChoiceList(undefined);
+      setClosed(false);
+    }
+  }, [choiceRef.current?.value, food])
+
+  // Navigace mezi dny pomocí klávesových šípek
+  const handleKeyDown = useCallback((e: any) => {
+    if (e.keyCode === 37 && dayIndex != null && dayIndex > 0) {
+      handleDayChange(dayIndex - 1);
+    } else if (e.keyCode === 39 && dayIndex != null && dayIndex < 4) {
+      handleDayChange(dayIndex + 1);
+    }
+  }, [dayIndex]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [handleKeyDown]);
+
+  // Stažení a nastavení easter egg obrázku
+  useEffect(() => {
+    if (auth?.login && easterEgg?.url && !eggImage) {
+      getEasterEggImage({ path: { url: easterEgg.url } }).then(response => {
+        if (response.data) {
+          setEggImage(response.data);
+          // Smazání obrázku z DOMu po animaci
+          setTimeout(() => {
+            if (eggRef?.current) {
+              eggRef.current.remove();
+            }
+          }, (easterEgg.duration || EASTER_EGG_DEFAULT_DURATION) * 1000);
+        }
+      });
+    }
+  }, [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 (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 renderFoodTable = (name, food) => {
+  const doAddChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
-    return <div className='food-table'>
+    const locationKey = event.target.value as LunchChoice;
-      <h3>{name}</h3>
+    if (canChangeChoice && auth?.login) {
-      <Table striped bordered hover>
+      // Kontrola Pizza day před změnou volby
-        <tbody>
+      const canProceed = await checkPizzaDayBeforeChange(locationKey);
-          {food.map((f: any, index: number) =>
+      if (!canProceed) {
-            <tr key={index}>
+        // Uživatel zrušil akci nebo došlo k chybě, reset výběru zpět na PIZZA
-              <td>{f.amount}</td>
+        if (choiceRef.current) {
-              <td>{f.name}</td>
+          choiceRef.current.value = LunchChoice.PIZZA;
-              <td>{f.price}</td>
+        }
+        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 = "";
+        }
+      }
+    }
+  }
+
+  const doJdemeObed = async () => {
+    if (auth?.login) {
+      await jdemeObed();
+    }
+  }
+
+  const doAddFoodChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (event.target.value && foodChoiceList?.length && choiceRef.current?.value) {
+      const locationKey = choiceRef.current.value as LunchChoice;
+      if (auth?.login) {
+        await addChoice({ body: { locationKey, foodIndex: Number(event.target.value), dayIndex } });
+        await tryAutoSelectDepartureTime();
+      }
+    }
+  }
+
+  const doRemoveChoices = async (locationKey: LunchChoice) => {
+    if (auth?.login) {
+      await removeChoices({ body: { locationKey, dayIndex } });
+      // Vyresetujeme výběr, aby bylo jasné pro který případně vybíráme jídlo
+      if (choiceRef?.current?.value) {
+        choiceRef.current.value = "";
+      }
+      if (foodChoiceRef?.current?.value) {
+        foodChoiceRef.current.value = "";
+      }
+    }
+  }
+
+  const doRemoveFoodChoice = async (locationKey: LunchChoice, foodIndex: number) => {
+    if (auth?.login) {
+      await removeChoice({ body: { locationKey, foodIndex, dayIndex } });
+      if (choiceRef?.current?.value) {
+        choiceRef.current.value = "";
+      }
+      if (foodChoiceRef?.current?.value) {
+        foodChoiceRef.current.value = "";
+      }
+    }
+  }
+
+  const saveNote = async (note?: string) => {
+    if (auth?.login) {
+      await updateNote({ body: { note, dayIndex } });
+      setNoteModalOpen(false);
+    }
+  }
+
+  const copyNote = async (note: string) => {
+    if (auth?.login && note) {
+      await updateNote({ body: { note, dayIndex } });
+    }
+  }
+
+  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) {
+      return [];
+    }
+    const suggestions: SelectSearchOption[] = [];
+    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}`;
+        group.items?.push({ name, value });
+      })
+      suggestions.push(group);
+    })
+    return suggestions;
+  }, [data?.pizzaList]);
+
+  const handlePizzaChange = async (value: SelectedOptionValue | SelectedOptionValue[]) => {
+    if (auth?.login && data?.pizzaList) {
+      if (typeof value !== 'string') {
+        throw new TypeError('Nepodporovaný typ hodnoty: ' + typeof value);
+      }
+      const s = value.split('|');
+      const pizzaIndex = Number.parseInt(s[0]);
+      const pizzaSizeIndex = Number.parseInt(s[1]);
+      await addPizza({ body: { pizzaIndex, pizzaSizeIndex } });
+    }
+  }
+
+  const handlePizzaDelete = async (pizzaOrder: PizzaVariant) => {
+    await removePizza({ body: { pizzaOrder } });
+  }
+
+  const handlePizzaPoznamkaChange = async () => {
+    if (pizzaPoznamkaRef.current?.value && pizzaPoznamkaRef.current.value.length > 70) {
+      alert("Poznámka může mít maximálně 70 znaků");
+      return;
+    }
+    updatePizzaDayNote({ body: { note: pizzaPoznamkaRef.current?.value } });
+  }
+
+  const handleChangeDepartureTime = async (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (foodChoiceList?.length && choiceRef.current?.value) {
+      await changeDepartureTime({ body: { time: event.target.value as DepartureTime, dayIndex } });
+    }
+  }
+
+  // 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 (dayIndex: number) => {
+    setDayIndex(dayIndex);
+    dayIndexRef.current = dayIndex;
+    if (choiceRef?.current?.value) {
+      choiceRef.current.value = "";
+    }
+    if (foodChoiceRef?.current?.value) {
+      foodChoiceRef.current.value = "";
+    }
+    if (departureChoiceRef?.current?.value) {
+      departureChoiceRef.current.value = "";
+    }
+  }
+
+  const renderFoodTable = (location: Restaurant, menu: RestaurantDayMenu) => {
+    let content;
+    if (menu?.closed) {
+      content = <div className="restaurant-closed">Zavřeno</div>
+    } else if (menu?.food?.length && menu.food.length > 0) {
+      const hideSoups = settings?.hideSoups;
+      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>
+                <div className="food-name">
+                  {f.name}
+                  {f.allergens && f.allergens.length > 0 && (
+                    <span className="food-allergens">
+                      {' '}({f.allergens.map((a, idx) => (
+                        <span key={a}>
+                          <span className="allergen-link" title={ALLERGENS[a]} onClick={e => {
+                            e.stopPropagation();
+                            window.open(LINK_ALLERGENS, '_blank');
+                          }}>{a}</span>
+                          {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>
             </tr>
           )}
         </tbody>
       </Table>
-    </div>
+    } else {
+      content = <div className="restaurant-error">Chyba načtení dat</div>
+    }
+    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>
   }
 
-  if (!auth || !auth.login) {
+  if (!auth?.login) {
     return <Login />;
   }
 
-  if (!data || !isConnected || !food) {
+  if (!isConnected) {
-    return <div>Načítám data...</div>
+    return <Loader
+      icon={faSatelliteDish}
+      description={'Zdá se, že máme problémy se spojením se serverem. Pokud problém přetrvává, kontaktujte správce systému.'}
+      animation={'fa-beat-fade'}
+    />
   }
 
-  // const pizzaDayExists = data?.state > 0;
+  if (failure) {
+    return <Loader
+      title="Něco se nám nepovedlo :("
+      icon={faChainBroken}
+      description={'Ale to nevadí. To se stává, takový je život. Kontaktujte správce systému, který zajistí nápravu.'}
+    />
+  }
+
+  if (!data || !food) {
+    return <Loader
+      icon={faSearch}
+      description={'Hledáme, co dobrého je aktuálně v nabídce'}
+      animation={'fa-bounce'}
+    />
+  }
+
+  const noOrders = data?.pizzaDay?.orders?.length === 0;
+  const canChangeChoice = dayIndex == null || data.todayDayIndex == null || dayIndex >= data.todayDayIndex;
+
+  const { path, url, startOffset, endOffset, duration, ...style } = easterEgg || {};
 
   return (
-    <div className='wrapper'>
+    <div className="app-container">
-      <Alert variant={'primary'}>
+      {easterEgg && eggImage && <img ref={eggRef} alt='' src={URL.createObjectURL(eggImage)} style={{ position: 'absolute', ...EASTER_EGG_STYLE, ...style, animationDuration: `${duration ?? EASTER_EGG_DEFAULT_DURATION}s` }} />}
-        Tvé zobrazované jméno je {auth.login}. Změnu můžeš provést v local storage prohlížeče.<br />
+      <Header choices={data?.choices} dayIndex={dayIndex} />
-        <small>Pro gamer move: Změň si své jméno na cizí. Můžeš pak libovolně měnit jejich volbu.</small>
+      <div className='wrapper'>
-      </Alert>
+        {data.todayDayIndex != null && data.todayDayIndex > 4 &&
-      <h1 className='title'>Dnes je {data.date}</h1>
+          <Alert variant="info" className="mb-3">
-      <div className='food-tables'>
+            Zobrazujete uplynulý týden
-        {renderFoodTable('Sladovnická', food.sladovnicka)}
+          </Alert>
-        {renderFoodTable('U Motlíků', food["uMotliku:"])}
+        }
-        {renderFoodTable('TechTower', food.techTower)}
+        <>
-      </div>
+          {dayIndex != null &&
-      <div className='content-wrapper'>
+            <div className='day-navigator'>
-        <div className='content'>
+              <span title='Předchozí den'>
-          <p>Jak to dnes vidíš s obědem?</p>
+                <FontAwesomeIcon icon={faChevronLeft} style={{ cursor: "pointer", visibility: dayIndex > 0 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex - 1)} />
-          <Form.Select onChange={changeChoice}>
+              </span>
-            <option></option>
+              <h1 className={`title ${dayIndex !== data.todayDayIndex ? 'text-muted' : ''}`}>{data.date}</h1>
-            <option value={Locations.SLADOVNICKA}>Sladovnická</option>
+              <span title="Následující den">
-            <option value={Locations.UMOTLIKU}>U Motlíků</option>
+                <FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer", visibility: dayIndex < 4 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex + 1)} />
-            <option value={Locations.TECHTOWER}>TechTower</option>
+              </span>
-            <option value={Locations.SPSE}>SPŠE</option>
+            </div>
-            <option value={Locations.VLASTNI}>Mám vlastní</option>
-            <option value={Locations.OBJEDNAVAM}>Budu objednávat</option>
-            <option value={Locations.NEOBEDVAM}>Nebudu obědvat</option>
-          </Form.Select>
-          <p style={{ fontSize: "12px", marginTop: "5px" }}>
-            Aktuálně je možné vybrat pouze jednu variantu. Vyber prázdnou položku pro odstranění.
-          </p>
-          {Object.keys(data.choices).length > 0 ?
-            <Table striped bordered hover className='results-table mt-5'>
-              <tbody>
-                {Object.keys(data.choices).map((key: string, index: number) =>
-                  <tr key={index}>
-                    <td>{Object.values(Locations)[Number(key)]}</td>
-                    <td>
-                      <ul>
-                        {data.choices[Number(key)].map((p: string, index: number) => <li key={index}>{p}</li>)}
-                      </ul>
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </Table>
-            : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
           }
-        </div>
+          <Row className='food-tables'>
+            {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 && <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 value="">Vyber možnost...</option>
+                  {Object.entries(LunchChoice)
+                    .filter(entry => {
+                      const locationKey = entry[0] as Restaurant;
+                      return !food[locationKey]?.closed;
+                    })
+                    .map(entry => <option key={entry[0]} value={entry[0]}>{getLunchChoiceName(entry[1])}</option>)}
+                </Form.Select>
+                <small>Je možné vybrat jen jednu možnost. Výběr jiné odstraní předchozí.</small>
+                {foodChoiceList && !closed && <>
+                  <p className="mt-3">Na co dobrého?</p>
+                  <Form.Select ref={foodChoiceRef} onChange={doAddFoodChoice}>
+                    <option value="">Vyber jídlo...</option>
+                    {foodChoiceList.map((food, index) => <option key={food.name} value={index}>{food.name}</option>)}
+                  </Form.Select>
+                </>}
+                {foodChoiceList && !closed && <>
+                  <p className="mt-3">V kolik hodin preferuješ odchod?</p>
+                  <Form.Select ref={departureChoiceRef} onChange={handleChangeDepartureTime}>
+                    <option value="">Vyber čas...</option>
+                    {Object.values(DepartureTime)
+                      .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 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 null;
+                      }
+                      const locationLoginList = Object.entries(loginObject);
+                      const locationPickCount = locationLoginList.length
+                      return (
+                        <tr key={key}>
+                          <td>
+                            {locationName}
+                            {(locationPickCount ?? 0) > 1 && <span className="ms-1">({locationPickCount})</span>}
+                          </td>
+                          <td className='p-0'>
+                            <Table className="nested-table">
+                              <tbody>
+                                {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>}
+                                          <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 && 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!);
+                                            }} className='action-icon' icon={faComment} />
+                                          </span>}
+                                          {login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
+                                            <FontAwesomeIcon onClick={() => {
+                                              setNoteModalOpen(true);
+                                            }} className='action-icon' icon={faNoteSticky} />
+                                          </span>}
+                                          {login === auth.login && canChangeChoice && <span title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`}>
+                                            <FontAwesomeIcon onClick={() => {
+                                              doRemoveChoices(key as LunchChoice);
+                                            }} className='action-icon' icon={faTrashCan} />
+                                          </span>}
+                                        </div>
+                                      </div>
+                                      {userChoices && userChoices.length > 0 && food && (
+                                        <div className="food-choices">
+                                          {userChoices.map(foodIndex => {
+                                            const restaurantKey = key as Restaurant;
+                                            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>}
+                                            </div>
+                                          })}
+                                        </div>
+                                      )}
+                                    </td>
+                                  </tr>
+                                }
+                                )}
+                              </tbody>
+                            </Table>
+                          </td>
+                        </tr>)
+                    }
+                    )}
+                  </tbody>
+                </Table>
+                : <div className='no-votes mt-4'>Zatím nikdo nehlasoval...</div>
+              }
+            </div>
+            {dayIndex === data.todayDayIndex && userHasPizzaChoice &&
+              <div className='pizza-section fade-in'>
+                {!data.pizzaDay &&
+                  <>
+                    <h3>Pizza Day</h3>
+                    <p>Pro dnešní den není aktuálně založen Pizza day.</p>
+                    {loadingPizzaDay ?
+                      <span style={{ color: 'var(--luncher-primary)' }}>
+                        <FontAwesomeIcon icon={faGear} className='fa-spin me-2' /> Zjišťujeme dostupné pizzy
+                      </span>
+                      :
+                      <div>
+                        <Button onClick={handleCreatePizzaDay}>Založit Pizza day</Button>
+                        <Button variant="outline-primary" onClick={doJdemeObed}>Jdeme na oběd!</Button>
+                      </div>
+                    }
+                  </>
+                }
+                {data.pizzaDay &&
+                  <>
+                    <h3>Pizza Day</h3>
+                    {
+                      data.pizzaDay.state === PizzaDayState.CREATED &&
+                      <>
+                        <p>
+                          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 &&
+                          <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 &&
+                      <>
+                        <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 &&
+                      <>
+                        <p>Pizzy byly objednány uživatelem <strong>{data.pizzaDay.creator}</strong></p>
+                        {data.pizzaDay.creator === auth.login &&
+                          <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>
+                        }
+                      </>
+                    }
+                    {
+                      data.pizzaDay.state === PizzaDayState.DELIVERED &&
+                      <p>
+                        Pizzy byly doručeny.
+                        {myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''}
+                      </p>
+                    }
+                    {data.pizzaDay.state === PizzaDayState.CREATED &&
+                      <div className="pizza-order-form">
+                        <SelectSearch
+                          search={true}
+                          options={pizzaSuggestions}
+                          placeholder='Vyhledat pizzu...'
+                          onChange={handlePizzaChange}
+                          onBlur={_ => { }}
+                          onFocus={_ => { }}
+                        />
+                        <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
+                            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>
+                    }
+                  </>
+                }
+              </div>
+            }
+          </div>
+          {data.pendingQrs && data.pendingQrs.length > 0 &&
+            <div className='pizza-section fade-in mt-4'>
+              <h3>Nevyřízené platby</h3>
+              <p>Máte neuhrazené platby z předchozích dní.</p>
+              {data.pendingQrs.map(qr => (
+                <div key={qr.date} className='qr-code mb-3'>
+                  <p>
+                    <strong>{formatDateString(qr.date)}</strong> — {qr.creator} ({qr.totalPrice} Kč)
+                    {qr.purpose && <><br /><span className="text-muted">{qr.purpose}</span></>}
+                  </p>
+                  <img src={`/api/qr?login=${auth.login}`} alt='QR kód' />
+                  <div className='mt-2'>
+                    <Button variant="success" onClick={async () => {
+                      await dismissQr({ body: { date: qr.date } });
+                      // Přenačteme data pro aktualizaci
+                      const response = await getData({ query: { dayIndex } });
+                      if (response.data) {
+                        setData(response.data);
+                      }
+                    }}>
+                      Zaplatil jsem
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          }
+        </>
       </div>
-      {/* {!pizzaDayExists &&
+      {/* <FallingLeaves
-        <div>
+        numLeaves={LEAF_PRESETS.NORMAL}
-          <p>Pro dnešní den není aktuálně založen Pizza day.</p>
+        leafVariants={LEAF_COLOR_THEMES.AUTUMN}
-          <Button onClick={async () => {
+      /> */}
-            await createPizzaDay();
+      <Footer />
-          }}>Založit Pizza day</Button>
+      <NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
-        </div>
-      }
-      {pizzaDayExists && <div>
-        <Button className='danger' onClick={async () => {
-          await deletePizzaDay();
-        }}>Smazat Pizza day</Button>
-        <OrderList orders={data.orders} />
-      </div>} */}
-      {/* <Button onClick={async () => {
-          const pizzy = await getPizzy();
-          console.log("Výsledek", pizzy);
-        }}>Získat pizzy</Button> */}
     </div>
   );
 }

client/src/AppRoutes.tsx

@@ -0,0 +1,35 @@
+import { Routes, Route } from "react-router-dom";
+import { ProvideSettings } from "./context/settings";
+// import Snowfall from "react-snowfall";
+import { SnowOverlay } from 'react-snow-overlay';
+import { ToastContainer } from "react-toastify";
+import { SocketContext, socket } from "./context/socket";
+import StatsPage from "./pages/StatsPage";
+import App from "./App";
+
+export const STATS_URL = '/stats';
+
+export default function AppRoutes() {
+    return (
+        <Routes>
+            <Route path={STATS_URL} element={<StatsPage />} />
+            <Route path="/" element={
+                <ProvideSettings>
+                    <SocketContext.Provider value={socket}>
+                        <>
+                            {/* <Snowfall style={{
+                                zIndex: 2,
+                                position: 'fixed',
+                                width: '100vw',
+                                height: '100vh'
+                            }} /> */}
+                            <SnowOverlay color={'rgba(240, 240, 240, 0.9)'} disabledOnSingleCpuDevices={true} />
+                            <App />
+                        </>
+                        <ToastContainer />
+                    </SocketContext.Provider>
+                </ProvideSettings>
+            } />
+        </Routes>
+    );
+}

client/src/FallingLeaves.scss

@@ -0,0 +1,31 @@
+.falling-leaves {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.leaf-scene {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  transform-style: preserve-3d;
+
+  div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    transform-style: preserve-3d;
+    backface-visibility: visible;
+  }
+}

client/src/FallingLeaves.tsx

@@ -0,0 +1,317 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+
+// Různé barevné varianty listů
+const LEAF_VARIANTS = [
+    'leaf.svg',        // Původní tmavě hnědá
+    'leaf-orange.svg', // Oranžová
+    'leaf-yellow.svg', // Žlutá
+    'leaf-red.svg',    // Červená
+    'leaf-brown.svg',  // Světle hnědá
+    'leaf-green.svg',  // Zelená
+] as const;
+
+interface LeafData {
+    el: HTMLDivElement;
+    x: number;
+    y: number;
+    z: number;
+    rotation: {
+        axis: 'X' | 'Y' | 'Z';
+        value: number;
+        speed: number;
+        x: number;
+    };
+    xSpeedVariation: number;
+    ySpeed: number;
+    path: {
+        type: number;
+        start: number;
+    };
+    image: number;
+}
+
+interface WindOptions {
+    magnitude: number;
+    maxSpeed: number;
+    duration: number;
+    start: number;
+    speed: (t: number, y: number) => number;
+}
+
+interface LeafSceneOptions {
+    numLeaves: number;
+    wind: WindOptions;
+}
+
+interface FallingLeavesProps {
+    /** Počet padających listů (výchozí: 20) */
+    numLeaves?: number;
+    /** CSS třída pro kontejner (výchozí: 'falling-leaves') */
+    className?: string;
+    /** Barevné varianty listů k použití (výchozí: všechny) */
+    leafVariants?: readonly string[];
+}
+
+class LeafScene {
+    private viewport: HTMLElement;
+    private world: HTMLDivElement;
+    private leaves: LeafData[] = [];
+    private options: LeafSceneOptions;
+    private width: number;
+    private height: number;
+    private timer: number = 0;
+    private animationId: number | null = null;
+    private leafVariants: readonly string[];
+
+    constructor(el: HTMLElement, numLeaves: number = 20, leafVariants: readonly string[] = LEAF_VARIANTS) {
+        this.viewport = el;
+        this.world = document.createElement('div');
+        this.leafVariants = leafVariants;
+
+        this.options = {
+            numLeaves,
+            wind: {
+                magnitude: 1.2,
+                maxSpeed: 12,
+                duration: 300,
+                start: 0,
+                speed: () => 0
+            },
+        };
+
+        this.width = this.viewport.offsetWidth;
+        this.height = this.viewport.offsetHeight;
+    }
+
+    private resetLeaf = (leaf: LeafData): LeafData => {
+        // place leaf towards the top left
+        leaf.x = this.width * 2 - Math.random() * this.width * 1.75;
+        leaf.y = -10;
+        leaf.z = Math.random() * 200;
+
+        if (leaf.x > this.width) {
+            leaf.x = this.width + 10;
+            leaf.y = Math.random() * this.height / 2;
+        }
+
+        // at the start, the leaf can be anywhere
+        if (this.timer === 0) {
+            leaf.y = Math.random() * this.height;
+        }
+
+        // Choose axis of rotation.
+        // If axis is not X, chose a random static x-rotation for greater variability
+        leaf.rotation.speed = Math.random() * 10;
+        const randomAxis = Math.random();
+
+        if (randomAxis > 0.5) {
+            leaf.rotation.axis = 'X';
+        } else if (randomAxis > 0.25) {
+            leaf.rotation.axis = 'Y';
+            leaf.rotation.x = Math.random() * 180 + 90;
+        } else {
+            leaf.rotation.axis = 'Z';
+            leaf.rotation.x = Math.random() * 360 - 180;
+            // looks weird if the rotation is too fast around this axis
+            leaf.rotation.speed = Math.random() * 3;
+        }
+
+        // random speed
+        leaf.xSpeedVariation = Math.random() * 0.8 - 0.4;
+        leaf.ySpeed = Math.random() + 1.5;
+
+        // randomly select leaf color variant
+        const randomVariantIndex = Math.floor(Math.random() * this.leafVariants.length);
+        leaf.image = randomVariantIndex;
+
+        // apply the background image to the leaf element
+        const leafVariant = this.leafVariants[randomVariantIndex];
+        leaf.el.style.backgroundImage = `url(${leafVariant})`;
+
+        return leaf;
+    };
+
+    private updateLeaf = (leaf: LeafData): void => {
+        const leafWindSpeed = this.options.wind.speed(this.timer - this.options.wind.start, leaf.y);
+
+        const xSpeed = leafWindSpeed + leaf.xSpeedVariation;
+        leaf.x -= xSpeed;
+        leaf.y += leaf.ySpeed;
+        leaf.rotation.value += leaf.rotation.speed;
+
+        const transform = `translateX(${leaf.x}px) translateY(${leaf.y}px) translateZ(${leaf.z}px) rotate${leaf.rotation.axis}(${leaf.rotation.value}deg)${leaf.rotation.axis !== 'X' ? ` rotateX(${leaf.rotation.x}deg)` : ''
+            }`;
+
+        leaf.el.style.transform = transform;
+
+        // reset if out of view
+        if (leaf.x < -10 || leaf.y > this.height + 10) {
+            this.resetLeaf(leaf);
+        }
+    };
+
+    private updateWind = (): void => {
+        // wind follows a sine curve: asin(b*time + c) + a
+        // where a = wind magnitude as a function of leaf position, b = wind.duration, c = offset
+        // wind duration should be related to wind magnitude, e.g. higher windspeed means longer gust duration
+
+        if (this.timer === 0 || this.timer > (this.options.wind.start + this.options.wind.duration)) {
+            this.options.wind.magnitude = Math.random() * this.options.wind.maxSpeed;
+            this.options.wind.duration = this.options.wind.magnitude * 50 + (Math.random() * 20 - 10);
+            this.options.wind.start = this.timer;
+
+            const screenHeight = this.height;
+
+            this.options.wind.speed = function (t: number, y: number) {
+                // should go from full wind speed at the top, to 1/2 speed at the bottom, using leaf Y
+                const a = this.magnitude / 2 * (screenHeight - 2 * y / 3) / screenHeight;
+                return a * Math.sin(2 * Math.PI / this.duration * t + (3 * Math.PI / 2)) + a;
+            };
+        }
+    };
+
+    public init = (): void => {
+        // Clear existing leaves
+        this.leaves = [];
+        this.world.innerHTML = '';
+
+        for (let i = 0; i < this.options.numLeaves; i++) {
+            const leaf: LeafData = {
+                el: document.createElement('div'),
+                x: 0,
+                y: 0,
+                z: 0,
+                rotation: {
+                    axis: 'X',
+                    value: 0,
+                    speed: 0,
+                    x: 0
+                },
+                xSpeedVariation: 0,
+                ySpeed: 0,
+                path: {
+                    type: 1,
+                    start: 0,
+                },
+                image: 1
+            };
+
+            this.resetLeaf(leaf);
+            this.leaves.push(leaf);
+            this.world.appendChild(leaf.el);
+        }
+
+        this.world.className = 'leaf-scene';
+        this.viewport.appendChild(this.world);
+
+        // set perspective
+        this.world.style.perspective = "400px";
+
+        // reset window height/width on resize
+        const handleResize = (): void => {
+            this.width = this.viewport.offsetWidth;
+            this.height = this.viewport.offsetHeight;
+        };
+
+        window.addEventListener('resize', handleResize);
+    };
+
+    public render = (): void => {
+        this.updateWind();
+
+        for (let i = 0; i < this.leaves.length; i++) {
+            this.updateLeaf(this.leaves[i]);
+        }
+
+        this.timer++;
+        this.animationId = requestAnimationFrame(this.render);
+    };
+
+    public destroy = (): void => {
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+
+        if (this.world && this.world.parentNode) {
+            this.world.parentNode.removeChild(this.world);
+        }
+
+        window.removeEventListener('resize', () => {
+            this.width = this.viewport.offsetWidth;
+            this.height = this.viewport.offsetHeight;
+        });
+    };
+}
+
+/**
+ * Komponenta pro zobrazení padajících listů na pozadí stránky
+ * 
+ * @param numLeaves - Počet padajících listů (výchozí: 20)
+ * @param className - CSS třída pro kontejner (výchozí: 'falling-leaves')
+ * @param leafVariants - Barevné varianty listů k použití (výchozí: všechny)
+ * 
+ * @example
+ * // Základní použití s výchozím počtem listů
+ * <FallingLeaves />
+ * 
+ * @example  
+ * // Použití s vlastním počtem listů
+ * <FallingLeaves numLeaves={50} />
+ * 
+ * @example
+ * // Použití s vlastní CSS třídou a pouze podzimními barvami
+ * <FallingLeaves 
+ *   numLeaves={15} 
+ *   className="autumn-leaves"
+ *   leafVariants={['leaf-orange.svg', 'leaf-red.svg', 'leaf-yellow.svg']}
+ * />
+ */
+const FallingLeaves: React.FC<FallingLeavesProps> = ({
+    numLeaves = 20,
+    className = 'falling-leaves',
+    leafVariants = LEAF_VARIANTS
+}) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const leafSceneRef = useRef<LeafScene | null>(null);
+
+    const initializeLeafScene = useCallback(() => {
+        if (containerRef.current) {
+            leafSceneRef.current = new LeafScene(containerRef.current, numLeaves, leafVariants);
+            leafSceneRef.current.init();
+            leafSceneRef.current.render();
+        }
+    }, [numLeaves, leafVariants]);
+
+    useEffect(() => {
+        initializeLeafScene();
+
+        return () => {
+            if (leafSceneRef.current) {
+                leafSceneRef.current.destroy();
+                leafSceneRef.current = null;
+            }
+        };
+    }, [initializeLeafScene]);
+
+    return <div ref={containerRef} className={className} />;
+};
+
+// Přednastavení pro různé účely
+export const LEAF_PRESETS = {
+    LIGHT: 10,      // Lehký podzimní efekt
+    NORMAL: 20,     // Standardní množství  
+    HEAVY: 40,      // Silný podzimní vítr
+    BLIZZARD: 80    // Hustý pád listí
+} as const;
+
+// Přednastavené barevné kombinace
+export const LEAF_COLOR_THEMES = {
+    ALL: LEAF_VARIANTS,                                          // Všechny barvy
+    AUTUMN: ['leaf-orange.svg', 'leaf-red.svg', 'leaf-yellow.svg', 'leaf-brown.svg'] as const, // Podzimní barvy
+    WARM: ['leaf-orange.svg', 'leaf-red.svg', 'leaf-brown.svg'] as const,           // Teplé barvy
+    CLASSIC: ['leaf.svg', 'leaf-brown.svg'] as const,                               // Klasické hnědé odstíny
+    BRIGHT: ['leaf-yellow.svg', 'leaf-orange.svg'] as const,                        // Světlé barvy
+} as const;
+
+export default FallingLeaves;

client/src/Login.css

@@ -1,13 +1,89 @@
-.login {
+.login-page {
-  height: 100%;
+  min-height: 100vh;
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  text-align: 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

@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { Button } from 'react-bootstrap';
 import { useAuth } from './context/auth';
+import { login } from '../../types';
 import './Login.css';
 
 /**
@@ -8,21 +9,62 @@ import './Login.css';
  */
 export default function Login() {
   const auth = useAuth();
-  const [loginName, setLoginName] = useState<string>('');
+  const loginRef = useRef<HTMLInputElement>(null);
 
-  if (!auth || !auth.login) {
+  useEffect(() => {
-    return <div className='login'>
+    if (auth && !auth.login) {
-      <div className='login-inner'>
+      // Vyzkoušíme přihlášení "naprázdno", pokud projde, přihlásili nás trusted headers
-        <p style={{ fontSize: "12px", marginTop: "10px" }}>Zobrazované jméno by mělo být ideálně vaše jméno a příjmení, nebo přezdívka, pod kterou vás kolegové dokážou snadno identifikovat. Jméno lze kdykoliv upravit/smazat v local storage prohlížeče.<br />PS: Enter nefunguje</p>
+      login().then(response => {
-        Zobrazované jméno: <input style={{ marginTop: "10px" }} onChange={(e) => setLoginName(e.target.value)} type='text' />
+        const token = response.data;
-        <Button onClick={() => {
+        if (token) {
-          if (loginName?.length > 0) {
+          auth?.setToken(token as unknown as string); // TODO vyřešit, API definice je špatně, je to skutečně string
-            auth?.setLogin(loginName);
+        }
-          }
+      }).catch(error => {
-        }} style={{ marginTop: "20px" }}>Uložit</Button>
+        // nezajímá nás
+      });
+    }
+  }, [auth]);
+
+  const doLogin = useCallback(async () => {
+    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) {
+        auth?.setToken(response.data as unknown as string); // TODO vyřešit
+      }
+    }
+  }, [auth]);
+
+  if (!auth?.login) {
+    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()
+                  }
+                }}
+              />
+              <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>
-    </div>
+    );
   }
-  // TODO nějaký loader
+  return <div>Neplatný stav</div>
-  return <div>TODO</div>;
 }

client/src/Types.tsx

@@ -1,33 +0,0 @@
-// TODO všechno v tomto souboru jsou duplicity se serverem, ale aktuálně nevím jaký je nejlepší způsob jejich sdílení
-
-/** Jedna konkrétní pizza */
-export interface Pizza {
-    name: string, // název pizzy
-    size: number, // velikost pizzy v cm
-    price: number, // cena pizzy v Kč, včetně krabice
-}
-
-export interface Order {
-    customer: string, // název člověka
-    pizzaList: Pizza[], // seznam objednaných pizz
-    totalPrice: number, // celková cena všech objednaných pizz a krabic
-}
-
-export interface Choices {
-    [location: string]: string[],
-}
-
-export interface ClientData {
-    date: string, // dnešní datum pro zobrazení
-    choices: Choices, // seznam voleb
-}
-
-export enum Locations {
-    SLADOVNICKA = 'Sladovnická',
-    UMOTLIKU = 'U Motlíků',
-    TECHTOWER = 'TechTower',
-    SPSE = 'SPŠE',
-    VLASTNI = 'Mám vlastní',
-    OBJEDNAVAM = 'Objednávám',
-    NEOBEDVAM = 'Neobědvám',
-}

client/src/Utils.tsx

@@ -1,38 +1,112 @@
+import { DepartureTime } from "../../types";
+
+const TOKEN_KEY = "token";
+
 /**
- * Vrátí kořenovou URL serveru na základě aktuálního prostředí (vývojovou či produkční).
+ * Uloží token do local storage prohlížeče.
  * 
- * @returns kořenová URL serveru
+ * @param token token
  */
-export const getBaseUrl = (): string => {
+export const storeToken = (token: string) => {
-    if (process.env.PUBLIC_URL) {
+    localStorage.setItem(TOKEN_KEY, token);
-        return process.env.PUBLIC_URL;
+}
+
+/**
+ * Vrátí token z local storage, pokud tam je.
+ * 
+ * @returns token nebo null
+ */
+export const getToken = (): string | undefined => {
+    return localStorage.getItem(TOKEN_KEY) ?? undefined;
+}
+
+/**
+ * Odstraní token z local storage, pokud tam je.
+ */
+export const deleteToken = () => {
+    localStorage.removeItem(TOKEN_KEY);
+}
+
+/**
+ * Vrátí human-readable reprezentaci předaného data a času pro zobrazení.
+ * Příklady:
+ *  - dnes 10:52
+ *  - 10.05.2023 10:52
+ */
+export function getHumanDateTime(datetime: Date) {
+    let hours = String(datetime.getHours()).padStart(2, '0');
+    let minutes = String(datetime.getMinutes()).padStart(2, "0");
+    if (new Date().toDateString() === datetime.toDateString()) {
+        return `dnes ${hours}:${minutes}`;
+    } else {
+        let day = String(datetime.getDate()).padStart(2, '0');
+        let month = String(datetime.getMonth() + 1).padStart(2, "0");
+        let year = datetime.getFullYear();
+        return `${day}.${month}.${year} ${hours}:${minutes}`;
     }
-    return 'http://localhost:3001';
 }
 
-const LOGIN_KEY = "login";
+/**
+ * Vrátí true, pokud je předaný čas větší než aktuální čas.
+ */
+export function isInTheFuture(time: DepartureTime) {
+    const now = new Date();
+    const currentHours = now.getHours();
+    const currentMinutes = now.getMinutes();
+    const currentDate = now.toDateString();
+    const [hours, minutes] = time.split(':').map(Number);
+
+    if (currentDate === now.toDateString()) {
+        return hours > currentHours || (hours === currentHours && minutes > currentMinutes);
+    }
+    return true;
+}
 
 /**
- * Uloží login do local storage prohlížeče.
+ * Vrátí index dne v týdnu, kde pondělí=0, neděle=6
  * 
- * @param login login
+ * @param date datum
+ * @returns index dne v týdnu
  */
-export const storeLogin = (login: string) => {
+export const getDayOfWeekIndex = (date: Date) => {
-    localStorage.setItem(LOGIN_KEY, login);
+    // https://stackoverflow.com/a/4467559
+    return (((date.getDay() - 1) % 7) + 7) % 7;
 }
 
-/**
+/** Vrátí první pracovní den v týdnu předaného data. */
- * Vrátí login z local storage, pokud tam je.
+export function getFirstWorkDayOfWeek(date: Date) {
- * 
+    const firstDay = new Date(date);
- * @returns login nebo null
+    firstDay.setDate(date.getDate() - getDayOfWeekIndex(date));
- */
+    return firstDay;
-export const getLogin = (): string | null => {
-    return localStorage.getItem(LOGIN_KEY);
 }
 
-/**
+/** Vrátí poslední pracovní den v týdnu předaného data. */
- * Odstraní login z local storage, pokud tam je.
+export function getLastWorkDayOfWeek(date: Date) {
- */
+    const lastDay = new Date(date);
-export const deleteLogin = () => {
+    lastDay.setDate(date.getDate() + (4 - getDayOfWeekIndex(date)));
-    localStorage.removeItem(LOGIN_KEY);
+    return lastDay;
+}
+
+/** Vrátí datum v ISO formátu. */
+export function formatDate(date: Date, format?: string) {
+    let day = String(date.getDate()).padStart(2, '0');
+    let month = String(date.getMonth() + 1).padStart(2, "0");
+    let year = String(date.getFullYear());
+
+    const f = format ?? 'YYYY-MM-DD';
+    return f.replace('DD', day).replace('MM', month).replace('YYYY', year);
+}
+
+/** Vrátí human-readable reprezentaci předaného data pro zobrazení. */
+export function getHumanDate(date: Date) {
+    let currentDay = String(date.getDate()).padStart(2, '0');
+    let currentMonth = String(date.getMonth() + 1).padStart(2, "0");
+    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}`;
 }

client/src/components/Footer.tsx

@@ -0,0 +1,12 @@
+export default function Footer() {
+    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

@@ -0,0 +1,286 @@
+import { useEffect, useState } from "react";
+import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap";
+import { useAuth } from "../context/auth";
+import SettingsModal from "./modals/SettingsModal";
+import { useSettings, ThemePreference } from "../context/settings";
+import FeaturesVotingModal from "./modals/FeaturesVotingModal";
+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, LunchChoices, getChangelogs } from "../../../types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import { formatDateString } from "../Utils";
+
+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 [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 [featureVotes, setFeatureVotes] = useState<FeatureRequest[] | undefined>([]);
+
+    // Zjistíme aktuální efektivní téma (pro zobrazení správné ikony)
+    const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>('light');
+
+    useEffect(() => {
+        const updateEffectiveTheme = () => {
+            if (settings?.themePreference === 'system') {
+                const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                setEffectiveTheme(isDark ? 'dark' : 'light');
+            } else {
+                setEffectiveTheme(settings?.themePreference || 'light');
+            }
+        };
+
+        updateEffectiveTheme();
+
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', updateEffectiveTheme);
+        return () => mediaQuery.removeEventListener('change', updateEffectiveTheme);
+    }, [settings?.themePreference]);
+
+    useEffect(() => {
+        if (auth?.login) {
+            getVotes().then(response => {
+                setFeatureVotes(response.data);
+            })
+        }
+    }, [auth?.login]);
+
+    useEffect(() => {
+        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);
+    }
+
+    const closeRefreshMenuModal = () => {
+        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 = () => {
+        // Přepínáme mezi light a dark (ignorujeme system pro jednoduchost)
+        const newTheme: ThemePreference = effectiveTheme === 'dark' ? 'light' : 'dark';
+        settings?.setThemePreference(newTheme);
+    }
+
+    const isValidInteger = (str: string) => {
+        str = str.trim();
+        if (!str) {
+            return false;
+        }
+        str = str.replace(/^0+/, "") || "0";
+        const n = Math.floor(Number(str));
+        return n !== Infinity && String(n) === str && n >= 0;
+    }
+
+    const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => {
+        if (bankAccountNumber) {
+            try {
+                // Validace kódu 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 new Error("Kód banky musí být 4 číslice")
+                }
+                if (!isValidInteger(split[1])) {
+                    throw new Error("Kód banky není číslo")
+                }
+
+                // Validace čísla a předčíslí
+                let cislo = split[0];
+
+                if (cislo.indexOf('-') > 0) {
+                    cislo = cislo.replace('-', '');
+                }
+                if (!isValidInteger(cislo)) {
+                    throw new Error("Předčíslí nebo číslo účtu neobsahuje pouze číslice")
+                }
+                if (cislo.length < 16) {
+                    cislo = cislo.padStart(16, '0');
+                }
+                let sum = 0;
+                for (let i = 0; i < cislo.length; i++) {
+                    const char = cislo.charAt(i);
+                    const order = (cislo.length - 1) - i;
+                    const weight = (2 ** order) % 11;
+                    sum += Number.parseInt(char) * weight
+                }
+                if (sum % 11 !== 0) {
+                    throw new Error("Číslo účtu je neplatné")
+                }
+            } catch (e: any) {
+                alert(e.message)
+                return
+            }
+        }
+        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={effectiveTheme === 'dark' ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
+                    aria-label="Přepnout barevný motiv"
+                >
+                    <FontAwesomeIcon icon={effectiveTheme === 'dark' ? faSun : faMoon} />
+                </button>
+                <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={() => 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={() => {
+                        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 data dne</NavDropdown.Item>
+                        </>
+                    )}
+                    <NavDropdown.Divider />
+                    <NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item>
+                </NavDropdown>
+            </Nav>
+        </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/Loader.tsx

@@ -0,0 +1,21 @@
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+type Props = {
+  title?: string,
+  icon: IconDefinition,
+  description: string,
+  animation?: string,
+}
+
+function Loader(props: Readonly<Props>) {
+  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/OrderList.tsx

@@ -1,21 +0,0 @@
-import { Table } from "react-bootstrap";
-import { Order } from "../Types";
-
-export default function OrderList({ orders }: { orders: Order[] }) {
-    return <Table striped bordered hover>
-        <thead>
-            <tr>
-                <th>Pizza</th>
-                <th>Jméno</th>
-                <th>Cena (Kč)</th>
-            </tr>
-        </thead>
-        <tbody>
-            {orders.map(order => <tr>
-                <td>{order.pizzaList[0].name}, {order.pizzaList[0].size}</td>
-                <td>{order.customer}</td>
-                <td>{order.totalPrice}</td>
-            </tr>)}
-        </tbody>
-    </Table>
-}

client/src/components/PizzaOrderList.tsx

@@ -0,0 +1,57 @@
+import { Table } from "react-bootstrap";
+import PizzaOrderRow from "./PizzaOrderRow";
+import { PizzaDayState, PizzaOrder, PizzaVariant, updatePizzaFee } from "../../../types";
+
+type Props = {
+    state: PizzaDayState,
+    orders: PizzaOrder[],
+    onDelete: (pizzaOrder: PizzaVariant) => void,
+    creator: string,
+}
+
+export default function PizzaOrderList({ state, orders, onDelete, creator }: Readonly<Props>) {
+    const saveFees = async (customer: string, text?: string, price?: number) => {
+        await updatePizzaFee({ body: { login: customer, text, price } });
+    }
+
+    if (!orders?.length) {
+        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 (
+        <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 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} style={{ borderColor: 'var(--luncher-border-light)' }}>
+                        <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
+                    </tr>)}
+                    <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} Kč`}</td>
+                    </tr>
+                </tbody>
+            </Table>
+        </div>
+    );
+}

client/src/components/PizzaOrderRow.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMoneyBill1, faTrashCan } from "@fortawesome/free-regular-svg-icons";
+import { useAuth } from "../context/auth";
+import PizzaAdditionalFeeModal from "./modals/PizzaAdditionalFeeModal";
+import { PizzaDayState, PizzaOrder, PizzaVariant } from "../../../types";
+
+type Props = {
+    creator: string,
+    order: PizzaOrder,
+    state: PizzaDayState,
+    onDelete: (order: PizzaVariant) => void,
+    onFeeModalSave: (customer: string, name?: string, price?: number) => void,
+}
+
+export default function PizzaOrderRow({ creator, order, state, onDelete, onFeeModalSave }: Readonly<Props>) {
+    const auth = useAuth();
+    const [isFeeModalOpen, setIsFeeModalOpen] = useState<boolean>(false);
+
+    const saveFees = (customer: string, text?: string, price?: number) => {
+        onFeeModalSave(customer, text, price);
+        setIsFeeModalOpen(false);
+    }
+
+    return <>
+        <td>{order.customer}</td>
+        <td>{order.pizzaList!.map<React.ReactNode>(pizzaOrder =>
+            <span key={pizzaOrder.name}>
+                {`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price} Kč)`}
+                {auth?.login === order.customer && state === PizzaDayState.CREATED &&
+                    <span title='Odstranit'>
+                        <FontAwesomeIcon onClick={() => {
+                            onDelete(pizzaOrder);
+                        }} className='action-icon' icon={faTrashCan} />
+                    </span>
+                }
+            </span>)
+            .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>
+            {order.totalPrice} 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() }} />
+    </>
+}

client/src/components/modals/ClearMockDataModal.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { Modal, Button, 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'];
+
+/** Modální dialog pro smazání mock dat (pouze DEV). */
+export default function ClearMockDataModal({ isOpen, onClose, currentDayIndex }: Readonly<Props>) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState(false);
+
+    const handleClear = async () => {
+        setError(null);
+        setLoading(true);
+
+        try {
+            const body: any = {};
+            if (currentDayIndex !== undefined) {
+                body.dayIndex = currentDayIndex 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();
+    };
+
+    const dayName = currentDayIndex !== undefined ? DAY_NAMES[currentDayIndex] : 'aktuální den';
+
+    return (
+        <Modal show={isOpen} onHide={handleClose}>
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Smazat 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>
+                        )}
+
+                        <p>
+                            Opravdu chcete smazat všechny volby stravování pro <strong>{dayName}</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/FeaturesVotingModal.tsx

@@ -0,0 +1,45 @@
+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,140 @@
+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'];
+
+/** Modální dialog pro generování mock dat (pouze DEV). */
+export default function GenerateMockDataModal({ isOpen, onClose, currentDayIndex }: Readonly<Props>) {
+    const [dayIndex, setDayIndex] = useState<number | undefined>(currentDayIndex);
+    const [count, setCount] = useState<string>('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState(false);
+
+    const handleGenerate = async () => {
+        setError(null);
+        setLoading(true);
+
+        try {
+            const body: any = {};
+            if (dayIndex !== undefined) {
+                body.dayIndex = dayIndex 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 {
+                setSuccess(true);
+                setTimeout(() => {
+                    onClose();
+                    setSuccess(false);
+                    setCount('');
+                }, 1500);
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba při generování dat');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        setError(null);
+        setSuccess(false);
+        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">
+                        Mock data byla úspěšně vygenerová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={dayIndex ?? ''}
+                                onChange={e => setDayIndex(e.target.value === '' ? undefined : parseInt(e.target.value, 10))}
+                            >
+                                <option value="">Aktuální den</option>
+                                {DAY_NAMES.map((name, index) => (
+                                    <option key={index} value={index}>{name}</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">
+                                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/NoteModal.tsx

@@ -0,0 +1,36 @@
+import { useRef } from "react";
+import { Modal, Button, Form } from "react-bootstrap"
+
+type Props = {
+    isOpen: boolean,
+    onClose: () => void,
+    onSave: (note?: string) => void,
+}
+
+/** Modální dialog pro úpravu obecné poznámky. */
+export default function NoteModal({ isOpen, onClose, onSave }: Readonly<Props>) {
+    const note = useRef<HTMLInputElement>(null);
+
+    const save = () => {
+        onSave(note?.current?.value);
+    }
+
+    return <Modal show={isOpen} onHide={onClose}>
+        <Modal.Header closeButton>
+            <Modal.Title>Úprava poznámky</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            <Form.Control ref={note} autoFocus={true} type="text" id="note" onKeyDown={event => {
+                if (event.key === 'Enter') {
+                    save();
+                }
+                event.stopPropagation();
+            }} />
+        </Modal.Body>
+        <Modal.Footer>
+            <Button variant="primary" onClick={save}>
+                Uložit
+            </Button>
+        </Modal.Footer>
+    </Modal>
+}

client/src/components/modals/PizzaAdditionalFeeModal.tsx

@@ -0,0 +1,45 @@
+import { useRef } from "react";
+import { Modal, Button } from "react-bootstrap"
+
+type Props = {
+    customerName: string,
+    isOpen: boolean,
+    onClose: () => void,
+    onSave: (customer: string, name?: string, price?: number) => void,
+    initialValues?: { text?: string, price?: string },
+}
+
+/** Modální dialog pro nastavení příplatků za pizzu. */
+export default function PizzaAdditionalFeeModal({ customerName, isOpen, onClose, onSave, initialValues }: Readonly<Props>) {
+    const textRef = useRef<HTMLInputElement>(null);
+    const priceRef = useRef<HTMLInputElement>(null);
+
+    const doSubmit = () => {
+        onSave(customerName, textRef.current?.value, Number.parseInt(priceRef.current?.value ?? "0"));
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            onSave(customerName, textRef.current?.value, Number.parseInt(priceRef.current?.value ?? "0"));
+        }
+    }
+
+    return <Modal show={isOpen} onHide={onClose} size="lg">
+        <Modal.Header closeButton>
+            <Modal.Title>Příplatky za objednávku pro {customerName}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            Popis: <input className="mb-3" ref={textRef} type="text" placeholder="např. kuřecí maso" defaultValue={initialValues?.text} onKeyDown={handleKeyDown} /> <br />
+            Cena v Kč: <input ref={priceRef} type="number" placeholder="0" defaultValue={initialValues?.price} onKeyDown={handleKeyDown} /> <br />
+            <div className="mt-3" style={{ fontSize: 'small' }}>Je možné zadávat i záporné částky (např. v případě slev)</div>
+        </Modal.Body>
+        <Modal.Footer>
+            <Button variant="secondary" onClick={onClose}>
+                Storno
+            </Button>
+            <Button variant="primary" onClick={doSubmit}>
+                Uložit
+            </Button>
+        </Modal.Footer>
+    </Modal>
+}

client/src/components/modals/PizzaCalculatorModal.tsx

@@ -0,0 +1,137 @@
+import { useRef, useState } from "react";
+import { Modal, Button, Row, Col } from "react-bootstrap"
+
+type Props = {
+    isOpen: boolean,
+    onClose: () => void,
+}
+
+type Result = {
+    pizza1?: {
+        diameter?: number,
+        area?: number,
+        pricePerM?: number,
+    },
+    pizza2?: {
+        diameter?: number,
+        area?: number,
+        pricePerM?: number,
+    }
+    choice?: number,
+    ratio?: number,
+    diameterDiff?: number,
+}
+
+/** Modální dialog pro výpočet výhodnosti pizzy. */
+export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props>) {
+    const diameter1Ref = useRef<HTMLInputElement>(null);
+    const price1Ref = useRef<HTMLInputElement>(null);
+    const diameter2Ref = useRef<HTMLInputElement>(null);
+    const price2Ref = useRef<HTMLInputElement>(null);
+
+    const [result, setResult] = useState<Result | null>(null);
+
+    const recalculate = () => {
+        const r: Result = { ...result }
+
+        // 1. pizza
+        if (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 = Number.parseInt(price1Ref.current?.value);
+                    if (price1) {
+                        r.pizza1.pricePerM = price1 / r.pizza1.area;
+                    } else {
+                        r.pizza1.pricePerM = undefined;
+                    }
+                }
+            } else {
+                r.pizza1.area = undefined;
+            }
+        }
+
+        // 2. pizza
+        if (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 = Number.parseInt(price2Ref.current?.value);
+                    if (price2) {
+                        r.pizza2.pricePerM = price2 / r.pizza2.area;
+                    } else {
+                        r.pizza2.pricePerM = undefined;
+                    }
+                }
+            } else {
+                r.pizza2.area = undefined;
+            }
+        }
+
+        // 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 = 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 {
+            r.choice = undefined;
+            r.ratio = undefined;
+            r.diameterDiff = undefined;
+        }
+        setResult(r);
+    }
+
+    const close = () => {
+        setResult(null);
+        onClose();
+    }
+
+    return <Modal show={isOpen} onHide={onClose}>
+        <Modal.Header closeButton>
+            <Modal.Title>Pizza kalkulačka</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            <p>Zadejte parametry pizzy pro jejich srovnání.</p>
+            <Row>
+                <Col size="6">
+                    <input className="mb-3" ref={diameter1Ref} type="number" step="1" min="1" placeholder="Průměr 1. pizzy (cm)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
+                </Col>
+                <Col size="6">
+                    <input className="mb-3" ref={diameter2Ref} type="number" step="1" min="1" placeholder="Průměr 2. pizzy (cm)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
+                </Col>
+            </Row>
+            <Row>
+                <Col size="6">
+                    <input className="mb-3" ref={price1Ref} type="number" min="1" placeholder="Cena 1. pizzy (Kč)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
+                </Col>
+                <Col size="6">
+                    <input className="mb-3" ref={price2Ref} type="number" min="1" placeholder="Cena 2. pizzy (Kč)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
+                </Col>
+            </Row>
+            <Row>
+                <Col size="6">
+                    {result?.pizza1?.area && <p>Plocha: <b>{Math.round(result.pizza1.area * 10) / 10}</b> cm²</p>}
+                    {result?.pizza1?.pricePerM && <p>Cena za m²: <b>{Math.round(result.pizza1.pricePerM * 1000000) / 100}</b> Kč</p>}
+                </Col>
+                <Col size="6">
+                    {result?.pizza2?.area && <p>Plocha: <b>{Math.round(result.pizza2.area * 10) / 10}</b> cm²</p>}
+                    {result?.pizza2?.pricePerM && <p>Cena za m²: <b>{Math.round(result.pizza2.pricePerM * 1000000) / 100}</b> Kč</p>}
+                </Col>
+            </Row>
+            {(result?.choice && result?.ratio && result?.ratio > 0 && result?.diameterDiff != null && <p><b>{result.choice}. pizza</b> je zhruba o <b>{Math.round(result.ratio * 1000) / 10}%</b> výhodnější než {result.choice === 1 ? "2" : "1"}. pizza.</p>) || ''}
+        </Modal.Body>
+        <Modal.Footer>
+            <Button variant="primary" onClick={close}>
+                Zavřít
+            </Button>
+        </Modal.Footer>
+    </Modal>
+}

client/src/components/modals/RefreshMenuModal.tsx

@@ -0,0 +1,97 @@
+import { useRef, useState } from "react";
+import { Modal, Button, Alert, Form } from "react-bootstrap";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+/** Modální dialog pro přenačtení menu z restaurací. */
+export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
+    const refreshPassRef = useRef<HTMLInputElement>(null);
+    const refreshTypeRef = useRef<HTMLSelectElement>(null);
+    const [refreshLoading, setRefreshLoading] = useState(false);
+    const [refreshMessage, setRefreshMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+    const handleRefresh = async () => {
+        const password = refreshPassRef.current?.value;
+        const type = refreshTypeRef.current?.value;
+        if (!password || !type) {
+            setRefreshMessage({ type: 'error', text: 'Zadejte heslo a typ refresh.' });
+            return;
+        }
+
+        setRefreshLoading(true);
+        setRefreshMessage(null);
+
+        try {
+            const res = await fetch(`/api/food/refresh?type=${type}&heslo=${encodeURIComponent(password)}`);
+            const data = await res.json();
+            if (res.ok) {
+                setRefreshMessage({ type: 'success', text: 'Uspesny fetch' });
+                if (refreshPassRef.current) {
+                    refreshPassRef.current.value = '';
+                }
+            } else {
+                setRefreshMessage({ type: 'error', text: data.error || 'Chyba při obnovování jídelníčku.' });
+            }
+        } catch (error) {
+            console.error('Error refreshing menu:', error);
+            setRefreshMessage({ type: 'error', text: 'Chyba při obnovování jídelníčku.' });
+        } finally {
+            setRefreshLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        setRefreshMessage(null);
+        onClose();
+    };
+
+    return (
+        <Modal show={isOpen} onHide={handleClose}>
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Přenačtení menu</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <p>Ruční refresh dat z restaurací.</p>
+
+                {refreshMessage && (
+                    <Alert variant={refreshMessage.type === 'success' ? 'success' : 'danger'}>
+                        {refreshMessage.text}
+                    </Alert>
+                )}
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Heslo</Form.Label>
+                    <Form.Control
+                        ref={refreshPassRef}
+                        type="password"
+                        placeholder="Zadejte heslo"
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                </Form.Group>
+
+                <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>
+                    </Form.Select>
+                </Form.Group>
+
+                <Button
+                    onClick={handleRefresh}
+                    disabled={refreshLoading}
+                >
+                    {refreshLoading ? 'Načítám...' : 'Obnovit menu'}
+                </Button>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={handleClose}>
+                    Zavřít
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/SettingsModal.tsx

@@ -0,0 +1,238 @@
+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, 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);
+
+    const reminderTimeRef = 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;
+
+        // Uložení notifikačních nastavení na server
+        await updateNotificationSettings({
+            body: {
+                ntfyTopic: ntfyTopicRef.current?.value || undefined,
+                discordWebhookUrl: discordWebhookRef.current?.value || undefined,
+                teamsWebhookUrl: teamsWebhookRef.current?.value || undefined,
+                enabledEvents,
+                reminderTime: newReminderTime,
+            }
+        }).catch(() => {});
+
+        // Správa push subscription pro připomínky
+        if (newReminderTime && newReminderTime !== oldReminderTime) {
+            subscribeToPush(newReminderTime);
+        } else if (!newReminderTime && oldReminderTime) {
+            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>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.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.
+                </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 onClick={handleSave}>
+                    Uložit
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/context/auth.tsx

@@ -1,12 +1,12 @@
-import React, { ReactNode, useContext, useState } from "react"
+import React, { ReactNode, useContext, useEffect, useState } from "react"
-import { useEffect } from "react"
+import { useJwt } from "react-jwt";
-
+import { deleteToken, getToken, storeToken } from "../Utils";
-const LOGIN_KEY = 'login';
 
 export type AuthContextProps = {
   login?: string,
-  setLogin: (name: string) => void,
+  trusted?: boolean,
-  clearLogin: () => void,
+  setToken: (name: string) => void,
+  logout: () => void,
 }
 
 type ContextProps = {
@@ -15,7 +15,7 @@ type ContextProps = {
 
 const authContext = React.createContext<AuthContextProps | null>(null);
 
-export function ProvideAuth(props: ContextProps) {
+export function ProvideAuth(props: Readonly<ContextProps>) {
   const auth = useProvideAuth();
   return <authContext.Provider value={auth}>{props.children}</authContext.Provider>
 }
@@ -26,33 +26,43 @@ export const useAuth = () => {
 
 function useProvideAuth(): AuthContextProps {
   const [loginName, setLoginName] = useState<string | undefined>();
+  const [trusted, setTrusted] = useState<boolean | undefined>();
+  const [token, setToken] = useState<string | undefined>(getToken());
+  const { decodedToken } = useJwt(token ?? '');
 
   useEffect(() => {
-    const login = localStorage.getItem(LOGIN_KEY);
+    if (token && token.length > 0) {
-    if (login) {
+      storeToken(token);
-      setLogin(login);
-    }
-  }, [])
-
-  useEffect(() => {
-    if (loginName) {
-      localStorage.setItem(LOGIN_KEY, loginName)
     } else {
-      localStorage.removeItem(LOGIN_KEY);
+      deleteToken();
     }
-  }, [loginName]);
+  }, [token]);
 
-  function setLogin(login: string) {
+  useEffect(() => {
-    setLoginName(login);
+    if (decodedToken) {
-  }
+      setLoginName((decodedToken as any).login);
+      setTrusted((decodedToken as any).trusted);
+    } else {
+      setLoginName(undefined);
+      setTrusted(undefined);
+    }
+  }, [decodedToken]);
 
-  function clearLogin() {
+  function logout() {
+    const trusted = (decodedToken as any).trusted;
+    const logoutUrl = (decodedToken as any).logoutUrl;
+    setToken(undefined);
     setLoginName(undefined);
+    setTrusted(undefined);
+    if (trusted && logoutUrl?.length) {
+      globalThis.location.replace(logoutUrl);
+    }
   }
 
   return {
     login: loginName,
-    setLogin,
+    trusted,
-    clearLogin
+    setToken,
+    logout,
   }
 }

client/src/context/eggs.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { AuthContextProps } from "./auth";
+import { EasterEgg, getEasterEgg } from "../../../types";
+
+export const useEasterEgg = (auth?: AuthContextProps | null): [EasterEgg | undefined, boolean] => {
+  const [result, setResult] = useState<EasterEgg | undefined>();
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    async function fetchEasterEgg() {
+      if (auth?.login) {
+        setLoading(true);
+        const egg = (await getEasterEgg())?.data;
+        setResult(egg);
+        setLoading(false);
+      }
+    }
+    fetchEasterEgg();
+
+  }, [auth?.login]);
+
+  return [result, loading];
+}

client/src/context/settings.tsx

@@ -0,0 +1,142 @@
+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';
+
+export type ThemePreference = 'system' | 'light' | 'dark';
+
+export type SettingsContextProps = {
+  bankAccount?: string,
+  holderName?: string,
+  hideSoups?: boolean,
+  themePreference: ThemePreference,
+  setBankAccountNumber: (accountNumber?: string) => void,
+  setBankAccountHolderName: (holderName?: string) => void,
+  setHideSoupsOption: (hideSoups?: boolean) => void,
+  setThemePreference: (theme: ThemePreference) => void,
+}
+
+type ContextProps = {
+  children: ReactNode
+}
+
+const settingsContext = React.createContext<SettingsContextProps | null>(null);
+
+export function ProvideSettings(props: Readonly<ContextProps>) {
+  const settings = useProvideSettings();
+  return <settingsContext.Provider value={settings}>{props.children}</settingsContext.Provider>
+}
+
+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 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);
+
+  useEffect(() => {
+    const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
+    if (accountNumber) {
+      setBankAccount(accountNumber);
+    }
+    const holderName = localStorage.getItem(BANK_ACCOUNT_HOLDER_KEY);
+    if (holderName) {
+      setHolderName(holderName);
+    }
+    const hideSoups = localStorage.getItem(HIDE_SOUPS_KEY);
+    if (hideSoups !== null) {
+      setHideSoups(hideSoups === 'true');
+    }
+  }, [])
+
+  useEffect(() => {
+    if (bankAccount) {
+      localStorage.setItem(BANK_ACCOUNT_NUMBER_KEY, bankAccount)
+    } else {
+      localStorage.removeItem(BANK_ACCOUNT_NUMBER_KEY);
+    }
+  }, [bankAccount]);
+
+  useEffect(() => {
+    if (holderName) {
+      localStorage.setItem(BANK_ACCOUNT_HOLDER_KEY, holderName);
+    } else {
+      localStorage.removeItem(BANK_ACCOUNT_HOLDER_KEY);
+    }
+  }, [holderName]);
+
+  useEffect(() => {
+    if (hideSoups) {
+      localStorage.setItem(HIDE_SOUPS_KEY, hideSoups ? 'true' : 'false');
+    } else {
+      localStorage.removeItem(HIDE_SOUPS_KEY);
+    }
+  }, [hideSoups]);
+
+  useEffect(() => {
+    localStorage.setItem(THEME_KEY, themePreference);
+  }, [themePreference]);
+
+  useEffect(() => {
+    const applyTheme = (theme: 'light' | 'dark') => {
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    };
+
+    if (themePreference === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      applyTheme(mediaQuery.matches ? 'dark' : 'light');
+
+      const handler = (e: MediaQueryListEvent) => {
+        applyTheme(e.matches ? 'dark' : 'light');
+      };
+      mediaQuery.addEventListener('change', handler);
+      return () => mediaQuery.removeEventListener('change', handler);
+    } else {
+      applyTheme(themePreference);
+    }
+  }, [themePreference]);
+
+  function setBankAccountNumber(bankAccount?: string) {
+    setBankAccount(bankAccount);
+  }
+
+  function setBankAccountHolderName(holderName?: string) {
+    setHolderName(holderName);
+  }
+
+  function setHideSoupsOption(hideSoups?: boolean) {
+    setHideSoups(hideSoups);
+  }
+
+  function setThemePreference(theme: ThemePreference) {
+    setTheme(theme);
+  }
+
+  return {
+    bankAccount,
+    holderName,
+    hideSoups,
+    themePreference,
+    setBankAccountNumber,
+    setBankAccountHolderName,
+    setHideSoupsOption,
+    setThemePreference,
+  }
+}

client/src/context/socket.js

@@ -1,17 +1,20 @@
 import React from 'react';
 import socketio from "socket.io-client";
-import { getBaseUrl } from "../Utils";
 
-// Záměrně omezeno jen na websocket, aby se případně odhalilo chybné nastavení proxy serveru
+let socketUrl;
-export const socket = socketio.connect(getBaseUrl(), { transports: ["websocket"] });
+let socketPath;
+if (process.env.NODE_ENV === 'development') {
+    socketUrl = `http://localhost:3001`;
+    socketPath = undefined;
+} else {
+    socketUrl = `${globalThis.location.host}`;
+    socketPath = `${globalThis.location.pathname}socket.io`;
+}
+
+export const socket = socketio.connect(socketUrl, { path: socketPath, transports: ["websocket"] });
 export const SocketContext = React.createContext();
 
 // 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_CONFIG = 'config';
-// export const EVENT_TOASTER = 'toaster';
-// export const EVENT_VOTING = 'voting';
-// export const EVENT_VOTE_CONFIG = 'voteSettings';
-// export const EVENT_ADMIN = 'admin';

client/src/enums.ts

@@ -0,0 +1,41 @@
+import { LunchChoice, Restaurant } from "../../types";
+
+export function getRestaurantName(restaurant: Restaurant) {
+    switch (restaurant) {
+        case Restaurant.SLADOVNICKA:
+            return "Sladovnická";
+        case Restaurant.TECHTOWER:
+            return "TechTower";
+        case Restaurant.ZASTAVKAUMICHALA:
+            return "Zastávka u Michala";
+        case Restaurant.SENKSERIKOVA:
+            return "Šenk Šeříková";
+        default:
+            return restaurant;
+    }
+}
+
+export function getLunchChoiceName(location: LunchChoice) {
+    switch (location) {
+        case Restaurant.SLADOVNICKA:
+            return "Sladovnická";
+        case Restaurant.TECHTOWER:
+            return "TechTower";
+        case Restaurant.ZASTAVKAUMICHALA:
+            return "Zastávka u Michala";
+        case Restaurant.SENKSERIKOVA:
+            return "Šenk Šeříková";
+        case LunchChoice.SPSE:
+            return "SPŠE";
+        case LunchChoice.PIZZA:
+            return "Pizza day";
+        case LunchChoice.OBJEDNAVAM:
+            return "Budu objednávat";
+        case LunchChoice.NEOBEDVAM:
+            return "Mám vlastní/neobědvám";
+        case LunchChoice.ROZHODUJI:
+            return "Rozhoduji se";
+        default:
+            return location;
+    }
+}

client/src/hooks/usePushReminder.ts

@@ -0,0 +1,108 @@
+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.
+ */
+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 k připomínkám v', reminderTime);
+        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 z připomínek');
+    } 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

@@ -1,19 +1,38 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
-import { SocketContext, socket } from './context/socket';
 import { ProvideAuth } from './context/auth';
+import 'react-toastify/dist/ReactToastify.css';
 import './index.css';
+import AppRoutes from './AppRoutes';
+import { BrowserRouter } from 'react-router';
+import { client } from '../../types/gen/client.gen';
+import { getToken } from './Utils';
+import { toast } from 'react-toastify';
+
+client.setConfig({
+  auth: () => getToken(),
+  baseUrl: '/api', // openapi-ts si to z nějakého důvodu neumí převzít z api.yml
+});
+
+// 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.includes("/login")) {
+    const json = await response.json();
+    toast.error(json.error, { theme: "colored" });
+  }
+  return response;
+});
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <ProvideAuth>
+    <BrowserRouter>
-      <SocketContext.Provider value={socket}>
+      <ProvideAuth>
-        <App />
+        <AppRoutes />
-      </SocketContext.Provider>
+      </ProvideAuth>
-    </ProvideAuth>
+    </BrowserRouter>
   </React.StrictMode>
 );

client/src/pages/StatsPage.scss

@@ -0,0 +1,155 @@
+.stats-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  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;
+    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: 0;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--luncher-text);
+      min-width: 280px;
+      text-align: center;
+    }
+  }
+
+  // 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);
+  }
+
+  .voting-stats-section {
+    margin-top: 48px;
+    width: 100%;
+    max-width: 800px;
+
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--luncher-text);
+      margin-bottom: 16px;
+      text-align: center;
+    }
+  }
+
+  .voting-stats-table {
+    width: 100%;
+    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;
+
+      &:last-child {
+        text-align: center;
+        width: 120px;
+      }
+    }
+
+    td {
+      padding: 12px 20px;
+      border-bottom: 1px solid var(--luncher-border-light);
+      color: var(--luncher-text);
+      font-size: 0.9rem;
+
+      &:last-child {
+        text-align: center;
+        font-weight: 600;
+        color: var(--luncher-primary);
+      }
+    }
+
+    tbody tr {
+      transition: var(--luncher-transition);
+
+      &:hover {
+        background: var(--luncher-bg-hover);
+      }
+
+      &:last-child td {
+        border-bottom: none;
+      }
+    }
+  }
+}

client/src/pages/StatsPage.tsx

@@ -0,0 +1,170 @@
+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, VotingStats, FeatureRequest, getStats, getVotingStats } from "../../../types";
+import Loader from "../components/Loader";
+import { faChevronLeft, faChevronRight, faGear } from "@fortawesome/free-solid-svg-icons";
+import { Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { getLunchChoiceName } from "../enums";
+import './StatsPage.scss';
+
+const CHART_WIDTH = 1400;
+const CHART_HEIGHT = 700;
+const STROKE_WIDTH = 2.5;
+
+const COLORS = [
+  '#ff1493',
+  '#1e90ff',
+  '#c5a700',
+  '#006400',
+  '#b300ff',
+  '#ff4500',
+  '#bc8f8f',
+  '#00ff00',
+  '#7c7c7c',
+]
+
+export default function StatsPage() {
+  const auth = useAuth();
+  const [dateRange, setDateRange] = useState<Date[]>();
+  const [data, setData] = useState<WeeklyStats>();
+  const [votingStats, setVotingStats] = useState<VotingStats>();
+
+  // Prvotní nastavení aktuálního týdne
+  useEffect(() => {
+    const today = new Date();
+    setDateRange([getFirstWorkDayOfWeek(today), getLastWorkDayOfWeek(today)]);
+  }, []);
+
+  // Přenačtení pro zvolený týden
+  useEffect(() => {
+    if (dateRange) {
+      getStats({ query: { startDate: formatDate(dateRange[0]), endDate: formatDate(dateRange[1]) } }).then(response => {
+        setData(response.data);
+      });
+    }
+  }, [dateRange]);
+
+  // Načtení statistik hlasování
+  useEffect(() => {
+    getVotingStats().then(response => {
+      setVotingStats(response.data);
+    });
+  }, []);
+
+  const sortedVotingStats = useMemo(() => {
+    if (!votingStats) return [];
+    return Object.entries(votingStats)
+      .sort((a, b) => (b[1] as number) - (a[1] as number));
+  }, [votingStats]);
+
+  const renderLine = (location: LunchChoice) => {
+    const index = Object.values(LunchChoice).indexOf(location);
+    return <Line key={location} name={getLunchChoiceName(location)} type="monotone" dataKey={data => data.locations[location] ?? 0} stroke={COLORS[index]} strokeWidth={STROKE_WIDTH} />
+  }
+
+  const handlePreviousWeek = () => {
+    if (dateRange) {
+      const previousStartDate = new Date(dateRange[0]);
+      previousStartDate.setDate(previousStartDate.getDate() - 7);
+      const previousEndDate = new Date(previousStartDate);
+      previousEndDate.setDate(previousEndDate.getDate() + 4);
+      setDateRange([previousStartDate, previousEndDate]);
+    }
+  }
+
+  const handleNextWeek = () => {
+    if (dateRange) {
+      const nextStartDate = new Date(dateRange[0]);
+      nextStartDate.setDate(nextStartDate.getDate() + 7);
+      const nextEndDate = new Date(nextStartDate);
+      nextEndDate.setDate(nextEndDate.getDate() + 4);
+      setDateRange([nextStartDate, nextEndDate]);
+    }
+  }
+
+  const isCurrentOrFutureWeek = useMemo(() => {
+    if (!dateRange) return true;
+    const currentWeekEnd = getLastWorkDayOfWeek(new Date());
+    currentWeekEnd.setHours(23, 59, 59, 999);
+    return dateRange[1] >= currentWeekEnd;
+  }, [dateRange]);
+
+  const handleKeyDown = useCallback((e: any) => {
+    if (e.keyCode === 37) {
+      handlePreviousWeek();
+    } else if (e.keyCode === 39 && !isCurrentOrFutureWeek) {
+      handleNextWeek()
+    }
+  }, [dateRange, isCurrentOrFutureWeek]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [handleKeyDown]);
+
+  if (!auth?.login) {
+    return <Login />;
+  }
+
+  if (!dateRange) {
+    return <Loader
+      icon={faGear}
+      description={'Načítám data...'}
+      animation={'fa-bounce'}
+    />
+  }
+
+  return (
+    <>
+      <Header />
+      <div className="stats-page">
+        <h1>Statistiky</h1>
+        <div className="week-navigator">
+          <span title="Předchozí týden">
+            <FontAwesomeIcon icon={faChevronLeft} style={{ cursor: "pointer" }} onClick={handlePreviousWeek} />
+          </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", visibility: isCurrentOrFutureWeek ? "hidden" : "visible" }} onClick={handleNextWeek} />
+          </span>
+        </div>
+        <LineChart width={CHART_WIDTH} height={CHART_HEIGHT} data={data}>
+          {Object.values(LunchChoice).map(location => renderLine(location))}
+          <XAxis dataKey="date" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+        </LineChart>
+        {sortedVotingStats.length > 0 && (
+          <div className="voting-stats-section">
+            <h2>Hlasování o funkcích</h2>
+            <table className="voting-stats-table">
+              <thead>
+                <tr>
+                  <th>Funkce</th>
+                  <th>Počet hlasů</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sortedVotingStats.map(([feature, count]) => (
+                  <tr key={feature}>
+                    <td>{FeatureRequest[feature as keyof typeof FeatureRequest] ?? feature}</td>
+                    <td>{count as number}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+      <Footer />
+    </>
+  );
+}

client/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

client/tsconfig.json

@@ -1,11 +1,13 @@
 {
   "compilerOptions": {
-    "target": "es5",
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
+    "types": [
+      "vite/client"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -13,14 +15,13 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "moduleResolution": "bundler",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "target": "ESNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "allowImportingTsExtensions": true,
     "noEmit": true,
     "jsx": "react-jsx"
-  },
+  }
-  "include": [
-    "client/src"
-  ]
 }

client/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

client/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import viteTsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+    // depending on your application, base can also be "/"
+    base: '',
+    plugins: [react(), viteTsconfigPaths()],
+    server: {
+        open: true,
+        port: 3000,
+        proxy: {
+            '/api': 'http://localhost:3001',
+        }
+    },
+})

compose-traefik.yml

@@ -0,0 +1,51 @@
+version: "3"
+
+networks:
+  proxy:
+    name: traefik_proxy
+
+services:
+  traefik:
+    image: "traefik:latest"
+    container_name: "traefik"
+    command:
+#      - "--log.level=DEBUG"
+      #- "--log.filePath=/log/traefik.log"
+      - "--accesslog=true"
+      #- "--accessLog.filePath=/log/access.log"
+      - "--api.insecure=false" # pokud chci dashboard
+      - "--providers.docker=true"
+      - "--providers.docker.exposedbydefault=false"
+      - "--entrypoints.web.address=:80"
+      #- "--entryPoints.websecure.address=:443"
+    restart: unless-stopped
+    networks:
+      - proxy
+    ports:
+      - "${HTTP_PORT:-80}:80"
+      #- "443:443"
+    volumes:
+      #- "./traefik/log:/log"
+      - "/var/run/docker.sock:/var/run/docker.sock:ro"
+      - "/etc/timezone:/etc/timezone:ro"
+    environment:
+      - "TZ=Europe/Prague"
+  server:
+    build:
+      context: ./server
+    networks:
+      - proxy
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.server.rule=Host(`${DOMAIN:-localhost}`) && (PathPrefix(`/socket.io`) || PathPrefix(`/api`))'
+  client:
+    build:
+      context: ./client
+    ports:
+      - 3000:3000
+    networks:
+      - proxy
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.client.rule=Host(`${DOMAIN:-localhost}`)'
+

compose.yml

@@ -0,0 +1,27 @@
+services:
+  redis:
+    image: redis/redis-stack-server:7.2.0-RC3
+    restart: always
+    ports:
+      - '6379:6379'
+    #expose:
+    #  - 6379
+    environment:
+      - REDIS_ARGS=--save 3600 1 --loglevel warning
+    volumes:
+      - redis:/data
+  luncher:
+    depends_on:
+      - redis
+    restart: always
+    build:
+      context: ./
+    ports:
+      - 3001:3001
+    environment:
+      - TZ=Europe/Prague
+    volumes:
+      - "/etc/timezone:/etc/timezone:ro"
+volumes:
+  redis:
+    driver: local

docker-compose.yml

@@ -1,29 +0,0 @@
-version: '3.8'
-
-services:
-  food_api:
-    build:
-      context: ./food_api
-    # ports:
-    #   - "3002:80"
-  server:
-    depends_on:
-      - food_api
-    build:
-      context: ./server
-    # ports:
-    #   - "3001:3001"
-  client:
-    build:
-      context: ./client
-    # ports:
-    #   - "3000:3000"
-  nginx:
-    depends_on:
-      - server
-      - client
-    restart: always
-    build:
-      context: ./nginx
-    ports:
-      - 3005:80

food_api/Dockerfile

@@ -1,10 +0,0 @@
-FROM python:3.9
-WORKDIR /app
-
-COPY ./requirements.txt /app/requirements.txt
-RUN pip install --no-cache-dir --upgrade -r /app/requirements.txt
-
-COPY ./food_service.py /app
-COPY ./food_api.py /app
-
-CMD ["uvicorn", "food_api:app", "--host", "0.0.0.0", "--port", "3002"]

food_api/README.md

@@ -1,43 +0,0 @@
-# TODO
-Následující informace jsou neaktuální. Už nemáme Flask, místo WSGI jedeme přes ASGI apod. Místo tohoto dokumentu využijte nadřazený README.md.
-
-# POMPSZČPS
-POMPSZČPS, neboli Parser Obědových Menu Plzeňských Stravovacích Zařízení v Části Plzeň-Slovany, je Python aplikace poskytující na jednom místě aktuální obědové menu pro několik stravovacích zařízení v městské části Plzeň 2-Slovany. Aktuálně podporuje následující podniky:
-- [Pivnice Sladovnická](https://sladovnicka.unasplzenchutna.cz)
-- [Restaurace U Motlíků](https://www.umotliku.cz)
-- [Restaurace TechTower](https://www.equifarm.cz/restaurace-techtower)
-
-Pro tyto podniky umožňuje získání aktuálního obědového menu, a to buďto barevným výpisem do konzole (přímým spuštěním `food_service.py`) nebo v podobě [WSGI](https://cs.wikipedia.org/wiki/Web_Server_Gateway_Interface) endpointu (`wsgi.py`), který vrací zmíněná menu jako strukturovaný JSON objekt pro další použití v jiných aplikacích.
-
-## Závislosti
-- [Python 3.x](https://www.python.org)
-
-Pro použití jako konzolová aplikace
-- [beautifulsoup4](https://pypi.org/project/beautifulsoup4)
-
-Pro použití jako API endpoint
-- [beautifulsoup4](https://pypi.org/project/beautifulsoup4)
-- [Flask](https://pypi.org/project/Flask)
-- [gunicorn](https://pypi.org/project/gunicorn)
-
-## Použití
-```bash
-python -m venv venv
-(Unix): source venv/bin/activate
-(Windows): venv\Scripts\activate.bat
-pip install -r requirements.txt
-```
-- Jako konzolová aplikace: `python food_service.py`
-    - Vypíše přehledně pod sebe menu všech aktuálně integrovaných podniků
-- Jako JSON API endpoint
-    - TODO
-
-## TODO
-- Umožnit zadat a zobrazit menu pro jiné dny
-    - umožnit zadání datumem nebo názvem dne v týdnu
-        - validace - žádná sobota, neděle
-        - validace - datum musí být tento týden
-    - minimálně pro Motlíky to znamená úpravu URL a parseru
-- Otestovat rozchození - vytvoření venv, instalace requirements, spuštění jako konzole
-- Umožnit konfiguračně určit pro které podniky se bude menu získávat a zobrazovat (vyberu si jen ty, které mě zajímají)
-- Umožnit konfiguračně nastavit výrazy pro detekci polévky

food_api/food_api.py

@@ -1,20 +0,0 @@
-from food_service import getMenuSladovnicka, getMenuTechTower, getMenuUMotliku
-from fastapi import FastAPI
-from fastapi.middleware.cors import CORSMiddleware
-
-app = FastAPI()
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-@app.get("/")
-def read_root():
-    return {
-        'sladovnicka': getMenuSladovnicka(),
-        'uMotliku:': getMenuUMotliku(),
-        'techTower': getMenuTechTower()
-    }

food_api/food_service.py

@@ -1,252 +0,0 @@
-#!/usr/bin/env python3
-
-import datetime
-from typing import List
-from bs4 import BeautifulSoup
-import tempfile
-import sys
-import os
-import urllib.request
-from datetime import date, timedelta
-
-URL_SLADOVNICKA = "https://sladovnicka.unasplzenchutna.cz/cz/denni-nabidka"
-URL_MOTLICI = "https://www.umotliku.cz"
-URL_TECHTOWER = "https://www.equifarm.cz/restaurace-techtower"
-
-DAY_NAMES = ['pondělí', 'úterý', 'středa',
-             'čtvrtek', 'pátek', 'sobota', 'neděle']
-
-# Fráze v názvech jídel, které naznačují že se jedná o polévku
-SOUP_NAMES = ['polévka', 'česnečka', 'česnekový krém', 'cibulačka', 'vývar']
-
-
-class bcolors:
-    HEADER = '\033[95m'
-    OKBLUE = '\033[94m'
-    OKCYAN = '\033[96m'
-    OKGREEN = '\033[92m'
-    WARNING = '\033[93m'
-    FAIL = '\033[91m'
-    ENDC = '\033[0m'
-    BOLD = '\033[1m'
-    UNDERLINE = '\033[4m'
-
-
-class Food:
-    name = None
-    amount = None
-    price = None
-    is_soup = False
-
-    def __init__(self, name, amount, price, is_soup=False) -> None:
-        self.name = name
-        self.amount = amount
-        self.price = price
-        self.is_soup = is_soup
-
-
-def getOrDownloadHtml(prefix: str, url: str):
-    '''Vrátí HTML pro daný prefix pro aktuální den.
-    Pokud v tempu neexistuje, provede jeho stažení z předané URL a uložení.'''
-    filename = prefix + "_" + date.today().strftime("%Y_%m_%d") + ".html"
-    filepath = os.path.join(tempfile.gettempdir(), filename)
-    if not os.path.isfile(filepath):
-        urllib.request.urlretrieve(url, filepath)
-    file = open(filepath, "r")
-    contents = file.read()
-    file.close()
-    return contents
-
-
-def isNameOfDay(text: str):
-    '''Vrátí True, pokud předaný text představuje název dne v týdnu (např. "pondělí")'''
-    return text.strip().lower() in DAY_NAMES
-
-
-def getDayNameOfDate(date: datetime.datetime):
-    '''Vrátí název dne v týdnu - např. pondělí, úterý, ...'''
-    return DAY_NAMES[date.weekday()]
-
-
-def getStartOfWeekDate():
-    '''Vrátí datetime představující pondělí v aktuálním týdnu.'''
-    today = datetime.datetime.now()
-    return today - timedelta(days=today.weekday())
-
-
-def isTextSoupName(text: str):
-    '''Vrátí True, pokud se předaný text jeví jako název polévky.
-    Používá se tam, kde nemáme lepší způsob detekce (TechTower).'''
-    for name in SOUP_NAMES:
-        if name in text.lower():
-            return True
-    return False
-
-
-def printMenu(name: str, foodList: List[Food]):
-    '''Vytiskne jídelní lístek na obrazovku.'''
-    print(f"{bcolors.OKGREEN}{name}{bcolors.ENDC}\n---------------------------------------------------------------------------------")
-    maxLength = 0
-    for jidlo in foodList:
-        if len(jidlo.name) > maxLength:
-            maxLength = len(jidlo.name)
-    for jidlo in foodList:
-        barva = bcolors.HEADER if jidlo.is_soup else bcolors.WARNING
-        print(f"{barva}{jidlo.amount}\t{jidlo.name.ljust(maxLength)}\t{bcolors.ENDC}{bcolors.OKCYAN}{jidlo.price}{bcolors.ENDC}")
-    print('\n')
-
-
-def getMenuSladovnicka() -> List[Food]:
-    html = getOrDownloadHtml('sladovnicka', URL_SLADOVNICKA)
-    soup = BeautifulSoup(html, "html.parser")
-    div = soup.select_one("div.tab-pane.fade.in.active")
-    datumDen = div.find("h2").text
-    split = datumDen.split(".")
-    denMesic = split[0] + "." + split[1] + "."
-    # nazevDen = split[2]
-    dnesniDatum = date.today().strftime("%-d.%-m.")
-    if denMesic != dnesniDatum:
-        print('Chyba: neočekávané datum na stránce Sladovnické (' +
-              denMesic + '), očekáváno ' + dnesniDatum, file=sys.stderr)
-        sys.exit(1)
-    tables = div.find_all("table", {"class": "simple"})
-    if len(tables) != 2:
-        print('Chyba: neočekávaný počet tabulek na stránce Sladovnické (' +
-              str(len(tables)) + '), očekávány 2', file=sys.stderr)
-        sys.exit(1)
-
-    foodList: List[Food] = []
-
-    polevkaValues = tables[0].find_all("td")
-    amount = polevkaValues[0].text.strip()
-    name = polevkaValues[1].text.strip()
-    price = polevkaValues[2].text.strip()
-    foodList.append(Food(name, amount, price, True))
-
-    foodTables = tables[1].find_all("tr")
-    for food in foodTables:
-        rows = food.find_all("td")
-        if (len(rows) != 3):
-            print("Neočekávaný počet řádek hlavního jídla Sladovnické (" +
-                  str(len(rows)) + ", očekávány 3, přeskakuji...")
-            continue
-        amount = rows[0].text.strip()
-        name = rows[1].text.strip()
-        price = rows[2].text.strip()
-        foodList.append(Food(name, amount, price))
-    return foodList
-
-
-def getMenuUMotliku() -> List[Food]:
-    html = getOrDownloadHtml('u_motliku', URL_MOTLICI)
-    soup = BeautifulSoup(html, "html.parser")
-    table = soup.find("table", {"class": "Xtable-striped"})
-    rows = table.find_all("tr")
-    if len(rows) < 4:
-        print('Chyba: neočekávaný celkový počet řádek tabulky (' +
-              str(len(rows)) + '), očekáváno 4 a více', file=sys.stderr)
-        sys.exit(1)
-
-    foodList: List[Food] = []
-
-    if rows[0].td.text.strip() == 'Polévka':
-        tds = rows[1].find_all("td")
-        if len(tds) != 3:
-            print('Chyba: neočekávaný počet <td> elementů v řádce polévky (' +
-                  str(len(tds)) + '), očekáváno 3', file=sys.stderr)
-            sys.exit(1)
-        amount = tds[0].text.strip()
-        name = tds[1].text.strip()
-        price = tds[2].text.strip().replace(',-', '')
-        foodList.append(Food(name, amount, price, True))
-        rows = rows[2:]
-
-    if rows[0].td.text.strip() == 'Hlavní jídlo':
-        for i in range(1, len(rows)):
-            tds = rows[i].find_all("td")
-            if len(tds) != 3:
-                print("Neočekávaný počet <td> elementů (" + str(len(tds)
-                                                                ) + ") pro hlavní jídlo " + str(i) + ", přeskakuji")
-                continue
-            amount = tds[0].text.strip()
-            name = tds[1].text.strip()
-            price = tds[2].text.strip().replace(',-', '')
-            foodList.append(Food(name, amount, price))
-    return foodList
-
-
-def getMenuTechTower() -> List[Food]:
-    html = getOrDownloadHtml('techtower', URL_TECHTOWER)
-    soup = BeautifulSoup(html, "html.parser")
-    fonts = soup.find_all("font", {"class": ["wsw-41"]})
-    font = None
-    for f in fonts:
-        if (f.text.strip().startswith("Obědy")):
-            font = f
-    if font is None:
-        print('Chyba: nenalezen <font> pro obědy v HTML Techtower.', file=sys.stderr)
-        sys.exit(1)
-    siblings = font.parent.parent.find_next_siblings("p")
-    # dayNumber = date.today().strftime("%w")
-    currentDayName = getDayNameOfDate(datetime.datetime.now())
-    foodList = []
-    doParse = False
-    for i in range(0, len(siblings)):
-        text = siblings[i].text.strip().replace('\t', '').replace('\n', ' ')
-        if isNameOfDay(text):
-            if text == currentDayName:
-                # Našli jsme dnešní den, odtud začínáme parsovat jídla
-                doParse = True
-            elif doParse == True:
-                # Už parsujeme jídla, ale narazili jsme na následující den - končíme
-                break
-        elif doParse:
-            if len(text.strip()) == 0:
-                # Prázdná řádka - končíme (je za pátečním menu TechTower)
-                break
-            price = '? Kč'
-            if text.endswith('Kč'):
-                split = text.rsplit(' ', 2)
-                price = " ".join(split[1:])
-                text = split[0]
-            foodList.append(Food(text, '-', price, isTextSoupName(text)))
-    return foodList
-
-
-if __name__ == "__main__":
-    if len(sys.argv) > 1:
-        input = sys.argv[1].lower()
-        selectedDate = None
-        if input[0].isalpha():
-            matches = []
-            for day in DAY_NAMES:
-                if day.startswith(input):
-                    matches.append(day)
-            if len(matches) == 1:
-                print("Match - den v týdnu - " + matches[0])
-                selectedDate = getStartOfWeekDate(
-                ) + timedelta(DAY_NAMES.index(matches[0]))
-            elif len(matches) == 0:
-                # TODO zkusit v, z (včera, zítra)
-                if 'zítra'.startswith(input):
-                    print("Match - zítra")
-                    selectedDate = datetime.datetime.now() + timedelta(days=1)
-                elif 'včera'.startswith(input):
-                    print("Match - včera")
-                    selectedDate = datetime.datetime.now() + timedelta(days=-1)
-                elif 'dneska'.startswith(input):
-                    print("Match - dnes")
-                    selectedDate = datetime.datetime.now()
-            else:
-                print('Nejasný parametr "' + input +
-                      '" - může znamenat jednu z možností: ' + ', '.join(matches), file=sys.stderr)
-                sys.exit(1)
-        else:
-            # TODO implementovat zadání datem
-            print('Zadání datem není aktuálně implementováno', file=sys.stderr)
-            sys.exit(1)
-        print("Datum: " + selectedDate.strftime('%d.%m.%Y'))
-        print("Den: " + getDayNameOfDate(selectedDate))
-    # printMenu('Sladovnická', getMenuSladovnicka())
-    # printMenu('U Motlíků', getMenuUMotliku())
-    # printMenu('TechTower', getMenuTechTower())

food_api/requirements.txt

@@ -1,3 +0,0 @@
-beautifulsoup4==4.12.2
-fastapi==0.95.2
-uvicorn==0.22.0

food_api/run_dev.sh

@@ -1,8 +0,0 @@
-#!/bin/bash
-dir="$(cd -P -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd -P)"
-cd $dir
-
-python3 -m venv venv
-source venv/bin/activate
-pip3 install -r requirements.txt
-uvicorn food_api:app --port 3002 --reload

nginx/Dockerfile

@@ -1,2 +0,0 @@
-FROM nginx
-COPY ./default.conf /etc/nginx/conf.d/default.conf

nginx/default.conf

@@ -1,47 +0,0 @@
-upstream client {
-  server client:3000;
-}
-
-upstream server {
-  server server:3001;
-}
-
-upstream food_api {
-  server food_api:3002;
-}
-
-server {
-  listen 80;
-
-  location / {
-      proxy_pass http://client;
-  }
-
-  location /static {
-      proxy_pass http://client;
-  }
-
-  location /sockjs-node {
-      proxy_pass http://client;
-      proxy_http_version 1.1;
-      proxy_set_header Upgrade $http_upgrade;
-      proxy_set_header Connection "Upgrade";
-  }
-
-  location /socket.io {
-      proxy_pass http://server;
-      proxy_http_version 1.1;
-      proxy_set_header Upgrade $http_upgrade;
-      proxy_set_header Connection "Upgrade";
-  }
-
-  location /api/food {
-      rewrite /api/food(.*) /$1 break;
-      proxy_pass http://food_api;
-  }
-  
-  location /api {
-      # rewrite /api/(.*) /$1 break;
-      proxy_pass http://server;
-  }
-}

run_dev.sh

@@ -1,4 +1,18 @@
-./food_api/run_dev.sh &
+#!/bin/bash
-cd server && yarn install && yarn start &
+# Spustí server a klienta v samostatných panelech uvnitř stejného tmux okna.
-cd client && yarn install && yarn start &
+# Pokud už daná tmux session existuje, pouze se k ní připojí.
-wait
+
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+
+SESSION="luncher"
+
+if ! tmux has-session -t $SESSION 2>/dev/null; then
+    cd types && yarn openapi-ts && cd ..
+    tmux new-session -d -s $SESSION
+    tmux send-keys -t $SESSION:0 "cd $SCRIPT_DIR" Enter
+    tmux split-window -v
+    tmux send-keys -t $SESSION:0.0 "cd server && export NODE_ENV=development && yarn startReload" Enter
+    tmux send-keys -t $SESSION:0.1 "cd client && yarn start" Enter
+fi
+
+tmux attach-session -t $SESSION

server/.env.production

@@ -1 +0,0 @@
-FOOD_API_URL=http://nginx/api/food

server/.env.template

@@ -0,0 +1,50 @@
+# Secret pro podepisování JWT tokenů. Minimální délka 32 znaků.
+# JWT_SECRET='CHANGE_ME'
+
+# URL pro externí odhlášení, kam bude uživatel při odhlášení přesměrován pokud byl přihlášen pomocí Trusted Headers.
+# LOGOUT_URL='https://auth.example.com/logout'
+
+# Datové úložiště. Musí být 'json' nebo 'redis' (není case sensitive).
+# json - Data jsou ukládána do JSON souboru. Pomalé (práce se souborem), ale vhodné pro vývoj (snadnější prohlížení dat).
+# redis - Data jsou ukládána v Redis serveru. Dle potřeby může být nutné upravit REDIS_ proměnné viz dále.
+# STORAGE='json'
+
+# Hostname/IP Redis serveru, pokud je použit STORAGE='redis'. Výchozí hodnota je 'localhost'.
+# REDIS_HOST='localhost'
+# Port Redis serveru, pokud je použit STORAGE='redis', výchozí hodnota je 6379.
+# REDIS_PORT=6379
+
+# Zapne režim mockování obědových menu.
+# Vhodné pro vývoj o víkendech, svátcích a dalších dnech, pro které podniky nenabízejí obědové menu.
+# V tomto režimu vrací server vždy falešné datum (pracovní den) a pevně nadefinovanou, smyšlenou nabídku jídel.
+# MOCK_DATA=true
+
+# Určuje servery Gotify a příslušné klíče API.
+# Formát je pole objektů, kde každý objekt obsahuje adresu serveru a pole klíčů API.
+# To je užitečné pro odesílání upozornění na různé servery Gotify s různými klíči API.
+# Struktura dat je ve formátu JSON a je uložena jako řetězec.
+# GOTIFY_SERVERS_AND_KEYS='[{"server":"https://notification.server.eu", "api_keys":["key1", "key2"]},{"server":"https://notification.server2.eu", "api_keys":["key3", "key4"]}]'
+
+#NTFY_HOST = "http://192.168.0.113:80"
+#NTFY_USERNAME="username"
+#NTFY_PASSWD="password"
+
+# Zapne přihlašování pomocí důvěryhodných hlaviček (trusted headers). Výchozí hodnota je false.
+# V případě zapnutí je nutno vyplnit také HTTP_REMOTE_TRUSTED_IPS.
+# HTTP_REMOTE_USER_ENABLED=true
+
+# Seznam IP adres nebo rozsahů oddělených čárkou, ze kterých budou akceptovány důvěryhodné hlavičky.
+# HTTP_REMOTE_TRUSTED_IPS=127.0.0.1,192.168.1.0/24
+
+# Název důvěryhodné hlavičky obsahující login uživatele. Výchozí hodnota je 'remote-user'.
+# HTTP_REMOTE_USER_HEADER_NAME=remote-user
+
+# VAPID klíče pro Web Push notifikace (připomínka výběru oběda).
+# Vygenerovat pomocí: npx web-push generate-vapid-keys
+# VAPID_PUBLIC_KEY=
+# VAPID_PRIVATE_KEY=
+# VAPID_SUBJECT=mailto:admin@example.com
+
+# Heslo pro bypass rate limitu na endpointu /api/food/refresh (pro skripty/admin).
+# Bez hesla může refresh volat každý přihlášený uživatel (podléhá rate limitu).
+# REFRESH_BYPASS_PASSWORD=

server/.gitignore

@@ -1,2 +1,7 @@
-/node_modules
+/data
 /dist
+/resources/easterEggs
+/src/gen
+.env.production
+.env.development
+.easter-eggs.json

server/Dockerfile

@@ -1,15 +0,0 @@
-FROM node:alpine
-
-ENV LANG cs_CZ.UTF-8  
-
-WORKDIR /app
-
-COPY package.json /app
-COPY yarn.lock /app
-COPY .env.production /app
-
-RUN yarn install --frozen-lockfile
-
-ADD ./dist /app
-
-CMD [ "node", "/app/index.js" ]

server/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+        ['@babel/preset-env', { targets: { node: 'current' } }],
+        '@babel/preset-typescript',
+    ],
+};

server/build.sh

@@ -1,3 +0,0 @@
-#!/bin/bash
-yarn install --frozen-lockfile && yarn build
-docker build -t luncher-server .

server/changelogs/2025-01-07.json

@@ -0,0 +1,4 @@
+[
+    "Zimní atmosféra",
+    "Skrytí podniku U Motlíků"
+]

server/changelogs/2025-01-15.json

@@ -0,0 +1,3 @@
+[
+    "Přidání restaurace Zastávka u Michala"
+]

server/changelogs/2025-01-29.json

@@ -0,0 +1,3 @@
+[
+    "Přidání restaurace Pivovarský šenk Šeříková"
+]

server/changelogs/2025-02-19.json

@@ -0,0 +1,3 @@
+[
+    "Možnost výběru podniku/jídla kliknutím"
+]

server/changelogs/2025-02-27.json

@@ -0,0 +1,3 @@
+[
+    "Stránka se statistikami nejoblíbenějších voleb"
+]

server/changelogs/2025-03-05.json

@@ -0,0 +1,3 @@
+[
+    "Zobrazení počtu osob u každé volby"
+]

server/changelogs/2025-03-20.json

@@ -0,0 +1,3 @@
+[
+    "Migrace na generované OpenApi"
+]

server/changelogs/2025-03-21.json

@@ -0,0 +1,3 @@
+[
+    "Odebrání zimní atmosféry"
+]

server/changelogs/2025-08-01.json

@@ -0,0 +1,3 @@
+[
+    "Možnost ručního přenačtení menu"
+]

server/changelogs/2025-10-06.json

@@ -0,0 +1,3 @@
+[
+    "Parsování a zobrazení alergenů"
+]

server/changelogs/2025-10-11.json

@@ -0,0 +1,4 @@
+[
+    "Oddělení přenačtení menu do vlastního dialogu",
+    "Podzimní atmosféra"
+]

server/changelogs/2025-11-03.json

@@ -0,0 +1,3 @@
+[
+    "Možnost převzetí poznámky ostatních uživatelů"
+]

server/changelogs/2026-01-09.json

@@ -0,0 +1,3 @@
+[
+    "Zimní atmosféra"
+]

server/changelogs/2026-01-13.json

@@ -0,0 +1,3 @@
+[
+    "Možnost označit se jako objednávající u volby \"Budu objednávat\""
+]